osisdie/phaser-rpg-game

A 2D pixel-art JRPG built with Phaser 3, featuring AI + procedural art generation, turn-based combat, and 12-region adventure. 一款以 Phaser 3 打造的 2D 像素風 JRPG,全程式生成美術、回合制戰鬥、12 大區域冒險。

Jupyter Notebook

2

27 commits

updated Mar 16, 2026

See the code

README

Hero's Legend — Tale of Seven Kingdoms

A 2D pixel-art JRPG built with Phaser 3, featuring AI + procedural art generation, turn-based combat, and 12-region adventure.

English | 繁體中文

Play Demo CI License: MIT Phaser 3 TypeScript

Title Screen Battle Scene


Features

  • Epic Adventure — Journey through 12 kingdoms (Elf, Treant, Beast, Merfolk, Giant, Dwarf, Undead...), rising from a wandering hero to king
  • Turn-based Combat — AGI-based turn order with attack, skills, items, defend, and flee
  • 120+ Monsters & 12 Bosses — 10 monsters + 1 regional boss per region, culminating in a final boss battle
  • 7 Companions — Each with unique racial skills; bring up to 3 into battle
  • AI + Procedural Art — Monsters generated by Stable Diffusion pixel-art models; characters, buildings, terrain, and UI panels rendered in real-time via Canvas 2D (AI-first with procedural fallback)
  • AI Audio — Background music and SFX generated by MusicGen
  • Equipment System — 5 slots × 8 tiers of gear affecting ATK, DEF, AGI, and more
  • Save System — 3 manual save slots + autosave (localStorage)
  • Menu System — Items / Equipment / Party / Skills / Save / System

Controls

KeyAction
WASD / Arrow KeysMove
Enter / Space / ZConfirm / Advance dialogue
ESCMenu / Cancel
AAuto-attack mode (battle)
F11Toggle fullscreen
Mouse clickConfirm / Select target
Right-clickCancel

Screenshots

Title ScreenWorld Map
TitleWorld Map
Town ExplorationField Adventure
TownField
Battle SceneBoss Fight
BattleBoss

Tech Stack

TechnologyPurpose
Phaser 32D game framework (WebGL / Canvas)
TypeScriptType-safe game logic
ViteDev server & bundler
PlaywrightE2E browser testing
Stable DiffusionAI pixel-art sprite generation (All-In-One-Pixel-Model)
MusicGenAI background music & SFX generation

Getting Started

Prerequisites

Installation

git clone https://github.com/osisdie/phaser-rpg-game.git
cd phaser-rpg-game
pnpm install

Run

pnpm start          # Start dev server (port 5473)
pnpm run status     # Check if server is running
pnpm run stop       # Stop the server

Or run directly:

pnpm run dev        # Vite dev server
pnpm run build      # TypeScript check + production build
pnpm run preview    # Preview production build

Docker

docker build -t phaser-rpg-game .
docker run -p 8080:8080 phaser-rpg-game

Open http://localhost:8080 to play.

Project Structure

phaser-rpg-game/
├── src/
│   ├── scenes/        # Phaser scenes (Boot → Title → NameInput → WorldMap → Town/Field → Battle → …)
│   ├── systems/       # Game logic (state, combat, audio, i18n)
│   ├── entities/      # Player sprite & movement
│   ├── data/          # Static data (monsters, items, skills, regions, tables)
│   ├── ui/            # Reusable UI components (TextBox, BattleHUD, menus)
│   ├── maps/          # Procedural map generation (town 40×32, field 48×36)
│   ├── art/           # Procedural pixel art generation (Canvas 2D)
│   └── types/         # TypeScript interfaces
├── e2e/               # Playwright E2E tests
├── scripts/           # Dev workflow & AI asset generation scripts
├── public/assets/ai/  # AI-generated sprites, audio & manifests
├── docs/screenshots/  # Game screenshots
├── playwright.config.ts
├── index.html
├── vite.config.ts
└── tsconfig.json

Scripts

CommandDescription
pnpm startStart dev server with port-check
pnpm run stopStop dev server on port 5473
pnpm run statusCheck server status + health check
pnpm run devVite dev server (raw)
pnpm run buildTypeScript check + Vite build
pnpm run previewPreview production build
pnpm testRun Playwright E2E tests
pnpm run test:uiOpen Playwright test UI
pnpm run capture:screenshotsCapture README screenshots (title, worldmap, town, field, battle, boss)
bash scripts/build.shTypeScript check + build with output

Contributing

Contributions are welcome! See CONTRIBUTING.md for the full guide.

Quick steps:

  1. Fork the repository
  2. Create a branch: git checkout -b feat/my-feature
  3. Commit using Conventional Commits:
    git commit -m "feat: add new monster sprites"
    
  4. Push and open a Pull Request

License

MIT — the codebase is licensed under MIT; feel free to use, modify, and distribute. Note: AI-generated assets in public/assets/ai/ may be subject to additional license terms (see AI-Generated Assets Notice below).

AI-Generated Assets Notice

Assets in public/assets/ai/ (sprites, audio, etc.) are generated using third-party AI models and may be subject to additional license terms beyond MIT:

Asset TypeModel / SourceLicense
Pixel-art spritesAll-In-One-Pixel-Model (Stable Diffusion)Check model card on Hugging Face
Background music & SFXMusicGenMeta's license

Users are responsible for complying with all applicable licenses when using, modifying, or distributing these AI-generated assets. The MIT License applies to the codebase; AI assets may have different terms.

2d-game
ai-generated-art
game
gamedev
html5-game
jrpg
phaser
phaser3
pixel-art
rpg
stable-diffusion
turn-based-combat
typescript
vite
webgl

osisdie/phaser-rpg-game

A 2D pixel-art JRPG built with Phaser 3, featuring AI + procedural art generation, turn-based combat, and 12-region adventure. 一款以 Phaser 3 打造的 2D 像素風 JRPG,全程式生成美術、回合制戰鬥、12 大區域冒險。

Jupyter Notebook

2

27 commits

updated Mar 16, 2026

See the code

README

Hero's Legend — Tale of Seven Kingdoms

A 2D pixel-art JRPG built with Phaser 3, featuring AI + procedural art generation, turn-based combat, and 12-region adventure.

English | 繁體中文

Play Demo CI License: MIT Phaser 3 TypeScript

Title Screen Battle Scene


Features

  • Epic Adventure — Journey through 12 kingdoms (Elf, Treant, Beast, Merfolk, Giant, Dwarf, Undead...), rising from a wandering hero to king
  • Turn-based Combat — AGI-based turn order with attack, skills, items, defend, and flee
  • 120+ Monsters & 12 Bosses — 10 monsters + 1 regional boss per region, culminating in a final boss battle
  • 7 Companions — Each with unique racial skills; bring up to 3 into battle
  • AI + Procedural Art — Monsters generated by Stable Diffusion pixel-art models; characters, buildings, terrain, and UI panels rendered in real-time via Canvas 2D (AI-first with procedural fallback)
  • AI Audio — Background music and SFX generated by MusicGen
  • Equipment System — 5 slots × 8 tiers of gear affecting ATK, DEF, AGI, and more
  • Save System — 3 manual save slots + autosave (localStorage)
  • Menu System — Items / Equipment / Party / Skills / Save / System

Controls

KeyAction
WASD / Arrow KeysMove
Enter / Space / ZConfirm / Advance dialogue
ESCMenu / Cancel
AAuto-attack mode (battle)
F11Toggle fullscreen
Mouse clickConfirm / Select target
Right-clickCancel

Screenshots

Title ScreenWorld Map
TitleWorld Map
Town ExplorationField Adventure
TownField
Battle SceneBoss Fight
BattleBoss

Tech Stack

TechnologyPurpose
Phaser 32D game framework (WebGL / Canvas)
TypeScriptType-safe game logic
ViteDev server & bundler
PlaywrightE2E browser testing
Stable DiffusionAI pixel-art sprite generation (All-In-One-Pixel-Model)
MusicGenAI background music & SFX generation

Getting Started

Prerequisites

Installation

git clone https://github.com/osisdie/phaser-rpg-game.git
cd phaser-rpg-game
pnpm install

Run

pnpm start          # Start dev server (port 5473)
pnpm run status     # Check if server is running
pnpm run stop       # Stop the server

Or run directly:

pnpm run dev        # Vite dev server
pnpm run build      # TypeScript check + production build
pnpm run preview    # Preview production build

Docker

docker build -t phaser-rpg-game .
docker run -p 8080:8080 phaser-rpg-game

Open http://localhost:8080 to play.

Project Structure

phaser-rpg-game/
├── src/
│   ├── scenes/        # Phaser scenes (Boot → Title → NameInput → WorldMap → Town/Field → Battle → …)
│   ├── systems/       # Game logic (state, combat, audio, i18n)
│   ├── entities/      # Player sprite & movement
│   ├── data/          # Static data (monsters, items, skills, regions, tables)
│   ├── ui/            # Reusable UI components (TextBox, BattleHUD, menus)
│   ├── maps/          # Procedural map generation (town 40×32, field 48×36)
│   ├── art/           # Procedural pixel art generation (Canvas 2D)
│   └── types/         # TypeScript interfaces
├── e2e/               # Playwright E2E tests
├── scripts/           # Dev workflow & AI asset generation scripts
├── public/assets/ai/  # AI-generated sprites, audio & manifests
├── docs/screenshots/  # Game screenshots
├── playwright.config.ts
├── index.html
├── vite.config.ts
└── tsconfig.json

Scripts

CommandDescription
pnpm startStart dev server with port-check
pnpm run stopStop dev server on port 5473
pnpm run statusCheck server status + health check
pnpm run devVite dev server (raw)
pnpm run buildTypeScript check + Vite build
pnpm run previewPreview production build
pnpm testRun Playwright E2E tests
pnpm run test:uiOpen Playwright test UI
pnpm run capture:screenshotsCapture README screenshots (title, worldmap, town, field, battle, boss)
bash scripts/build.shTypeScript check + build with output

Contributing

Contributions are welcome! See CONTRIBUTING.md for the full guide.

Quick steps:

  1. Fork the repository
  2. Create a branch: git checkout -b feat/my-feature
  3. Commit using Conventional Commits:
    git commit -m "feat: add new monster sprites"
    
  4. Push and open a Pull Request

License

MIT — the codebase is licensed under MIT; feel free to use, modify, and distribute. Note: AI-generated assets in public/assets/ai/ may be subject to additional license terms (see AI-Generated Assets Notice below).

AI-Generated Assets Notice

Assets in public/assets/ai/ (sprites, audio, etc.) are generated using third-party AI models and may be subject to additional license terms beyond MIT:

Asset TypeModel / SourceLicense
Pixel-art spritesAll-In-One-Pixel-Model (Stable Diffusion)Check model card on Hugging Face
Background music & SFXMusicGenMeta's license

Users are responsible for complying with all applicable licenses when using, modifying, or distributing these AI-generated assets. The MIT License applies to the codebase; AI assets may have different terms.

2d-game
ai-generated-art
game
gamedev
html5-game
jrpg
phaser
phaser3
pixel-art
rpg
stable-diffusion
turn-based-combat
typescript
vite
webgl