javascript - PIXI.js - scrolling background grid - Stack Overflow

admin管理员组

文章数量:1023101

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.

• javascript
• html
• graphics
• pixi.js

Share Improve this question Follow edited Oct 2, 2019 at 15:25 user128511 asked Apr 18, 2018 at 17:47 eezeeeze 64811 gold badge77 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You 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

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.

• javascript
• html
• graphics
• pixi.js

Share Improve this question Follow edited Oct 2, 2019 at 15:25 user128511 asked Apr 18, 2018 at 17:47 eezeeeze 64811 gold badge77 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You 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

本文标签： javascriptPIXIjsscrolling background gridStack Overflow