Command How to Make an RTS Game (Browser Base Loop 2026)

Most beginners who search "how to make an rts game" want the Dune II or StarCraft feel - a top-down map with mineral crystals near a starting base, a worker that walks over and mines, a build menu that drops a barracks foundation, a training queue that spits out soldiers, and a drag-selected squad that marches across a bridge under attack-move orders - not a full Blizzard live-service simulation on day one. Real-time strategy is famously demanding to ship at commercial scale because a single map juggles pathfinding, economy, tech tree, fog of war, and AI opponents in parallel. A browser real time strategy game aimed at a jam or a portfolio piece is a different animal. A coding agent scaffolds the tick loop, the selection rectangle, the order queue, and the fog overlay from one prompt, and AI generation covers the terrain and the unit sheets. On desktop or web, that means WizardGenie for the base-loop interpreter, Tileset Forge for map terrain, Quick Sprites for worker and soldier animations, and SFX Gen for order callouts. This guide is the honest end-to-end for how to make an rts game in 2026, as a weekend build you can actually finish.

What how to make an rts game actually means in 2026

The query "how to make an rts game" hides three distinct intents. Some searchers want a game-design deep dive on faction asymmetry, tech trees, and counter matrices - a design brief, not a browser build. A second intent is the broader how to make a strategy game guide covering the macro economy plus turn-based fog of war - useful, but that guide correctly targets a turn-tempo game with a different tempo contract. The intent this article targets is the third: a browser real time strategy game that boots into a single-page HTML shell with a top-down map, mineral nodes, one or two starting workers, a build menu that places foundations, a barracks that trains units on a queue timer, a drag-selectable squad, right-click move and attack orders, a fog-of-war overlay, and a small enemy AI that mirrors the same loop. That is a weekend build, it demos the Sorceress toolset, and it is the format most rts game tutorial and javascript rts searchers actually want.

The presentation contract is small and strict. A top-down map fills most of the viewport, with terrain tiles (grass, dirt, water, cliff) drawn in one Canvas pass. Resource nodes (mineral crystals, gas geysers) sit at fixed spots. Worker units path from a node back to a base, dropping off resources. A HUD strip along the top shows minerals, gas, and current supply. A build menu opens on hotkey B or when a worker is selected; clicking a building slot drops a foundation that ticks up to complete. Selected units show a small ring, and the right-click ground point issues a move; right-click on an enemy issues attack-move. The real-time strategy overview on Wikipedia (verified 2026-08-30) traces the genre from Herzog Zwei (1989) through Dune II, Warcraft, and StarCraft, and confirms these are the defining beats - cite that page in your itch.io blurb so players know you shipped a browser real time strategy tick loop, not a squad-tactics prototype.

The RTS base loop in one minute (harvest, build, train, attack)

Four moving parts, cycled forever. First, harvest - a worker unit walks to the nearest resource node, spends a couple of seconds gathering, then walks the payload back to the nearest base and drops it into the shared resource pool. Second, build - the player spends resources to place a foundation on a walkable tile; over the next several seconds the foundation counts up to a completed building (base, barracks, refinery, tech lab). Third, train - a completed barracks accepts a queue of unit orders; each unit takes a defined time to spawn and costs resources and supply. Fourth, attack - selected units execute move-attack orders in continuous real time, engaging any enemy inside their leash radius. That four-step cycle, mirrored by a small enemy AI that runs the same loop, is the whole html5 rts loop - everything else (tech tree, factions, hero units, campaign maps) is polish on top.

Pick your engine for how to make an rts game: Canvas, Phaser, or WizardGenie

Three good targets in 2026, each with a different trade-off. Plain HTML Canvas 2D is the honest default and the pick this guide recommends for a first build. RTS is render-heavy on the map layer but light on physics - the world is a grid, units move along interpolated vectors, and there is no collision solver to fight. The MDN Canvas API reference (verified 2026-08-30) covers the drawImage sprite-atlas pattern and the offscreen-canvas trick that lets you cache the static terrain layer once at load and only redraw the moving units and the fog overlay every frame. That single optimization keeps a 128x128 tile map with dozens of units at a stable 60 fps in any modern browser.

Separate the simulation tick from the render frame or the game will feel sluggish the moment unit counts climb. The simulation runs on a fixed 100 ms setInterval and updates positions, cooldowns, resource counts, order queues, and combat resolution. The render loop uses requestAnimationFrame and interpolates unit positions between the last two simulation states. The MDN requestAnimationFrame docs (verified 2026-08-30) explain why coupling render to display refresh (rather than to a raw setInterval) is what makes 60 fps stable, and why heavy work must stay inside the simulation callback instead of the animation callback. Skip this split and every extra ten units doubles the input-lag on click, and the game feels broken even when the math is honest.

Phaser v4.2.1 "Giedi" (released 9 July 2026, verified 2026-08-30 on the official Phaser stable download page) becomes the right pick when a browser RTS wants Phaser's Scene system, tile map loader, camera, and input plugins out of the box. Phaser's Arcade Physics is not what you want here - RTS units glide, not collide - so use Phaser as the render + input framework and keep the simulation in plain JavaScript on the side. For a pure browser-native tick loop where the pixel dimensions and the camera code are already predictable, plain HTML Canvas is faster to ship. Use Phaser when you want a tile-map editor pipeline and camera bounds for free; use plain Canvas when the goal is a readable rts game tutorial people can build in one sitting.

WizardGenie is not a separate RTS 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, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-30 in src/app/_home-v2/_data/tools.ts). For a first RTS base loop, any frontier model scaffolds the harvest-build-train-attack state machine 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 resources, workers, buildings, and the tick

Nothing else in the pipeline matters if the tick drifts or the selection state confuses itself. Start with a small, testable model:

const TILE = 32;
const MAP_W = 64;
const MAP_H = 64;
const SIM_TICK_MS = 100;

const state = {
  resources: { minerals: 50, gas: 0, supply: { used: 4, cap: 10 } },
  buildings: [
    { id: "base-p1", type: "base", owner: 1, x: 6, y: 8, hp: 1500, buildTime: 0 },
  ],
  units: [
    { id: "w1", type: "worker", owner: 1, x: 7, y: 9, hp: 50, carrying: 0, target: null, order: "idle" },
    { id: "w2", type: "worker", owner: 1, x: 8, y: 9, hp: 50, carrying: 0, target: null, order: "idle" },
  ],
  nodes: [
    { id: "n1", type: "mineral", x: 12, y: 6, remaining: 1500 },
    { id: "n2", type: "mineral", x: 14, y: 7, remaining: 1500 },
  ],
  queues: {},
  selection: [],
  fog: new Uint8Array(MAP_W * MAP_H),
  tick: 0,
};

const UNIT = {
  worker:  { cost: { minerals: 50  }, buildMs: 8000,  moveSpd: 3.0, attack: 3,  range: 1 },
  soldier: { cost: { minerals: 75  }, buildMs: 12000, moveSpd: 2.5, attack: 8,  range: 2 },
  tank:    { cost: { minerals: 150, gas: 50 }, buildMs: 25000, moveSpd: 1.5, attack: 22, range: 4 },
};

function simTick() {
  state.tick += 1;
  for (const u of state.units) stepUnit(u);
  for (const b of state.buildings) if (b.buildTime > 0) b.buildTime = Math.max(0, b.buildTime - SIM_TICK_MS);
  for (const [bid, q] of Object.entries(state.queues)) stepTrainQueue(bid, q);
  updateFog();
  updateCombat();
}

function stepUnit(u) {
  if (u.order === "harvest") harvestStep(u);
  else if (u.order === "move") moveStep(u);
  else if (u.order === "attack-move") attackMoveStep(u);
}

Unit-test five cases before you generate any art: a worker with order "harvest" and a mineral node target moves toward the node one tile per few ticks; on arrival, the worker's carrying goes to 8 and the node's remaining drops by 8; the worker then routes back to the nearest owned base and adds carrying to minerals; queueing a soldier in a barracks with 75 minerals available drops minerals to zero and starts a 12000 ms build timer; on completion, one soldier spawns at the barracks rally point and supply.used goes up by 1. Those five tests catch ninety percent of javascript rts bugs. Keep the simulation tick at 100 ms and interpolate render positions - do not couple order resolution to requestAnimationFrame or a variable frame rate silently corrupts economy math.

Step 2 - wire selection, orders, and command queues in WizardGenie

With the state machine drafted, open WizardGenie. Drop in a bare index.html shell with a full-viewport canvas, a small HUD strip for minerals/gas/supply, a bottom-right build menu placeholder, and a hotkey table. Give the agent one paragraph: Build a browser real time strategy game. Render terrain on an offscreen canvas at load; every frame, redraw the visible tile window plus units, buildings, and a fog overlay. On left-mouse-down, start a selection rectangle; on left-mouse-up, mark every friendly unit inside the rectangle as selected. On right-mouse, if the ground is walkable issue a move order to selected units; if it hits an enemy or a resource node, issue attack-move or harvest instead. Simulation ticks every 100 ms; render uses requestAnimationFrame with linear interpolation between the last two simulation states. Show a build menu when a worker is selected: clicking a building slot spends resources, places a foundation on the target tile, and starts a build timer. Feed that to any coding model in the lineup and the interpreter scaffolds in under fifteen minutes.

The remaining hour is polish via follow-up prompts. Add a unit selection box with an outlined rectangle that respects camera pan - twelve lines of pointer-event handling built on the MDN Pointer Events reference (verified 2026-08-30), which spells out the pointerdown/pointermove/pointerup lifecycle that handles mouse, touch, and pen with one code path. Add a command queue on shift-right-click so a shift-held click appends to the selected units order queue instead of replacing it - twenty lines. Add a rally point on a completed barracks so spawned units auto-move to the rally after training - one line. Add a simple fog of war as a 64x64 Uint8Array shaded over the terrain layer, with sight radius per unit clearing tiles on tick - forty lines. Each item is a follow-up prompt, and the whole browser real time strategy experience lands over a Saturday afternoon.

Optional siblings on the same base shell: for a slower turn-tempo variant that swaps the simulation tick for phased orders, borrow the phase machine from how to make a turn based game. For a defense-only version that skips training and only spends on placed towers, see the wave loop in how to make a tower defense game. For the macro-economy sibling that focuses on victory-condition tension, revisit how to make a strategy game.

Step 3 - Tileset Forge terrain, Quick Sprites units, SFX Gen callouts, Music Gen bed

A blank Canvas with placeholder squares reads as unfinished even when the harvest math is honest. Four asset passes cover the whole html5 rts experience:

• Terrain - open Tileset Forge, generate a 32x32 map sheet with grass, dirt, water, and cliff tiles plus three transition tiles for edge blending. Tileset Forge accepts an AI-image prompt and detects, cleans, aligns, and exports a game-ready tileset with seamless-tiling checks handled internally (verified 2026-08-30 in src/app/_home-v2/_data/tools.ts). One sheet feeds the whole map. Cost lands around 8 credits including a retry pass for a broken cliff transition.
• Units - open Quick Sprites and generate one animated pixel sprite sheet per unit type per faction. A first build needs six sheets total: worker, soldier, tank per side, each with idle, walk, and attack cycles. Prompt in plain language: "small 32x32 pixel-art human worker with pickaxe, side view, 4-frame walk cycle, transparent background". Quick Sprites bundles the character generation, animation, and sheet packing in one flow (verified 2026-08-30). Cost lands around 30 credits for six sheets.
• SFX callouts - open SFX Gen and describe six clips: "short click ack for unit selection", "one-syllable order-ack for move", "rising three-note fanfare for build-complete", "sharp attack impact", "short unit-death cue", "long triumphant stinger for victory". SFX Gen bills roughly one credit per second of generated audio (verified 2026-08-30 in src/app/sfx-gen/page.tsx) - six short clips land around 8 credits total. Cap each callout at 80 ms and mute rapid-fire duplicates so a big drag-select does not blow out the mix.
• Music bed - open Music Gen and prompt a 60-second combat loop: "driving orchestral RTS combat loop with taiko drums, 128 bpm, tension without resolution, seamless loop". One track feeds the whole match. Cost lands around 10 credits.

Load tiles and sprites as regular Image elements against one sprite-atlas per faction, and let Canvas drawImage batch the draws by atlas. Do not chase a "perfect" first tile set - a second Tileset Forge retry is cheap, but three retries per sheet is a signal to change the prompt, not the seed.

Step 4 - playtest the browser rts game like a jam judge

Before you share the build, run a five-minute checklist borrowed from RTS jam judges:

1. The first worker moves without a stutter - a right-click on a mineral node produces a smooth walk animation, a couple-second gather, and a walk back to base; the number ticker on minerals rises visibly.
2. The first building placement lands inside two minutes - the player accumulates enough minerals to place a barracks foundation; the foundation renders as a distinct sprite from a completed building.
3. The training queue reads correctly - clicking soldier in a completed barracks starts a visible countdown; the soldier spawns at the barracks rally point and moves to a set rally if one is placed.
4. Drag-selection includes only friendly units - a rectangle over a mixed group selects your workers and soldiers, not the enemy scout inside it; a shift-drag adds to the current selection instead of replacing it.
5. Attack-move on a target actually resolves combat - a squad of three soldiers with attack-move on an enemy foundation halts at range, fires, and either wins or dies; the loser is removed from the scene and the winner supply.used updates.

Log issues as WizardGenie follow-ups, not rewrites. "Add a supply-cap warning at 90% used" is one prompt. "Add a hotkey Q that centers the camera on the main base" is another. The Sorceress tools guide lists every asset tool if you want to swap Quick Sprites for hand-drawn units or add a second Music Gen bed for a peace-time track - the tick-loop code does not change.

What how to make an rts game costs on Sorceress in 2026

An honest budget for the stack above against the 2026 Sorceress rate card (verified 2026-08-30 against local source):

• One Tileset Forge terrain sheet (grass, dirt, water, cliff, three transitions): ~8 credits (0.08 USD)
• Six Quick Sprites unit sheets (worker, soldier, tank per faction): ~30 credits (0.30 USD)
• Six SFX Gen callouts (~8 seconds of audio total): ~8 credits (0.08 USD)
• One Music Gen 60-second combat loop: ~10 credits (0.10 USD)
• Coding-model API time with planner + budget executor: under 0.40 USD

Total roughly 56 credits or 0.56 USD in generation, plus a small model bill. The free 100-credit signup grant covers this build outright, with headroom for a second faction skin and a peace-time music variant. Lifetime Early Access sits at 49 USD (LIFETIME_PRICE in src/app/plans/page.tsx) if you want desktop WizardGenie with auto-update for the next jam. Credits convert at 100 per dollar (CREDITS_PER_DOLLAR in src/lib/models.ts). Adding an isometric camera skin, a second music bed, and a fog-reveal SFX sting adds about 15 credits, still well under the one-dollar ceiling this guide targets.

That is the whole path for how to make an rts game as a browser base loop in 2026: model resources, workers, buildings, and units as a small tick-simulated state, let WizardGenie scaffold the harvest-build-train-attack flow from one prompt, dress the map with Tileset Forge terrain and Quick Sprites units, and ship the browser real time strategy before the weekend ends. When you are ready for tech trees, factions, or a real ladder AI, graduate slowly - but finish one honest base loop first.