Phaser Games and Tutorials
Source code for Ebooks
Looking for the source code to “Create and Publish HTML5 Game in 24 hours”? Click Here
My latest Phaser Tutorials
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
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). window.ninja=ninja 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
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.
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.