In the game agar.io, there is a grid background, and It scrolls with the player as they move. In PIXI.js, how would I go about recreating this? Preferably, in an efficient way that does not waste resources by rendering off-screen grid.
In the game agar.io, there is a grid background, and It scrolls with the player as they move. In PIXI.js, how would I go about recreating this? Preferably, in an efficient way that does not waste resources by rendering off-screen grid.
Share Improve this question edited Oct 2, 2019 at 15:25 user128511 asked Apr 18, 2018 at 17:47 eezeeeze 6481 gold badge7 silver badges23 bronze badges2 Answers
Reset to default 3You should use the PIXI.extras.TilingSprite class, created for the purpose of rendering repeatable patterns, tiles, etc. The class uses only one quad (two triangles) for the whole pattern, repeating is achieved in the fragment shader.
Here is a working example: http://pixijs.io/examples/#/basics/tiling-sprite.js
Here is documentation: http://pixijs.download/release/docs/PIXI.extras.TilingSprite.html
TilingSprite documentation / example has changed:
Example: https://pixijs.io/examples/#/sprite/tiling-sprite.js
Documentation: http://pixijs.download/release/docs/PIXI.TilingSprite.html