Jump to content

reusing texture with different frames


drewbit
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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);
    });
  });

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...