Top Floor DesignDani Salman
Floor 04 / 05 — Case study Multiplayer action RPG · In the browser

Fate or Fortune

A server-authoritative, co-op action RPG in isometric pixel art that runs in a browser tab. Up to four players clear procedurally generated rifts across sixteen biomes, cut their own skill gems and weave the Great Fateloom. The server simulates every hit at 20 ticks a second, and around two thousand tests keep it honest.

Type
Original game, 1–4 player co-op
Role
Design, engineering, art direction
Client
TypeScript, PixiJS 8 (WebGL), WebAudio
Server
C# .NET 10, ASP.NET Core, SignalR, PostgreSQL

Recorded from a live local server1920 × 1080 · PixiJS client, .NET server

(01) — Overview

Every hit decided on the server.

The client only sends intentions: move here, cast this. The server runs the world at 20 Hz and streams snapshots back, while the client predicts your own movement and reconciles, so it feels instant and can't be cheated. Map seeds come from a cryptographic RNG and every craft is rolled and audited server-side.

Around that engine is a full game: four classes with skills defined as pure data, uncut gems you cut into any skill, supports and seventeen auras, a 48-motif talent loom per class, a spatial inventory, an Ember currency economy, a market and mail, and a Riftweb endgame that climbs to area level 100.

  • ClassesWarden · Strider · Evoker · Gravecaller
  • Biomes16, each with its own boss
  • Server tick20 Hz, authoritative
  • Players1–4 co-op
  • Codebase~51k lines client · ~90k server
Server tests2003

xUnit facts and theories across combat, crafting, AI, the Fateloom, Riftweb, market and persistence.

E2E scripts122

Playwright journeys that drive the real game and save screenshots and JSON reports.

Tick p994.94ms

Against a 50 ms budget, with four combat instances at once in a release build. Zero overruns.

Max area level100

Reached at Riftweb depth 350, with monster density climbing on a written contract.

(02) — Endgame builds, recorded live

Stacked characters, packs that pop.

Three level 100 characters, geared and linked the way a late-game player would build them, recorded on a live local server at 1080p and 60 fps. Every bolt, shard and spin you see was simulated by the server and streamed to the browser.

Live server · 60 fps
Live server · 60 fps
Live server · 60 fps
Boss · Sanguine Carnival

Malveil, Master of Revels.

A carnival ring of fire and knives. Bosses telegraph their attacks, arenas seal, and the HUD globes track health and Vigor as it's spent.

Boss · Shiverglass Caldera

Ysara, the Mirror Queen.

A different biome, boss and palette, all generated from the same systems.

Hideout → Rift

The hideout, then the rift.

Walk to the Rift Device, pick a node on the Riftweb and step through one of six portals into a freshly generated map.

(03) — The systems

Depth you can see.

Every panel is hand-built in the DOM over the PixiJS world, in the same ornate language as the HUD.

The Great Fateloom talent screen with illustrated motifs
FateloomThe Great Fateloom: 48 illustrated motifs per class in six rows, a ten-point gate per row, keystones and a 120-point cap.
The Riftweb node graph with modifiers
RiftwebThe endgame is a node graph of rifts by depth, each with modifiers, rewards and a boss to reveal the next paths.
Skills and auras panel with socketed gems
GemsFour skill sockets, two to five support slots per skill, and seventeen auras that reserve a share of max Vigor.
Inventory design study with multi-cell items
InventoryA spatial grid where items have real footprints, across a 12×5 bag and 12×12 stash tabs, and 385 item bases with prefix and suffix affixes.
Gem cutting screen
Gem cuttingGems drop uncut. You choose what they become, gated by character and area level.
The hideout with stash, crafting table, Rift Device and NPCs
HideoutStash, crafting table, Rift Device, market broker and mailbox, plus a Proving Ground with DPS-meter training effigies.
Death recap screen
Death recapWhen you fall, the server's own combat log explains exactly what killed you.

(04) — Skill effects

Fire with rules.

Skill art is authored frame by frame and previewed on an isolated test stage before it reaches the game. Flashover, for example, chains through up to six burning enemies and copies each one's remaining ignite, over a 32-frame, 1.44-second eruption.

Flashover
Cindercall
Ember Bolt

(05) — How it's put together

One set of rules, shared.

A shared domain library holds the catalogues and rules for skills, items, affixes, map generation and talents. The server runs them and the client mirrors movement for prediction. Hover or tap a node.

Swipe the diagram sideways to see all of it →

(06) — Engineering notes

Built like a game studio, by one person.