slot machine animation

Forums Programming cocos2d support (graphics engine) slot machine animation

This topic contains 11 replies, has 8 voices, and was last updated by  pabloat 1 year, 1 month ago.

Viewing 12 posts - 1 through 12 (of 12 total)
Author Posts
Author Posts
July 27, 2011 at 11:32 am #233742


I am trying to create an application that simulates a slot machine.

Now, I have all the images ready, with the vertical png file and the plist file. My question is, how do I simulate the spinning (when the user presses a button), and then the stopping of the slot machine (after around 1-2 seconds)?

Note that the png file has to wrap around somehow.

Everything else is all a matter of NSArrays and checking, what I want to figure out is the animation. I hope some can share some code or references to do this.


July 27, 2011 at 11:35 am #340591


If you’re going for a simple scrolling, you can do this easily enough by just coding in velocity for each element which decreases over time (I imagine you’ll want to do some custom stuff near the end to make sure it stops in the right place – maybe backs up a little?).

If you want more of a 3D wheel approach then you’ll need to figure out a way to scew and scale the textures to make it look like it’s actually in 3D space (you could also switch to cocos3d but I’ve never used it so can’t really advise).

July 27, 2011 at 11:38 am #340592


Ahh, no not really 3d, just the part where it just scrolls when the user presses a button.

Do you have a reference to coding in velocity into it (and making sure the image wraps around)?

July 28, 2011 at 5:25 am #340593


You don’t really need to have it truly wrap around, unless you want to. When a sprite goes off out of view, you can move it to the other end of the display (assuming you have a transparent “hole” for the wheels, and a foreground image blocking everything else).

Coding for velocity is really simple. In your layer you would have an ivar float to represent the speed. In your update when you’re moving the sprites for the wheels, you would multiply the movement by that velocity. At whatever time interval you want, you would change that ivar to a lower number, and the movement would slow down. At the beginning it would be moving really fast. And as you decrease that velocity, it would slow down. Don’t know how your performance will be with fast moving sprites, though. In the olden days, the spinning wheels would be a set “blurry” animation, and the real images would only come into play when it slows down enough to identify the images.

July 29, 2011 at 6:24 am #340594


okay, so here’s what I did:

CCSprite * bigletters1 = [CCSprite spriteWithFile:@"BigLetters.png"];
[bigletters1 setPosition:ccp(72, 260)];
[self addChild:bigletters1 z:0];
[bigletters1 runAction: [CCMoveBy actionWithDuration:4 position:ccp(0,-2000)]];

Now how do I make it go back to where it was before? I tried this:

[bigletters1 runAction:[CCSequence actions:
[CCDelayTime actionWithDuration:2],
[CCMoveBy actionWithDuration:2 position:ccp(0,-2000)],
[bigletters1.position = ccp(72, 260)],

But that doesn’t seem to work. :(

July 30, 2011 at 6:43 pm #340595


I was able to make the images go down, but once the image is off-screen, how do I make it go back above and continue scrolling down, giving the impression that there’s this wrap-around image?

March 8, 2013 at 10:28 am #340596


@kazuo1231 did u figure this out?

March 8, 2013 at 3:43 pm #340597


For the wrap around part there are two ways you could try (likely many others – but these came to mind)

- Use two sprites lined up. Then once the top one moves past the visible area, move it below the other other one.

- assuming your image is essentially a lot of little square type pictures, then make the last 2 or three at the start and end identical. When you then scroll up far enough to display the last image, the instantly re-position the sprite.

Hopefully that was clear. The 2nd one is probably cleaner to code.

Actually another way is if all the images are separate, you could create an array with the images randomly sorted, then move them all along in sequence. Once an image passes a certain Y position, move it down to the bottom. That way also the order on your dials could always be different.

March 8, 2013 at 8:25 pm #340598


a friend of mine has been setting up some casino sites and he told me this:

use 3 states.

One is still standing as no action is going on with no animation.

One is “Spinning” with a spinning animation.

Last one is: stop animation with the number selected. This means you need a “stop” animation for all numbers and other things you have on there.

look at this: no “stop” animation and looks ugly:

In Vegas they has “slow down and stop” animations for all numbers and items, which seems more natural. You could just use 2 states but that feels “computer like”

There is a lot of videos on the internetz, check em out and see what style your prefer

March 8, 2013 at 9:50 pm #340599


That is some shitty slot animations …

BTW. Is that an alien playing the second slot machine?

March 9, 2013 at 9:02 am #340600


Hahah that is Xenu on a Vegas visit. He and Tom had a blast though.

March 9, 2013 at 9:42 pm #340601


Can the slot machine game be done using CocosBuilder? Or is better to code all by hand?

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.