Phaser 3 + TypeScript Starter Kit
This repository contains all the code necessary to start making a game in Phaser 3 using TypeScript.
The code contained here is an expansion of what is created in this blog post that I wrote. This repository contains all the code that I go through in that tutorial, plus some additional things to help get your game off the ground. Notably, besides a loading screen and main menu screen, an example sprite is included that can be moved around with the arrow keys.
Latest Changes
The starter kit has been updated to work with Phaser 3.50 and TypeScript 4.1. Additionally, the webpack config has been changed to look at the NODE_ENV environment variable, and either do a production or development build depending on what is provided. You can use yarn dev to run the server in dev mode, whcih gives better debugging assistance and faster compile times, or yarn prod to run in production, which gives much smaller bundles but takes longer to compile.
How to Use
You should be able to clone this repository and run yarn install to get any of the necessary dependencies.
Once you're done installing, simply run yarn dev and the game should begin to run. You'll have to open an internet browser and go to the port that the game is running on (usually localhost:8080 by default).
The game opens up to a main menu. Only the "Start Game" button does anything - the other two are placeholders. If you click "Start Game", you'll be taken to a black screen with a small sprite. You can move the sprite with the arrow keys. This starter kit is far from feature complete, but it's meant to take away the boilerplate that can come with getting a Phaser 3 + TypeScript project up-and-running.
Running yarn dev runs the game in development mode, which produces larger bundle sizes but compiles faster and provides better debug support. If you desire a smaller game bundle or to host your game on a server, you can use yarn build:prod to compile the project into an optimized bundle. You can use yarn prod to run your game locally with production compilation, but this will cause your hot reloading to take longer.
Extensions
You can edit this code with any text editor. VS Code is recommended, though. If you download the Prettier and ESLint extensions, you can get automatic code formatting to work.
Contributions
I don't actively update this repository unless major breaking changes occur in either Phaser or TypeScript. Any PRs, whether to fix bugs or add new features, are welcomed and encouraged.
A big thank-you to these people who have contributed PRs to help keep this starter kit up-to-date:
- @tailot - fixing issues with the Phaser 3.17 upgrade and getting the types aligned.
- @sgparrish - adding ESLint and Prettier support
- @WillMoreland - webpack copy plugin fixes and dependency updates
Find me on YouTube
I make lots of game development tutorials on YouTube, mostly in the Godot engine. I also post devlogs for the games I'm making. I usually post multiple videos a week.
Support my Work
If you've found this starter kit helpful and want to support my work and tutorials, please consider buying me a coffee.
Further Reading
The official Phaser documentation has lots of great tutorials, and the Phaser Labs page is full of great examples of using any aspect of Phaser.
I've written a few small games in Phaser. One was a game I created with a team of people for Ludum Dare 44 called Root Maker. You can find a great post-mortem of that game here. Additionally, Root Maker is open source. To see what a larger project might look like in Phaser (albeit one that doesn't use the physics system or much in the way of graphics), you can find the source code here.