Category: Phaser Tutorials

Tutorials on the Phaser framework.

Create Native HTML5 Games with Phaser and Capacitor

Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I’ve even written a few tutorials about Phaser with a focus on developing HTML5 games for mobile. However, despite having created a few mostly finished games most of them never actually see the light of day. […]

Phaser Collisions

Phaser Fundamentals: Handling Collisions

When building a game with Phaser you will likely have various objects on the screen. You might have the players character, a floor or some walls, some enemies, items, and so on. These entities are going to need to interact with one another in some way to make the game playable. If a player touches […]

Phaser

Anatomy of a Phaser Project

If you’re new to building HTML5 games with Phaser, like with any new language or framework, it can be quite a hurdle just to grasp the structure and the basic idea of how it all works. In this video tutorial, I will walk through the general structure of a Phaser project and the important parts […]

States in Phaser

Phaser Fundamentals: Using States in Phaser

One of the core concepts in Phaser is States. States split your game code up into logical chunks, and you progress through these states one at a time. Typically, you would have individual states for a level in your game, a title screen, a game over screen, a bonus round game, and so on. You […]

Arcade Slopes Plugin

Using the Arcade Slopes Plugin in Phaser

A while ago I wrote a bit of a summary of the different physics system in Phaser, which covered a little bit about how they work and I also followed that up a little later with a more in-depth tutorial on using the Ninja physics system. To save you having to read the entire article, […]

Phaser Weather

How to Add Weather Effects in Phaser Games

I keep going on about how important atmosphere is in a game, and the last two Phaser tutorials I have created have focused on that. First we learned how to create a parallax background effect which adds more depth to a game, and then we learned how to create a day and night cycle so […]

Day and Night in Phaser

How to Create a Day & Night Cycle in Phaser

As I’ve stressed before, atmosphere is an extremely important element in a game that can turn a fun game into a masterpiece. One great way to add some atmosphere to your game is to add a day and night cycle (imagine how much less fun Minecraft would be with no night). This tutorial, and the […]

Phaser Parallax

How to Create a Parallax Background in Phaser

Many mobile games are 2D, and when building Phaser games for mobile 3D games are not really an option. To keep our games from looking boring and flat there are some techniques we can use to give them more of a three dimensional feel, while still actually being in two dimensions. One of these techniques […]

ES6 Phaser

Level up Your Phaser Games with ES6

Since starting with Ionic 2 I’ve fallen in love with ECMAScript 6 (ES6), and once I started working with Phaser again it just didn’t feel as nice working with ES5. In this tutorial I am going to show you how you can use ES6 in your own Phaser games, but first let’s talk a little […]

Phaser Timer

How to Create an Accurate Timer for Phaser Games

In a few of my projects I’ve been using a pretty simple timer, the general idea was I’d start off with some variable to hold the total time of the game and then create a timer loop to decrement that value. I would visually represent that somewhere on the screen (usually a bar that gradually […]

Creating a Christmas Themed Game with Phaser: Part 2

In the last part of this tutorial, we started working our way through building a Christmas themed game in Phaser. If you haven’t read Part 1 yet, click the link below to catch up: Creating a Christmas Themed Game with Phaser: Part 1 To quickly refresh your memory though, this is what we are trying […]

Creating a Christmas Themed Game with Phaser: Part 1

It’s holiday season, and I thought I’d get into the spirit of things with a little Christmas themed content. I’ve been putting out a lot of Ionic 2 content lately so I’ve been meaning to put out some more Phaser content and figured this would be the perfect opportunity to make a Christmas themed gamed […]

Literra

Adding Custom Fonts to Your Phaser Game

I’m certainly guilty of using the default fonts in games just because it’s easier, and they certainly don’t always look out of place, but in general a custom font can add a lot to the look and feel of your game. Take a look at the before and after of this tutorial for example: Before […]

Alphadrop Screenshot

Creating Animated Scoring in an HTML5 Phaser Game

When it comes to games (and apps in general really), I’m a big believer that making your game just that little bit more juicy can make the overall quality and enjoyability of your game increase drastically. Juicy is clearly a pretty vague term, but I think it’s pretty fitting (think biting into a juicy orange […]

Phaser Word Matching Game

Part 1: Building a Word Search Game in HTML5 with Phaser

Puzzle games are all the rage on the mobile app stores, with the most notable being the absolute giant that is Candy Crush. Puzzle games are usually pretty casual games, but they have mass appeal right through from the most hardcore gamers to your friends mother who doesn’t know how to send emails. I recently […]

P2 Physics Game

Can you use P2 Physics with Phaser on Mobile?

Recently I finished writing a tutorial for CodeAndWeb which featured using the P2 Physics system in Phaser with their Physics Editor program. In the tutorial I built a simple game that involved some rope swinging and a whole bunch of enemies with complex hit areas. I’ll provide a link to that tutorial here when it […]

Atlas Animations

How to Create Animations in Phaser with a Texture Atlas

In a previous tutorial I’ve shown you how to create an animated sprite with a spritesheet in Phaser. In this tutorial I’m going to show you how to use something called a texture atlas instead. Here’s an animation I created recently for a game I’m building using a texture atlas: I’m going to jump right […]

Phaser Climber Game

How to Create an Infinite Climbing Game in Phaser

I remember playing quite a few simple platformer games when I was younger where you would basically have platforms running vertically down the screen, each with a space somewhere to get up to the next level, and you would have to try and climb up the platforms before you hit the bottom. As I’ve mentioned […]

Ninja Physics

Setting up Ninja Physics in Phaser

There’s a few different Physics systems provided by default in Phaser, each with their own uses cases, advantages and disadvantages. The three default physics systems are: Arcade Ninja P2 Arcade Physics is probably the one most people use in general, most examples and tutorials you will find for Phaser will use the Arcade Physics system. […]