How to rotate a frame around a pivot?

Help and Feedback Scripting Support
#1

How do I rotate a frame (or an other GUI object) around a pivot?

I know another similar topic exists but the answer marked as a solution is simply a link to here.

But I am not smart enough to understand it, so an explanation and possibly an example code will be helpful. :slightly_smiling_face:

1 Like
#2

The link refers to the unit circle. It’s basically a directional vector between -1 to 1 in both x and y axis.

If a unit circle calculation returns (0.5, -0.5), the direction is diagonal towards the bottom right of the screen. The unit circle is calculated off of an angle. With a simple cos(x) sin(y) calculation.

If you want to rotate a GUI object’s pivot around another GUI object’s pivot. You should modify the object’s Anchor Points to your needs, then apply a rotation from there. It’s easy and less cost effective then to calculate everything manually. For example.

Screenshot_1

I placed the Square inside of the Frame in order to have it relatively position itself to the parent. The Square’s Anchor Point is (0.5, 0.5), which is the center of the square.

If I apply a rotation to the square, it will rotate from the center (0.5, 0.5) as follows:

I positioned the Square to UDim2.new(0.5, 0, 0.5, 0), which will center the square. The same effect applies:

If I want an orbital rotation, that’s when unit circle is useful. First, you center the Square’s position. Then, you can use the unit circle calculation to position it with an angle. This will be done in a LocalScript. I’ll use a few variables to explain in this example:

local Angle = 0; -- The current angle
local AngleIncrement = 0.1; -- The increment per loop cycle
local OriginPos = script.Parent.Position; -- The original position of the Square UI
local Distance = 100; -- How far to offset the UI from its original position

while wait() do
    Angle = Angle + AngleIncrement;
    local dirX = math.cos(Angle) -- X direction from the angle
    local dirY = math.sin(Angle) -- Y direction from the angle
    script.Parent.Position = OriginPos + UDim2.new(0, dirX * Distance, 0, dirY * Distance); -- Apply the distance to offset the object
end

Which results into the following:

Since math.cos(x) and math.cos(y) return values between -1 and 1. The Distance variable is multiplied in order to offset the UI from the center.

Hope this helps!

19 Likes
Word Search Dragger / Vector2 math problem
#3

how do you make the Square face the center as it spins

1 Like
#4

nvm i just rotated a frame to face another frame

local CenterX = frameParent.AbsolutePosition.X + (frameParent.AbsoluteSize.X / 2)
local CenterY = frameParent.AbsolutePosition.Y + (frameParent.AbsoluteSize.Y / 2)
local frameCenter = frame.AbsolutePosition + (frame.AbsoluteSize/2)
local x = math.atan2(CenterY - frameCenter.Y, CenterX - frameCenter.X)
frame.Rotation = math.deg(x) + 90
1 Like