Steps
Let's Build a Phaser 3 Game!
Workshop Introduction
This is a tutorial intended for the beginning developer that focuses on building a complete project using multiple integrated files which each have varying roles.
Much of the advanced content dealing with the Phaser library and project setup is already completed so that the emphasis is on beginner TypeScript concepts and code principles. For someone new to frontend web development and the JavaScript language, this is an accessible entry point to practice and learn using a real world (and fun) application.
At the completion of the tutorial, the user will have a functioning game application to serve on a local browser.
Hello Phaser
Phaser is an HTML5 game framework that makes creating games for desktop and mobile easy and fun. There is a lot we could say about how awesome and fun it is but we would rather just show you by building an awesome game. We definitely recommend taking the time to visit the website, read through the documentation, and play around with some of the examples.
The Source Code
There are two options for going through this workshop which we elaborate further on in the Getting Started section but if you are looking for the code, you can find it on GitHub or StackBlitz.
The Inspiration
This project is a 2D jumper game built in Phaser 3 that was heavily influenced by the excellent HTML5 Game Workshop from Mozilla.
With the release of Phaser 3, a significant number of breaking changes were introduced, necessitating a complete rewrite of the game. I am incredibly thankful for the original post, as it was the doorway to my love and appreciation for Phaser.
The Art Assets
The graphic and audio assets of the game in this guide have been released in the public domain under a CC0 license.
These assets are:
- The images have been created by Kenney, and are part of his Platformer Art: Pixel Redux (they have been scaled up, and some of them have minor edits).
- The background music track, Happy Adventure, has been created by Rick Hoppmann.
- The sound effects have been randomly generated with the Bfxr synth.