You can see what it looks like moving in an implemention on plunker.

By plotting the XY of the circumference of the circle we can work out the Y co-ordinate and determine the height of each segment depending on the number of degrees it covers from it's start position to it's end. The diagram below shows that the segments are of equal size but depending upon their position can appear to have different heights when viewed by the user. The first idea of how I could represent this random result was a fruit machine reel, because it also shows that there are different options, only one of which is chosen.Ī fruit machine reel is circular with only about 50% visible when viewed side on. I didn't want to use a canvas for this, so I wondered if I could use image tags. I had the idea of showing the result of a random choice via an animation on my site homepage. how can I create a short easing effect at the end of the reel spin, I want the reel to be pushed up a bit in order to get the 'lock-in-place' effect.So, this is a bit of experimentation, playing with the position and size of images to see if I can create an animated fruit machine reel. do you have a better idea on how to implement a slots machine.ģ. how can I achieve a smooth reel spin effect?Ģ. So, after this long preface I have several questionsġ. Sometimes overlapping the currently displayed reel and sometimes in a wide variable offset and the reel spin is not smooth. In both methods I bumped into a serious issue, when I moved the reels slow everything worked great.īUT when I bumped the speed up a bit the newly created 'next-to-be-shown-reel' (on top of the one displayed now) was created in weird places. I prefer the 2nd method as I want the symbols to be animated in case of winning + I'm thinking on building the reels dynamically after getting positions from server. using individual sprites pinned to a container while shifting the container to to bottom using bullet speed.

using a strip with all symbols on the reel in a tiled background and shifting it top to bottom using the Y position parameter.Ģ. I tried the following 2 methods (CAPX attached):ġ. I'm trying to figure out how to create a smooth reels animation of a multi-line slots machine. I'll warn you guys upfront that I'm fairly new to C2.

Slot machine reels cartoon clipart