Jump to content

How to create animations with sprite sheet?


Recommended Posts

I wanted to create some animations from sprite sheet.

I have seen several examples like


The functionality seems to be very basic.

Is there a way of loading a sprite sheet directly?

Is there a way to call a function when the animation is completed in "PIXI.extras.AnimatedSprite"

Is there any examples or wrapper class anyone created that I can use as the starting point?

Link to comment
Share on other sites

Whole lot questions like that in pixijs github issues and this forum.

new PIXI.Texture(baseTexture, new PIXI.Rectangle(100, 100, 32, 32))

here it is: texture that is part of an atlas.

The best case is Spritesheet source code: https://github.com/pixijs/pixi.js/blob/dev/packages/spritesheet/src/Spritesheet.js

And I think it was mentioned in https://github.com/kittykatattack/learningPixi , which is like our main tutorial and referenced in many places.

Link to comment
Share on other sites

Let's say I have information like this:

	animations: [{
			name: 'walk',
			prefix: 'player_walking_',
			start_frame: 1,
			end_frame: 12,
			loop: true
		}, {
			name: 'jump',
			prefix: 'player_jump_',
			start_frame: 1,
			end_frame: 5,
			loop: false

I supply this to a class and it will build up these animations

Then I can just call the animation name and it will get played.

That is the kinda idea i am having now..

Link to comment
Share on other sites

Yep, people have things like that and it depends on game. Like, people sometimes share their animation code, and I remember some threads in this subforum, but I cant point to the best implementation or even search for them. Its something everyone does for themselves.

I like @finscnabout animation component for sprite, 



You can do something like that: object that takes care of sprite textures and is added to ticker or your own animation loop (dont forget to remove it later), and is stored in `sprite.animState`. It even works with meshes!

Of course that implementation is just a copy of AnimatedSprite internals, but you can adjust it to your needs, add current playing animation sequence e.t.c. , the only limit is your javascript knowledge.

Link to comment
Share on other sites

The tutorial on texturepacker page is also very good on how spritesheet animations work https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs?utm_source=forum&utm_medium=html5gamedevs&utm_campaign=pixijs-tutorial-2018-10-30

I use a setup myself where I analyze the json generated by texturepacker and create animations based on simple ruleset where directories tell the animation name / component name / object name in reverse order. So I could have a sheet where I have only one single animation and the detection determines that there's no rules, use all frames in single sprite. If there's animations, then a custom animedsprite is used that supports multiple animations. Component layer is for when I do something that's composed of multiple smaller animations (for examples eyes on separate layer to keep filesize down). And then object layer is just there if single sheet has multiple completely separate animations.

After that I basically can preview all animations in texturepacker and not worry about doing any separate configuration files as the directory already defines it.

Link to comment
Share on other sites

The way i love and easy for me it to extend a PIXI.Container class  or the PIXI.extras.AnimatedSprite and use it for control all what your need.
It will allow you do a ```var myAnimation = new Container_Animation(data);```

data will be your json data that your setup in the Container_Animation. and the AnimatedSprite  as child.

class Container_Animation extends PIXI.Container {
    constructor(data) {
        this._data = '...stuff for manage your animations';
    // getters and setter for easy manage your animation
    get animationSpeed() { return this.d.animationSpeed };
    set animationSpeed(value) { this.d.animationSpeed = value };
    get loop() { return this.d.loop };
    set loop(value) { this.d.loop = value };
    get playing() { return this.d.playing };
    set playing(value) { this.d.playing = value };
    get currentFrame() { return this.d? this.d.currentFrame : 0; };
    set currentFrame(value) { this.d.currentFrame = value };
    get totalFrames() { return this.d.totalFrames };
    set totalFrames(value) { return this.d.totalFrames };

// create,build basic textures need for ContainerAnimations
createBases () {
    const td = 'textureName'
    const ani = new PIXI.extras.AnimatedSprite(td);

play (name) {
    // setup your animation for play name

It a copy past and i reduce code because it very customize for my projet,
But in the logic, this will allow your do what you want for your game, PIXI.extras.AnimatedSprite are very basic for allow everybody to hack it.

To go in more deep, i made a plugin for rmmv thats use PIXI.extras.AnimatedSprite and texturePacker
i also add video tutorial for texturePackers and how it work.
but it very old code and work only for rmmv.
But you can take a look it the same logic here and i have a big tutorial at the end.
We control all from custom mehtod.

Hope this can help. !

Also read all discussion in the forum about this.
http://www.html5gamedevs.com/search/?&q=AnimatedSprite &type=forums_topic&search_and_or=or&search_in=titles&sortby=relevancy

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.

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.


  • Recently Browsing   0 members

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