Animation - Roulette wheel - animation ideas/help?!

[Matej]

Hello there, i am new to Phaser and game dev, so if you can trow me some ides that would be gr8 <3.

Ok now, i have 4 spritesheet with 181f.

One Ssheet is the wheel itself and other three are the ball animations.(Inner ball, outer ball, and ball simulation(fall in)).

 

My guess is that i need to make a map of all the frames some how. 

 

This is just to add and run the frames.

wheel = game.add.sprite(0, 0, "wheel");
wheel.animations.add("wheel", Phaser.Animation.generateFrameNames('wheel', 0, 180, ".png"));
wheel.animations.play("wheel", 25, true);

ballIn = game.add.sprite(0, 0, "ballInner");
ballIn.animations.add("ballInner", Phaser.Animation.generateFrameNames('ballInner', 0, 180, ".png"));
ballIn.animations.play("ballInner", 25, true);

ballOut = game.add.sprite(0, 0, "ballOuter");
ballOut.animations.add("ballOuter", Phaser.Animation.generateFrameNames('ballOuter', 0, 180, ".png"));
ballOut.animations.play("ballOuter", 25, true);

ballSim = game.add.sprite(0, 0, "ballSim");
ballSim.animations.add("ballSim", Phaser.Animation.generateFrameNames('ballSim', 180, 360, ".png"));
ballSim.animations.play("ballSim", 25, true);

And in the Object.animations there are currentAnim and currentFrame property that i can use? right
And the array in currentAnim._frame for wheel and the "balls" looks like this: 

currentAnim:Phaser.Animation
_frameData:Phaser.FrameData
_frameNames:Array[0]
_frames:Array[181]
total:(...)
__proto__:Object
_frameDiff:0
_frameIndex:0
_frameSkip:1
_frames:Array[181]
[0 … 99]
0:0
1:180
2:2
3:164
4:1
5:5
6:6
7:173
8:175
9:9
...

So how are the frames generated?
How can i use the object.frame property to select the frame i need?
What is the easiest way to map the frames? (frame name or loop through array by index, ...)

To connect the "Ball" animation of those three spritesheets i guess i need to stop at the specific frame and run the onComplete callback f or ?

Any idea/code example/link to some article(animation tutorial) would be much obliged.

Thank you

[stupot]

Hi,

In Phaserland, a spritesheet is specificaly a graphic which is handled as a grid of same sized graphic frames.  Access to these frames is by a 0-based index number using the '.frame' number property.

An atlas is a graphic which has been composed from several image files.  It requires an atlas definition file that lists exactly whats in it and where, as the contents are not rigidly ordered like in a spritesheet.  Access to these frames is by reference to the original filename they came from using the '.frameName' string property.

So if you have a spritesheet, then you will be accessing the frames with an frame number using the .frame property.  The 1st frame is zero at top left, then they count upwards by scanning left through the frames, at the end or that row the next frame is on the row below starting at the left and then moving right etc - just like reading text.

 

[Matej]

On 8/2/2016 at 2:02 PM, stupot said:

Hi,

In Phaserland, a spritesheet is specificaly a graphic which is handled as a grid of same sized graphic frames.  Access to these frames is by a 0-based index number using the '.frame' number property.

An atlas is a graphic which has been composed from several image files.  It requires an atlas definition file that lists exactly whats in it and where, as the contents are not rigidly ordered like in a spritesheet.  Access to these frames is by reference to the original filename they came from using the '.frameName' string property.

So if you have a spritesheet, then you will be accessing the frames with an frame number using the .frame property.  The 1st frame is zero at top left, then they count upwards by scanning left through the frames, at the end or that row the next frame is on the row below starting at the left and then moving right etc - just like reading text.

 

Thanks for the reply and sorry for the late late response. :/

Thx for the information it was helpful, managed to figure it out.