Tween Movement and animate

[Heppell08]

I am for the first time using tweens in my game. I need the player to move tile by tile in my game so im currently testing the tween movement.

Now i am most of the way complete with this except for a few problems.

 

I want the player animated during the tween to walk. The animation only happens if the cursor isDown instead of during the tween.

 

I've added an onStart function to the tween but still having some problems.

 

Here is the tween code in my update:

if(cursors.left.isDown)      {        tweenLeft = this.add.tween(player.body.velocity).to({ x: - 50 }, 1500, Phaser.Easing.Linear.None, true);                tweenLeft.onStart.add(function()          {            player.animations.play('walkL');          }, this);                facing = 1;      }

I would prefer if the key was released but that doesnt seem to fire the way i would like it to either and the player seems to very slowly walk left without animating.

 

Any ideas on this please?

 

am i doing something wrong in my code?  

 

Thanks

[Heppell08]

http://imgur.com/bc6nNOz

 

There is what is happening. walking right is none tweened and left is tweened but not animating like i need/want.

[Heppell08]

I also tried doing:

if(tweenLeft.isRunning === true)

{ //animate here }

I tried that but noticed after first firing it stays true so needs stopped and restarted and also doesn't animate the player.

If tried many variations as well as checking the docs and examples but just can't get the animation to play as the tween is actually happening.

[Pedro Alpera]

 Something like this?: http://pedroalpera.com/phaser/playground/tweenandanimate_example/

window.onload = function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update});    var image;    function preload() {         game.load.spritesheet('player', 'assets/metalslug_mummy37x45.png', 37, 45, 18);    }    var cursors;    var player;    var animationRunning = false;    function create() {            player = game.add.sprite(300, 200, 'player');        cursors = game.input.keyboard.createCursorKeys();        player.animations.add('walk');        animationRunning = false;        player.anchor.setTo(0.5, 0.5);    }    function theEnd (item) {            player.animations.stop('walk', true);            console.log("END");            animationRunning = false;    }    function update() {        if (cursors.left.isDown && animationRunning === false)        {            tweenLeft = game.add.tween(player).to({ x: player.x - 50 }, 900, Phaser.Easing.Linear.None, true);            player.scale.setTo(-1, 1);            animationRunning = true;            tweenLeft.onComplete.addOnce(theEnd, this);            player.animations.play('walk', 20, true);        }        else if (cursors.right.isDown && animationRunning === false)        {            tweenRight = game.add.tween(player).to({ x: player.x + 50 }, 900, Phaser.Easing.Linear.None, true);            player.scale.setTo(1, 1);            animationRunning = true;            player.animations.play('walk', 20, true);            tweenRight.onComplete.addOnce(theEnd, this);        }    }};

[Heppell08]

Still not working for me. I've copied you method and still not getting the correct results...

 

if(cursors.left.isDown && animatedWalking === false)      {        tweenLeft = this.add.tween(player.body.velocity).to({ x: -50 }, 1500, Phaser.Easing.Linear.None, true);        animatedWalking = true;        player.animations.play('walkL', 20, true);        tweenLeft.onComplete.add(this.endAnimate, this);        console.log('Animate:' + animatedWalking);        facing = 1;      }   

the end animate function :-

 

 endAnimate: function(item)    {      player.animations.stop('walkL');      animatedWalking = false;      console.log('AnimateEnded:' + animatedWalking);    },

and i console logged everything and the true false statements fire exactly as expected so what needs to fire is firing. Basically it all works bar the animation actually happening at all.

[Pedro Alpera]

Could you share the complete code?

[Heppell08]

Heres the fullplay.js module (using codevinskys state set up with yeoman.

 

 

  'use strict';  // variable below  var player;  var map;  var layer;  var layer2;  var tweenUp;  var tweenDown;  var tweenLeft;  var tweenRight;  var animatedWalking = false;  var facing = 0;  var cursors;  var cX;  var cY;  function Play() {}  Play.prototype = {    create: function() {      this.world.setBounds(0, 0, 800, 540);      cX = this.game.world.centerX;      cY = this.game.world.centerY;      this.game.physics.startSystem(Phaser.Physics.ARCADE);      map = this.add.tilemap('test01');      map.addTilesetImage('tilemaptown','tiles');      layer = map.createLayer('TownLayer1');      layer2 = map.createLayer('TownLayer2');      map.setCollisionByExclusion([],true, layer2);      layer.resizeWorld();      player = this.add.sprite(cX, cY, 'player');      player.animations.add('walkL',[9,10,11],4,true);      player.animations.add('walkR',[3,4,5], 4, true);      player.animations.add('walkD',[6,7,8], 4, true);      player.animations.add('walkU',[0,1,2], 4, true);      player.scale.x = 2;      player.scale.y = 2;        animatedWalking = false;           this.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN_TIGHT);            this.game.physics.arcade.enable(player);      this.game.physics.arcade.enable(layer2);            player.body.collideWorldBounds = true;      cursors = this.input.keyboard.createCursorKeys();    },    update: function() {      this.game.physics.arcade.collide(player, layer2);      player.body.velocity.x = 0;      player.body.velocity.y = 0;      if(cursors.left.isDown && animatedWalking === false)      {        tweenLeft = this.add.tween(player.body.velocity).to({ x: -50 }, 1500, Phaser.Easing.Linear.None, true);        animatedWalking = true;        player.animations.play('walkL', 20, true);        tweenLeft.onComplete.addOnce(this.endAnimate, this);        console.log('Animate:' + animatedWalking);        facing = 1;      }                 if(cursors.right.isDown)      {        player.body.velocity.x = 50;        player.animations.play('walkR');        facing = 2;      }      if(cursors.up.isDown)      {        player.body.velocity.y = -50;        player.animations.play('walkU');        facing = 3;      }      if(cursors.down.isDown)      {        player.body.velocity.y = 50;        player.animations.play('walkD');        facing = 4;      }      if(player.body.velocity.x === 0 || player.body.velocity.y === 0)      {        if(facing === 1 && cursors.left.isUp)        {          player.frame = 10;        }        if(facing === 2 && cursors.right.isUp)        {          player.frame = 4;        }        if(facing === 3 && cursors.up.isUp)        {          player.frame = 1;        }        if(facing === 4 && cursors.down.isUp)        {          player.frame = 7;        }      }      if(animatedWalking === true)      {        player.animations.play('walkL');      }    },    endAnimate: function(item)    {      player.animations.stop('walkL');      animatedWalking = false;      console.log('AnimateEnded:' + animatedWalking);    },  };    module.exports = Play;

I'm only working on the left tween until it gets working correctly.

[Heppell08]

yeah i fixed it.... seen it as soon as i posted on here.

 

error code was

 

/* if(player.body.velocity.x === 0 || player.body.velocity.y === 0)      {        if(facing === 1 && cursors.left.isUp)        {          player.frame = 10;        }        if(facing === 2 && cursors.right.isUp)        {          player.frame = 4;        }        if(facing === 3 && cursors.up.isUp)        {          player.frame = 1;        }        if(facing === 4 && cursors.down.isUp)        {          player.frame = 7;        }      }*/

[Pedro Alpera]

Great!

[Heppell08]

Great!

Thanks for the response and help. i knew it had to be something simple and soon as i pasted the code i seen it and knew. Just recoded them animation frames so thank you!