Aim How to Make a First Person Shooter Game (Browser 2026)

People searching how to make a first person shooter game in 2026 usually get one of two unsatisfying answers: a Unity tutorial that spends four hours on the WSAD camera rig and never gets to the shooting, or a Roblox template that gives you a weapon that only plays a sound. The honest 2026 answer is different. A modern FPS is three tight subsystems bolted together: a pointer-lock camera rig on WSAD keys, a hitscan or projectile weapon that resolves against a raycaster, and a small enemy state machine that walks between Idle, Patrol, Chase, and Attack. Get those three right and everything else — ammo pickups, health kits, level flow, boss encounters — is a small variation on the same pattern. This guide walks the recipe: design the shoot-move-collect loop on paper first, generate weapon plus enemy meshes in Sorceress 3D Studio, generate the combat music and gunfire SFX in Sorceress, then let WizardGenie wire the Three.js browser FPS so a playable arena ships in two weekends.

What "how to make a first person shooter game" actually needs in 2026

The genre label is old and searches for it are dominated by two audiences with very different needs. According to the first-person shooter entry on Wikipedia, the term covers everything from the 1992 Wolfenstein 3D through Doom, Quake, Half-Life, Halo, Call of Duty, Counter-Strike, Overwatch, and modern hero shooters. Half the people searching how to make a first person shooter game want a Counter-Strike-style arena with a gun, a crosshair, and enemies to shoot. The other half want a lore-heavy campaign in the style of Half-Life 2 or the new indie darlings like Cruelty Squad. This tutorial targets the first audience deliberately because the second is a scope trap: campaigns need a level designer, a writer, and a voice-acting budget before the shooting even feels good.

What every FPS shares, regardless of scope, is the shoot-move-collect loop. The player moves through the space, aims a crosshair at an enemy, presses fire, sees damage, collects the ammo and health that drops, and repeats. That loop is what a first person shooter game is. A tutorial that teaches the WSAD camera without teaching the hitscan raycaster is teaching a first-person walker, not an FPS. A tutorial that teaches the raycaster without teaching enemy AI is teaching a target range, not an FPS. This one teaches all three so the recipe produces a real playable shooter, not a first-person tech demo.

The FPS shoot-move-collect loop in one minute

Every first person shooter, arena or campaign, runs the same core moment-to-moment loop. Understanding it in one minute is the difference between a real project and a stalled tech demo:

1. Move. Player holds W/A/S/D. The camera rig converts each key into a velocity vector relative to the camera's forward and right axes, then adds gravity on the vertical axis and slides the character along the arena's collision geometry. Space triggers a jump impulse, Shift multiplies horizontal velocity by a sprint factor. This is the WSAD camera-relative movement pattern that has powered every FPS since Quake.
2. Aim. The mouse locks to the game window using the pointer-lock API. Every mouse delta in X yaws the camera, every mouse delta in Y pitches it (clamped to plus or minus 89 degrees so the camera never flips). A crosshair sits dead center on the screen. The player aligns the crosshair with an enemy silhouette.
3. Shoot. Player clicks. The weapon code decides hitscan or projectile. If hitscan, a raycaster fires from the camera forward vector out to the weapon's range, and the first object it hits takes damage. If projectile, a bullet mesh spawns at the muzzle with a velocity vector and moves per-frame until it hits something or expires. Ammo counter decrements. Muzzle flash plays. Gunfire SFX fires.
4. Enemy reacts. The enemy's state machine flips from Idle or Patrol to Chase the moment its line-of-sight raycast to the player returns true. The enemy walks toward the player until it is within attack range, then flips to Attack and fires its own weapon (hitscan or projectile) at the player on its own cooldown. If the enemy's HP hits zero, its state flips to Dead, it plays a death animation, and it drops loot.
5. Collect. Player walks over dropped ammo or health packs. Trigger volumes on the pickup meshes fire onPickup callbacks that raise the player's ammo counter or HP. The pickup mesh despawns. HUD updates. Loop back to step 1.

Every per-frame update runs off the browser-standard animation loop. The requestAnimationFrame API documented on MDN fires roughly 60 times per second in sync with the display refresh; every tick the game code advances the pointer-lock camera, moves the player, moves every enemy, resolves any active projectiles, checks pickups against the player position, and re-renders the scene. On a modern laptop, a Three.js FPS with 30 to 60 enemy characters and roughly a dozen active pickups runs at 60 fps comfortably.

Pick your engine in 2026: WizardGenie, Three.js r185, or Godot 4

The engine question decides how much boilerplate you write vs how much you skip. Three honest 2026 answers, ranked by "playable slice in two weekends":

• WizardGenie (recommended for a first project). AI-powered game engine that runs in the browser and, on desktop, ships as a Windows installer with auto-updater. You paste the shoot-move-collect design into a paragraph; WizardGenie writes, runs, and iterates on the code in real time using its dual-agent Planner+Executor loop. The Planner (a top-tier reasoner) breaks the FPS into pointer-lock camera, raycaster hitscan, enemy state machine, and HUD tasks. The Executor (a cheap fast typer like DeepSeek V4 Pro or MiniMax M2.7) writes the actual Three.js JavaScript. Model lineup verified 2026-08-07 in src/app/_home-v2/_data/tools.ts: Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, MiniMax M2.7 — bring your own key or use the fallback trial key.
• Three.js r185 (recommended for hand-coding a browser FPS). WebGL wrapper that every serious browser 3D game leans on, currently at revision r185 (verified 2026-08-07 on the official Three.js home page). The Raycaster class (documented in the official Three.js manual) handles hitscan collision directly. The Pointer Lock API on MDN is the primitive PointerLockControls builds on. GLTFLoader imports the weapon and enemy meshes you download from Sorceress 3D Studio. Best if you want to hand-code the engine and understand every draw call.
• Godot 4. Free open-source engine, current build released 14 July 2026 per the official Godot Windows download page verified 2026-08-07. Camera3D plus CharacterBody3D plus RayCast3D is the honest 3D FPS combination for hand-coded desktop builds. Ships a proven first-person template out of the box. Best if you want a desktop-first FPS or if you are more comfortable with GDScript than JavaScript. HTML5 export path works but the WASM bundle is heavier than a hand-rolled Three.js build for a small arena.

The rest of this guide assumes WizardGenie for the code side and Three.js r185 under the hood for the browser output. Every step still applies unchanged if you swap in Godot 4 or hand-write the Three.js by hand — the "AI writes the loop" step becomes "you write the loop against the design doc." Unity and Unreal are fine at commercial scale but heavier than a two-weekend prototype needs, and their web-export paths are noticeably fatter than a hand-rolled JS build for a small arena. Phaser v4.2.1 Giedi (released 9 July 2026 per the official Phaser download page verified 2026-08-07) is 2D-first, so use it only for a Wolfenstein-3D-style raycasting pseudo-FPS, not a true 3D shooter.

Step 1 — design the shoot-move-collect loop and arena flow on paper

Skip this step and you will rewrite the FPS four times. This is the genre where enemy reaction ranges, weapon recoil, movement speed, and level geometry all interact multiplicatively, and every one of them has to be locked before the code starts. Do the design in 60 minutes on paper (or in a text file) and the AI code generation halves. The design doc needs five sections:

1. Camera rig. Eye height (1.7m is the realistic default for a human, 1.5m makes the world feel bigger, 2.0m makes it feel smaller). Walk speed (5 m/s is the Doom default, 4 m/s is Half-Life, 6 m/s is Quake). Sprint multiplier (1.5x is standard). Jump impulse (roughly 4.5 m/s for a 1.2m jump). Mouse sensitivity slider range (0.001 to 0.005 rad per pixel is normal). Y-axis clamp (plus or minus 89 degrees). All of these are numbers, not moods. Write them down.
2. Weapon system. One weapon for a first project is fine, more is over-scope. Pick hitscan or projectile. Damage per shot (25 kills a 100 HP enemy in 4 shots — a good default). Fire rate (400 rpm for a pistol, 600 rpm for an SMG, 900 rpm for a rifle). Magazine size (12 to 30 depending on weapon flavor). Reload time (1.2 to 2.5 seconds). Range (50m for a pistol, 100m for a rifle, effectively infinite for hitscan sniper). Recoil pattern (vertical only for a first project, add horizontal drift later). Muzzle flash duration (60ms is standard).
3. Enemy design. One enemy type for a first project is fine, two is better. Enemy HP (100 is the baseline). Enemy walk speed (3 to 4 m/s, slower than the player). Enemy weapon (hitscan is easier, matches the player's pistol). Enemy detection range (25 to 40m). Enemy attack range (15m for hitscan, 8m for melee). Enemy attack cooldown (1.0 to 1.5 seconds between shots). State transitions: Idle plus sight equals Chase, Chase plus in-attack-range equals Attack, Chase plus lost-sight-for-5-seconds equals Patrol, Attack plus HP-zero equals Dead.
4. Arena layout. One arena for a first project. Draw a top-down floorplan: three-to-five cover blocks, two-to-four spawn points for enemies, one entrance for the player, one ammo pickup, one health pickup, one objective (kill all enemies, or reach an exit). Roughly 30m by 30m is the sweet spot — small enough to feel dense, big enough to allow real movement. Sketch the sightlines: which cover blocks the player behind which spawn points, which cover the player can hide behind. This is the whole level design phase for a first FPS project.
5. HUD. HP bar in the top-left (numerical plus green fill bar). Ammo counter in the top-right (12/48 format — magazine slash reserve). Crosshair dead-center (a plus sign is fine, no need for a complex reticle for a first project). Damage numbers floating up from enemies when hit (optional but adds crunch). Kill counter or objective text in the bottom-left. That is the entire HUD. No minimap for a first project.

Put the whole design doc in a single markdown or JSON file. WizardGenie parses this structure well and will use it to seed the pointer-lock camera, the weapon raycaster, the enemy state machine, and the HUD update pass. The same "design doc first, code second" approach powers every genre-specific tutorial in this series: Crawl How to Make a Roguelike (Run + Meta Loop 2026) uses the same approach for run loops and meta layers, Brave How to Make a Survival Game (Hunger + Loot 2026) uses it for hunger meters and loot tables, and Fortify How to Make a Tower Defense Game (Wave Loop 2026) uses it for enemy waves and tower economy.

Step 2 — generate the FPS asset pack (weapon, enemies, arena, music, gunfire SFX)

The asset stack for a first FPS slice is small compared to the design doc. Roughly one first-person weapon mesh, one-to-two enemy characters, one arena environment, one combat music loop, and about eight gunfire and impact SFX. Broken down:

• Weapon mesh. Open Sorceress 3D Studio. Prompt: "low-poly first-person pistol, chunky sci-fi styling, dark grey body with cyan highlights, muzzle facing away from viewer, GLB export ready for Three.js scene attachment at camera-child position offset roughly 0.35m right, 0.25m down, 0.45m forward". 3D Studio uses Three.js under the hood so the exported GLB drops directly into any Three.js FPS scene graph without a re-import step. Iterate two or three times to lock the silhouette so the pistol reads at first-person camera distance.
• Enemy mesh. Open Sorceress 3D Studio again. Prompt: "low-poly humanoid enemy grunt, sci-fi grunt with dark red armor plates, holding a pistol, T-pose ready for auto-rigging, roughly human-scale 1.8m tall, GLB export". If you want the enemy to walk and attack with real animation, run the exported mesh through Sorceress Auto-Rigging next: drop the 13 body markers on pelvis, neck, chin, shoulder x 2, elbow x 2, wrist x 2, knee x 2, ankle x 2, run the auto-weight, download the rigged FBX or GLB.
• Arena environment. Open 3D Studio one more time. Prompt: "low-poly sci-fi arena environment, roughly 30m by 30m square, dark stone walls with green neon light strips, three cover blocks scattered in the middle, two open doorways on opposite walls, dark navy floor with grid texture, ceiling height 4m, GLB export ready for Three.js scene load". Alternative: hand-model in Blender if you prefer, then export GLB. Either path drops into the same Three.js scene graph.
• Ammo and health pickups. Two small 3D Studio generations for the pickup meshes: "low-poly ammo box, small cube with a cyan cross on top, GLB export" and "low-poly medkit, small red cross box with a white plus sign, GLB export". These are tiny meshes, roughly 30cm cubes in the scene.
• Combat music. Open Sorceress Music Gen. Prompt: "90-second looping electronic combat track, driving synth bass, tense pulsing arpeggio lead, big drum kit at 140 BPM, cinematic climax at 60 seconds, ends cleanly for loop". Music Gen bills 10 credits per generation (verified 2026-08-07 in src/app/music-gen/page.tsx line 28 as MUSIC_CREDIT_COST = 10). Add 2 credits per WAV export. Add a second ambient track for the arena's pre-combat exploration phase: "45-second looping ambient sci-fi drone, low pad, distant footstep echoes, slow evolution, no melody".
• Gunfire SFX pack. Open Sorceress SFX Gen. Eight sounds — pistol_shot.wav (sharp punchy short pistol crack), pistol_reload.wav (magazine drop plus slide rack), footstep.wav (single boot on hard floor), hurt.wav (short player pain grunt), enemy_alert.wav (short synthetic beep on detection), enemy_death.wav (short synthetic collapse), pickup_ammo.wav (short cyan chime), headshot.wav (extra-crisp variant of pistol_shot). SFX Gen bills 1 credit per second, minimum 1 credit (verified 2026-08-07 in src/app/sfx-gen/page.tsx line 23 as SEED_AUDIO_CREDITS_PER_SECOND = 1). Eight short one-shots at roughly one second each = about 8 credits total.

Drop every downloaded GLB, MP3, and WAV file into a single assets/ folder on your desktop. In WizardGenie, upload the folder in one drag-and-drop and paste the design doc into the same prompt. Total asset generation time: roughly 30 to 40 minutes. Total credits spent: 80 to 130 depending on iteration on the 3D meshes (which is the biggest single cost in the pack).

Step 3 — let WizardGenie wire the browser FPS with Three.js pointer lock and raycaster hitscan

Open WizardGenie in a browser tab. Attach the assets folder. Paste the design doc as a single prompt with five sections labelled CAMERA_RIG, WEAPON, ENEMY, ARENA, HUD. Then add a short freeform paragraph: Make a browser first person shooter using Three.js r185. Use PointerLockControls for the WSAD-plus-mouse camera. Attach the pistol GLB as a camera child at the offset specified. Fire on left-click using a Raycaster from the camera forward vector out to weapon range, apply damage to the first hit that has a health component. Spawn six enemies from the enemy GLB at the arena's spawn points. Each enemy runs an Idle-Patrol-Chase-Attack state machine driven by a line-of-sight raycast to the player. Update the HUD every frame with player HP and ammo. Play pistol_shot.wav on fire, hurt.wav on player damage, enemy_death.wav on enemy HP-zero, pickup_ammo.wav on ammo pickup. Loop the combat music track at 30 percent volume. Save the player's high-score kill count to localStorage.

WizardGenie generates the seven-module FPS loop in one pass. The output structure is predictable across models: a GameState object holding player position, player HP, current weapon, current ammo (magazine and reserve), kill count, and the active enemies array; an Assets object holding the loaded GLBs and audio buffers keyed by filename; a setupPointerLockCamera() that wires the PointerLockControls, the mouse listeners, and the WSAD key listeners onto the camera rig; a fireWeapon() function that constructs a Raycaster from the camera forward vector, calls intersectObjects() against the enemies group, and applies damage to the first hit; a updateEnemyAI(deltaTime) function that iterates every alive enemy, resolves its state machine using a line-of-sight raycast to the player, and steps its position toward the player when in Chase state; a updateHUD() that reads GameState and updates the DOM overlay every frame; and a playSFX(filename) that pulls the pre-loaded AudioBuffer and fires a Web Audio one-shot. The audio pool prevents Web Audio from choking when three pistol shots fire back-to-back.

Iterate in three rounds. Round one: play one full arena, note the first thing that feels off (pistol feels weak, enemies chase in a straight line, arena feels too small). Paste the observation back to WizardGenie: The pistol needs to feel snappier — increase muzzle flash to 80ms, add screen shake on fire, raise fire rate to 500 rpm. WizardGenie tunes the weapon and reloads the preview. Round two: add a small polish beat (blood-splatter decal on the wall behind the enemy on kill, floating red damage numbers when the pistol hits, muzzle-flash light briefly illuminates the nearest wall). Round three: playtest three full arenas end-to-end and confirm the shoot-move-collect rhythm holds — the player should be shooting roughly every 3 to 5 seconds, reloading roughly every 15 to 20 seconds, and picking up ammo or health roughly every 30 seconds. If the rhythm is flatter than that, tune the enemy count up; if it is choppier, thin the enemies out or move the pickups closer to the spawn.

Common issues (and how to fix each in under a minute)

Every first FPS project trips on the same handful of small bugs. Fix them by tuning numbers or wiring, not by rewriting code:

• Pointer lock breaks on Escape. That is expected Escape-to-release behavior specified in the Pointer Lock API. Add a click-to-lock overlay: a full-screen div that says "Click to play" and calls requestPointerLock() on click. Show the overlay again whenever pointerlockchange fires with no active lock.
• Weapon fires through walls. The raycaster is intersecting only the enemies group, not the walls. Fix by intersecting against the union of enemies plus walls, then checking whether the first hit is an enemy. If the first hit is a wall, the shot is blocked.
• Enemy walks through walls. The enemy movement is a raw position addition instead of a collision-aware step. Ask WizardGenie to add a raycast from the enemy toward its movement target every frame and cap the step at the wall distance if a wall is closer than the intended step.
• Muzzle flash never shows. The muzzle-flash mesh is being created once and never removed, so it renders on the first frame and blocks subsequent flashes. Fix by making muzzle flash a short-lived point-light plus a billboard sprite that both fade out on a 60ms timer.
• Enemies clip through the floor. Enemy Y position is being set to zero at spawn instead of the arena floor's real Y (which might be 0.02m due to the mesh's origin). Fix by raycasting straight down from a large Y at each enemy spawn point and snapping the enemy Y to the first floor hit.
• Audio pool exhausted after 20 shots. Web Audio contexts have a limited pool of concurrent nodes. Use one long-lived AudioContext and a rotating pool of AudioBufferSourceNodes rather than creating a new context per shot. WizardGenie generates this pattern correctly if the prompt says "reuse the AudioContext across all SFX plays".

What a how to make a first person shooter game project costs on Sorceress in 2026

Concrete asset budget for the browser FPS slice above, all numbers verified 2026-08-07 against the local Sorceress source:

• First-person pistol mesh: 2 to 3 3D Studio iterations to lock the silhouette. Roughly 20 to 30 credits (0.20 to 0.30 USD). A second weapon (shotgun, rifle) doubles this budget line.
• Enemy grunt mesh: 2 to 3 3D Studio iterations plus one Auto-Rigging pass. Roughly 25 to 40 credits (0.25 to 0.40 USD). A second enemy type doubles the bestiary line.
• Arena environment: 2 to 3 3D Studio iterations to get the sightlines feeling right. Roughly 20 to 30 credits (0.20 to 0.30 USD). A second arena variant (rooftop, warehouse, spaceship interior) doubles this line.
• Ammo plus health pickups: 2 quick 3D Studio generations. Roughly 8 to 12 credits (0.08 to 0.12 USD). These are throwaway small meshes so one iteration each is usually enough.
• Combat music (combat loop + ambient loop): 2 loops x 10 credits + 4 credits WAV export = 24 credits (0.24 USD). Add a menu track for another 12 credits.
• SFX pack (eight one-shots): 8 sounds at roughly 1 credit each = 8 credits (0.08 USD). Even a big FPS project rarely needs more than a couple dozen SFX one-shots so this budget line stays small.

Total AI asset cost: roughly 105 to 145 credits, or 1.05 to 1.45 USD at Sorceress's 100 credits per dollar standard rate (verified 2026-08-07 in src/lib/models.ts line 69 as CREDITS_PER_DOLLAR = 100). New accounts start with 100 free credits (verified 2026-08-07 in src/app/api/admin/credits/route.ts line 12 as SIGNUP_GRANT = 100), which covers most of the asset pack for a first FPS project. The Sorceress Lifetime tier at 49 USD one-time (verified in src/app/plans/page.tsx line 51 as LIFETIME_PRICE = 49) covers unlimited 3D Studio, Auto-Rigging, Music Gen, and SFX Gen for the life of the account — useful once you start iterating on three or four arenas, a full weapon roster, and a bestiary of five-plus enemy types and want to skip the per-generation credit math entirely.

WizardGenie itself is bring-your-own-key or trial-key on the model side, so the model cost depends on which coding model you pick from the eight-model lineup. On the cheap end, DeepSeek V4 Pro or MiniMax M2.7 runs the whole two-weekend FPS build for a few cents in tokens. On the premium end, Claude Opus 4.7 or GPT-5.5 as the Planner paired with a cheap Executor still lands well under the price of one commercial engine seat per month. The dual-agent Planner+Executor pattern is specifically designed to make premium reasoning affordable by never putting the expensive model on the typing side — total dev cost drops to roughly one-fifth of a single-frontier run.

Bigger picture: this workflow — design doc on paper plus AI-generated assets in a parallel tab plus WizardGenie writing the FPS run loop — is the standard for solo indie devs shipping playable first-person shooter slices in a weekend. If you want to go deeper on the assets side, the Sorceress Tools Guide is the wide index of every tool referenced above and the front page at Sorceress is where each of them lives. For related genre-specific tutorials that use the exact same asset pipeline: Crawl How to Make a Roguelike (Run + Meta Loop 2026) covers the run + meta loop pattern, Brave How to Make a Survival Game (Hunger + Loot 2026) covers hunger and loot meters, Sprawl How to Make a Metroidvania (Map + Ability Gates) covers room graphs and ability gates, and Fortify How to Make a Tower Defense Game (Wave Loop 2026) covers the wave loop and tower economy. All five articles share the same "design first, generate assets in Sorceress, code the loop last" spine as this FPS recipe.