How do I rotate an image label around the Center of the Screen with an Offset?

Help and Feedback Scripting Support
#1

I’m trying to make this frame rotate around the center, for when the player gets hurt and there’s a directional indication of where it came from. However, I’m having trouble with making the frame rotate around the center of the screen.

This, while properly rotating the frame, makes it rotate on its edge and not around the center of the screen. Anyway to make it rotate around the center with a position offset?

local targetVector = camera.CFrame:ToObjectSpace(workspace.Part.CFrame).p
local angle = math.atan2(targetVector.X, -targetVector.Z)
hurtImage.Rotation = math.deg(angle)
		
local dirX = math.cos(angle)
local dirY = math.sin(angle)
hurtImage.Position = originPos + UDim2.new(0, dirX * distance, 0, dirY * distance)
#2

Actually i think you only have to change the image AnchorPoint with (0.5, 0.5), so that the position would be applied to the center of the image, and not to its edge.

#3

The image’s Anchor point is (0.5, 0.5). The starting position is (0.5, 0, 0.5, 0).

#4

I’m a tad bit confused, are you working with ScreenGuis or BillboardGuis?

#5

I am working with Screen Guis.

#6

Oh ok, so now i think the starting point is not correct, you’r using Scale “syntax” on Offset, in short, i think that changing the starting point to (0.5,0,0.5,0) should work.

#7

I typed it wrong, sorry. It was (0.5, 0, 0.5, 0). I want to make it rotate around the center with an position offset, not just rotate in the middle.

#8

This problem sounds tricky so i’m trying to make my own model of what you want to achieve, i’ll let you know here if i find a solution.

#9

Ok i believe i found a solution for you’r problem, and i made a function for it:

local function rot(a,obj,c,o) --a = angle, obj = ImageLabel, c = OriginPos, o = Offset
	obj.Rotation=a/math.pi*180
	
	local nx=math.sin(a)
	local ny=math.cos(a)
	
	obj.Position=c+UDim2.new(0,nx*o,0,-ny*o)
end

Actually it isn’t really different to you’r code.

I also attached that function to a RenderStepped loop, incrementing each the angle each iteration, with pi/100: https://gyazo.com/7fa55eb6bdf228c7fd0038e32ac94cae (The white frame stands for the center of the screen)

GIF’s code:

local img=script.Parent.ImageLabel
local pi=math.pi
local cos=math.cos
local sin=math.sin
local udim2=UDim2.new

local a=0
local d=200
local i=pi/100
local center=udim2(0.5,0,0.5,0)

local function rot(a,obj,c,o)
    obj.Rotation=a/pi*180
    local nx=sin(a)
    local ny=cos(a)
    obj.Position=c+udim2(0,nx*o,0,-ny*o)
end

game:GetService("RunService").RenderStepped:Connect(function()
    a=a+i
    rot(a,img,center,d)
end)

Image Proprieties:
AnchorPoint = (0.5, 0.5)
Position = {0.5, 0},{0.5, 0}
Size = {0, 100},{0, 100}

#10

Dropping my two cents here.
For future reference, quite often UI can be designed in a way that massively simplifies the code required to do something.
In this instance, you can make 2 frames like this

image
image1955×1115 222 KB

Where the white frame is transparent, and the red frame is a descendent of it with the arrow icon. Now your code can be one line that changes the white frame’s Rotation.
The added ability is that now, without any code, you can design the “arrow” to perfectly fit someone’s screen with no math required!
image
image1955×1115 514 KB

Just food for thought. :grinning_face_with_smiling_eyes:
Sometimes simple is better, sometimes it’s not.

3 Likes