Phaser 3 Game Examples written in TypeScript. Since 2018.

_{Examples made with ❤︎ by digitsensitive
Framework created by Photonstorm}

Phaser 3 and TypeScript

Phaser is a wonderful, fast and free open source HTML5 game framework. Here you will find everything you need to develop games with Phaser 3 in TypeScript. Have fun discovering, developing and playing! Ideas and corrections are highly desirable to constantly improve this repository!

Getting started

Prerequisites

Download and install Node.js @ https://nodejs.org/en
Download and install yarn @ https://classic.yarnpkg.com/en/docs/install

Installing

Select a folder, navigate to it, and clone this repository with this command-line:

git clone https://github.com/digitsensitive/phaser3-typescript.git

Boilerplates

Check the package.json for the correct scripts to start projects. For example you can start the Webpack Boilerplate project with:

yarn webpack-boilerplate

• Webpack Boilerplate
• Parcel Boilerplate

Examples

Games

Check the package.json for the correct scripts to start projects. For example you can start the Candy Crush project with:

yarn candy-crush

• Alpha Adjust
• Asteroid
• Blockade
• Blocks
• Breakout
• Candy Crush
• Clocks
• Coin Runner
• Endless Runner
• Flappy Bird
• Snake
• Space Invaders
• Space Shooter
• Super Mario Land

Experimental

Check the package.json for the correct scripts to start projects. For example you can start the Game of Life project with:

yarn game-of-life

• Cellular Automaton
• Fractal Tree
• Game of Life
• Lissajous curve
• Point in Polygon
• Procedural Generation
• Raycasting
• Untextured Raycaster

Patterns

Check the package.json for the correct scripts to start projects. For example you can start the Factory Method project with:

yarn factory-method

• Factory Method

Project Configurations

Prettier

This project uses Prettier, an opinionated code formatter. The selected configuration options can be found in the .prettierrc file in the root project folder. More informations about the format options can be found here.

TypeScript

The selected compiler options for each project are set in the tsconfig.json file. More informations about the available options can be found here.

Tutorials

• Learn to create a HTML5 Game in 5 Minutes
• Game Programming Patterns: The Factory Method by Example

External Resources and Tools

• Phaser 3 Framework
• Phaser 3 Docs with TypeScript Definition File
• Phaser 3 Online Docs
• Phaser 3 Official Examples
• Phaser 3 Discourse
• Leshy SpriteSheet Tool
• Tiled
• Bitmap Font Generator Online
• Tile Extruder

Changelog

Learn about the latest improvements

Contributing

Want to correct a bug, contribute some code, or improve the codes? Excellent! Let me know! Please read CONTRIBUTING.md for details on our code of conduct.

I would like to thank the following persons for their support and help: @FakeBarenziah @emedws @evanlanglais @iliyaZelenko

License

This project is licensed under the MIT License - see the LICENSE.md file for details.