Phaser 4 TypeScript Template

A Phaser 4 + TypeScript + Vite template optimized for development and deployment of mobile and web games.

https://github.com/michaelpwest/phaser-typescript-template/

---

This Phaser 4 template can be used by developers who want to build and deploy mobile games using Phaser 4 and TypeScript. It includes a range of useful features such as mobile deployment with a custom app icon, responsive scaling for all screen sizes, persistent storage, multiple locales support, and debugging options.

A basic sample game is included to help you get started building your own.

A big thank you to Kenney Assets, ansimuz, and lukasfdahl for providing the graphics and sounds for the game.

💻 Demo

A demo of the game is available under https://mwestapps.com/phaser-demo/.

✨ Template features

Frameworks

• TypeScript: The game is fully written in TypeScript.
• Phaser: The game uses the Phaser game development framework.
• Vite: Vite is used as the local development server, allowing for automatic reloading when files are modified.
• Code standards: ESLint, Prettier, and EditorConfig are used to keep the code adhering to its defined rules. When committing changes to Git, lint-staged will confirm that everything is correct before allowing the commit.

Game

Use the on-screen controls to move and jump the character. The game includes animations and sounds to demonstrate their implementation and includes start and end game functionality.

Mobile Support

• Deploy to mobile: Capacitor by Ionic is used for mobile deployment, with commands like npm run deploy:ios and npm run deploy:android available for simple mobile deployment.
• App icon: An app icon can be added to resources/icon.png and will be generated in the necessary formats for iOS or Android when deploying to mobile.
• Persistent mobile storage: Mobile storage is supported for saving data such as the selected locale.
• Scaling to mobile: Any mobile device will scale and display the game correctly, setting up a playable area using a 9:16 aspect ratio.

Locales

• Multiple locales: English and Spanish translations have been added to the game. Additional locales can be added to the src/locales/ directory and configured under src/index.ts.

Debug

Under src/config/debug.ts you can toggle the following debug options:

• Disable sound: You can disable sounds by setting disableSound: true.
• FPS: The game will be locked to 60 FPS and you can enable the FPS counter by setting fps: true.
• Physics: You can enable physics graphics such as hit boxes by setting physics: true.

🛠️ Installation

Install the dependencies with:

npm install

💾 Development

Start the development server with:

npm run dev

Once the game is running, open your browser and go to:

localhost:3000

Any changes you make will automatically reload the development server.

📱 Mobile deployment

If you use this template for building a new game, make sure the game is deployed with the correct name, version, and app icon:

• Confirm everything is correct under package.json. The fields name and version are the most important to verify.
• Make sure capacitor.config.ts has the correct appId and appName.
• Add an app icon to resources/icon.png.

Capacitor by Ionic is used for mobile deployment and depending on which mobile operating system you wish to deploy to, you can create the Xcode or Android Studio project with:

npx cap add ios
npx cap add android

You can open the project to make any changes directly in Xcode or Android Studio:

npx cap open ios
npx cap open android

To deploy to either mobile operating system you can run:

npm run deploy:ios
npm run deploy:android

🌐 Web deployment

To deploy the game to a web server you can run:

npm run build

The build output will be placed in the dist/ directory and can be uploaded to a web server.