A high-performance Phaser 3 game development template that combines three powerful technologies:
- 🎮 Phaser: The leading HTML5 game framework
- 🚀 Rsbuild: A Rust-powered build tool with exceptional performance
- ⚡ Bun: The ultra-fast all-in-one JavaScript runtime & bundler
| Build Step | Traditional Stack | Rsbuild + Bun | Why It Matters |
|---|---|---|---|
| Cold Start | ~2.40s | ~490ms | Faster development startup |
| HMR Update | ~220ms | ~90ms | Quick iterations during development |
| Production Build | ~2.12s | ~360ms | Faster deployment builds |
-
Build System
- Rust-powered compilation for faster builds
- Built-in TypeScript and source map support
- Efficient static asset handling
- Advanced code splitting with Module Federation
-
Development Experience
- Instant HMR updates
- TypeScript type checking
- Consistent dev and prod builds
- Advanced debugging tools
-
Advanced Capabilities
// Example: Game scene with efficient asset loading
class GameScene extends Phaser.Scene {
preload() {
this.load.image("player", "assets/sprites/player.png");
this.load.json("levelData", "assets/data/level1.json");
}
}
// Example: Module Federation for large games - Async level loading
// game-core/rsbuild.config.ts
export default defineConfig({
moduleFederation: {
name: "gameCore",
shared: {
phaser: { singleton: true },
// Compartilha dependências comuns
"@game/utils": { singleton: true },
},
},
});
// game-levels/rsbuild.config.ts
export default defineConfig({
moduleFederation: {
name: "gameLevels",
exposes: {
// Expõe níveis e assets específicos
"./winter-levels": "./src/worlds/winter/index.ts",
"./desert-levels": "./src/worlds/desert/index.ts",
},
shared: {
phaser: { singleton: true },
"@game/utils": { singleton: true },
},
},
});
// Usage in main game
async function loadGameWorld(world: "winter" | "desert") {
// Carrega dinamicamente o mundo selecionado
const levels = await import(`gameLevels/${world}-levels`);
return levels.default;
}# Clone the template
git clone [repository-url]
# Install dependencies
bun install
# Start development server
bun run dev| Command | Description |
|---|---|
bun install |
Install dependencies at native speed |
bun run dev |
Start dev server with HMR |
bun run build |
Create optimized production build |
bun run preview |
Preview production build |
bun run dev-nolog |
Dev server without analytics |
bun run build-nolog |
Production build without analytics |
template-phaser-rsbuild/
├── src/
│ ├── main.ts # Game entry point
│ ├── scenes/ # Phaser scenes
│ │ ├── Boot.ts
│ │ ├── Preloader.ts
│ │ ├── MainMenu.ts
│ │ └── Game.ts
│ └── types/ # TypeScript definitions
├── public/
│ ├── assets/
│ │ ├── sprites/ # Game sprites
│ │ └── data/ # Game data files
│ └── style.css # Global styles
├── rsbuild.config.ts # Build configuration
└── index.html # Entry HTML
Customize the build process in rsbuild.config.ts:
import { defineConfig } from "@rsbuild/core";
export default defineConfig({
output: {
copy: [
{
from: "./public/assets",
to: "assets",
},
],
},
// Additional configuration options
});The template includes optional anonymous analytics that help the Phaser team improve the template. No personal data is collected. You can opt out using the -nolog commands or by removing log.ts.
Created by Phaser Studio. Powered by coffee, anime, pixels and love. The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.
All rights reserved.