Vector How to Make a Shmup (Browser Scroll Loop 2026)

Most beginners who search “how to make a shmup” want a fighter that scrolls into enemy formations, an auto-fire stream that upgrades when power-ups drop, and a stage clear — not a Cave-density spell-card bible on day one. A full arcade campaign with rank systems, ranked replays, and multi-loop scoring is a specialist craft. A browser scroll loop is different. A coding agent scaffolds the camera, wave tables, and power-up handlers from one prompt, and AI generation covers ships, starfields, and shot audio. On desktop or web, that means WizardGenie for the scroll-spawn-fire interpreter, Quick Sprites for ship and enemy sheets, SFX Gen for shot and explosion clips, and optional Music Gen for a combat bed. This guide is the honest end-to-end for how to make a shmup in 2026, as a weekend build you can finish once.

What how to make a shmup actually means in 2026

The query “how to make a shmup” hides three intents. Some searchers want a Unity asset pack with fifty prefab bosses and a full STG scoring bible — that is engine shopping, not a minimal playable loop. A second intent is a twin-stick arena where free aim and wave clear matter more than a forced scroll — that is a shooter tutorial, and the sibling guide on how to make a shooter game already owns that loop. A third intent is dense patterned curtains with graze scoring — that is danmaku, and how to make a bullet hell covers hitbox radius and pattern tables. The intent this guide targets is a browser scroll loop: a vertical camera that advances, enemy formations that enter on a timeline, auto-fire with power-up upgrades, and a ninety-second stage clear. That is a weekend build, it demos the Sorceress toolset, and it is the format most shmup tutorial and javascript shmup searchers actually want.

The presentation contract is small and strict. A title screen shows the stage name, control hints (move with WASD or arrows, auto-fire is held or always on, collect P for power), and Play. The play screen shows the ship near the bottom, a scrolling starfield, incoming formations, score top-left, lives and shot level top-right, and optional mute toggle. When an enemy dies, sometimes drop a power-up. When the player’s shotLevel rises, fire rate or spread increases. The shoot ’em up overview on Wikipedia (verified 2026-08-28) traces the genre from Space Invaders (1978) through scrolling shooters, and documents the core skills: fast reactions and memorizing enemy attack patterns. Cite that page when you write your itch.io blurb so players know you shipped a browser shoot em up scroll loop, not a twin-stick arena with a fake backdrop scroll bolted on.

The shmup scroll loop in one minute (scroll, spawn, fire, destroy, pickup)

Five moving parts, repeated until the player dies or clears the stage. First, scroll — advance a camera offset each frame so the starfield and world feel like they are moving into the ship. Second, spawn — wave tables enqueue enemy formations at elapsed-time stamps. Third, fire — auto-fire player bullets from a pool on a cooldown that shrinks with shotLevel. Fourth, destroy — AABB or circle hits between bullets and enemies, then between enemy bullets and the player. Fifth, pickup — power-ups drift downward; on overlap, bump shotLevel and play a chime. Boss phases, bombs, and rank systems are polish layered after one honest formation wave is readable at sixty frames per second.

Pick your engine for how to make a shmup: 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 starfield, ship, enemies, and bullets. Track input with a keys Set, run the loop with requestAnimationFrame, and resolve hits with axis-aligned boxes or simple circles. Total code footprint for a working html5 scrolling shooter is under 500 lines including scroll offset, wave table, auto-fire pool, and power-up drops. The MDN Canvas API docs cover drawing, and the requestAnimationFrame guide covers smooth delta-time ticks.

Object pools versus push-and-splice arrays stay readable for jam scope: preallocate fixed arrays of bullets and enemies with an active flag, recycle the first inactive slot on spawn, and skip inactive entries in the update pass. Splicing mid-frame under a dense formation will hitch on mid-range phones — pool reuse is the single performance habit that separates a playable vertical shooter browser build from a slideshow.

Phaser v4.2.1 “Giedi” (released 9 July 2026, verified 2026-08-28 on the official Phaser stable download page) becomes the right pick if you want Arcade Physics overlap callbacks, tilemap starfields, particle trails on explosions, or a Scene stack for title-stage-results with tweened bosses. Phaser does not invent your wave table — you still need the same time-stamped formations and power-up rules. Use Phaser when Scene stacks and particle trails are the product; use raw canvas when the product is a shoot em up tutorial people can read in one sitting. A phaser shmup is a fine v2 once the canvas prototype proves the scroll feel.

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, 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-28 in src/app/_home-v2/_data/tools.ts). For shmup loops, any frontier model scaffolds scroll cameras, wave tables, and power-up handlers 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 scroll camera, wave tables, and bullet pools

Nothing else in the pipeline matters if the camera hitch-scrolls or enemies allocate every frame. Start with a small, testable model:

const W = 400, H = 600;
const player = { x: 200, y: 520, w: 28, h: 28, lives: 3, shotLevel: 1 };
const BULLETS = Array.from({ length: 200 }, () => ({
  active: false, x: 0, y: 0, vy: 0, fromPlayer: true,
}));
const ENEMIES = Array.from({ length: 40 }, () => ({
  active: false, x: 0, y: 0, w: 32, h: 32, hp: 1, vx: 0, vy: 0,
}));
const POWER = Array.from({ length: 8 }, () => ({
  active: false, x: 0, y: 0,
}));

let scrollY = 0;
const SCROLL_SPEED = 60; // px per second

const WAVES = [
  { t: 2.0, kind: "line", count: 5, y: -40, spacing: 56 },
  { t: 6.0, kind: "vee", count: 5, y: -40, spacing: 48 },
  { t: 11.0, kind: "line", count: 7, y: -40, spacing: 48 },
  { t: 18.0, kind: "boss", count: 1, y: -60, spacing: 0 },
];
let waveIndex = 0;
let elapsed = 0;
let fireCd = 0;

function spawnEnemy(x, y, hp = 1) {
  const e = ENEMIES.find((p) => !p.active);
  if (!e) return;
  e.active = true;
  e.x = x; e.y = y; e.hp = hp; e.vx = 0; e.vy = 40;
}

function spawnWave(w) {
  const startX = (W - (w.count - 1) * w.spacing) / 2;
  for (let i = 0; i < w.count; i++) {
    const x = startX + i * w.spacing;
    const yOff = w.kind === "vee" ? Math.abs(i - (w.count - 1) / 2) * 18 : 0;
    spawnEnemy(x, w.y - yOff, w.kind === "boss" ? 20 : 1);
  }
}

function firePlayer() {
  const n = Math.min(3, player.shotLevel);
  const spread = (n - 1) * 0.12;
  for (let i = 0; i < n; i++) {
    const b = BULLETS.find((p) => !p.active);
    if (!b) return;
    b.active = true;
    b.fromPlayer = true;
    b.x = player.x + (i - (n - 1) / 2) * 10;
    b.y = player.y - 16;
    b.vy = -420;
  }
}

function update(dt) {
  elapsed += dt;
  scrollY += SCROLL_SPEED * dt;
  while (waveIndex < WAVES.length && elapsed >= WAVES[waveIndex].t) {
    spawnWave(WAVES[waveIndex++]);
  }
  fireCd -= dt;
  if (fireCd <= 0) {
    firePlayer();
    fireCd = Math.max(0.08, 0.22 - player.shotLevel * 0.03);
  }
  // advance enemies, bullets, power-ups; resolve AABB hits; drop power on kill
}

Unit-test three cases before you generate art: a wave at t = 2.0 spawns exactly five enemies; auto-fire at shotLevel 1 emits one bullet per cooldown; and a kill with a 20% roll can activate one power-up that drifts downward. Those three tests catch ninety percent of javascript shmup bugs. Keep the first formation loose so playtesters can read lanes within ten seconds.

Step 2 — wire collisions, power-ups, and HUD in WizardGenie

With pool helpers drafted, open WizardGenie. Drop in a bare index.html shell with a 400×600 canvas and placeholder HUD labels for score, lives, and shot level. Give the agent one paragraph: Build a browser shmup. Vertical scroll starfield. Player ship moves with WASD near the bottom, clamped to the canvas. Auto-fire with shotLevel 1–3 controlling bullet count and fire rate. Wave table spawns line and vee formations at 2s, 6s, 11s, then a 20 HP boss at 18s. Enemies drift downward. On enemy death, 20% chance to drop a power-up that bumps shotLevel (cap 3). Three lives. Score +100 per kill, +500 on boss. Show STAGE CLEAR at 90 seconds or when the boss dies. Autosave high score 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 bomb clear — one bomb per life that damages all on-screen enemies — twelve lines. Add a enemy aimed shot — grunt fires one bullet toward the player every 2.5 seconds — ten lines. Add a parallax starfield — two scroll layers at different speeds — eight lines. Add a results screen — kills, max shotLevel, retry — ten lines. Each item is a follow-up prompt, and the whole browser shoot em up comes together over a Saturday afternoon.

Optional siblings: if your jam needs dense patterned curtains instead of formation clears, borrow the dodge loop from how to make a bullet hell — same canvas shell, different win condition. For a lighter fixed-screen formation without scroll, the related post on how to make Space Invaders covers rows, barriers, and step-down motion.

Step 3 — Quick Sprites ships, SFX Gen shot cues, Music Gen combat bed

Flat colored triangles read as a tech demo even when the wave math is perfect. Four asset passes cover the whole vertical shooter browser experience:

• Player ship sheet — one 48×48 fighter from Quick Sprites. Prompt for “top-down tiny fighter ship, neon cyan outline, transparent background, shmup sprite, 48x48”. Quick Sprites costs 9 credits per generation (CREDITS_PER_GEN in src/app/quick-sprites/page.tsx).
• Enemy sheets — two grunt or mid-boss silhouettes from Quick Sprites at 9 credits each (18 credits total).
• Bullet and explosion VFX — one Quick Sprites pass for small orb bullets and a short burst frame (9 credits).
• Starfield backdrop — one scrolling space corridor from AI Image Gen. Prompt for “vertical shmup stage background, dark navy starfield, subtle parallax layers, 400x600, game backdrop, no characters”. Nano Banana Pro costs 18 credits per generation per src/lib/models.ts.

Open SFX Gen, describe each clip in plain language (“short laser peep, UI shot”, “enemy hit thud”, “explosion crackle”, “power-up chime”, “player death crackle”), and export WAV into your assets/audio/ folder. Billing is 1 credit per second of generated audio per src/app/sfx-gen/page.tsx — five short clips land around 6 credits total.

For the background loop, open Music Gen and prompt for “fast synth shmup combat loop, driving drums, no vocals, seamless loop, 30 seconds”. Music Gen costs 10 credits per generation (MUSIC_CREDIT_COST in src/app/music-gen/page.tsx). Mute by default with a toggle — mobile browsers often block autoplay until the first click anyway.

Step 4 — playtest the browser scroll loop like a jam judge

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

1. Scroll feels honest — starfield and enemies move at a readable pace; no hitch when waves spawn.
2. Formations are readable — first line leaves visible lanes; vee does not overlap the player spawn instantly.
3. Power-ups work once — pickup bumps shotLevel by one and caps at three; no double-collect on the same drop.
4. Pools stay calm — dense fire never hitch; off-screen bullets recycle; no unbounded array growth.
5. Clear feels earned — ninety-second STAGE CLEAR or boss kill shows score; high score persists across refresh.

Log issues as WizardGenie follow-ups, not rewrites. “Slow the first wave by twenty percent and widen lane spacing” is one prompt. “Add a second mid-stage line that only fires aimed singles” is another. The Sorceress tools guide lists every asset tool if you want to swap Music Gen for Sound Studio on a longer loop.

What how to make a shmup costs on Sorceress in 2026

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

• Player ship Quick Sprites sheet: 9 credits (0.09 USD)
• Two enemy Quick Sprites sheets: 18 credits (0.18 USD)
• Bullet and explosion VFX Quick Sprites: 9 credits (0.09 USD)
• One AI Image Gen starfield backdrop: 18 credits (0.18 USD)
• Five SFX Gen clips (~6 seconds total): ~6 credits (0.06 USD)
• One Music Gen combat bed: 10 credits (0.10 USD)
• Coding-model API time for WizardGenie scaffolding: under 0.40 USD with a planner plus budget executor pair

Total art and audio: roughly 70 credits or 0.70 USD. The free 100-credit signup grant (src/app/api/admin/credits/route.ts) covers the full stack outright with room for a second Music Gen take. If you already built a Space Invaders clone or bullet hell dodge loop in the same jam week, reuse the SFX Gen shot peep for player fire — short laser peeps generalize well across shoot em up tutorial builds.