A hill model has been added into the kit, nothing super big
Today I will show you how to make your own 2D game. This tutorial will cover Movement/Camera scripts and how to make your 2D game look good (Skip to the end for game kit!).
Step 1: The Camera
The default camera angle on Roblox can be changed by a player, however we want it to be still in a certain position following the player as they move about. To start, create a local script in StarterPlayerScripts and open it.
Now, You have a clear space to write your script. (MAKE SURE ITS IN THE RIGHT PLACE AND A LOCALSCRIPT)
lets start the script by call the player and Camera Variables.
local player = game.Players.LocalPlayer
local camera = workspace.CurrentCamera
Now that we did that, we need to add some other stuff after it. (I forgot what it does but I’m pretty sure it finds the player)
player.CharacterAdded:Wait()
player.Character:WaitForChild("HumanoidRootPart")
Note: The higher the FOV the further the player will be from the screen
(recommended 40-70 FOV)
Then, lets get some of our camera basics such as what the FOV will be and who it will effect.
camera.CameraSubject = player.Character.HumanoidRootPart
camera.CameraType = Enum.CameraType.Attach
camera.FieldOfView = 40
After that, we need to call the Run Service with this command
local RunService = game:GetService("RunService")
finally, the function that actually makes it follow the player…
local function onUpdate()
if player.Character and player.Character:FindFirstChild("HumanoidRootPart") then
camera.CFrame = CFrame.new(player.Character.HumanoidRootPart.Position) * CFrame.new(0,0,30)
end
end
RunService:BindToRenderStep("Camera", Enum.RenderPriority.Camera.Value, onUpdate)
Your script should now look like this
local player = game.Players.LocalPlayer
local camera = workspace.CurrentCamera
player.CharacterAdded:Wait()
player.Character:WaitForChild("HumanoidRootPart")
camera.CameraSubject = player.Character.HumanoidRootPart
camera.CameraType = Enum.CameraType.Attach
camera.FieldOfView = 40
local RunService = game:GetService("RunService")
local function onUpdate()
if player.Character and player.Character:FindFirstChild("HumanoidRootPart") then
camera.CFrame = CFrame.new(player.Character.HumanoidRootPart.Position) * CFrame.new(0,0,30)
end
end
RunService:BindToRenderStep("Camera", Enum.RenderPriority.Camera.Value, onUpdate)
name the script “CameraScript”.
Now the camera angle should be fixed in a certain Position following the player, but movement will still not be correct.
Step 2: 2D Movement
2D movement is how the player will move. basically the up arrow jumps, down does nothing, and left and right go forward and back. This is pretty hard to explain so I’m gonna sum it up by just giving you the script.
local player = game.Players.LocalPlayer
local RunService = game:GetService("RunService")
local ContextActionService = game:GetService("ContextActionService")
local jumping = false
local leftValue, rightValue = 0, 0
local function onLeft(actionName, inputState)
if inputState == Enum.UserInputState.Begin then
leftValue = 1
elseif inputState == Enum.UserInputState.End then
leftValue = 0
end
end
local function onRight(actionName, inputState)
if inputState == Enum.UserInputState.Begin then
rightValue = 1
elseif inputState == Enum.UserInputState.End then
rightValue = 0
end
end
local function onJump(actionName, inputState)
if inputState == Enum.UserInputState.Begin then
jumping = true
elseif inputState == Enum.UserInputState.End then
jumping = false
end
end
local function onUpdate()
if player.Character and player.Character:FindFirstChild("Humanoid") then
if jumping then
player.Character.Humanoid.Jump = true
end
local moveDirection = rightValue - leftValue
player.Character.Humanoid:Move(Vector3.new(moveDirection,0,0), false)
end
end
RunService:BindToRenderStep("Control", Enum.RenderPriority.Input.Value, onUpdate)
ContextActionService:BindAction("Left", onLeft, true, "a", Enum.KeyCode.Left, Enum.KeyCode.DPadLeft)
ContextActionService:BindAction("Right", onRight, true, "d", Enum.KeyCode.Right, Enum.KeyCode.DPadRight)
ContextActionService:BindAction("Jump", onJump, true, "w", Enum.KeyCode.Space, Enum.KeyCode.Up, Enum.KeyCode.DPadUp, Enum.KeyCode.ButtonA)
Make sure to name the script “MovementScript” so you can identify it.
Step 3: Making It Look Good
Okay, first when you make a 2D game on Roblox, make sure the map is going in the right direction. Often times it doesn’t need to be super detailed to look good, take this for example.
A simple rock pattern, then grass and dirt layers, if it really needed more detail, you can easily add bone models under the stone. Some simple trees and a Zombie NPC obstacle work fine. (Smooth Plastic often goes good for a simple 2D game design)
Some areas of the map have cool things such as a dungeons or jump pad. That really is all you need in terms of decorations, just make sure it fits the style of your game (For example if I was making a 2D boxing game I wouldn’t be using a Zombie).
Moving on, after you add an area of your map, make sure to put barriers so player’s don’t get pushed off it if they run into something. Close the barriers till they can only fit the player and make any decorations in their path “CanCollide = false”.
I would recommend putting in higher speed and jump values if it is a parkour game (default is 50 jump and 16 walk speed).
I also left some of the models from this 2D game I made in a kit along with the tutorial scripts. Feel free to take it! (Make sure to anchor it I forgot lol)
I hope this helps you with your 2D game. These things take a bit of time to make so speeding up the process for newer developers is always nice!
Okay so I’m looking at this a bit after publishing and I would like to say thank you all for using this tutorial/resource!