Phaser 3 Games

Phaser Game & Tutorials 

Here you will find a lot of free and premium resources, templates, code snippets and tutorials for building  Phaser Games.  What is Phaser? Phaser is an html5/Javascript library that can work equally well on both on mobile and computers. This library is growing strongly in popularity and in many cases, it serves as a replacement for Abobe Flash. Like flash, it uses masks, sprites, tweens, animations, and groups. I have no official association with Phaser but I work in it almost every day.  You can find the official website here. It has a lot of wonderful resources. If you are just getting started then Click Here to see my getting started guide!

Source code for Ebooks

Looking for the source code to “Create and Publish HTML5 Game in 24 hours”? Click Here

Subscribe for latest tutorials and code freebies

The Ultimate Game Part Template For Phaser 3

My latest Phaser Tutorials

Change Image On Click
I received a request for help from another developer who wanted to be able to click on different cards and have a big image of that card appear so I offered to give him my solution and here it is below. I've tried to keep everything very simple and I've made a corresponding video to go along with his blog post.  I'm using the utility template to be able to size and layout the cards. I've also kept things simple by number the cards from 1 to 6. That way I'm able to Loop through them.  I've made a couple of ...
Read More
climbing ladders
Using ladders in Phaser 3 is tricky. Not only do you need to detect when a player touches the ladder, but you also need to know when it stops touching as well. The technique that I've decided to use here, will allow us to call a function to check if any ladder is being touched by the character at any given time. This is part of the series on making platform games in Phaser 3. This tutorial also uses the Utility Template which helps scale and align objects in Phaser 3. Placing the ladder Preload the image First, let's preload ...
Read More
dispatching events
One of the most useful features of Flash/Actionscript was the ability to dispatch custom events. Phaser does have an event class built-in and with a little ES5 magic, we can easily create a global messaging system. This post is part of a series of building a platform game in Phaser 3. You can find the start of the posts here. It also uses the Utility template that helps in scaling and positioning in Phaser. Events vs Callbacks A callback is where you inject a function into a class to be called when the class has finished doing something. myClass.onDone=this.setUpTanks(); I'm ...
Read More
NES Controller
I'm sure that some of you may be nostalgic for the days of youth when the Nintendo NES was the most popular game system on the planet. My first video game was pong, which was followed quickly by the Atari 2600. I saw the Nintendo controller a bit of a breakout. The way it was set up it allowed not only for player movement and two actions, but it also provided a way to navigate on-screen menus. When the Nintendo NES first came out in 1985, I was still using a computer without a mouse. (or internet, copy and paste, ...
Read More
bounding box
intro The Problem Sometimes, the bounding box of the hit area is not the size that we need. This can cause problems with collisions. In the example below, even if the ninja was able to dodge an obstacle, without such a big hit area (shown in purple around the ninja), the player is sure to hit something accidentally. Set Size of Bounding Box For testing a solution to this problem I temporarily set a global variable in the game so I could access the ninja variable for the developer console (f-12). By using this, I was able to see ...
Read More
phaser 3 camera
When I was building virtual worlds in Flash/As3 it took quite a bit of maths to make the background scroll. And then to scroll only when the avatar wasn't near the edge of the world. Phaser's built-in camera class makes this all very easy and quick. This code continues to build on the code we build in the last several blog post and is using the utility template. Set a background While not totally necessary I like to set up a background to set the size of the camera. Otherwise, without a moving background. there is nothing to show that ...
Read More



About Me

My name is William Clarkson. I’ve been writing code for about 30 years now and am currently employed as a game developer for where I am writing Phaser games and apps every day. I’ve been working with Phaser for almost 2 years now and am quite impressed with it. I am actively working to replace a lot of the flash work I did in the last 6 years with Html5 content and this is the library that is working well for me. Within two weeks of starting Phaser, I was creating games just as fast as I had done after 15 years of flash!

What would you like to learn?

If you have questions, a suggestion for what you’d like to see in a post or need support there are links to groups, or just feel free to contact me. I love talking about code especially when it comes to games.  If you are into making Phaser Games already then please check out our Phaser Game makers group.

Phaser 3

Recently Phaser 3 was released. I am scrambling to update the site with resources while balancing my day job. You’ll find plenty of Phaser CE items here, and the list for Phaser 3 will continue to grow as time goes on. If you’ve any specific requests about Phaser please contact me, and I’ll do my best to accommodate.