Create a smooth camera tween from multiple points

Help and Feedback Scripting Support
#1

This is what I got so far

local function StartCameraMovement()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['2'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['3'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['4'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['5'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['6'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['7'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['8'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
	local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingStyle.Linear), {CFrame = CameraPoints['9'].CFrame})
	Tween:Play()
	Tween.Completed:Wait()
end

Problems I’m looking at are

  • The sharp turn between each point. I’d like for the camera to smoothly transition between each point.
  • Different distances from each point makes it impossible to get each tween timed right (closer the points are = quicker the camera moves) I basically want the camera to move a constant speed from each points till the end
  • As well as cleaning this up :grimacing: lot’s of it just repeats and doesn’t look too nice
9 Likes
#2

Hello,

I have no idea how would I go about the smooth transition but I could help you with the other 2 problems.

First of all, for the tween time, you would use the time formula t = s/v so probably something like this

(Camera.CFrame.p-CameraPoints["1"].CFrame.p).magnitude/speed

Which would get you the right tween time I believe.

For cleaning up the script I would implement for loop and implement the time thing, so something like this.

function startCameraMovement(speed)
	for i = 2,9 do
		if CameraPoints[tostring(i)] ~= nil then
			local Tween = TweenService:Create(Camera, TweenInfo.new((Camera.CFrame.p-CameraPoints[tostring(i)].CFrame.p).magnitude/speed, Enum.EasingStyle.Linear), {CFrame = CameraPoints[tostring(i)].CFrame})
			last = CameraPoints[tostring(i)].CFrame
			Tween:Play()
			Tween.Completed:Wait()
		end
	end
end

That’s everything I could help you with, if the code doesn’t work I’m sorry I wrote it in here just to give you an idea how would you go about making it.

Keep up the good work!

3 Likes
#3

Hi Ninjo, I can give you some advice regarding smooth transitions. In all of your Tween’s you will want to consider which EasingStyle to use from one of the EasingStyles that ROBLOX has on offer. You will also need to have a mix of EasingDirections to allow the camera to speed up and slow down.

Below is a static visual showing the speed that an item will travel at when using one of the various easingstyles:

image
image822Ă—616 94 KB

There is a great gif on that page which demonstrates both EasingStyle’s and EasingDirection at the same time, which you should check out.

In your example you are using purely the linear function, meaning that your camera will always feel janky when moving from one tween going at one speed to another, I believe a picture will show you why:
image
As you can see the points at which tweens connect are really sharp, and the change in speed is sudden, creating a poor viewing experience. Imagine a camera is attached to the graph and it’s focussing on the letter “X” the entire time, if it starts at the bottom and works it’s way up it’ll be jolting at the sharp corners. It should look like a train track, you wouldn’t want your train coming up against these sharp corners.

What you want to do is combine different EasingStyles and EasingDirections to create a nice, smooth curve. Here’s an example of a curve that would be more enjoyable to ride on:
image
Sorry for my poor paint skills but I hope this explains the point.

13 Likes
#4

change your easingstyles from Linear to something like Quad, Quart or Quint.
these have a nice, slow ease, and it can be applied to the beginning and end with easingdirection InOut

TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut)

feel free to experiment with other easingstyles too, they each have their own use.
(notice that linear goes in a straight path, while Quad/Quart/Quint slow down)

TweenInfo page: TweenInfo

4 Likes
#5

Sorry for the bump, but I have a potential solution. You could have a completely seperate part tweened using linear or some other easing style and then have another part (to which the camera is welded/fixed to) that is influenced by a AlignPosition and AlignOrientation constarints, each of which have their responsiveness set to 10. While this low responsiveness does make the camera drag behind the actually tweened part a bit, it basically blends all the boundaries between the tweens. This is coming off of my experience whith what i’ve worked so far.

2 Likes
#6

This script is a-okay, all you need to do is to change the EasingDirection, plus the EasingStyle. Here is what you can put to make your camera movement look smooth

local Tween = TweenService:Create(Camera, TweenInfo.new(2, Enum.EasingDirection.InOut, Enum.EasingStyle.Quad), {CFrame = CameraPoints['#'].CFrame})
	Tween:Play()

Test it out and tell me if there is a problem!

You can also check this cheat sheet about EasingStyles:

1 Like