Animation on mobile (problem)

[Luis Felipe]

Hello! I'd appreciate any input on this issue I'm having.

 

So I'm making another version of one of my html5 mini games and porting it to mobile.

 

Everything is running ok when I play my game on desktop, but on mobile the hero only plays de "idle" animation. I'm also flipping the scale and that works fine. 

 

Try it out here: luisfelipeart.com/html5games/mm/

 

On desktop you can use the cursor keys and on mobile tap either the left or right side to move.

 

Here is the code for desktop movement:

// DESKTOP MOVEMENT		if (hero.alive == true && cursors.left.isDown) {			hero.body.velocity.x = -600;			hero.animations.play('run');			hero.scale.x = -1;		} else if ( hero.alive == true && cursors.right.isDown) {			hero.body.velocity.x = 600;			hero.animations.play('run');			hero.scale.x = 1;		} else {			hero.body.velocity.x = 0;			hero.animations.play('idle');		}

And for touch movement:

// MOBILE MOVEMENT		if (this.game.input.pointer1.isDown) {			if (hero.alive == true && Math.floor(this.game.input.x/(this.game.width/2)) === 0) {				hero.body.velocity.x = -600;				hero.animations.play('run');				hero.scale.x = -1;			} else if (hero.alive == true && Math.floor(this.game.input.x/(this.game.width/2)) === 1) {				hero.body.velocity.x = 600;				hero.animations.play('run');				hero.scale.x = 1;			} else {				hero.body.velocity.x = 0;				hero.animations.play('idle');			}		}

Thank you

[Heppell08]

remove the animation from the core moving functions then in an update place the animations like i do here:

if(player.body.velocity.x > 0 || player.body.velocity.x < 0)            {                player.animations.play('walk')            }            if(player.body.velocity.x === 0)            {                player.frame = 0;                player.animations.stop();            }

Then have a variable for facing for left and right. If the velocity is right direction, set the facing var to right and scale flip:

// leftif(facing !== 'left')            {                player.scale.x *=-1;                            facing = 'left';            }// rightif(facing !== 'right')            {                player.scale.x *=-1;                facing = 'right';            }

So you have the flipped scales and movement in 2 small snippets working perfectly with the controls you have set up.

[Luis Felipe]

What a great idea, thanks!