What would be the best way to make a spinning wheel?

Hi everyone! I was wondering what would be the easiest way to go about a gui spinning wheel(Located in a screen gui) that has different percentages. The percentages will server for the probability of it landing on the area. Thank you!

Tween the “Rotation” property of the “wheel” from 0 through 360 degrees in a loop (when necessary). You can create a wheel by parenting a UICorner instance to a Frame instance inside some ScreenGui.

local frame = script.Parent
local ts = game:GetService("TweenService")

local tween = ts:Create(frame, TweenInfo.new(2), {Rotation = 360})
tween:Play()

tween.Completed:Connect(function()
	frame.Rotation = 0
	tween:Play()
end)

Organisation:

image

https://gyazo.com/75f0bd127afdc94aba61ac2438860c5d

I didn’t make it a circle (since you wouldn’t have seen it rotate but you would if it had images/different colors on it), you can use a UDim radius of “0, 100” in the UICorner instance to turn a UI instance (in this case a frame) into a circle.

The code below will spin a UI and slowly decrease the rotation until it stops:

local RunService = game:GetService("RunService")

local circle = script.Parent --UI Object

local keep_constant = math.random(1, 3) --amount of seconds to keep constant speed

local speed = math.random(10, 16)
local start = os.time() 

local connection 
connection = RunService.RenderStepped:Connect(function()
	circle.Rotation += speed
	if os.time()-start > keep_constant then 
		speed /= 1+math.random(1, 3)/100
		if speed < 0.01 then 
			connection:Disconnect()
		end
	end
end)
1 Like

Actually I’m not sure this will work. I’ve dealt with this before (a long time ago) and I’m pretty sure the result was that depending on the position the wheel would spin one way or the other. So sadly tween service cannot be used. I could be wrong however and things might have changed.

Are you referring to the inability to tween Rotation anti-clockwise? You can simply set a negative goal for the “Rotation” property instead.

local frame = script.Parent
local ts = game:GetService("TweenService")

local tween = ts:Create(frame, TweenInfo.new(2), {Rotation = -360})
tween:Play()

tween.Completed:Connect(function()
	frame.Rotation = 0
	tween:Play()
end)

https://gyazo.com/993934307a39900c4dc575f23aa9e760

1 Like

Oh crap! My bad. I (somehow) just realized that this was for GUI’s and not parts. How silly of me. The problem I had was with tweening parts rotation, not GUI’s.

How would I intervene probability into here?

  1. Increase the amount of randomness
  2. Add other frames randomly in the circle which have different sizes/radius(representing items etc.) depending on their chance.
  3. Create a function that detects the frame under the place where the “arrow” stops.

Although my solution is mostly a visual effect, I consider better to calculate anything related to the reward on the server and “fake” the process on the client.