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

Article by Scott Westover. Posted on 10th Aug 2020.   @swestover06

image

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