Shade How to Make a Stealth Game (Browser Hide Loop 2026)

Most beginners who search “how to make a stealth game” want one top-down facility floor, guards walking fixed patrol loops, translucent vision cones, shadow tiles where the player disappears, and a fail state the moment someone gets spotted in the open. A full Metal Gear-scale stealth sim with disguise systems, noise propagation, and ten interconnected wings is a studio product. A browser hide loop is different. A coding agent scaffolds patrol paths and cone math from one prompt, and AI generation covers the tile floor, guard sprites, and footstep audio. On desktop or web, that means WizardGenie for the patrol-and-detection interpreter, Tileset Forge for the facility grid, Quick Sprites for the player and guards, and SFX Gen for footstep and alert stingers. This guide is the honest end-to-end for how to make a stealth game in 2026, as a weekend build you can finish once.

What how to make a stealth game actually means in 2026

The query “how to make a stealth game” hides three intents. Some searchers want a Unity or Godot template with navmesh guards and animation trees — that is engine shopping, not a minimal playable loop. A second intent is a franchise-scale stealth sim with non-lethal takedowns, cover systems, and branchy level design — a multi-year roadmap, not a solo jam. The third intent, and the one this guide targets, is a browser hide loop: one top-down facility room or corridor chain, two guards on waypoint patrols, vision cones rendered as translucent wedges, hide tiles where detection is disabled, and a win when the player reaches the exit without triggering alert. That is a weekend build, it demos the Sorceress toolset, and it is the format most stealth game tutorial and javascript stealth searchers actually want.

The presentation contract is small and strict. A title screen shows the game name, optional Continue if localStorage stores a best clear time, and Play. The play screen shows the tile map, the player sprite, guard sprites with visible cones in dev mode, a mute toggle, and an optional “spotted” flash overlay. On detection, freeze movement, play an alert sting, and show Game Over with Retry. On reaching the exit zone without alert, show Level Clear with elapsed time and Play Again. The Stealth game overview on Wikipedia (verified 2026-08-26) traces the genre from Castle Wolfenstein through Thief, Metal Gear, and Mark of the Ninja — cite it when you write your itch.io blurb so players know which promise you kept. If you already shipped a room-by-room dungeon crawl, the sibling guide on how to make a dungeon crawler covers turn combat and room graphs; this post owns patrol cones and hide tiles instead.

The stealth loop in one minute (patrol, scan, move, hide, alert or exit)

Five moving parts, repeated every frame until the player wins or gets spotted. First, patrol — each guard walks toward the next waypoint in its loop and rotates facing when it arrives. Second, scan — cast a vision cone from the guard’s facing angle and test whether the player stands inside range, inside the cone angle, and not blocked by wall tiles. Third, move — arrow keys or WASD translate the player unless alert has fired. Fourth, hide — if the player’s tile coordinates match a hide tile in the level JSON, skip detection even when geometrically inside the cone. Fifth, alert or exit — on failed hide check inside an active cone, trigger game over; on overlap with the exit zone while unspotted, show Level Clear. Noise radius, disguise outfits, and multi-phase suspicious states are polish layered after one honest level clears without the player phasing through walls.

Pick your engine for how to make a stealth game: canvas, Phaser, or WizardGenie

Three good targets in 2026, each with a different trade-off. Vanilla JavaScript with canvas is the honest default and the pick this guide recommends for a first build. One <canvas> draws the tile map with drawImage, sprites for player and guards, and semi-transparent arc or triangle fills for cones. Total code footprint for a working browser hide game is under 400 lines including patrol AI, raycast wall checks, and win screen. The MDN Canvas API docs cover drawing, and 2D collision detection covers circle-rectangle overlap for the exit zone.

Tile-grid logic without a physics engine stays readable: store the map as a 2D array where 0 is floor, 1 is wall, and 2 is hide shadow. Player position snaps to tile centers or moves freely with tile lookup via Math.floor(x / tileSize). Guards use the same grid for wall collision during patrol.

Phaser 4.1.0 (verified 2026-08-26 on the official Phaser API documentation page) becomes the right pick if you want camera follow on larger maps, tweens on the alert overlay, or five facility rooms with door transitions. Phaser does not invent your cone math — you still need the same waypoint arrays and hide-tile lookup. Use Phaser when animated guard walk cycles and multi-room progression are the product; use raw canvas when the product is a line of sight game walkthrough people can read in one sitting.

WizardGenie is not a separate rendering engine — it scaffolds whichever of the two you pick from a single natural-language prompt. WizardGenie ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build. Its coding-model lineup covers Claude Opus 4.7, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-26 in src/app/_home-v2/_data/tools.ts). For stealth games, any frontier model scaffolds patrol paths, cone checks, and hide tiles in one prompt. Pair a frontier planner with a budget executor like DeepSeek V4 Pro or Kimi K2.5 for the typing pass — the Dual-agent pattern lands most projects at roughly one-fifth the single-frontier cost.

Step 1 — model patrol paths, vision cones, and hide tiles

Nothing else in the pipeline matters if guards spot the player through concrete walls or ignore them standing under a spotlight. Start with JSON level data before you paint tiles:

const TILE = { FLOOR: 0, WALL: 1, HIDE: 2, EXIT: 3 };

const MAP = [
  [1,1,1,1,1,1,1],
  [1,0,0,2,0,0,1],
  [1,0,1,0,1,0,1],
  [1,0,0,0,0,3,1],
  [1,1,1,1,1,1,1],
];

const GUARDS = [
  {
    id: 'g1',
    waypoints: [{ x: 96, y: 96 }, { x: 352, y: 96 }],
    speed: 60,
    facing: 0,
    coneHalf: Math.PI / 4,
    range: 140,
  },
];

function tileAt(px, py) {
  const col = Math.floor(px / 64);
  const row = Math.floor(py / 64);
  return MAP[row]?.[col] ?? TILE.WALL;
}

function canSee(guard, player) {
  if (tileAt(player.x, player.y) === TILE.HIDE) return false;
  const dx = player.x - guard.x;
  const dy = player.y - guard.y;
  const dist = Math.hypot(dx, dy);
  if (dist > guard.range) return false;
  const angleTo = Math.atan2(dy, dx);
  let diff = angleTo - guard.facing;
  while (diff > Math.PI) diff -= Math.PI * 2;
  while (diff < -Math.PI) diff += Math.PI * 2;
  if (Math.abs(diff) > guard.coneHalf) return false;
  return !lineHitsWall(guard.x, guard.y, player.x, player.y);
}

Unit-test three cases before you generate art: a player on open floor inside the cone triggers alert; a player on a hide tile inside the cone does not; a wall between guard and player blocks sight at close range. Those three tests catch ninety percent of javascript stealth bugs. Design patrol loops so cones sweep across open floor but never clip through walls — if a guard turns at a corner, snap facing before resuming walk so the wedge does not pass through the adjacent cell.

Step 2 — wire patrol AI, detection, and exit win in WizardGenie

With level.json drafted, open WizardGenie. Drop in a bare index.html shell referencing your tileset placeholder. Give the agent one paragraph: Build a browser top-down stealth game. Load MAP and GUARDS from level.json. Draw 64px tiles from tilesheet.png. Player moves with WASD at 120px/s, blocked by WALL tiles. Each guard walks waypoints in a loop, pauses 0.5s at each point, updates facing toward next waypoint. Each frame call canSee for each guard; on true set alert and show Game Over overlay. Hide tiles disable detection. EXIT tile wins when player overlaps center. Draw translucent vision cones in dev mode toggle. Autosave best clear time to localStorage. Feed that to any coding model in the lineup and the interpreter scaffolds in under five minutes.

The remaining hour is polish via follow-up prompts. Add a cone gradient — inner red, outer yellow — so players read danger zones — twelve lines. Add footstep cadence tied to player velocity — six lines. Add guard idle glance — rotate facing ±45° at waypoints before walking — eight lines. Add a minimap in the corner for larger maps — fifteen lines. Each item is a follow-up prompt, and the whole browser hide game comes together over a Saturday afternoon.

Optional sibling: if your facility needs locked doors the player opens after hiding, borrow the room-state pattern from how to make a hidden object game for click-to-interact hotspots — same JSON object list idea, different win condition.

Step 3 — Tileset Forge facility floors, Quick Sprites guards, and SFX Gen audio

A flat gray grid reads as a tech demo even when cone math is perfect. Three asset passes cover the whole html5 stealth experience:

• Facility tileset — one top-down office or warehouse strip from Tileset Forge. Prompt for “top-down stealth facility tileset, 64x64 tile grid, polished floor, wall edges, shadow hide carpet tiles, exit door tile, cool gray palette with amber accent lights, seamless edges”. Tileset Forge outputs a tileable strip you slice into your engine. Budget roughly 20–40 credits across two iteration passes, matching the roguelike and survival guides on this blog.
• Player and guard sprites — top-down or three-quarter views from Quick Sprites at 9 credits per generation per src/app/quick-sprites/page.tsx. One player crouch pose plus two guard variants is 27 credits.
• Footstep loop — quiet tile tap, under 0.5 seconds, while the player moves.
• Alert sting — sharp brass hit under 0.8 seconds on detection.
• Hide rustle — soft fabric under 0.4 seconds when entering shadow tiles.
• Exit chime — 1 to 2 seconds on level clear.

Open SFX Gen, describe each clip in plain language (“muted rubber sole footstep on tile, single step”), and export WAV into your assets/audio/ folder. Billing is 1 credit per second of generated audio per src/app/sfx-gen/page.tsx — four short clips land around 6 credits total.

After Tileset Forge returns the strip, map tile indices in your level editor or a paint-mode dev tool WizardGenie scaffolded. Mark hide tiles with a distinct carpet or shadow texture so players learn the vocabulary without reading a manual. This visual read is non-negotiable — detection cone game players forgive binary fail states when hide zones look obviously safe.

Optional polish: if your map spans multiple rooms, reuse the corridor tile pass from how to make a shooter game for top-down camera framing — same tile size, different combat loop. For a pure hide sprint with no guns, stay on this post’s cone-and-exit spine.

What a how to make a stealth game project costs on Sorceress in 2026

Concrete asset and generation budget for a browser hide loop — one facility room, two guards, eight hide tiles, three-minute clear time — from empty repo to zip-and-ship playable, all numbers verified 2026-08-26 against local Sorceress source:

• Facility tileset (Tileset Forge): 2 iteration passes at roughly 15–20 credits each = ~30 credits (0.30 USD). Top-down floor, walls, hide carpet, exit door.
• Character sprites (Quick Sprites): 3 generations at 9 credits each = 27 credits (0.27 USD). Player plus two guards.
• Stingers (SFX Gen): 4 clips at 1 credit per second, roughly 6 seconds total = 6 credits (0.06 USD). Footstep, alert, hide rustle, exit chime.
• WizardGenie coding time: effectively free on the Sorceress side. Model-side API cost for a one-to-two-hour prompt session on a cheap Executor like DeepSeek V4 Pro is typically under 0.40 USD.
• Total for one complete browser stealth game: roughly 63 credits — roughly 0.63 USD in Sorceress credits, plus under 0.40 USD in model API time. Under 1.50 USD end-to-end for a first stealth game with a tiled facility, two patrol guards, and four stingers.

Sorceress bills 100 credits per dollar at the standard rate. New accounts start with 100 free credits (SIGNUP_GRANT = 100 in src/app/api/admin/credits/route.ts), which covers the tileset, sprites, and full audio pack with room to spare. The Sorceress Lifetime tier at 49 USD one-time covers unlimited SFX Gen use forever, which matters if you plan a series of facility levels — each additional room is essentially Tileset Forge and Quick Sprites art only.

For related browser-game pipelines that share this tile-the-map-wire-AI-state-ship-the-browser-build spine, the closest reads are how to make a dungeon crawler for room-graph siblings, how to make a hidden object game for another observation puzzle, and how to make a browser game for the Phaser migration path when you outgrow raw canvas. The Sorceress Tools Guide is the master index for every tool this guide referenced. Under two dollars, one afternoon, and how to make a stealth game is a done deal.