Custom Camera - How to Smooth Transition

I am trying to make a custom camera and have got the positioning correct.

When the user holds down right mouse button I want the screen to turn slightly to the direction the mouse goes in. I have accomplished this rotation, but I am confused on how I can make it transition smoothly.

My Code is in a Module Script:

local RunService = game:GetService("RunService")
local TweenService = game:GetService("TweenService")
local UserInputService = game:GetService("UserInputService")

local Computer = {}

--> PRIVATE

local CameraThread
local CameraConnection
local FrontCameraConnection

local RootOffset = Vector3.new(0,0,1)
local MoveVector = Vector3.new(0,0,0)

local isHoldingRightClick = false

--> PUBLIC

function Computer:setIsHoldingRightClick(bool)
	isHoldingRightClick = bool
end

function Computer:SetupCamera(Camera,Character)
	
	Camera.CameraType = Enum.CameraType.Scriptable
	
	local RootPart = Character.HumanoidRootPart
	Camera.CFrame = CFrame.new(RootPart.CFrame.Position + Vector3.new(0,10,14),RootPart.CFrame.Position + RootOffset + MoveVector)	
	
	print("Setting Up Camera!")
	
end

function Computer:StartCamera(Camera,Character,Mouse)
	local RootPart
	
	CameraConnection = RunService.RenderStepped:Connect(function()
		
		RootPart = Character.HumanoidRootPart
		
		local Scale = 500
		local Center = Vector2.new(Camera.ViewportSize.X/2, Camera.ViewportSize.Y/2)
		local NewMoveVector = Vector3.new((Mouse.X-Center.X)/Scale,-(Mouse.Y-Center.Y)/Scale,0)
		
		if isHoldingRightClick then
			-- tween MoveVector to NewMoveVector
			print("Holding Right Click!")
			MoveVector = NewMoveVector
		else
			print("Not Holding Right Click!")
			MoveVector = Vector3.new(0,0,0)
		end
		
		Camera.CFrame = CFrame.new(RootPart.CFrame.Position + Vector3.new(0,10,14),RootPart.CFrame.Position + RootOffset + MoveVector)
			
	end)
	
end

function Computer:StopCamera()
	
	CameraConnection:Disconnect()
	
end


return Computer

I have a Server Script that handles requiring the module and whether right click is being held or not (with UserInputService).

The following code produces this:
https://gyazo.com/ee1dee17c32a27a15eec8837f1fd5c2d

As you can see, when I release holding right click, the camera snaps back to the default rotation.

What I want to accomplish is a smooth transition, but I am not sure on how I could do this.

2 Likes

I’d recommend using TweenService when you go to set the CFrame of the camera.

It’s quite easy to set this up:

local tween_info = {.1, Enum.EasingStyle.Linear} --//First index is the duration, second Is easing style
local property_goals = {CFrame = The_Camera_CFrame} --//Properties we want to tween on the instance, these are the target values to tween to.
local tween_object = game:GetService("TweenService"):Create(game.Workspace.CurrentCamera, tween_info, property_goals)

tween_object:Play() --Play the tween

The code above will smoothly tween the Camera’s CFrame value to the value we define it in the “property_goals” table. Only thing I might suggest is checking to see if the CFrame has changed before you run this, because of your RenderStep event running 60+ times per second, so that could cause some stutter effect if you use this (repeatedly running new tweens 60 times per second). There’s also a :Cancel() method you can use on the created tween, which is a nice bonus.

You can find more info here:TweenService | Documentation - Roblox Creator Hub

Hope this helps, if you need further clarification or help let me know :slight_smile:

I did think of TweenService and tried to implement it, but it did not work. I am confused on how I can have the tween run while the RenderStepped is firing every frame. I apologize if I am not making sense, it is a bit late.

1 Like

You could also try doing :Interpolate on the Camera object. It is deprecated, but still works and can work for the time being. I believe this method is a bit smoother when ran repeatedly; they override each other each time you call it I believe.

workspace.CurrentCamera:Interpolate(yourCFrame, CFrame.new(yourCFrame.lookVector), .2) --The number is the duration of the tween
1 Like

It’s like a camera in a game Little Nightmares