Tutorial: Spinning Wheel


You are not supposed to follow along step-by-step, second-by-second. Please do not attempt to follow at this pace, it would be impossible. You should be able to follow along easily if you are able to find blocks by looking at a screenshot.

Learn how to create a spinning wheel using a canvas and image sprites. This tutorial is great for mini-games or rewarding your users with points or items in your app. To randomize the wheel, it will spin X amount of times (a random number from 1-10), before landing on a final number. The final number the wheel lands on is determined by a random number (1-20) giving the wheel 20 possible choices. The wheel is designed so that the number 1 is the rarest number. As such, the number 1 should reward the user with the best prize.

YOU AGREE THAT BY DOWNLOADING THIS .AIA FILE you will ONLY use it for education purposes or as part of your app. Any apps published to Google Play using any or parts of this .aia file MUST legibly include the phrase “original app design by Pixii Bomb” either on the title screen or somewhere in the “About” section. ANY Or ALL parts of this project MAY NOT be uploaded to another youtube channel, website, or publication in which the uploader receives credit for my work. If you wish to use ANY part of this tutorial in a tutorial that you create, you MUST have my permission to do so.
If you violate any of the above terms, your channel/website/publication will be flagged for copyright infringement.
FREE VERSION Project .aia File: WheelOfFortune_FREE.aia (100.4 KB)

:fairy: Exclusive Pixii Bomb Squad Graphics Available for this Tutorial :bomb:


We seem to think alike sometimes. My Wheel of Fortune I made in 2014 uses the same approach (evaluating the end heading to show result).


Oh wow you used a lot of different slices! LOL I was super lazy haha. I was like “8 is fine” >.>
haha That looks really nice


The thing is when I made it I didn’t make a way to find what number was selected.
So I didn’t care about how many slices the wheel had. But when I wanted to implement it, I had to work a lot with the if’s because I didn’t want to change the image! :grin:


lol I dont blame you, it’s a really cool image :stuck_out_tongue:


i used both . this one more smooth turning.wheel of fortune.


I had that issue with mine too. If you set the wheel sprite interval to 0 and don’t check the number while it’s rotating, but only check it when the wheel stops, then it will be smoother.
Looks like AppyBuilder takes some time to do the checking and that is reflected in the rotation not looking very smooth.


@Italo maybe you need to play around with the timer interval??


It looks pretty smooth to me >.> I mean, it’s not perfect, but it’s not jagged either :stuck_out_tongue_winking_eye:


Yes, I just downloaded your aia it and its rotation is fast. I thought @edd was talking about some rotation lag. I had that issue with mine due to the amount of IF’s I had to check constantly to show what number was under the arrow while spinning, but in your case, having only 8 IF’s that’s not an issue.
May be he was referring to the deceleration then.


@Italo @PixiiBomb you may find following post useful. It reduces number of nested if then else:



He might be referring to the video.
The example is laggy in the video because the framerate is different on the video capture app I’m using.
I always have to slow it down during editing.
It does look ratchety in the video :stuck_out_tongue:


Thank you very much for quality tutorials!


How did you calculate the heading for each number? I just don’t want to teach students how to copy the app.


That is explained in the video.


I guess my questions is more about how the random integer was determined to be 1-20. Reason being is if I want to add more numbers to a wheel image.



In order to randomize the wheel, I figured that it should make 1 complete spin, X amount of times.
X is set to any number from 1-10.

Once the X spins are completed, the wheel will spin 1 more time, but it won’t make a complete spin. Instead, it will stop on the slice it was intended to stop on. This is determined by getting a random number from 1-20.

Keep in mind, in both instances, the number (1-10 & 1-20) have no significance. I could just have easily chosen 1-100 and 1-1000. I figured that 10 max complete spins is a good number (so that the user isn’t waiting forever for the wheel to stop spinning) and 20 is a good number because there are only 8 slices. I also didn’t want to test a million numbers, so 20 is good.

Then I played around with the speed (variable) of the wheel, and I determined that for the size of the wheel, I liked the value of 10. It seemed to move at a fluid pace, not too fast, not too slow.

The FINAL_SPIN clock has a 0 interval and increments T by 1. So this clock ticks very fast.
Counting to 1 or 20, would be instant. So I figured it would be easier to multiply the random (1-20) by 5, just to increase the increment instead of incrementing T by a value less than 0.

Then I spun the wheel.
When the slice stopped, I recorded the random_final & r5 (which are kind of the same thing) and the heading.
And I wrote down the slice the wheel stopped on.

Then I spun the wheel again, and did the same… until I had filled in all 20 possible values.
Then I spun the wheel a few more times just to make sure I got the same results every time.

Now notice in the getResult procedure, the result is determined by r5… but it could have just as easily been determined by random_final or heading. r5 is just the smallest word of the 3 variables, and is easier for the eye to see.

Additionally, r5 might not even be needed. It was just an extra step to help out the last clock. But in programming, there are multiple solutions to every problem, so if you want to switch it up, you might even find an easier method! :slight_smile:

Hope that helps


Have anyone of you an idea how to get a spinning sound on the wheel? i try it since month… :frowning:


Under the Media Palette, there are 2 components:

  • Player - this is best for playing large music files
  • Sound - this is best for play small sound effects

You can upload a music file, just like you upload any other file (like an image).
And you can set the source of the Player or Sound, just like you set the source for text and images.

For Example:
If you have a sound effect called “mysound.mp3” uploaded to your Media folder,
then you can set the Source of the Sound Component to “mysound.mp3”

If the user clicks on a button (or whatever you want them to do to activate the sound), use the built-in procedure called “Sound.Play” (in the blocks editor) to play the sound.

If you are ever curious about what components do, there is a little :question: icon next to every component that explains what it is and how to use it.


If you mean the ticking sound the wheel makes as it rotates, you need to check when the wheel passes from one slice to the other, then play the tick sound. You can evaluate that with the sprite orientation value.

If you want to make it simpler, just download a loop with the sound of the wheel rotating and play it continually until the wheel stops. Then stop the sound too.