reusing texture with different frames

[drewbit]

Trying to reuse a texture with different frames to populate various sprites. Every sprite gets the same frame however.

In my setup function called from loader:

  cells.forEach((row)=>{
    row.forEach((col)=>{
      // create sprite
      let frame = selectTerrain(col);
      console.log(frame);
      let txt = PIXI.loader.resources[terrainSource].texture;
      txt.frame = frame;
      let cell = new Sprite(txt);

      cell.x = col.x;
      cell.y = col.y;
      addText(cell, col.row, col.col);

      baseCont.addChild(cell);
    });
  });

// randomly select grass or default to water
function selectTerrain(cell){
  var ref = cell.row + ","+cell.col;
  console.log("process cell " + ref);
  
  if(cell.row > 0 && cell.col > 0 && cell.col < (maxCol-1) && cell.row < (maxRow-1)){
    let rand = Math.random();
    if(rand > 0.5){
      return new Rectangle(610, 142, 120, 140);
    }
  } 
    return new Rectangle(853, 0, 120, 140);

}

What is the correct way to get different frames from a cached tilesheet?

[xerver]

Because you are passing the same texture to every sprite you make. It doesn't make a copy, it just holds a reference. So you are changing the frame on the one texture instance in memory. Instead, make a new texture for each of your sprites:

  cells.forEach((row)=>{
    row.forEach((col)=>{
      // create sprite
      let frame = selectTerrain(col);
      console.log(frame);
      // The baseTexture is the image, we want to share that between every sprite.
      const baseTx = PIXI.loader.resources[terrainSource].texture.baseTexture;
      // The texture combines a baseTexture and a frame to create a view into our image.
      // Don't want to share this, so create a new one for each frame.
      const texture = new PIXI.Texture(baseTx, frame);
      let cell = new Sprite(texture);

      cell.x = col.x;
      cell.y = col.y;
      addText(cell, col.row, col.col);

      baseCont.addChild(cell);
    });
  });

 

[drewbit]

Thanks.

Had to use .texture instead of .baseTexture as it throws error: "const.js:342 Uncaught TypeError: Cannot read property 'hasLoaded' of undefined"

I read this somewhere else on this forum but was trying to create the new texture from a TextureCache instance instead of the resource loader which probably was throwing me off.

[ivan.popelyshev]

Try 

PIXI.loader.resources[terrainSource].texture.baseTexture

 

Also. there's a feature of "new PIXI.Texture" , that it  can accept another texture and get its baseTexture automatically, soyou can pass just PIXI.loader.resources[terrainSource].texture 

[xerver]

Yeah sorry that was a typo, should be `.texture.baseTexture`. I've updated the post.