How to create animations with sprite sheet?

[wijesijp]

I wanted to create some animations from sprite sheet.

I have seen several examples like

https://pixijs.io/examples/#/basics/spritesheet.js

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?

[ivan.popelyshev]

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.

[ivan.popelyshev]

About onComplete: https://github.com/pixijs/pixi.js/blob/dev/packages/sprite-animated/src/AnimatedSprite.js#L101 , that appears in documentation about AnimatedSprite too.

Also, what kind of wrapper do you need?

[wijesijp]

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

[ivan.popelyshev]

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, 

https://github.com/gameofbombs/pixi-heaven/blob/master/src/animation/AnimationState.ts

https://github.com/gameofbombs/pixi-heaven#animation

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.

[ivan.popelyshev]

I'm pretty sure that @jonforum posted something like that before

[Exca]

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.

[jonforum]

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) {
        super();
        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);
    this.addChild(ani);
};

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
https://forums.rpgmakerweb.com/index.php?threads/pixi-spritesheets-animations-core-v1-0-texturepacker.83083/
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