How to spin the items of slot machine game?

Help
#1

20160816_153310.jpg3301×1857 2.12 MB

Hi everyone, now i have a task about slot machine game, I want to spin item from top to bottom as above image of other game.
I still don’t have solution for this task, can you help me or provide the guide for this task, please kindly help me.
Thank so much!

#2

Assuming you have each of those icon as individual assets, why not just move them each frame down on the y-axis until they disappear at the bottom, then just set their y-position to something that is above the screen and in the next frames keep moving them down?

function onFrame(e:Event) {
  icon.y += 10;
  if (icon.y > Lib.current.stage.stageHeight) icon.y = -300;
}
1 Like
#3

I have seen people who generate static animations of the machine, in order to introduce blurring and other effects to better simulate the idea of motion

1 Like
#4

Thank Jeichelbaum so much! but i have a problem: the icon is Bitmap object and i can’t use icon.y with Invalid field access is occurring :frowning:

#5

Yes, it’s right and i’m trying to do the same but still not succeed

#6

Mh weird as the documentation for Bitmap suggests it should have a y field that you can set, since it inherits all from DisplayObject. Do you mind sharing some code, otherwise its hard to help.

Also for the motion effect, there are a bunch of ways depending on what you have experience with. I think the easiest would be to have multiple icons of the same type with different alpha values layered ontop of each other and depending on the speed space them out further from each other, kind of like what happens in the picture you posted, otherwise a directional blur. Those would be my two best guesses.

1 Like
#7

Make sure you put your BitmapData inside a Bitmap to display it:

var bitmapData = Assets.getBitmapData ("image.png");
var bitmap = new Bitmap (bitmapData);

bitmap.y = 100;
addChild (bitmap);
2 Likes
#9

You can use the three icons vertically into a container. Then apply vertical blur effect on the whole container. And then, keep changing the position of the icons, and also place new icons following them. Not more than 3 icons would be visible at a time. Once you reach the last icon, restart it from the first one. It worked good for me in a project.
:slight_smile:

2 Likes
#10

Thank Jeichelbaum so much for your supports, seem that i found out solution for it

#11

Thank many Singmajesty for good supports

#12

Ok VishwasGagrani, thank u so much

#13

Any chance you could share what you have done to get this working?

#14

@NZCoderGuy,
Are you looking for openfl code ?
Because, i only have the as3 code for it. Since it was flash project only. :slight_smile:
However doing it in open fl should not be much difference i think.

PS: not sure, if you were asking me or Phuc_vu

1 Like
#15

Ifor it’s in AS3 that’s okay :slight_smile: it was to either or you really…

#16

I’d also be interested in a sample :slight_smile:

#17

oh ok… It’s kind of simple logic. I will need to look for that project in my archives. Will post the class file here then.

1 Like