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!

My latest Phaser Tutorials

In the last post, I showed how you can use gravity and velocity together to make a sprite jump. In this post, we will add a jump meter to the project to show the user just how much power they will use. This project uses the Utility Template. Making the meter image The first thing we will need is an image to make the meter line from. You can use a graphic object, but I find this does not work so well on older iPads. I'm just going to use a simple green 25 x 25 square. Let's start by ...
Read More
In last week's post, we explored how to use gravity in Phaser 3. Now we will defy that gravity and make the ball jump. We can do this by setting the velocity of the ball to counteract the gravity. So far in the code, we've set up a ball that falls until it collides against a platform. Here is the code up to this point: class SceneMain extends Phaser.Scene { constructor() { super('SceneMain'); } preload() { //load our images or sounds this.load.image("ball", "images/ball.png"); this.load.image("block", "images/block.png"); } create() { //define our objects let ball = this.physics.add.sprite( / 2, 0, "ball"); //set ...
Read More
Making objects hit the ground One of the great things about Phaser is the physics engines that you can use with it. In this post, I'll show you how to use gravity on an an object. I'll be using the Utility template to set this up. Although we don't need any of the features for this example I'm going to build on this post, so we may need them later. Preload the images First, let's preload in the images we are going to need. Let's keep it simple. A ball to drop with gravity and a block that we can ...
Read More
How to extend a sprite in Phaser 3 Sometimes just adding a sprite into a game is enough. Other times it is very useful to extend a sprite. Why? Being able to do this will let us get super organized. That allows us to build games faster and better. We can make complex classes that extend Phaser game objects such as sprite, text or images. Most importantly we can reuse the code! In my experience using classes allows us to do more by writing less code. If well written, the class can be transferred from one game to another without ...
Read More
JavaScript classes can add a lot of functionality, origination and most importantly reusability which saves developers a lot of time. But for some developers, there is an understandable learning curve. JavaScript classes are a fairly new arrival on the JavaScript scene. JavaScript has been around for ages. At least in modern computer terms. JavaScript traces its roots back to 1993. JavaScript Classes didn't make an appearance until 2015, with the release of ES6. This meant coders had about 20 years to get used to the unique qualities of JavaScript before everything drastically changed. Both new users and highly paid front ...
Read More
In this final part of my series of Phaser Form UI, we will look at adding drop downs to the form. I originally came up with this for adding a form to report abuse in a virtual world. It can also be useful for choosing a range of options when starting a game, especially if there are too many to display with buttons or other graphics. This project builds on the code written in the other 2 blog post of this series. Adding input text and adding HTML buttons. Adding the drop down to the html First let's add a ...
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.