Learn how to build a simple HTML5 game with Phaser 3!

Posted on 10th Aug 2020. Follow @phaser_ and get the Phaser World newsletter.


In this tutorial from PatcheSoft, you learn how to set a basic development in environment for Phaser 3, the basics for setting up a Phaser 3 game, the lifecycle of the Phaser 3 scene, and much more. As you work through the tutorial, you will learn the basics of the Phaser 3 framework and build out a simple game at the same time.

From the article: "So we've got quite a few pieces to go through here. We'll start with our init function. We have defined some variables for our game using the this object. The variables for our game are lives, score and speed. We'll use these for our game logic later. The other two variables are for our text fields. The reason we set them here is because we need to access them at certain points, such as when there is a collision or we get some points for doing something.

We then preload some images into our game using the preload function. For each image we give it a name so we can reference later. We've loaded background, player, dragon and gold. The image path must be correct for the images to load. I've create a new folder called images/tuts/ in the root of the web server (next to where game.html is). Your directory setup should look something like this:"

Read More

Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a PC role-playing game inspired by classics of the 16-bit era. Free forever, and available now for Windows, Mac, and Linux.

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now