This tutorial was put together by our community member shawnBuilds for Rosebud AI, the AI-powered game creation platform. Check out shawn’s games here, and join our Discord to find more tutorials and connect with other creators!
In this tutorial, we'll use the new 3D template to make your very first FPS game. By the end, you'll be blasting bouncing balls with a cool gun on Rosebud!
I'll show you how simple it can be to get your own shooter up and running, just like the one I made here.
You don’t need any coding skills to build this game on Rosebud. Instead, you can complete each step in just minutes with my messages to Rosie. There's even a demo game at every step, so you can check your progress on Rosebud right away!
Step 1: Set Up the Game
Let's set up your game! Open this 3D Blank Project and click 'Remix' to make your version.
Next, let's make the game a little less chaotic. We'll get rid of these bouncing balls and add walls that will help you get a feel for the space when you look around.
Message Rosie:
Stop spawning bouncing balls in the game
Create gray walls at the edges of the ground
After you run the new code from Rosie, you should see the game environment with the bouncing balls removed and gray walls at the edges of the ground.
Checkpoint
How to Build an FPS - Example Step 1
Check your game to make sure that:
• The bouncing balls are no longer spawning.
• Gray walls are positioned correctly at the edges of the ground.
Step 2: Switch to First-Person View
In this step, we’re going to switch the camera to a first-person view. In games, the camera is like your point of view or your eyes. We'll set it up so you see the world as if you were actually standing inside it, giving you the feel of being right in the middle of the action.
Message Rosie:
Create a first person view, so it seems like the user is standing still on the ground. The user should not be able to move or look around.
After you run the new code from Rosie, you should now have a first-person view of the room, as if you're standing still on the ground.
Checkpoint
How to Build an FPS - Example Step 2
Check your game to make sure that:
• The camera is in first-person view.
• You can't move or look around at this stage.
Step 3: Look Side to Side
First, we'll set it up so the game knows when you are moving the mouse left or right.
Message Rosie:
Let's add a feature so you can look left and right with the mouse. First, let's set it up so we can detect when the mouse is moving. We'll make it so clicking the screen locks the mouse pointer, but we won't actually rotate the camera just yet.
After you run the new code from Rosie, click on the screen to lock the mouse pointer (you’ll see the pointer disappears). Now, when you move the mouse left and right, the game will start tracking those movements.
Here's what it looks like if you could see the pointer:
.gif)
Now that the game knows the mouse is moving, let’s start looking around! To do that, we’ll need to rotate the camera, which is just like turning your head to look left or right.
Message Rosie:
Let's smoothly rotate the camera for side-to-side movement of the mouse only (to keep things simple).
After you run the new code from Rosie, move the mouse left to right and watch how smoothly it works. Already feels like you’re really there!
Checkpoint
How to Build an FPS - Example Step 3
Check your game to make sure that:
• The mouse pointer disappears when you click on the game screen.
• You can look left and right smoothly when moving the mouse.
Step 4: Look Up and Down
This will make the experience even more immersive!
Message Rosie:
Let's add a feature so we also look up and down with the mouse, not just side to side.
After you run the new code from Rosie, you might notice that things get a bit wobbly or jerky after looking up or down, especially when switching back to looking side to side.
.gif)
Let's ask Rosie for some ideas on how to fix this.
Message Rosie:
When I look all the way up, or all the way down, then try looking side to side again, the view is off-center and jerks around. What could we change to fix that?
After you run the new code from Rosie, you should be able to look around naturally without any jerky movement.
.gif)
Fixing Other Bugs
It's perfectly normal if you’re still running into issues when looking around in first person. For example, you might also see a "tilted head" problem, like this:
Here’s how you can describe the problem to Rosie so your aim gets fixed.
Message Rosie:
There's still something off with the mouse movement. After looking side to side, and up and down, it looks like I've tilted my head, like a dog who wants to play.
Once Rosie’s fixed it, the camera should now stay level while moving in all directions—no more jerky movement or weird tilting!
.gif)
Checkpoint
How to Build an FPS - Example Step 4
Check your game to make sure that:
• You can now look up and down.
• Aiming is smooth in all directions without wobbling or tilting.
Step 5: Add Crosshair
Adding a crosshair in the center of the screen will make it easy to aim at targets.
Message Rosie:
Add a crosshair in the center of the screen. The crosshair should look like a red '+'
After you run the new code from Rosie, the crosshair should be visible in the center of the screen and stay there as you move the camera.
Checkpoint
How to Build an FPS - Example Step 5
Check your game to make sure that:
• The crosshair is displayed in the center of the screen.
• The crosshair remains visible as you look around.
Step 6: Get the Gun in Game
Now, we're going to add a cool gun to our game! We’ll start by downloading the 3D model, then I'll show you how to load it in your game.
It looks amazing in-game, right? Sorry to let you know we won't be adding those flashy colors. That's a little above my paygrade, lol.
Next, either upload the gun model to Rosebud or directly send the URL to Rosie.
Since this is an advanced tutorial, use whichever method works best for you.
Message Rosie:
Load the gun model in our game.
Don't add the model to the scene yet.
For now, use the console to let me know when the gun is loaded.
Here's the asset: https://play.rosebud.ai/assets/3D_gun_model.fbx?HMaM
To check that the gun has loaded properly, we’ll use the console.
What is the Console?
The console is a tool built into your browser that shows detailed messages about your game. It will let us know if the gun model loads successfully. Let's learn how you can use it!
1. Open Developer Tools
Right-click on the game screen and choose Inspect from the menu. This will open the developer tools.
2. Click the Console Tab
In the developer tools, click on the Console tab. This is where error messages or confirmation logs will pop up.
After you run the new code from Rosie, look in the console to check if it shows any messages indicating that the gun asset has been loaded correctly.
If you're having trouble loading the gun or using the console, check out this quick tutorial I made! It has more visuals and extra details to help you fix bugs.
Checkpoint
How to Build an FPS - Example Step 6
Check your game to make sure that:
• The console shows a message indicating that the gun model has been loaded.
• There are no errors displayed in the chat or console related to loading the gun model.
Step 7: Use the Gun in First-Person
Now that the gun model is loaded, let's add it to the scene so it looks like it's floating in front of the player, positioned for a first-person view.
Message Rosie:
Let's add the gun to the scene and position it in front of the camera, as if it is floating in the center of the screen. We'll change the placement if needed after we can see the gun. PS: Make sure the gun isn't glued to the camera. It should move independently.
After you run the new code from Rosie, the gun should now appear floating in front of the player, staying in view as you look side to side.
.gif)
Checkpoint
How to Build an FPS - Example Step 7
Check your game to make sure that:
• The gun is visible in front of the player.
• The gun moves smoothly as you look left and right, but is not fixed to the camera.
Step 8: Rotate the Gun
The gun is added to the scene, but it isn't facing the right direction. Let's turn the gun around.
Message Rosie:
The gun should be pointing toward the center of the screen, but it's facing the opposite direction! Rotate the gun so it faces the center of the screen. Keep the gun in the same place—it looks good where it is.
After you run the new code from Rosie, the gun should point at the center of your screen.
Checkpoint
How to Build an FPS - Example Step 8
Check your game to make sure that:
• The gun is pointing directly towards the center of the screen.
• The gun's position hasn't changed after adjusting its rotation.
Step 9: Resize the Gun
Message Rosie:
The gun is too small. Let's make it 5 times bigger!
After you run the new code from Rosie, the gun should look great for an FPS.
Checkpoint
How to Build an FPS - Example Step 9
Check your game to make sure that:
• The gun has a more realistic size.
• The gun's position hasn't changed after adjusting its size.
Step 10: Add a Floating Target
Next, let's add a floating ball to the game. We'll place it in front of the player to use as a target for shooting practice.
Message Rosie:
Let's add a floating ball to the game. We'll place it in front of the player at the start of the game. Later, we'll use this to test a new feature for shooting.
After you run the new code from Rosie, you should see a floating ball in front of the player.
Checkpoint
How to Build an FPS - Example Step 10
Check your game to make sure that:
• The floating ball is positioned in front of the player.
• The ball stays in place when you move the camera.
Step 11: Shoot the Target
Now we’ve got a gun and a target. But we can’t even shoot… It's a shooter, after all! Here’s how we can start to shoot our gun.
Message Rosie:
Let's add a feature to shoot the gun on mouse click and hit the ball when the player is aiming at it. Think of this as firing an invisible laser beam from the center of the camera when the player shoots. If the beam hits the ball, remove the ball from the scene. PS: We don't need special effects, like a muzzle flash, right now.
After you run the new code from Rosie, click on the target in-game to see if the invisible laser hits it, and watch as the ball disappears on hit.
Checkpoint
How to Build an FPS - Example Step 11
Check your game to make sure that:
• You can shoot the floating ball by clicking the mouse.
• The ball disappears when hit by the invisible laser.
Step 12: Add Moving Targets
Now we just need some more interesting targets to shoot. What if we bring back those bouncing balls?
Message Rosie:
Now, let's update the game to spawn bouncing balls every second. We'll replace the floating ball with these bouncing balls so we have some fun targets to practice with!
These balls should:
- spawn at random positions around the player
- fall because of gravity
- be pretty big since they are targets
- and be super bouncy
After you run the new code from Rosie, you should see bouncing balls spawning every second, falling, and bouncing around. Try to hit as many as you can!
.gif)
Checkpoint
How to Build an FPS - Example Step 12
Check your game to make sure that:
• Bouncing balls spawn around the player every second.
• Balls fall, bounce, and react naturally with gravity.
• You can shoot the bouncing balls just like the previous target.
Step 13: Fix the Aim
If you're having trouble hitting those moving targets, feel free to blame the game, not your aim! There might be a mouse acceleration issue that’s throwing off your aim.
What is Mouse Acceleration?
Mouse acceleration is when you steadily move the mouse in one direction, but you turn faster and faster. It’s like aiming on ice. Let’s disable it to make aiming easier.
Message Rosie:
I want to disable mouse acceleration. Let’s turn the camera directly with each movement of the mouse, without using interpolation (which creates a laggy feeling).
After you run the new code from Rosie, aiming should feel smoother and more consistent, without any acceleration throwing off your shots.
.gif)
Uh - oh, something is definitely still wrong with aiming. Why are there sudden snaps when looking around now?
Now that we've disabled mouse acceleration, the camera turns exactly as much as the mouse moves. That means when the mouse moves very quickly, even a small movement can cause the camera to snap suddenly, and throw off your aim!
To fix this, we need to add a cap to how much the camera can rotate at once, so even with large, fast mouse movements, you’ll turn smoothly in the game.
Message Rosie:
Sometimes the camera rotates a lot at once when there is a fast movement of the mouse.
Limit how far the camera can turn each frame to prevent it from spinning too quickly during fast mouse movements.
Also, don't immediately rotate the camera for every movement of the mouse. That way, fast mouse movements can be prevented from spinning the camera out of control.
After you run the new code from Rosie, aiming should feel smooth and fast. You might have to play around with the turn speed in the game so it feels just right for you. It’s like any other shooter. Now that we’ve fixed the buggy aim, let’s have some fun shooting the targets!
.gif)
Checkpoint
How to Build an FPS - Example Step 13
Check your game to make sure that:
• Aiming is smooth and consistent without snapping issues.
• When you steadily move the mouse in one direction, you turn at a steady speed, too.
Quick Recap
.gif)
WOW, you just made your first FPS!
From setting up a first-person camera to using a 3D model for the gun, you've done it all.
Keep experimenting and adding features, and who knows? You might just build the shooter you've always dreamed of!
.svg)
.svg)
.svg)