Help with a spinner...

[Dpikachu1]

Hi there!

This thread is coming from an old thread that I made about spinner's and while working on one (a spinner) I kind of got stuck.
What I'm trying to make is a horizontal spinner with different colored blocks (colors correspond to what type of prize you get like common, Rare etc.). Once a certain button is clicked, the block's spin around in a random order with a random speed and number to which color (block) the spinner is going to land on (Like, once a block has passed, the application spawns in another block on the other side to spin around but the block that is spawned is randomly chosen). The speed gradually decreases and once an X amount of blocks have passed the speed reaches zero and the spinner stops on the color (block) corresponding to the number that was chosen at the start.
So let's say if the X amount of blocks that were going to pass was 100, then the block that the spinner lands on would be 101.
So the 101st block spawned corresponds to the number that was chosen at the start.
Really, the spinner is like opening a case in cs:go.
Now the problem I'm having is getting the blocks that are spawning randomized every time once one block finishes it's spin and getting the spinner to land on the block that was chosen by the number at the start after X amount of blocks have passed while decreasing the speed at a smooth rate to make the slow down look pretty realistic.

If anyone could help me with this and possibly give me an example for me to take a look at to help me, that would be great!
If there is a need for more explanation, just let me know!

[King_Cool]

Are you talking about something like this?
https://www.youtube.com/watch?v=FY_FcfKftzg
( Skip to 2:50 )

[Dpikachu1]

Yes King_Cool that is a way of putting it. But the problem is I'm not sure how to exactly do that.
Any help?

[King_Cool]

You want to pre-determine the result/ outcome?

[Dpikachu1]

Yes I do. As I said at the start a number (probably a counter or maybe a global value) is chosen when the spinner starts. That number corresponds to what you get like maybe 250 - 100 is rare and 251+ is common and so on.

[Dpikachu1]

So, how could this be done?

[King_Cool]

So this took me some time, it wasnt as easy as i had thought, but i crerated a highly customizable "spinner".
I will (#1) define a "spinner" in short, (#2) List the components that make up the Spinner system, ( #3 ) outline the basic behaviour of the Spinner and finally ( #4 ) explain the options for customizing this Spinner to your liking

A SPINNER?
It might not be obvious what is meant when i say i have created a "spinner", so below is a referrance to what i mean when i say a "spinner" ( A continously moving horizontal row of Items, and a static Selector pointing to one of the Items as the movement/ spinning stopps ):
https://www.youtube.com/watch?v=FY_FcfKftzg

COMPONENTS OF THIS SPINNER
The Spinner consists of 2 basic components, and one additional component:
- A "Spinner Selector", Active Object ( A fixed-possition arrow/ selector pointing at an Item in the "spinner" )
- Multiple "Spinner Items", Active Object ( Continously moving left/ right untill the Spinner stopps moving ). The 'Spinner Items' displays different 'Item Types' of different rarities
- A 'List Object' defining the percentage chance of each 'Item Type' appearing in the Spinner, as new Items appear/ are introduced

SHORT EXPLANATION OF SPINNER BEHAVIOUR
Short explanation of how the Spinner works:
- The 'Spinner Selector' has a fixed position and also contains all of the Spinners data in the form of 'Alterable Values' ( except 2 pieces of data i chose to put in Counters for an easier comprehension of this example, allthough theese can easily be included in the 'Spinner Selector' as well )
- The Items can display different 'Item Types', each which have a specific percentage chance of being displayed ( Example: Item BLUE 30%, Item YELLOW 30%, Item RED 40% )
- The Items are possitioned in a row below the 'Spinner Selector' and move horizontally untill exiting the boundries of the Spinner, in which case a new Item ( displaying a new 'Item Type' ) appears at the opposite end of the row of Items ( simulating a continous flow of moving items to the left or right, depending on the moving direction )
- The Spinner pre-determines the final outcome

HOW TO USE THIS CUSTOMIZABLE SPINNER
As mentioned, the 'Spinner Selector' contains all the data of the 'Spinner'.
You can alter most of this data to customize the Spinner to your liking:

SpinnerSpeed_:
Defining the speed and direction of which the 'Items' move

VisibleItems_:
The max number of 'Items' displayed in the spinner ( this defines the boundries of the 'Spinner' )

SelectorPossition_:
Based on the number of 'Visible Items' the 'Selector' will be possitioned at and be pointing at 'Item' number X from the left ( X being the value of SelectorPossition_ )

StopAtItemNr_:
When User stopps the 'Spinner' ( pressing SPACE by default ) the Spinner will move ( and also slowdown by default ) pass X number of 'Items' and stopp at the last 'Item' passed

DistanceToStopInitial_:
This is used to calculate the distance to the Final Item when a stopp is initiated, and does not need to be changed in any way unless you would want to alter the example fundementally

DistanceToStopCurrent_:
This is used to calculate the distance to the Final Item when a stopp is initiated, and does not need to be changed in any way unless you would want to alter the example fundementally

( Counter ) Next Item:
This is used to calculate the Next 'Item Type' to appear in the Spinner, and does not need to be changed in any way unless you would want to alter the example fundementally

( Counter ) Next Item:
This is used to calculate/ pre-determine the Final 'Item Type' the Spinner will land on after stopping, and you can change this at any point preferably before the stopping process if you want to change the final outcome

- The 'Spinner Selector' is the "anchor" of the spinner as a whole and will never move or change possition. It is rather the 'Spinner Items' which reposition and rearrange themselves based on the parameters above
- You can change the size of the the 'Spinner Items' if you wish, and everything will still work
- If you want to add a new 'Item Type' ( along with a specific percentage change of it appearing ) to the 'Spinner', just add a new AnimationFrame to the Items Object, and also ad a new entry in the List. This may call for an explanation of how the List works:

- The 'Item Types' are the different AnimationFrames of the Item Object ( AnimFrame1 = ItemType1 etc )
- The list looks like this...

50
70
85
95
100

- ...meaning 'Item Type#1' has a 50% chance of appearing ( 0 - 50 ), Item Type#2 has a 20% chance of appearing ( 50 - 70 ), Item Type#3 has a 15% chance of appearing ( 70 - 85 ) etc
- If you want to use Animation sequences, or something, as the 'Item Types' instead of Animation Frames, changing the code to this end should not be problematic
- By default the Spinner stops by slowing gradually down, but if you would like some other kind of slowdown method ( like a fixed constant speed ) just alter the code to this end. Note that i have taken into account that if the Spinner moves 'past' the final/ target item durring the stopping process ( by for example having a very hight speed durring the slowdown process ), the 'Items' adjust themselves accordingly so there is no problem or visual offset
- If you would want the 'Spinner' to NOT pre-determine the final outcome, changing the code to this end should be easy enough
- There might be problems if the SpinnerSpeed_ is greater or equal to the width of the Item. Although i could account for this i ahve not done so, but might at a later time

Feel free to let me know if there are any problems

[casleziro]

Isn't this just a slot wheel? Not a spinner.

[mobichan]

Yea, when I heard "spinner" I thought of a loading icon, tbh. But I wasn't clear if the items were in a fixed order that needed to cycle or if they were totally random with each revolution. If they can be random, you can basically populate your spinner with anything and simply spawn the "prize" item at a specific time so it will land on the pointer when the wheel stops. If the spinner has a fixed order of items (and a fixed wheel turn speed) you can just determine how many items will cycle by in a spin and then set the start item based on that. This way you will know what item it will end up on. But I guess there are lots of ways you could handle the visual treatment of this.

[King_Cool]

A Slot Wheel sounds more spot-on.
Shame i cant edit the post any longer.

The Slot Wheel is endless, and generates random Items based on % chance.

"you can just determine how many items will cycle by in a spin and then set the start item based on that"
What im doing is 'virtually' positioning the Final/ Target Item when the Stop is initiates, and as soon as a regular Item is located at this coordinate position it transforms into the Final Item.