Jump to content

Tween Movement and animate


Heppell08
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 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);        }    }};
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;        }      }*/
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...