Phaser React Bifrost Vite TS Template

Phaser + React Bifrost + Vite + TypeScript Stack With ESLint & Prettier

Template Features

• Latest Phaser 3.x
• Using React Bifrost for the UI
• Prettier + ESLint
• Vite for blazing fast compilation and hot reloading
• Assets generator
• BGM Player (Howler.js)
• Logger (pino & donsole)
• React UI integration (React Bifrost)
• Animated tiles plugin

React Bifrost Examples

This template includes three examples for using React Bifrost to build your UI with React.

• Title Realm
  • Simple menu with buttons that starts the Phaser game.
• Hud Realm
  • Communicates back and forth between React & Phaser to show the HP meter
• Game Over
  • Restarts the game

Developing & Building

Setup

pnpm
pnpm run assets
pnpm dev

Generating Assets Auto Import

! If you use the auto generated assets 👇 ! Everytime you add something to your assets directory, you should run the pnpm run assets command to generate the auto import file.

Run live server

yarn dev

Build

yarn build

Recipe

Aseprite Export Example

In this template, I've included the following sprite:

Exported like so

Tiled Maps

Mark all walls with custom property: collides: true

Embed tileset in map

Audiosprites

Since Vite does not support ac3 & m4a formats, we need to make sure the audiosprite json is not referencing those files and that they're not included in the bundle.

Credits

Tileset Knight Sprite