Pixi.js: [Question] Drawing multiple instances of the same sprite

[ghost]

I have a sprite object and would like to draw multiple instances of it (but the number can change every few frames). I use a function like this to create sprites but I don't understand why this is necessary- in WebGL, once one has a VBO, one can draw as many instances of it as one likes.

I could keep a pool of these objects and only use as many as I need, rendering the rest invisible but wouldn't this be a bit wasteful? As far as I know, there's no way in Pixi to draw several instances from a single Sprite object and this has always confused me a bit.

function createSingleSprite(tx, ty, sx, sy) {
  let texture = Display.getTexture().clone();
   texture.frame = new PIXI.Rectangle(
      tx, ty, 16, 16
   );

   let sprite = new PIXI.Sprite(texture);
   sprite.position.x = sx;
   sprite.position.y = sy;
   sprite.anchor.set(0.5,0.5);

   return sprite;
};

My actual scenario is that I have a 2D map with some blocking tiles and am using A* to calculate a path from the player to where the cursor is, drawing a marker on each tile that will be walked on should this path be taken. The paths are of variable length, so a variable number of markers is to be drawn with each cursor position- this can change very frequently.

__What would be a good way of going about this?__

[themoonrat]

@BamItsPixel A Sprite object is very very lightweight, so there is no problem in having thousands of them in WebGL. In the background, if you have sprites being rendered from the same base texture over and over again, then it will batch them automatically and that's one of the reasons WebGL's performance can be so much better than on the Canvas.

So, don't worry about lots of Sprites. Create a big pool of them up front, and re-use them by changing their texture property as needed. And maybe TilingSprite may be of interest to your use case?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.