Phaser 3 Basics: Changing Positions

In this guide, we will be taking a look at how to manipulate the position of images and sprites in Phaser 3. Being able to change the x and y positions of objects in your game is very useful and will allow you to add some awesome mechanics. Before we begin, I will assume you already created a scene and added a sprite or image. Don’t have a scene added? I would recommend checking out this tutorial I wrote....

September 28, 2019 · 3 min · Jared

Phaser 3 Basics: Adding Sprites

In the game development world, sprites are the 2D images in your game. Since this is the case, being able to add sprites is a very important skill to know. To begin, I will assume you have a scene already setup. If you don’t, feel free to check out this guide of mine to get you up to speed. We will also need an image loaded. If you’re new to loading images, you can check out this tutorial to learn that....

September 28, 2019 · 2 min · Jared

Phaser 3 Basics: Custom Fonts

In this guide, we will be covering how to load custom fonts, specifically TrueType fonts, with Phaser 3. To begin, you will need a scene setup for this guide. If you don’t have a scene made already, you can learn how to create one here. Essentially, you need to define a new font face with CSS, create a div utilizing the font to “load” it, and finally reference it within our game code....

September 28, 2019 · 2 min · Jared

Phaser 3 Basics: Loading Sounds

In this guide, we will be learning how to load sounds with Phaser 3. At this point it would be useful if you had a scene already setup. If you don’t, you can take a look at my boilerplate code guide in this series. In your scene, define a preload method if you haven’t already. In order to define an image, you will need to follow this syntax: this.load.audio(, );...

September 27, 2019 · 2 min · Jared

Phaser 3 Basics: Loading Images

In this guide, we will be taking a look at how to load images with Phaser 3. Hopefully you have a scene already setup. If you don’t have a scene setup already, please visit my tutorial on writing boilerplate code. In your scene, define a preload function if you haven’t already. To define an image, the syntax is the following: this.load.image(, ); Actual code could look like so: this.load.image("myimage", "my-path/to-image/myimage.png"); In our method call, key is the name you want to reference your image with in your code....

September 27, 2019 · 2 min · Jared

Phaser 3 Basics: Boilerplate Code

In this part we will be adding the boilerplate code for our Phaser game. There are a few steps we need to do: add code to our index.html file, add some code to an index.html file, defining a game configuration, creating a boot scene, adding a main scene, and creating an instance of our game. If you don’t have an index.html file yet, or you need to add a script for our game, please check out part one of this series....

September 27, 2019 · 3 min · Jared

Phaser 3 Basics: Setup

This tutorial has been updated November, 2019. In this part, we will setup an environment to create a Phaser 3 game. Before we dive in, we need a web server of some sort in order to run our game. This is necessary because we don’t want any malicious JavaScript to read our file system from within the browser. Phaser’s website has a great guide on the web server portion of the setup....

September 25, 2019 · 4 min · Jared

Phaser 3 Basics: An Introduction

Phaser is one of the most popular HTML5 game frameworks. It uses modern web technologies that allow for creating epic cross-browser games. In this tutorial series, we will be covering the basics of Phaser 3! This series will cover everything needed to make a basic game. Some of the concepts we will be covering include: Setting up a simple development environment Loading images, sounds, and TrueType fonts Adding sprites Changing positions Setting velocity and acceleration Simple collisions Basic sprite effects Playing sounds Particles The goal of this series is to break down these concepts into small, manageable parts....

September 25, 2019 · 1 min · Jared