How would I develop something like this?

I’m not entirely sure how to do this, but camera manipulation.

2 Likes

Rotating a camera around a single point in space isn’t overly complicated once you break it down.

1. Start off by determining your center location (in this case the blue part)

2. Using a bit of math we can make the camera orbit the point.

To do this we will need to use the trusty unit circle. The unit circle is a way of visualizing how the coordinates of a circle are calculated.

On a two dimensional plane we can find the X and Y values of a circle using sine and cosine. We arn’t going to worry about the Z axis here which makes things simpler.

Don’t worry if this seems complicated, it’s actually quite simple.
The numbers on the chart that have a pi (π) symbol in the numerator of the fraction are the radians of a circle. They are pretty much an alternative the the more commonly known degree’s.

Radians are particularly useful here because due to their nature. We can actually plug them into sin and cosine to get the X and Y coordinates of a circle.

See the code below:

local rotation = 1    -- This is the rotation of the circle in radians.
local x = math.cos(rotation)    -- Returns x = 0.540
local y = math.sin(rotation)    -- Returns y = 0.841

By plugging our radians into a our functions we have received an X and a Y position which can now be used to position our camera.

3. Position the camera
Now that we know how to convent an angle into a X and Y position, we now need to use those values to correctly place our camera.

First, you may have noticed that our X and Y values are really small. This is because we haven’t scaled them yet. When we work with the unit circle, our X and Y values will be between the values -1 and 1.

If we want our camera to hover only 1 stud away from the center point, then this is fine. However if we want to move the camera back (or forward) a bit we will need to make an adjustment.

Here’s how you do that… Building on from where we left off:

local distance = 5  -- This is the distance the camera will be from the center point (in studs)
local rotation = 1  -- This is the rotation of the circle in radians.
local x = distance * math.cos(rotation)
local y = distance * math.sin(rotation)

By multiplying the distance to the X and Y values we are essentially scaling the circle up.

Next, we need to grab the CFrame of the part we want to spin around. I am using a CFrame here because they come built-in with some handy functions that make things a bit easier for us. In this case, that function is CFrame:ToWorldSpace. Read more about it here.

local Camera = game.Workspace.CurrentCamera     -- Grab the camera so we can re-locate it
local Part = game.Workspace.Part     -- Grab the part we want to look at

local distance = 5  -- This is the distance the camera will be from the center point (in studs)
local rotation = 1  -- This is the rotation of the circle in radians.
local x = distance * math.cos(rotation)
local y = distance * math.sin(rotation)

Now to put everything together we will use the CFrame from our Part as the center point and the X and Y values as our offsets for the cameras position.

local Camera = game.Workspace.CurrentCamera     -- Grab the camera so we can re-locate it
local Part = game.Workspace.Part     -- Grab the part we want to look at

local distance = 5  -- This is the distance the camera will be from the center point (in studs)
local rotation = 1  -- This is the rotation of the circle in radians.
while true do
	local x = distance * math.cos(rotation)
	local y = distance * math.sin(rotation)
	rotation = rotation + 0.01

	Camera.CFrame = CFrame.new(Part.CFrame:ToWorldSpace(CFrame.new(x,5,y)).Position, Part.CFrame.Position)
	wait(0.01)
end

And that is pretty much how you do it. You will need to tweak it a bit to get it to suit your needs but this is the general setup for this feature. Make sure you are also setting your camera to scriptable so that Roblox’s internal scripts doesnt try to fight for control of the camera.

Useful resources:

Note: If there are any bugs in the above code its because I haven’t tested any of the above code. But the concepts are still correct. The code should run, but make sure you test it before using it yourself.

9 Likes

Thanks I really appreciated it!

2 Likes