Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jdnichollsc

Animate Phaser sprite with TweenMax frame by frame

Recommended Posts

Hi guys! Can I animate a sprite in Phaser with GSAP? I want to animate the sprite in the timeline because I want to be able to reverse it with everything else...

 

In Phaser I animate the sprite as follows:

 

player.png

var player = this.game.add.sprite(X, Y, 'player');
player.animations.add('walk', [0, 1, 2, 3, 4 ], 15, false); //the animation end in the frame 4
player.animations.play('walk');

And I am using GSAP to tweening objects...

var tl = new TimelineLite();
tl.to(this.state1, 3, { x: -1000 });

I want to replace the sprite animation with Phaser to do this with GSAP, and to reverse this in the timeline animation with

tl.reverse();

Thanks in advance

 

PD: See please http://www.html5gamedevs.com/topic/8141-tween-atlas-frame-on-ipad/

 

Regards, Nicholls

Link to comment
Share on other sites

Hi Nicholls and welcome to the GreenSock forums.

 

Usually we don't support third party code (whether is an engine or plugin) and this looks like a Phaser issue. Mainly the idea would be to locate an object that records the sprite's current frame and tween that value and, as it has been mentioned in the game forum link you provided, using roundProps is a very good idea (the frame number is an integer so there's no need for any decimals).

 

I did a quick check on Phaser API and I found that the animation object has a frame property that acts as a getter/setter of the animation's current frame. So I'm going to presume that in your code animations is the animation object of player, so it could be like this:

var player = this.game.add.sprite(X,Y,'player');
// rest of your code

var tl = new TimelineLite();

tl.to(this.animations, 3, {frame:4, roundProps:"frame", ease:Linear.easeNone});

// then later on your code
tl.reverse();

Let us know how this goes and if you need more help, please try to set up a codepen sample so we can get a better look at it.

 

Rodrigo.

  • Like 5
Link to comment
Share on other sites

Hi Rodrigo!

 

Thanks for your help! This works perfect!  :mrgreen:  

See the Pen ZYeWEr by jdnichollsc (@jdnichollsc) on CodePen

 

Updated: I added a way to change the background color with GSAP in the timeline!  :shock:

 

Regards, Nicholls

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×