Roblox GUI spin inside a circle frame

  1. What do you want to achieve?
    I want a simple solution that works using local script or server script

  2. What is the issue?
    I need to make a kind of spin circle like this: BEST GENERATOR REPAIR IN DbD! | Dead by Daylight Gameplay #shorts - YouTube
    The circle with that red line spin around the circle and need to press space at the right timing

  3. What solutions have you tried so far?
    I have looked in roblox fourm and youtube. i dont think tween is the right awser for this

2 Likes

Whole circle is represented as math.pi * 2 which is also a period, this implies that one period is full circle.
Full Rotation

Let’s see something practical:
If you have a circle with radius of 4, and you want to display a point on the circle in specified angle, let’s say 90°, you have to calculate X and Y coordinates of the point on the circle.
let’s use this simple formula

local angleToRad = math.rad(90) -- 90° to radians ~1.57 which is also 1/2pi (deg * math.pi / 180)
local circleRadius = 4
local pointVec = Vector2.new(
    math.cos(angleToRad) * circleRadius,
    math.sin(angleToRad) * circleRadius
) -- (0, 4)

Why cos for X and sin for Y? These are goniometric used mostly for these circle calculations.


This image shows the value of the function in a period, so if we have 90° which is equal of 1/2pi we will get value 0 for cosinus and 1 for sinus, which also means that our circle point will be on vector (0, 4).

For 0° it’s (4, 0)
For 180° it’s (-4, 0)
For 270° it’s (0, -4)
And finally for 360° which is also 0° it’s (4, 0)

3 Likes

so i would use math.pi in that case how would i make it move and check if the position is right
do i add the script on position or roation or both?

If I had to implement this, then server should decide the region where the value is correct, so if you look at that video, you see a small part of the circle highlighted which is the “correct” part, and it is a region <from number, to number>, the region can be represented in <from angle, to angle>.

So let’s say, server decided, that the correct part is gonna be from 150° to 210° which is the left part of the circle, similar to the video. Player will start at 0°, and will go up progressively. By up, it is meant as adding by positive number, it shouldn’t be problem even if it went backwards, so adding by negative number. The video shows that the angle goes backwards from 0 to -15, -30, …

When player clicks space, it should check where the player currently is, there are multiple solutions, either you could current angle by comparing start timestamp, space click timestamp and the speed. This solution is very good against hackers, because they’d have no way how to exploit this, but if player or server has high latency, this might be problematic, because the space click will be delayed by the player’s latency. Other solution is that the player will send the angle after clicking space, but of course, this could be exploitable and hacker could straight up always send a perfect angle no matter where the line currently is. Of course you could make a hybrid between these two, by letting player send the angle, and server will compare the angle by its calculation and decide if it’s “legal” angle.

Steps:

  • Server will decide correct region <from angle, to angle>
  • Server will send RemoteEvent to the player with the region, and speed, that there is “repair task”, and server will remember timestamp when it was sent
  • Player will receive RemoteEvent and display the circle with highlighted region, and line starting on 0° going up or down by decided speed by server
  • Player presses space and sends the angle to the server using RemoteEvent
  • Server receives message, decides if the angle sent by player is legal one by calculating real angle using start timestamp and current timestamp and check, if the player’s angle is similar to the calculated one (tolerance by -10° ~ 10° for example)
  • Server will do an action based on the result and game goes on…

Don’t forget that the angle received by server must go throught math.abs because if the angle goes down, it’ll always be negative number and will never be close to the correct region.

Can you give me a sampel like a basic script to show not a full on

You could try to create an ImageLabel and set its Image property to something similar to the red cursor. To rotate it, I would use the TweenService:

local spin_time = 0.3

game:GetService('TweenService'):Create(ImageLabel, TweenInfo.new(spin_time, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1), {Rotation = 360}):Play()

something like this^

To detect if the cursor aligns with the target gui, you can use the method : :GetGuiObjectsAtPosition(x, y)

This, however does not prevent exploiters, I believe it’s best to ask @Cloudy71 more about that…