Forum Discussion

JoanneChen's avatar
JoanneChen
Super Hero
7 years ago

How to make a spinning wheel in SL (no JS need)

I got an email asking me if I can share how I build a spin wheel in Challenge#188. So I wrote this post to explain how I did it. You may like to see the demo first.

 

Ok, here is how I built it.

Create a spinnable wheel

First of all, I need a wheel so I inserted one from the content library. And to make it able to spin I duplicate and crop it to the spin area and then covert it to dial.

To make it spin smoothly and have multiple circles, I set the rotation equal to 3600 and the value from 0 to 9999.

Make it spins for a period of time after hitting a button

I like the wheel randomly spinning while a sound effect is playing after hitting a button. To control the wheel spinning or not spinning, I added one T/F variable (I call it “STOP”) to do the magic, the wheel will only spin when variable STOP is equal to False.

  1. To make the wheel spinning for a period of time is to keep changing the value of dial in the period I want. So I created a little rectangle and make it able to quickly move up and down in loop during the period (Sound Effect playing).

  • Create a loop: Move the rectangle up when motion down completes, move the rectangle down when the motion up completes on condition of variable STOP=False. Here, the loop will be ended when a trigger changes the variable STOP.
  • Changing the dial value: add a random number to variable Dial when the animation completes up or down. So the dial value will keep changing while the looping exist.  

2. Trigger a start and play a sound effect, there are four triggers to do so. 

  • Set variable STOP=False when clicking the BTN: this allows the wheel to spin because the object only moves on condition of variable STOP=False.
  • Move the rectangle when clicking the BTN on condition of variable STOP=False.
  • Set variable Dial=0 when clicking BTN to make sure it will turn when hit the BTN.  

  • Trigger the sound effect when variable Dial changes.

3. Stop spinning when media completes

Set default variable STOP = false, and then set a trigger to adjust variable STOP equal to True when media completes.

So the wheel spins and a sound effect plays when clicking the BTN by STEP 2, keep spinning while the sound effect playing by STEP 1 and stop spinning once the sound effect ends by STEP 3.

You may download the .story file below.

  • EpicApks's avatar
    EpicApks
    Community Member

    Hi, Is it really possible to make a spinner with node js because I was also looking for my epicapks and really want to develop it? Thanks

  • GabeWillison's avatar
    GabeWillison
    Community Member

    I know this thread has been inactive for 2+ years, but if anyone else is curious about how to use all 12 spaces on the wheel, I had to delete the original triggers for spaces 1-6 and redo all of them. You can find a template attached.

    • LearningDeve771's avatar
      LearningDeve771
      Community Member

      May I ask how you were able to determine the ranges for the "wheel" variable (in order to set the "resultnum" variable based on each range) ?

       

      Reason I ask, I am recreating this with a different wheel graphic that has 20 different numbers on it.