MovieClip Class ( need help )

[Kal-art]

Hi  

i am a new user of Pixi js and i need to add an animation  from spite sheet ,

+ i didn't found any tutorial for that 

so if some one can explain how to work with ( Movieclip ) for a noob  

 

 

[d13]

Is your sprite sheet just a single image with a bunch of smaller sub-images on it?

Or is your sprite sheet a "texture atlas" (A JSON file that references the positions of sub images inside a single sprite sheet image)?

[Kal-art]

a single image 

[d13]

Here's the long way to do it:

//Get a reference to the base texture (your single spritesheet image)var base = PIXI.TextureCache["images/spritesheet.png"];//The first sub-magevar texture0 = new PIXI.Texture(base);//Create a PIXI.Rectangle that defines the x, y, width and height//of the sub-image of the first animation frame on the spritesheettexture0.setFrame(new PIXI.Rectangle(0, 0, 32, 32));//Do the same for the other frames: //The second sub-imagevar texture1 = new PIXI.Texture(base);texture1.setFrame(new PIXI.Rectangle(48, 0, 32, 32));//The third sub-imagevar texture2 = new PIXI.Texture(base);texture2.setFrame(new PIXI.Rectangle(96, 0, 32, 32));//Make an array of these sub-imagesvar textures = [texture0, texture1, texture2];//Create the `MovieClip` sprite using the `textures` arrayvar sprite = new PIXI.MovieClip(textures);//Set the sprite's position and add it to the stagesprite.position.set(32, 32);stage.addChild(sprite);

Of course, you should make loop to help you do this if your sub-images follow a regular order on the spriteheet.

 

But I actually suggest that instead you make your spritesheet using the free version of Texture Packer.

It will save you a lot of work:

 

https://www.codeandweb.com/texturepacker

 

Export the spritesheet as "JSON Hash" when you're done and make sure that the JSON file and PNG image that Texture Packer produces are in the same folder.

Then import the JSON file into Pixi:

var assetsToLoad = ["images/spritesheet.json"];var loader = new PIXI.AssetLoader(assetsToLoad);loader.onComplete = makeSprites.bind(this);loader.load();function makeSprites() {  //..make your sprites when the JSON file has loaded  }

You can then use `PIXI.MovieClip.fromFrames` to create your MovieClip from the spritesheet's frames:

function makeSprites() {  var frames = ["subimage1.png", "subimage2.png", "subimage3.png"];  var sprite = PIXI.MovieClip.fromFrames(frames);}

That's much easier. The size and position of each sub-image is stored in the JSON file, you don't have to enter those manually.

 

If you have a animation frames in sequence on a spritesheet (like an explosion sequence) that you want to use a as a MovieClip, let me know - I've got a custom function that automates that. 

[Kal-art]

thank you so much

+ my idea is to take frames from a 3d animation and use it as  2d textures 

so i shall use the first way