Need help with a UI position formula

I want to create a script where when the player turns their camera, an image has a panoramic effect.

Here’s an exact representation of what I’m trying to do:

You can see how he stays in that position, no matter where you turn your camera. Making this in roblox isn’t actually possible without using some kind of formula to set the position as the camera turns.

I have all the pieces of information that I need, but I don’t know how to actually create the formula.

Here’s what I have:

A script that detects whenever the camera turns (it’s called flashlight part, but it has the exact same orientation as the camera)

FlashlightPart:GetPropertyChangedSignal("Orientation"):Connect(function()
	local angle = FlashlightPart.Orientation.Y
	
	for _, nightmarionne: ImageLabel in script.Parent:GetChildren() do
		if nightmarionne.Name:find("Nightmarionne") then
			local fullLeft = nightmarionne.FullLeft.Value
			local fullRight = nightmarionne.FullRight.Value
			
			nightmarionne.Position = UDim2.new(FORMULA HERE,0,nightmarionne.Position.Y.Scale,0)
		end
	end
end)

If the players camera is turned all the way to the left, it will have an “angle” (Orientation.Y) of 20. Likewise, it will be -20 if it is turned all the way to the right.

Nightmarionne is an ImageLabel of the animatronic, Nightmarionne

This is one of them:

FullLeft is the position that the Nightmarionne should be in when the camera is turned all the way to the left. Vice versa for the FullRight.

The image shown above is Nightmarionne’s position in FullLeft


This image is Nightmarionne’s position in FullRight.

Every image (4) has different FullLeft’s and FullRight’s, which should work for the same loop.

FullLeft and FullRight are both in decimal form (Scale)

Feel free to ask any questions if you are unsure.

Can’t you use a ScrollingFrrame for a effect like this? I don’t really work with GUI’s so if that doesn’t work not sure what will

Scrolling frame would still have the same problem. The animatronic’s position has to be set based on the camera’s angle.

Have you tried Camera:WorldToScreenPoint()?

That wouldn’t help me. The animatronic is an ImageLabel, not an object

Can you just change the position based off the screen movement offset? Meaning when your camera shifts right by a certain amount of offset, the imagelabel position shifts to the opposite direction by the same amount of offset

That’s the same as my original issue, I don’t know how to convert the camera’s angle into a scale value for the animatronic somehow.

I would like to clarify. The basic idea is that you would have a fixed point in world space (a Vector3) such that the position of the ImageLabel in screen space would map accordingly, like so:


Thus, when you move the camera, the position of the ImageLabel would match the same point in world space.

Note that being a point, this would not account for rotation, which matches the intention of this method.

I understand what you mean now.

But how exactly would I incorporate it? I’ve never seen that method before.

1 Like

If you know where the world point would be, you would just have to set the position of the image (supposing the anchor point is the center of the image) either every frame, on a fixed interval, or when the camera’s position changes (which can be done using the GetPropertyChangedSignal method).

I think this would work if every image had a 0.5,0.5 anchor point, but that isn’t the case. Some have to be in the bottom right corner, and since I have to use a UIAspectRatioConstraint to keep them at a specific size at all times, I can’t convert them to a 0.5 anchor point.

(I tried it and it did work to an extent)

For the ones that don’t have an anchor point at the center, you could try offsetting their positions in screen space (e.g. UDim2 with relative scale).