I have one png contains a couple of things, such as a dog, a cat, a mouse, a dophine.
I use pixi js to render this png file as one sprite, pixi render all these animals in a row as drawed in png.
Is there any way to cut them to different sprites after loading this single one png to pixi js? So that I can manupulate them separately
Thank you!
Answer my own question as a supplement of details to @domis86's answer.
Exactly as the his referred link stated:
Import the png file that contains multiple graphics of interest, define a rectangle object that used to capture the individual sprite. Load it. Do it repeatedly to capture all the sprite.
const texture = TextureCache["images/tileset.png"]; // this image has a couple of animals
const catRectangle = new Rectangle(0, 0, 64, 64);
const dogRectangle = new Rectangle(64, 0, 64, 64);
const lionRectangle = new Rectangle(128, 0, 64, 64);
texture.frame = catRectangle
const cat = new Sprite(texture);
texture.frame = dogtRectangle
const dog = new Sprite(texture);
texture.frame = LionRectangle
const Lion = new Sprite(texture);