Jump to content

an efficient way to have large grid background


Recommended Posts

new to pixi here :)
So I needed simple background grid and i did it just by adding lines next to each other like this:

for (var i=0; i<40; i++) {
   var vertical = new PIXI.Graphics()
   vertical.lineStyle(2, 0x252E35)
   vertical.moveTo(i * 250 - 5000, -5000)
   vertical.lineTo(i * 250 - 5000, 5000)

for (var i=0; i<40; i++) {
   var horizontal = new PIXI.Graphics()
   horizontal.lineStyle(2, 0x252E35)
   horizontal.moveTo(-5000, i * 250 - 5000)
   horizontal.lineTo(5000, i * 250 - 5000)

But it effects on performance pretty a lot for just a grid. so I was wondering if there is a better way, an efficient way to do this?

Link to comment
Share on other sites

Performance depends on number of texture switches (0 in this case), number of shader switches (1 or none), number of drawcalls (80) , number of buffer switches (80), number of pixels drawn (80 * screen side?)

The idea is to balance all those things. In your case if you put everything to same graphics , it'll only take 1 drawcall of 1 buffer. I cant explain how that affects application, except if you have too many calls of one of operations i mentioned it'll be a problem.

Link to comment
Share on other sites

You can draw 1 tileable graphics object to a RenderTexture and use that in a TileSprite.

Which will use TilingSprite shader which might be slow for fullscreen cases on old graphic card. Of course, in case of pow2 texture with wrapMode=repeat it will omit that"%" operator and everything will be fine.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...