How to split images to difererent sprites from one png file in pixi.js

user_7789294 0
Viewed 322

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!

pixi.js html5-canvas javascript
1 Answers

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);
user_77892940
Related