top of page
Search

How to create a slot machine with spinning reels in Storyline

Updated: Jul 6, 2021

I created a slot machine with spinning reels and released it to the world with this e-learning challenge.



This tutorial will go through some of the logic I used to create this game. (Hold on to your hats!)



DEVELOP THE ASSETTS


The first step in creating a slot game is developing assets for graphics. This is the frame I developed in PowerPoint to house the reels. This will sit on top of the reals ("Arrange, Bring to Front")


When I first started making the game I didn't know how many different styles of landing spots I would need so I created a bunch. The key is that they all need to be the same size.


Next, I understood that I could place them on a slider as the thumb fill and create the movement by changing the slider reference. I'll explain more later. But first I needed to create my real. So I lined up the pictures and created a reel.


It took a lot of experimentation to come up with the final reel.


ARRANGE THE SCREEN


Once I had my assets put together I could begin to arrange things on the screen. This is when I determined this would be a 5-reel slot.



Now you can see the basic mechanics of the game. There are 5 sliders (one for each reel) and they are all the same. Changing the value of the sliders will animate the reels.


Here is the menu for the slider named "REEL1_sldr". You can see that it accepts values from 0 to 300 with an initial value of 30. The step interval is 1. The slider is turned sideways so you can see that the width is 3050 px (up and down) and then height is 119 px.



MOVE THE REELS


Now we have adjusted the initial value of "REEL1_sldr to 42 and you you can see that the Koala has moved from LINE 3 on the display to LINE 1. This is how we are going to make the reels spin.


1) Pick a random number from 30 to 300.

2) Move the slider until it reaches that random number then stop moving it.

Let's break this down


motion_1 - "1" is a little box. It has two states - "moving" and "not moving:"


We are going to move it along a line motion path over and over again until the value of the slider "REEL1_sldr" is >= to random number "reel1_1_rnd" that we selected. Then we will change motion_1 - "1"'s state to "not moving"


As long as the state of motion_1-"1"s state is moving we will add the variable speed to the value of REEL1_sldr. Speed has a constant value of 5. This is how fast the reel will move. (The step at which the numbers will advance from 30 to the random number we selected)


This is the animation screen for motion_1 - "1"


So this little block is moving 180 px in 0.1 seconds. We will add the value of speed to the slider each time the animation on the block completes. Then we will have the animation on the block start again.


TO BE CONTINUED


In the next article we will talk about how to make sure the reels end up right where they need to and begin looking at figuring out if the person won.





124 views0 comments

Recent Posts

See All
bottom of page