Phaser Game & Tutorials 

Phaser Games and 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

My latest Phaser Tutorials

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
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
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
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
Platform games have been a staple in video games since Mario Brothers came along in the early 80's. Because the framework gives us a lot of code to work with, setting Up Phaser 3 platform games isn't too difficult. There are a lot of 3rd party tools to help you do this, but I'm going to show you how you can set it up just through code. Loading the images The first thing we need to do is preload the images we will be using. I've picked two bricks to use to make our platforms. this.load.image("brown", "images/tiles/brickBrown.png"); this.load.image("grey", "images/tiles/brickGrey.png"); Setting ...
Read More
When animations contain a lot of images and have a lot of animations it is easier to use JSON Animations. This is an update from my old Phaser 2 post. Software The software I use to create animations is called Texture Packer. They have both paid and free versions. You'll only need the free version to follow along with these examples. Adding Images To add images for your animation, all you need to do is drag the images in the space marked "EMPTY". Once you drag in your images, you can see what the sprite sheet will look like. Use ...
Read More

New To Phaser Development?

Take the Phaser Basics Mini-Course

Phaser Games Basics

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.