Jump to content

MovieClip Class ( need help )


Kal-art
 Share

Recommended Posts

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. 

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...