Animations on separate spritesheets

[Gugis]

I have character animations in different spritesheets and I need to switch them smoothly. For example there is 3 animations: idle, idle_to_walking and walking (each on separate spritesheet). I add sprites for every animation and kill all sprites except one, that contains my current animation. So i start idle animation first and when it ends i kill sprite and revive idle_to_walking animation and etc. In some cases when switching sprites, animation freezes for like 0.5 seconds. I wonder, what's the best solution for this issue? If I'would pack all animations to one spritesheet, image would be like 20000 x 20000 so this option should be avoided.

Thanks

[nazimboudeffa]

i  wonder to read some of your code to understand if there is a global solution as phaser is a global solution

[Gugis]

Here's my class for player. Look at walkToTile and play functions

 

class Actor {

    constructor(game, data) {
        if(!data) {
            data = {};
        }

        if(!data.momdel) {
            data.model = 'male';
        }

        if(!data.direction) {
            data.direction = 'sw';
        }

        data.reference = _SPRITES[data.model];

        this.game = game;
        this.data = data;
        this.currentAnimation = 'idle';
        this.build();
    }

    build() {
        this.animations = {};
        this.sprites = {};
        this.group = this.game.add.group();

        let directions = ['sw', 's', 'se', 'e', 'ne', 'n', 'nw', 'w'];

        for(let n in this.data.reference.animations) {
            let animationReference = this.data.reference.animations[n];
            let sprite = this.game.add.sprite(0, 0, animationReference.spritesheet);
            sprite.anchor.setTo(0.5);
            this.group.add(sprite);

            for(let m in animationReference.frames) {
                let animationName = n + '_' + m;
                let frames = this.generateFrames(animationReference.frames[m]);

                let animation = sprite.animations.add(animationName, frames);
                this.animations[animationName] = animation;
            }

            this.sprites[n] = sprite;

            if(n != this.currentAnimation) {
                sprite.kill();
            }
        }
    }

    generateFrames(range, directionIndex) {
        if(typeof range[1] === 'undefined') {
            return range;
        }

        let frames = [];

        if(range[0] < range[1]) {
            for(let i = range[0]; i <= range[1]; i++) {
                frames.push(i);
            }
        }
        else if(range[0] > range[1]) {
            for(let i = range[0]; i >= range[1]; i--) {
                frames.push(i);
            }
        }

        return frames;
    }

    play(animation, loop) {
        if(typeof loop === 'undefined') {
            loop = false;
        }

        let animationName = animation + '_' + this.data.direction;
        let fps = this.data.reference.animations[animation].fps;

        this.sprites[this.currentAnimation].animations.stop();
        this.sprites[this.currentAnimation].kill();

        this.sprites[animation].revive();

        this.sprites[animation].animations.play(animationName, fps, loop);

        this.currentAnimation = animation;
    }

    setTile(x, y) {
        if(!this.battlefield) {
            return;
        }

        let tile = this.battlefield.getTile(x, y);

        this.group.x = tile.x;
        this.group.y = tile.y;
    }

    walkToTile(x, y) {
        if(!this.battlefield) {
            return;
        }

        let targetTile = this.battlefield.getTile(x, y);

        if(!targetTile) {
            return;
        }

        let tween = this.game.add.tween(this.group).to( { y: targetTile.y, x: targetTile.x }, 1200);

        this.animations['idle_to_walk'+'_'+this.data.direction].onComplete.add(() => {
            this.play('walk');
            tween.start();
        });

        this.animations['walk'+'_'+this.data.direction].onComplete.add(() => {
            this.play('walk_to_idle');
        });

        this.play('idle_to_walk');
    }

    setDirection(direction) {
        this.data.direction = direction;

        this.play(this.currentAnimation);
    }

}

 

[nazimboudeffa]

you use the keword class ?

you should take a look at the last dev in fun fun function

i have taken a look last week and it's very interesting, like suppressing commas and use let instead of var

i am reading your code

[nazimboudeffa]

let's take walkToTile in review first and let's take http://phaser.io/examples/v2/animation/load-texture

   walkToTile(x, y) {
        if(!this.battlefield) {
            return;
        }

        let targetTile = this.battlefield.getTile(x, y);

        if(!targetTile) {
            return;
        }

        let tween = this.game.add.tween(this.group).to( { y: targetTile.y, x: targetTile.x }, 1200);

        this.animations['idle_to_walk'+'_'+this.data.direction].onComplete.add(() => {
            this.play('walk');
            tween.start();
        });

        this.animations['walk'+'_'+this.data.direction].onComplete.add(() => {
            this.play('walk_to_idle');
        });

        this.play('idle_to_walk');
    }