Spritesheet

[GiL_TheB]

Hello, I'm new to pixi.js, I allready made great things, but I don't seem to be able to make an array of sprites from a spritesheet, so I can stamp them on a renderTexture later.

I did try different things but the result is wrong each time.

   j=0;
while(j<sheetRow){
  i=0;
while(i<sheetCol){

//only shows the last frame when display
  let rect = new PIXI.Rectangle(i*spritetRes,j*spritetRes, spritetRes, spritetRes);
  texture.frame = rect;
  let g = new PIXI.Sprite(texture);

//same as above
  let rect = new PIXI.Rectangle(i*spritetRes,j*spritetRes, spritetRes, spritetRes);
  texture.frame = rect;
  let g = new PIXI.Sprite(texture,rect);

//shows the whole texture as sprite
  let rect = new PIXI.Rectangle(i*spritetRes,j*spritetRes, spritetRes, spritetRes);
  let g = new PIXI.Sprite(texture,rect);

/* is out of order when display
0,0 1,0 2,0 3,0     0,0 3,0 2,0 1,0
0,1 1,1 2,1 3,1  => 0,1 3,2 2,2 1,2
0,2 1,2 2,2 3,2     0,2 3,1 2,1 1,1
*/
  let g=new PIXI.extras.TilingSprite(texture,spritetRes,spritetRes);
  g.tilePosition.set(i*spritetRes,j*spritetRes);

  graphics.push(g);
  i++;}
  j++;}

Thanks for PIXI I have great fun, even if things are very puzzling. Why not set a texture on a quad and set its UV in this case?

[GiL_TheB]

So ... I made it work somehow, still I'd like to know is there is a better method, and I dont understand why the TilingSprite doesn't work.

I setup a Sprite just before rendering it. It is kind of weird you can't define a sprite beforehand, I must miss something obvious.

  let g = new PIXI.Sprite(texture);

//display the spriteSheet as sprites
  i=0;
while(i<sheetCol*sheetRow){
  texture.frame =  new PIXI.Rectangle((i%sheetCol)*spritetRes,((i/sheetCol)|0)*spritetRes, spritetRes, spritetRes);
  g.position=new PIXI.Point((i%sheetCol)*spritetRes,((i/sheetCol)|0)*spritetRes);
  renderer.render(g,renderTexture);
  i++;}

//reset the texture.frame
 texture.frame =  new PIXI.Rectangle(0,0,sheetCol*spritetRes,sheetRow*spritetRes);

.

[ivan.popelyshev]

you need different textures, sprite does not store frame. When you change frame in texture, it changes in all sprites that have it.

var tex = new PIXI.Texture(oldTexture, rect);

var spr = new PIXI.Sprite(tex);

 

[GiL_TheB]

Yes I guessed frame was not stored, even if internally sprites seems to have everything they need to do it?

The texture-to-texture you show is neet, maybe I will use that.

[ivan.popelyshev]

Basically, texture is "baseTexture+frame", so when you create new one, it takes baseTexture from the other and uses your frame. Sprite has only one reference to texture, it doesn't know about frame.

[GiL_TheB]

Yes I see the new sprite with the texture(oldTexture,rect) has the same baseTexture but its _texture.orig and its _texture._uvs have been updated, it is interesting.

[ivan.popelyshev]

I will show you the world!

https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Texture.js

https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js

It is great secret that pixi has sources and documentation is made from comments to those sources. You are know one of us.

[GiL_TheB]

This works too, it is a bit counter-intuitive (see the little minus sign that change all).

  i=0;
while(i<sheetCol*sheetRow){
  let g=new PIXI.extras.TilingSprite(texture,spritetRes,spritetRes);
  g.tilePosition.set(
    -(i%sheetCol)*spritetRes,
    -((i/sheetCol)|0)*spritetRes
    );
  graphics.push(g);
  i++;}

 

[ivan.popelyshev]

1 hour ago, GiL_TheB said:

This works too, it is a bit counter-intuitive (see the little minus sign that change all).

I think you are over-complicating things. https://github.com/kittykatattack/learningPixi also has a part about spritesheets.

Its not counter-intuitive: "tilePosition" is the position of (0,0) point of texture inside the TilingSprite, you are moving the background repeating image. TilingSprite was made for different purpose. It is also less performant: every instance is eats a drawcall, while sprites are batched up to several thousands per drawcall.