Games · Devlog #04 · personal project

Magic Word

A full 2D RPG in the browser

A 2D RPG in the browser with the systems that make an RPG an RPG: a tilemap world, NPCs, combat, inventory, equipment, crafting, quests, a player house and a local save with automated tests.

1 min read by Edinaldo Sá

  • RPG
  • Phaser 3
  • TypeScript
  • Vite
  • Vitest
  • Crafting
Pixel-art illustration: a green tiled meadow with a red-roofed house, trees, a pond, an anvil throwing sparks, a chest, an NPC with an exclamation mark and a hero inside a rune circle.
Pixel-art illustration made for this post. Not a capture from the game.

A real RPG, in the browser

Browser RPGs tend to be shallow: one map, one enemy and no progression. Magic Word is my answer to that. It brings the systems that make an RPG an RPG, such as crafting, equipment, quests and saving, running right in the browser, with no download and no account.

There are twelve scenes implemented. It’s a game, not a one-screen demo.

The systems

I built the game like an inventory of systems. Each of these is implemented:

  • WorldTilemap worldWith a controllable character.
  • NPCsNPCs and interactionPeople to talk to on the map.
  • CombatCombat in its own sceneFights happen in a dedicated scene.
  • ItemsInventory and equipmentWhat you carry and what you wear.
  • CraftingCraftingMaking items is part of the game.
  • QuestsQuests with a logA log to keep track of quests.
  • HomePlayer houseWith character customization.
  • SheetCharacter sheetWith progression.

Rounding it out: context-aware audio for each scene and a title screen with New game and Continue, sound control and fullscreen.

A tested save

Saving and loading are local, and persistence has automated tests with Vitest. In an RPG, losing progress is the worst possible bug, so it makes sense for this to be the part covered by tests.

  • Local save and load
  • Persistence tests with Vitest
  • Continue on the title screen

A modern stack

The foundation is modern and typed:

  • Phaser 3.90 + phaser-jsx
  • TypeScript 5.9
  • Vite 8
  • Node 24
  • Vitest
  • ESLint · Prettier · Husky

The project has a working build, CI set up and a script to run it locally on Windows. The code is under the MIT license.

Tech sheet

Status
1.0.0-alpha, working game
Platform
Browser, no download and no account
Scope
12 scenes
Engine
Phaser 3.90 + TypeScript 5.9
License
MIT (code)

Into Phaser, TypeScript or testing game saves? Tell me about it.

Write to me