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

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
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(this.sys.game.config.width / 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

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 Gaiaonline.com 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.