← Blog Home

# The First Person Element Of A First Person Shooter

In this post we will be talking about creating our very own filtering enabled friendly first person shooter (FPS) game. I do want to make clear though that I won't be covering how to actually make the weapon shoot in this article. All we are going to be covering is the visuals meaning having the character aim down sights, look up and down, etc. Maybe we'll talk about shooting another day.

## Things to take note of

FPSs can get messy. Our goal of course is to keep things as straightforward as possible, but that can be difficult when we're dealing with the client server model. This is especially true for FPS games because in order to keep bandwidth low and games lag free a lot of tricks are used to trick the player. We'll talk about what some of those tricks are later on, but to make things simple we'll start off by focusing purely on the client and then we'll move to the server.

## Client

The only thing I'm going into this with is a simple weapon I had a friend make me. You should take note of a few small invisible parts that I've put in the model. The part Handle will be used to offset the weapon from our view and the parts Right and Left will be used to mark hand placement later.

### Setting up the rig

When a player is fully zoomed into first person mode any BaseParts in their character model are invisible to them. This includes their arms, head, any non-tools, etc. To get around this we will create a view model that includes arms and a weapon. This view model will not actually be attached to the character, but rather to the camera.

I created the viewmodel by adjusting the scale properties of my character for skinnier arms, creating a copy of it, and then removing everything inside for the arms, the upper torso, and the head (and the connecting joints). I then made sure that the parts were all set to smooth plastic and the head and upper torso had their transparency set to 1.

### Attaching the rig to the camera

Now that we have our view model we need to attach it to the camera. This is relatively simple because in first person the head and camera have the CFrame. Thus, all we need to do is write an update loop that places our view model's head right where the camera is. We'll also be sure to remove the view model when the player dies.

local camera = game.Workspace.CurrentCamera;

local viewModel = game.ReplicatedStorage:WaitForChild("viewModel"):Clone();

local function onDied()
viewModel.Parent = nil;
end

local function onUpdate(dt)
end

humanoid.Died:Connect(onDied);
game:GetService("RunService").RenderStepped:Connect(onUpdate);


### Attaching the weapon to the rig

We can also take this opportunity to use a joint to attach the weapon to the rig's head which will ensure it stays relative to the camera as we rotate. You will have to play around with the C0 value to properly offset the weapon. You will likely have to do this for every unique weapon you use due to varying sizes and what looks best in relation to your camera.

local repWeapon = game.ReplicatedStorage:WaitForChild("M249");
local weapon = repWeapon:Clone();

weapon.Parent = viewModel;
viewModel.Parent = camera;

local joint = Instance.new("Motor6D");
joint.C0 = CFrame.new(1, -1.5, -2); -- what I found fit best
joint.Part1 = weapon.Handle;


### Aiming down sights

To get our weapon to aim down the sights we will add a small invisible part to our weapon called Aim. We will use this part as a reference to where the weapon should be attached to the head when the player is aiming. Since we adjusted the C0 value earlier we will make this adjustment in it's entirety with C1 to avoid overlap.

To start we use the basic equality of joints we can figure out how to pick C1 given that weapon.Handle = joint.Part1 and we're setting joint.Part1.CFrame = camera.CFrame.

joint.Part0.CFrame * joint.C0 == joint.Part1.CFrame * joint.C1
joint.C1 = joint.Part1.CFrame:inverse() * joint.Part0.CFrame * joint.C0
-- recall though that joint.Part0.CFrame == camera.CFrame, thus:
joint.C1 = joint.C0


Of course we want to further adjust this so the camera focuses on the Aim part, not Handle. So using inverses we can find the offset that would be needed to move from the Handle.CFrame to the Aim.CFrame.

Handle.CFrame * offset = Aim.CFrame
offset = Handle.CFrame:inverse() * Aim.CFrame;


Putting this all together we get:

local aimCount = 0;
local offset = weapon.Handle.CFrame:inverse() * weapon.Aim.CFrame;

local function aimDownSights(aiming)
local start = joint.C1;
local goal = aiming and joint.C0 * offset or CFrame.new();

aimCount = aimCount + 1;
local current = aimCount;
for t = 0, 101, 10 do
if (current ~= aimCount) then break; end
game:GetService("RunService").RenderStepped:Wait();
joint.C1 = start:Lerp(goal, t/100);
end
end

local function onInputBegan(input, process)
if (process) then return; end
if (input.UserInputType == Enum.UserInputType.MouseButton2) then
aimDownSights(true);
end
end

local function onInputEnded(input, process)
if (process) then return; end
if (input.UserInputType == Enum.UserInputType.MouseButton2) then
aimDownSights(false);
end
end

game:GetService("UserInputService").InputBegan:Connect(onInputBegan);
game:GetService("UserInputService").InputEnded:Connect(onInputEnded);


### Arm placement

Now that we have the weapon in place we need to attach the arms to it by using the shoulder and elbow joints. We could manually figure out these values, but to keep things interesting and hassle free for other weapons we will use the Right and Left parts to calculate a C1 for our shoulder joints.

local function updateArm(key)
-- get shoulder we are rotating
local shoulder = viewModel[key.."UpperArm"][key.."Shoulder"];
-- calculate worldspace arm cframe from Right or Left part in the weapon model
local cf = weapon[key].CFrame * CFrame.Angles(math.pi/2, 0, 0) * CFrame.new(0, 1.5, 0);
-- update the C1 value needed to for the arm to be at cf (do this by rearranging the joint equality from before)
shoulder.C1 = cf:inverse() * shoulder.Part0.CFrame * shoulder.C0;
end

local function onUpdate(dt)
-- update every frame so the arms stay in place when the player aims down sights
updateArm("Right");
updateArm("Left");
end


## Server

So that takes care of the purely client side of things, from here on out everything we are dealing with is either going to be purely on the server, or a mix of the server and client.

## Replicating weapon movement

So far things look good from the player perspective, but if we run a quick multiplayer game we'll notice that none of the hard work we just did is visible to the other players!

Here's where one of those tricks I talked about earlier is going to come into play. Since we can't see our actual character in first person mode we're going to use it to replicate all our gun movements. This is pretty handy because what we replicate will have a slight delay from any player input and because we can't see it nobody will be any the wiser.

The first thing we will want to replicate is the player looking up and down. We'll do this by finding out the vertical angle the player's looking at, sending it to the server, and having the server rotate the waist and neck joints by half the angle to spread out the rotation.

-- in server script
local remoteEvents = game.ReplicatedStorage:WaitForChild("RemoteEvents");

local neckC0 = CFrame.new(0, 0.8, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
local waistC0 = CFrame.new(0, 0.2, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);

remoteEvents.tiltAt.OnServerEvent:Connect(function(player, theta)
local waist = player.Character.UpperTorso.Waist;

neck.C0 = neckC0 * CFrame.fromEulerAnglesYXZ(theta*0.5, 0, 0);
waist.C0 = waistC0 * CFrame.fromEulerAnglesYXZ(theta*0.5, 0, 0);
end)

-- back in the client script
local remoteEvents = game.ReplicatedStorage:WaitForChild("RemoteEvents");

local function onUpdate(dt)
updateArm("Right");
updateArm("Left");
remoteEvents.tiltAt:FireServer(math.asin(camera.CFrame.LookVector.y));
end


That's looking a bit better!

In order to get the character to hold the weapon we'll use a Motor6D to connect the Handle to the RightHand.

-- in server script
remoteEvents.setup.OnServerEvent:Connect(function(player, weapon)
local weapon = weapon:Clone();
local joint = Instance.new("Motor6D")
joint.Part0 = player.Character.RightHand;
joint.Part1 = weapon.Handle;
joint.Parent = weapon.Handle;
weapon.Parent = player.Character;
end)

-- back in the client script
remoteEvents.setup:FireServer(repWeapon);


This will allow us to create an animation for when the player is just holding the weapon, and an animation when they player is aiming the weapon.

Using animations for this purpose is nice for two reasons. The first is that animations will automatically replicate, thus we don't need to worry about a RemoteEvent. The second is that by default animations will interpolate between each other which means we don't have to worry about smooth transitions.

-- client
wait();
local lastAnim = holdAnim;
lastAnim:Play();

local function aimDownSights(aiming)
local start = joint.C1;
local goal = aiming and joint.C0 * offset or CFrame.new();

lastAnim:Stop();
lastAnim = aiming and aimAnim or holdAnim;
lastAnim:Play();

aimCount = aimCount + 1;
local current = aimCount;
for t = 0, 101, 10 do
if (current ~= aimCount) then break; end
game:GetService("RunService").RenderStepped:Wait();
joint.C1 = start:Lerp(goal, t/100);
end
end


The one downside to animations is that Roblox doesn't like users sharing them. As a result you'll notice that if you load up the place I linked at the end of the post that the animations won't load. As a result if you are going to use my exact animations then I've saved them in a dummy for use with the animation editor. You'll have to load them in and export them to your own profile. If you do that remember to change the animation IDs.

The last thing we need to do is tilt the arms. Earlier we only applied the half the vertical tilt to the upper torso which is carried over to the arms, but we want the full rotation in the arms. This is easy enough to add if we just adust the tiltAt remove event.

local neckC0 = CFrame.new(0, 0.8, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
local waistC0 = CFrame.new(0, 0.2, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
local rShoulderC0 = CFrame.new(1, 0.5, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
local lShoulderC0 = CFrame.new(-1, 0.5, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);

remoteEvents.tiltAt.OnServerEvent:Connect(function(player, theta)
local waist = player.Character.UpperTorso.Waist;
local rShoulder = player.Character.RightUpperArm.RightShoulder;
local lShoulder = player.Character.LeftUpperArm.LeftShoulder;

neck.C0 = neckC0 * CFrame.fromEulerAnglesYXZ(theta*0.5, 0, 0);
waist.C0 = waistC0 * CFrame.fromEulerAnglesYXZ(theta*0.5, 0, 0);
rShoulder.C0 = rShoulderC0 * CFrame.fromEulerAnglesYXZ(theta*0.5, 0, 0);
lShoulder.C0 = lShoulderC0 * CFrame.fromEulerAnglesYXZ(theta*0.5, 0, 0);
end)


## Conclusion

That about sums up the basics of the first person element of an FPS system. Hopefully having read through this post you can start to see how you might add onto it. For your convince I made the place file I created while writing this post uncopylocked. You can find the place here.

Posted in Scripting Tips

### Commentary

Zafirua says: August 6, 2018
Yay! Ego is Back!
boatbomber says: August 6, 2018
Why do you do theta*0.5 instead of theta/2? Is it more efficient? Why so?
EgoMoose says: August 6, 2018
@boatbomber I have been told that multiplication is faster than division, but I didn't choose to multiply b/c it was more efficient, I just did it out of preference/habit. Nothing wrong with dividing by 2.
crypt100 says: August 6, 2018
If only I could understand this
lucas200206 says: August 6, 2018
Wouldn't sending server updates every render step end up using a decent amount of traffic (on the server and on the client) esp. on big servers?
EgoMoose says: August 6, 2018
@lucas200206 Thank you for pointing that out! I have updated the blog to address this. I'm just waiting for evaera to approve the changes.
greenhamster1 says: August 8, 2018
I see all of your code, and understand a large majority of it, but what I don't understand is, how do you plan on implementing smooth animations when using the roblox animation plugin?
lunatic5 says: August 10, 2018
I'm having some trouble with the "Attaching the weapon to the rig" step. My gun isn't rotated properly and for some reason causes my character to be pushed through the floor of my map. Any idea why this would happen?
greenhamster1 says: August 10, 2018
@lunatic5, I had the same problem. I think it had to do with you having a humanoid in the "Fake Arm" model. And you have to make the head in the fake model after that can collide = false
lunatic5 says: August 10, 2018
@greenhamster1 Oh. I'll try that. Thanks.
lunatic5 says: August 10, 2018
@greenhamster1 Still running into the problem. Any other ideas?
greenhamster1 says: August 12, 2018
@lunatic5 I am guessing that you glitching has something to do with either a humanoid in the model, (humanoids are confusing ), or you having some part of your model anchored and can collide, making you fall through the floor.
WillieTehWierdo200 says: September 5, 2018
Make sure that your viewModel is anchored! If you don't anchor it, the resulting CFrame of the viewModel won't align correctly with your Aim part. In my case, I just anchored viewModel.Head, and it worked fine.
WillieTehWierdo200 says: September 5, 2018
To make your weapon "lag" behind the camera a little bit when moving around, see this Paste: https://pastebin.com/Rr3XB3XP
MightyMooseBoy1 says: December 28, 2018
can this gun shoot? I mean is the shooting ability in the script?
LazieWeirdo says: January 21, 2019
This is great for my game! thanks!
Bryant050 says: January 31, 2019
The arm attachment part isn't working for me
ArtyomAL3X says: March 9, 2019
EgoMoose; best guy who is allowed to do blogposts.
tohlijing says: March 11, 2019
can u make a video anout this?
superxcarlox2 says: April 26, 2019
Hey mate,This is perfect,But a question,How would i get to give it a reload animation too in first and third person,Also giving it a cooldown when firing?It would save my game idea.
Dalbertjdplayz says: May 21, 2019
How can I make reload lerps
ArtyomAL3X says: July 1, 2019
Seems to not work for me.
onebeets says: December 31, 2019
Where exactly should I put the script? StarterPlayer?
TheRealPotatoChips says: February 5, 2020
Ièm from the future
Historical_pilot says: February 16, 2020
Someone make a video of this if you figure it out.
NiroTurtle says: March 27, 2020
Alright, I have a gun script.. Now all I have to do is put that into this script. Shouldn't be too hard.
tim_copperyt says: May 12, 2020
how about fist and third person cams?
Block_manvn says: May 20, 2020
Finally, I now can understand more about Motor6D and CFrame stuff. Thanks EgoMoose :D *this comment is from da future and i am a robot. beep boop
XDRalphAnimator says: June 4, 2020
where should i put the viewmodel script then? sorry about that, i'm barely new at scripting
ABHI1290 says: July 20, 2020
This is awesome even in 2020! I had to change a lot of stuff for customization, but this gave me a hold of the basic concept!
aaronjisDev1 says: July 29, 2020
I'm Confused. The first picture doesn't tell you where to put handle left or right. Plus the first script doesn't work or i'm putting in the wrong place. You didn't explain where the script goes. I'm very very stuck.
krynp says: August 22, 2020
Nice
damger9 says: August 28, 2020
This doesn't work for me, perhaps i am putting this in the wrong place?
GoBlueJaysYouRock says: September 5, 2020
how would we make shooting animations on the clients side?
smaug1678 says: September 11, 2020
worst thing i have ever tried nothing works with it
ProjectInfiniti says: September 22, 2020
for people that are confused, you put the script in StarterCharacter this is a great tutorial Poeple that want to implement shooting could hook up some bullets to Mouse.Button1Down or use InputService from Velocity