Revert Sprite Animation

[Zaidar]

Hi guys,

 

I just started with Phaser, and what I'm trying to do is a ship animation which flip if you click on the left or right button.

 

I know this issue already has been posted here : http://www.html5gamedevs.com/topic/1582-horizontal-sprite-flip/ but my problem is still present even if I tried this solution.

 

So basically I use this spritesheet : 

 

When I click on the left button, the ship does a left quarter roll, and when I click on the right button, the ship does a right quarter roll.

 

I created a GIF to show you : http://img5.imageshack.us/img5/2587/zl.gif

 

As you can see the first anim (left one) is good, but the second one, goes on the left. I may be du to a thing with the anchor but even by changing it, it still does it.

 

Here is my code : 

function create() {    s = game.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, 'starfield');        plane = game.add.sprite(0, 0, 'plane');    plane.anchor.setTo(0,0);    plane.animations.add('turnRight', Phaser.Animation.generateFrameNames('test.png', 14, 1, '.png', 4));    plane.animations.add('turnLeft', Phaser.Animation.generateFrameNames('test.png', 1, 14, '.png', 4));}function update() {  s.tilePosition.y += 2;}left.addEventListener('click', function(){  plane.scale.x = 1;  plane.animations.play('turnLeft', 30, false);  setTimeout(function(){    plane.animations.play('turnRight', 30, false);  }, 500);});right.addEventListener('click', function(){  plane.scale.x = -1;  plane.animations.play('turnLeft', 30, false);  setTimeout(function(){    plane.animations.play('turnRight', 30, false);  }, 500);});

Thanks you very much for help.

Cheers.

[Vidsneezes]

It should work when you set your anchor to 0.5,0.5

What happens when you set your anchor to 0.5,0.5 instead of 0,0  in line 16?

[Mike]

Hey, @Zaidar your code looks fine to me... and also here I made an modification to phaser example:

 

http://mihail.ilinov.eu/games/phaser/examples/_site/view_full.html?d=animation&f=looped+animation+mike.js&t=looped%20animation%20mike

 

Which just flip the animation as shown above, also i don't set anchot to 0.5,0.5

 

Can you upload your buggy examples somewhere ?

[Zaidar]

Sure guys, you can find the example here : http://jeandaviddaviet.fr/game/

 

I updated the code and put 

plane.anchor.setTo(0.5,0.5);

Still, the ship dont rotate around himself. Any ideas ?

 

Thx

[Mike]

But it looks ok on the example above. at least a see the plane turns right

[jcs]

it looks to me like it is doing exactly what the code is telling it to do... I believe the problem is due to the fact that the width of the frame, and thus the position of the 'airplane' graphic relative to the world, changes during the animation. to get this to work properly you would need to adjust the sprite's x coordinate as part of the animation, which would be a pain. 

 

I can see two ways to get what you want, but both involve changing your spritesheet:

 

1) have the all the frames in your sprite sheet the same width of 'n' pixels, with the plane moving inside the frame. (in your sample that would be from the center of the frame, moving over to the left). then when the sprite is flipped the animation will look correct. or

 

2) forget about flipping the sprite and just render both animations separately.

 

either way expands the size of your spritesheet some, but both are easier than trying to properly adjust the x coordinate of the sprite during the animation, IMHO

[Vidsneezes]

I did a quick test. =)
And this is the result i got, by setting the anchor to 0.5,0.5, using 6 frames, having the frames with different sizes.

https://dl.dropboxusercontent.com/u/102138490/sample/phaser/AnimationFlipTest/index.html

Let me know if it helps. The code is pretty much the same, is also under the Menu.js.

[Mike]

1) have the all the frames in your sprite sheet the same width of 'n' pixels, with the plane moving inside the frame. (in your sample that would be from the center of the frame, moving over to the left). then when the sprite is flipped the animation will look correct. 

 

Aha that's the unwanted behaviour now I see it... and the same size  frames solution and reposition sounds a good fix to me.

[Zaidar]

Hi Guys thx for answer, yes I think that's a problem with my spritesheet and the different widths, so I'll try the solution of @jcs, which is changing the spritesheet, at least to advance in my project.

@Vidsneezes, thx for the example, but if you look carefully I think the problem of the inside image not at exactly the same place during the animation. (Yes, that's quibbling a little)

 

For information I used TexturePackerGui for generating the sprite.

 

I'll come back if I have news.  bye

[Radi]

how its made the .json file with the multiple animations cordinates??

i tryed the program texturepacker but dont understand it very well :/

 

is there some tutorial for that?

[Mike]

Texture Packer is straight forward:

 

1. Input a set of images

2. Select export mode

3. Make some changes to options

4. Select output location for data file (for Data format choose JSON(Array) or JSON(Hash)

5. Select output location for Texture file

 

Press Publish

[mwatt]

When I create a JSON(Array) data file, it uses the original file names for the filename field of each JSON object in the array- which of course is quite reasonable.  However, as I begin to play around with Phaser now, it seems that phaser is expecting frame names within the filename field - and it looks like perhaps there is some preference towards a format like this within that frame name: baseFrameName000X, where X is an ordinal number beginning with zero, and increasing for each animation variant of the base image.

 

Am I correct in this?  Is there a way to automate the changing of the file name into a frame name if so?  Or do people just do it by hand?