How would I go about making a FNAF (Five Nights at Freddys) Style Player Camera with ONLY screenGuis

[SeanStinksAtRoblox (Sean)]

The current system I have is with TweenService but this doesn’t work well that well at all, and only works half of the time.

now keep in my mind, I’m trying to replicate the style that FNAF 1 has (Not the perspective Shader, but the camera scrolling when you hover your mouse over a section of the office.)

Everything else seems to work pretty well, but this one thing is really throwing me off, and I just can’t seem to get what I’m looking for.

Any help is seriously appreciated, and If I could have a simple script for this then I would be more than grateful.

[mezz_inc (mezz)]

The way the original FNAF detected mouse scrolling was using invisible box areas.
I think you could probably replicate this using some frames and on enter events.

I imagine with the office picture, you can probably just move its position once the mouse enters the frame.

Here’s a really crude sketch I made in 10 seconds about how it kind of registers

I’ll come back once I have something working.

[SeanStinksAtRoblox (Sean)]

Whenever you get it working just reply to this

Thank you much dude!!

[mezz_inc (mezz)]

It’s all done. This is a basic local GUI I whipped up. It uses the original fnaf-style movement with how the mouse works

Obviously, this isn’t going to work on non-mouse devices, so please do take that into account!
The boxes are just there for representation, you can modify the transparency.

You can find my demonstration model here:

FNAF Style GUI - Roblox

Video:

2023 08 11 16 02 19

Script:

local RunService = game:GetService("RunService")

local MainFrame = script.Parent
local ThingTomove = MainFrame:WaitForChild("MovingImage")
local MoveMultiplier = 1
local CurrentMoveFrame = "None"

-- Values to stop moving the image
local ImageDeadUdim2Left = UDim2.new(0.7, 0, 0.5, 0)
local ImageDeadUdim2Right = UDim2.new(0.3, 0, 0.5, 0)

-- If the the mouse is somewhere on a move frame, move the direction specified

local function MoveImage(Number)
	local CurrentUD = ThingTomove.Position
	if CurrentUD.X.Scale+Number >= ImageDeadUdim2Left.X.Scale then
		return
	end
	
	if CurrentUD.X.Scale+Number <= ImageDeadUdim2Right.X.Scale then
		return
	end
	
	ThingTomove.Position = UDim2.new(
		CurrentUD.X.Scale + Number,
		CurrentUD.X.Offset,
		CurrentUD.Y.Scale,
		CurrentUD.X.Offset
	)
end

local function OnRenderStep()
	if CurrentMoveFrame == "Left" then
		MoveImage(0.002*MoveMultiplier)
	elseif CurrentMoveFrame == "Right" then
		MoveImage(-0.002*MoveMultiplier)
	end
end

-- Get the frame move speed and direction
local function SetFrame(FrameName)
	if string.find(FrameName, "Right") then
		CurrentMoveFrame = "Right"
	else
		CurrentMoveFrame = "Left"
	end
	
	if string.find(FrameName, "Fast") then
		MoveMultiplier = 2
	else
		MoveMultiplier = 1
	end
end

for _, Child in ipairs(MainFrame:GetChildren()) do
	if Child:IsA("Frame") then
		Child.MouseEnter:Connect(function(x,y)
			SetFrame(Child.Name)
		end)
		
		-- nasty conditional to not set the frame to none when moving fast
		Child.MouseLeave:Connect(function(x, y)		
			if x > 900 or x < 140 then
				if y < 590 then
					return
				end
			end

			CurrentMoveFrame = "None"
		end)
	end
end

RunService.RenderStepped:Connect(OnRenderStep)

[SeanStinksAtRoblox (Sean)]

Thank you much my guy, I’ll leave credit if you’d like.

[mezz_inc (mezz)]

Feel free to credit me or not, just make a cool project man
(also you can change that low quality image to a frame and put all your gui stuff in there, should work too)
local ThingTomove = MainFrame:WaitForChild("MovingImage")