Help With 3D Interactive Shop Camera Lerping

Hello, I am currently working on a 3D interactive shop that the player can navigate through, purchase weapons and equip them. I am tangled up in this code and completely lost.

What I want this code to do is move over to the item to the right. Each item has its own camera, named CamPart1, CamPart2, CamPart3, etc.
I would like to be able to make it so that each time the player clicks to the right, the camera numbers both go up so it can lerp between them. Example: CamPart1 lerps to CamPart 2, CamPart2 to CamPart3, etc.

script.Parent.RightArrow.MouseButton1Click:Connect(function()
ClickSound:Play()
for Num = 0, 1, 0.05 do
	Camera.CFrame = workspace.CamName..StartCam.CFrame:Lerp(workspace.CamName..EndCam.CFrame,Num)
	wait()
if StartCam == EndCam-1 then
	StartCam = EndCam + 1
print(StartCam)
	end
end

end)

also for some context on the local values
local CamName = “CamPart”
local StartCam = 1
local EndCam = StartCam + 1

Pretty much, I am confused with what I have created and I need help solving this issue. (What is the best way to do it?)

Edit: Forgot to add, you can interrupt the lerping so it makes it look “glitchy” if you spam it, opposed to a smooth transition from camera to camera.

I think this would be easier if you unpacked what you were doing a bit. Like, implement functionality for the right/left arrows to only increment the target camera variable, and then call one function that’ll handle tweening the camera to the current selected camera. Here’s how that might look:

local player_camera = workspace.CurrentCamera
local cameras = workspace.Cameras --//Also store all your cameras in a single model
local camera_count = #cameras:GetChildren() --//Count up all the cameras
local current_camera = 1 --//Current camera we're looking at
local is_tweening

local tween_service = game:GetService("TweenService")
local tween_info = TweenInfo.new(2, Enum.EasingStyle.Linear)

local function Tween_Camera() --//Tween the camera to the selected camera
is_tweening = true --//Prevent other tweens from running
local target_CF = cameras["Camera"..current_camera].CFrame

local tween = tween_service:Create(player_camera, tween_info, {CFrame = target_CF})
local listener

listener = tween.Completed:Connect(function() 
is_tweening = false
listener:Disconnect()
end)

tween:Play()
end

script.Parent.RightArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera + 1 > camera_count and 1) or camera_count + 1
Tween_Camera()
end
end)

script.Parent.RightArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera - 1 <= 0 and camera_count) or current_camera - 1
Tween_Camera()
end
end)
1 Like

How exactly can I implement this into my code? I am not very good at scripting and this is sort of a learning project for me.

local Player = game.Players.LocalPlayer

local Character = Player.Character or Player.CharacterAdded:Wait()
local Camera = workspace.CurrentCamera
local CloseButton = script.Parent.LoadoutClose
local LOButton = script.Parent.Main.LoadoutButton
local ClickSound = script.Parent.Click
local HoverSound = script.Parent.Hover
local ShopSound = script.Parent.Shop

LOButton.MouseEnter:Connect(function()
HoverSound:Play()
end)

LOButton.MouseButton1Click:Connect(function()
ClickSound:Play()
CloseButton.Visible = true
script.Parent.Main.Visible = false
ShopSound:Play()
script.Parent.LeftArrow.Visible = true
script.Parent.RightArrow.Visible = true

repeat wait()
	Camera.CameraType = Enum.CameraType.Scriptable
until Camera.CameraType == Enum.CameraType.Scriptable

Camera.CFrame = workspace.CamPart1.CFrame

end)

CloseButton.MouseEnter:Connect(function()
HoverSound:Play()
end)

CloseButton.MouseButton1Click:Connect(function()
Camera.CameraType = Enum.CameraType.Custom
CloseButton.Visible = false
ShopSound:Stop()
ClickSound:Play()
script.Parent.LeftArrow.Visible = false
script.Parent.RightArrow.Visible = false
script.Parent.Main.Visible = true
end)

script.Parent.Main.PlayButton.MouseEnter:Connect(function()
HoverSound:Play()
end)

script.Parent.Main.PlayButton.MouseButton1Click:Connect(function()
script.Parent.Main.Visible = false
ClickSound:Play()
end)

script.Parent.LeftArrow.MouseEnter:Connect(function()
HoverSound:Play()
end)

script.Parent.LeftArrow.MouseButton1Click:Connect(function()
ClickSound:Play()
end)

script.Parent.RightArrow.MouseEnter:Connect(function()
HoverSound:Play()
end)

script.Parent.RightArrow.MouseButton1Click:Connect(function()
ClickSound:Play()
end)

This is the full GuiHandler local script. Unfortunately, the preformatted text doesn’t seem to like me.
I am going to include a snippet of the explorer tab as well.

basically, all of the GUI’s work is under the GuiHandler right now (script above). I have word for word copy and pasted your script into a new script to potentially have a more organized system. Obviously, copy and pasting a script into my system isn’t gonna work most likely, just needs a little bit of fixing up to be able to work together.

Also, I removed all of the code that had to do with lerping but I still have the player’s camera change to camera 1’s CFrame and they are able to exit with the closing button.

My question: How can I get this to work with my current script?

upclose StarterGui
image

upclose Workspace (just the camera model)
image

Did this so you can see this stuff better.

The code I gave you should work as a standalone script (you’d need to plug in a few variables obviously.) My advice would be to start with the code I gave you, then add other functionality you need apart from the camera tweening.

If the script itself isn’t working, I can check it out some more.

1 Like

Your script seems to not work, and I am not getting any errors related to your script in the output. I have completely removed anything camera related from the GUI handler, meaning all that’s left is toggling visible for buttons and frames and playing sounds, which shouldn’t be a problem. I am a complete noob with this type of stuff, however, so I have no idea how to help troubleshoot your script.
Thanks for your help so far.

1 Like

So, I did a little work of my own, and I found that your camera’s names are different from mine, which I have changed to yours. After adding a few things back, when you click the button it will bring you to the shop and you can click the buttons and everything runs smoothly, just backwards. When you click the button to move to the right, it takes you all the way to the end of the weapons, then it will keep going to the left until it gets back to the first item then goes back to the last. I can just use this for the left arrows, so that’s fine, but how can I make it so it works for the right arrows?

Disregard, I fixed that as well. Changed the order of the adding and subtracting of camera numbers. Thank you @C_Sharper!

Code that worked for me:

local player_camera = workspace.CurrentCamera
local cameras = workspace.Cameras
local camera_count = #cameras:GetChildren()
local current_camera = 1
local is_tweening

local tween_service = game:GetService("TweenService")
local tween_info = TweenInfo.new(1, Enum.EasingStyle.Linear)

local function Tween_Camera()
is_tweening = true
local target_CF = cameras["Camera"..current_camera].CFrame

local tween = tween_service:Create(player_camera, tween_info, {CFrame = target_CF})
local listener

listener = tween.Completed:Connect(function() 
is_tweening = false
listener:Disconnect()
end)

tween:Play()
end

script.Parent.LeftArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera + 1 > camera_count and 1) or camera_count + 1
Tween_Camera()
end
end)

script.Parent.LeftArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera - 1 <= 0 and camera_count) or current_camera - 1
Tween_Camera()
end
end)

script.Parent.RightArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera - 1 > camera_count and 1) or camera_count - 1
Tween_Camera()
end
end)

script.Parent.RightArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera + 1 <= 0 and camera_count) or current_camera + 1
Tween_Camera()
end
end)`
1 Like

Almost had it…

Got to make sure that the camera is existing, otherwise the script will keep looking for more cameras, until it breaks. In this case, I have 3 cameras set up and once it gets to where camera 4 should be it breaks. So I guess make sure it isn’t nil? I will test.
@C_Sharper

This logic doesn’t look quite right.

script.Parent.RightArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera - 1 <= 0 and camera_count) or camera_count - 1
Tween_Camera()
end
end)

script.Parent.RightArrow.Activated:Connect(function()
if not is_tweening then
current_camera = (current_camera + 1 > camera_count and 1) or current_camera + 1
Tween_Camera()
end
end)`

Try that

This worked, I figured it out and then I saw this reply, unfortunate lol.
If you want to check it out for yourself here is the game. The loadout button is the one that opens it.

https://www.roblox.com/games/3725183573/epic-fighting-simulator

1 Like