PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

Creating a Top-Down Camera

Creating a Top-Down Camera

Prerequisites Have completed Arcade Action - Adding Player Controls
Lesson Time 5 - 10 minutes
Optional Handouts N/A
Learning Objectives
  • Further reinforce learning about local and server scripts by creating a local script for a camera
  • Create a top down camera that follows the player
  • Use RunService, a set of functions related to time, to create smooth camera tracking
  • Top-down cameras allow players to see more of the game game at once. This gives players more time to react to incoming enemies.

    Script or LocalScript

    Each player will need their own camera, and the camera needs to run smoothly without lag. In this case, a LocalScript is the right choice for script type because players should only see their own camera, and you don’t want cameras to be laggy.

    1. In StarterPlayer > StarterPlayerScripts add a LocalScript.

    Set Up the Camera Script

    1. Name the LocalScript CameraScript and add a comment at the top.
    2. Create variables for the camera and the player that can be used throughout the script.
    --Creates a top-down camera for each player. Should be used as a     LocalScript
    
    -- Variables for the camera and player
    local camera = workspace.CurrentCamera
    local player = game.Players.LocalPlayer
    
    1. Under the camera and player variables, add a variable named CAMERA_OFFSET that will control how far away the camera is from the player.
    -- Constant variable used to set the camera’s offset from the player
    local CAMERA_OFFSET = Vector3.new(-1,90,0)
    
    "Constant" Variables

    The CAMERA_OFFSET variable is written in all caps to help set it apart as a constant variable. Constants are variables that should stay the same throughout the entirety of the script, even when the program is run.


    Scripting the Camera Movement

    The camera needs to follow the player smoothly around the arena. If the camera is choppy, players will think your game is laggy. To make the camera smooth, you’ll create a function called onRenderStep that runs 60 times every second. Since the onRenderStep happens so often, the game will update often to move the camera smoothly. To use onRenderStep, the script needs to access RunService, which gives you functions related to time.

    Set up Variables and the Function

    1. To add RunService, at the top of CameraScript, above the camera and player variables,
      type: local RunService = game:GetService("RunService")
    --Get service needed for events used in this script
    local RunService = game:GetService("RunService")	
    
    -- Variables for the camera and player
    local camera = workspace.CurrentCamera
    local player = game.Players.LocalPlayer
    
    -- Constant variable used to set the camera’s offset from the player
    local CAMERA_OFFSET = Vector3.new(-1,90,0)
    
    1. Under CAMERA_OFFSET, add the following code so the script can make changes to the camera.
    camera.CameraType = Enum.CameraType.Scriptable
    
    1. Under CAMERA_OFFSET, add the following code so the script can make changes to the camera.
    -- Enables the camera to do what this script says
    camera.CameraType = Enum.CameraType.Scriptable
    

    Move the Player Camera

    1. On the next line, create a function named onRenderStep() to update the camera about every 60 seconds.
    camera.CameraType = Enum.CameraType.Scriptable
    
    local function onRenderStep()
     
    end
    
    1. In the function, create an if then statement to see if a new character has loaded into the game.
    camera.CameraType = Enum.CameraType.Scriptable
    
    local function onRenderStep()
     
    end
    
    1. Within the if statement, add the following variables to get the player’s position, and the new camera position.
    local function onRenderStep()
    	-- Check if the player's character has spawned
    	if player.Character then
    
    	end
    end
    
    1. Within the if statement, add the following variables to get the player’s position, and the new camera position.
    local function onRenderStep()
    	-- Check if the player's character has spawned
    	if Player.Character then
    		local playerPosition = player.Character.HumanoidRootPart.Position
    		local cameraPosition = playerPosition + CAMERA_OFFSET
    	end
    end
    
    1. After setting the camera position, set the camera’s CoordinateFrame to the new camera position and have it always point towards the playerPosition.
    local function onRenderStep()
    	-- Check the player's character has spawned
    	if player.Character then
    		local playerPosition = player.Character.HumanoidRootPart.Position
    		local cameraPosition = playerPosition + CAMERA_OFFSET
    		
    		-- make the camera follow the player
    		camera.CoordinateFrame = CFrame.new(cameraPosition, playerPosition)
    	end
    end
    
    1. At the bottom of CameraScript, add the following code to connect onRenderStep to RunService.
    RunService:BindToRenderStep("Camera", Enum.RenderPriority.Camera.Value, onRenderStep)
    
    1. Playtest the game. The camera should now be looking down on the player.
    --Creates a top-down camera for each player. Should be used as a     LocalScript
    
    --Get service needed for events used in this script
    local RunService = game:GetService("RunService")	
    
    -- Variables for the camera and player
    local camera = workspace.CurrentCamera
    local player = game.Players.LocalPlayer
    
    -- Constant variable used to set the camera’s offset from the player
    local CAMERA_OFFSET = Vector3.new(-1,90,0)
    
    -- Enables the camera to do what this script says
    camera.CameraType = Enum.CameraType.Scriptable
    
    -- Called every time the screen refreshes
    local function onRenderStep()
    	-- Check the player's character has spawned
    	if player.Character then
    		local playerPosition = player.Character.HumanoidRootPart.Position
    		local cameraPosition = playerPosition + CAMERA_OFFSET
    		
    		-- make the camera follow the player
    		camera.CoordinateFrame = CFrame.new(cameraPosition, playerPosition)
    	end
    end
    
    RunService:BindToRenderStep("Camera", Enum.RenderPriority.Camera.Value, onRenderStep)


    These documents are licensed by Roblox Corporation under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Roblox, Powering Imagination, and Robux are trademarks of Roblox Corporation, registered in the United States and other countries.


    Previous Adding Player Controls - Client vs Server Next Spawning Enemies