Jump to content

Animations on separate spritesheets


Gugis
 Share

Recommended Posts

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 :)

Link to comment
Share on other sites

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);
    }

}

 

Link to comment
Share on other sites

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');
    }

 

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