Building Games with Phaser
4.3 (63 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,486 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Games with Phaser to your Wishlist.

Add to Wishlist

Building Games with Phaser

A guide to produce amazing html5 games!
4.3 (63 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,486 students enrolled
Created by William Clarkson
Last updated 4/2017
Current price: $10 Original price: $55 Discount: 82% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 11 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create exciting html5 games
  • Know how to modify your games for mobile web
  • Use the built in Phaser Physics engine for rapid game development
View Curriculum
  • A desktop or laptop computer
  • A code editor - We will be using Brackets in the course, but any will do
  • A local web server. We will be using Xampp in the course.

By taking this course on building Phaser games, you'll build 3 html5 games. If you know a little bit of Javascript and have a big passion for games, this is the course for you!

  • You will learn how to set up games to run on desktop computers and mobile devices

  • You will be able to turn your imagination into exciting games!

  • I will show you some of the tricks and techniques that I have picked up over the years, such as showing you how to copy your own code to reuse.

  • Code Templates and all resources you need to complete the games are included!

I love talking about game development, especially where it comes to building Phaser games, and am happy to answer your questions and discuss any ideas you may have!

Who is the target audience?
  • This course is built for people who love the idea of building their own games.
  • This course is for coders who know at least the basics of Javascript ( variables,loops, and if-then statements)
  • If you know no Javascript at all, this course is probably not for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
69 Lectures
Getting Started
5 Lectures 11:29

A quick bit of information about me and what we will cover in this course.

Preview 01:07

A preview of the games we will be building.

  • Color Zap
  • Hungry Dragon
  • Robot Bomb Squad
Preview 02:14

We are going to need some tools to put together our games. Here is a collection of free tools and resources to help you do that!

Tools used for this course

In this lecture we will have a look at setting up a local server on your computer.

Setting up a Local Server

In this lecture I talk about some terms I am using in the course. Specifically targeting the canvas positioning and object scope within Phaser.

Preview 02:46
Color Zap
20 Lectures 01:03:18

In this lecture we are going to set up our folders, file structure and editor to prepare for coding.

Setting up

In this lecture we will add the files necessary to make a Phaser game. 

This lecture covers:

  • Using Javascript to determine if we the player is using a desktop or mobile device
  • Setting up the html and javascript needed for any Phaser game.
  • Explaining the 3 main built in functions, Preload, Create, and Update
Making the blank game

In this lecture we will go over loading images into the library and displaying them on the canvas

This lecture covers

  • Loading an Image into the library
  • Placing an Image on the canvas
Adding Images

Learn how to set images just where you want them and how to center images.

This lesson covers:

  • positioning images
  • anchor points for objects

Image Positioning

Dealing with mobile can be tricky, this lecture goes over how to set up your game to fit on almost any mobile device

This lesson covers:

  • using css to fit game to a mobile device
  • using meta tags to scale the html5 canvas
  • using Chrome's mobile emulator and debugger
Preparing for mobile

Most games will run in only landscape or portrait mode. What do we do when the player holds the phone the wrong way? This lecture will show you the code to handle that!

This lecture covers:

  • detecting right and wrong screen orientation
  • using css to cover the screen with an image

Screen Orientation

With a little extra code, you can write your game for both desktops or laptops at the same time as writing for mobile. This video will show you how.

This lecture covers:

  • using javascript to selectively turn off mobile code 
  • putting the game in an existing div tag
Preparing for Desktop

In this lecture we learn how to make buttons from sprite sheets

This lecture covers:

  • loading a sprite sheet into the library
  • creating a button from a sprite sheet
  • hooking up functions to buttons
Adding Buttons

Groups can be very powerful in Phaser. This lesson shows the basics of grouping items together.

This lecture covers:

  • creating a group
  • adding items to a group
  • positioning a group
Working with groups

Interaction with the user is core to any game. In this lecture we cover how to tell if a sprite has been clicked or tapped by the player.

This lecture covers:

  • enable a sprite for input
  • adding a click handler to a sprite

Detecting Clicks on Sprites

We used a sprite sheet earlier for buttons, now let's look at using them for displaying images in out game.

  • review loading a spritesheet into library
  • displaying a single image out of a spritesheet
Using Sprite Sheets

Changing one image to another, can be a great effect in a game.

This lecture covers:

  • changing an image to a different image in the same spritesheet
  • adding a listener to the entire game
Sprite Frames

Random numbers are part of any good video game. This lecture will show you how easy it is to use random number in Phaser.

This lecture covers:

  • Random numbers
  • Randomly placing objects 
  • Randomly selecting frames
Random Numbers

Using physics in Phaser is very powerful. 

After this lecture you will be able to:

  • Start the Physics Engine
  • Enable objects to accept physics
  • Apply velocity to objects.
Introduction to Physics

Here we look at the constantly running update loop, and see how we can use it to check objects.

This lecture covers:

  • Using the update loop
  • Using math to tell the distance between two objects
  • Removing velocity on an object
  • Comparing frames of different objects
Using the update loop

In this lecture we will add in the game over screen

This lecture covers:

  • Reusing state code to create new states
  • How to fix sprite sheet bleeding
Building the Game Over Screen

Text is a basic building block of any game

This lecture covers:

  • adding text
  • setting text size
  • setting text color
  • sharing values between states
Adding Text

Sound effects can add pizzaz to a game!

This lecture covers:

  • Loading sounds into the library
  • Playing sounds
Adding Sounds

A standard part of a game is increasing difficulty as the player progresses

This lecture covers:

  • how to gradually increase the speed of the ball
  • setting a maximum speed 
Game Difficulty

It is a good idea to let the player choose to turn on and off the sound effects

This lecture covers:

  • How to make a toggle button from a sprite sheet
  • Using variables to turn on and off sound
Toggling the Sound
Hungry Dragon
21 Lectures 01:08:39

Here we will set up our Hungry Dragon game by learning to reuse code from our Color Zap Game

Quick Set Up

By reusing more code from Color Zap, we can set up our screen orientation code in less than 2 minutes!

Quick Orientation Set Up

Here we look into what it takes to add animations into phaser by making our dragon fly!

This lesson covers:

  • define an animation
  • setting a speed for an animation
  • playing an animation
  • looping an animation

Let's give our Dragon somewhere to fly!

This lesson covers:

  • Loading a tilesheet
  • Setting a background to auto-scroll
Scrolling Backgrounds

Unfortunately all devices are not created equal, especially in screen size, and this can be a headache for developers, but fortunately for us, we can fix it in just a few lines of code.

This lesson covers:

  • How to reposition for large tablets, such as the Ipad
Backgrounds for Large Tablets

Here we go deeper into Physics by applying gravity to the dragon.

This lesson covers:

  • adding gravity to a body
  • using the update loop to limit falling
Preview 03:46

Here we make our dragon fly!

This lesson covers:

  • Using velocity and gravity together
  • Alternative method for whole game click listeners
Defying Gravity

In many games, making copies of objects is very helpful. Here we make many candies for our dragon to eat!

This lesson covers:

  • Using groups to make multiple copies
  • setting properties of all objects inside a group

Preview 07:04

Here we explore how to use Phaser's built in collision detection to make our dragon eat candy.

This lesson covers:

  • Collision detection
  • Removing a sprite from the game
  • making an object immovable
Handling Collisions

Here we create a group to show what our dragon is hungry for!

 This lesson covers:

  • Adding different objects to a group
  • updating a group's position in relation to another object
Moving a Group

Let's make sure our dragon is eating properly.

This lesson covers:

  • logic checking to see if the right candy is collided with
  • advancing and displaying the score
Scoring Logic

If our dragon eats the wrong thing, then it is game over. 

This lesson covers:

  • review of adding states and buttons
Adding Game Over

This lecture shows how to change the game over screen into a start screen

Adding the Start Screen

Let's add a start screen to the game

This lesson covers:

  • copying animations
  • flipping animations
Adding Animation to the Start Screen

So far we've been using basic text, but now let's get fancy

This lesson covers:

  • Using Google fonts in your game
  • Using outlines in text
Adding Fancy Text

Using what we have already learned so far, let's build an instruction screen to tell our players what to do!

Adding Instructions

Let's add in the toggle buttons for sound effects and music

This lecture cover:

  • Review of toggle buttons
  • Updating buttons
Music Buttons

So far our dragon has been a quite eater. Let's add some noise in.

This lesson covers:

  • review of loading sound into library
  • review of playing sounds

Let's give the dragon some music to fly to!

This lesson covers:

  • looping sound
  • adjusting sound volume
Background Music

Now let's revisit the tablet code to see what we need to adjust for larger screens.

This lesson covers:

  • Math needed to dynamic set limits on objects
Adjusting the Game for Tablets

A final step to be able to adjust the game just the way you want it!

Game Balancing
Robot Bomb Squad
23 Lectures 01:06:26

Now that we have covered the basics of making a game, we can use a template to speed up development.

Using a basic template

Our robot can do several this. Here we set up his poses.

This lecture covers:

  • adding multiple animations to a sprite
  • animation looping
Preview 03:49

Now that we have our robot standing around, let's give him some physics.

This lecture covers::

  • gravity
  • bouncing
  • world bounds
Set Up Physics

Using the tile map editor we can quickly make maps for any game.

This lecture covers:

  • using the tile editor
  • exporting maps for Phaser
Using the tile maker

Now that we have made the map let's add it to the game.

  • loading the tileMap JSON file
  • linking sprite sheet to tileMap
  • adding the map to the game
  • creating tile layers
  • setting collisions on a map
  • following an item with the camera
Adding the Tile Map to the Game

Time to add some movement to our robot!

This lecture covers:

  • creating cursor keys to interact with the keyboard
  • using velocity to control movement
  • linking velocity to animation
  • linking velocity to scale flipping
Controlling Movement

Now to reach everywhere, we need to jump!

This lecture covers:

  • checking if an object is on the floor
  • transferring velocity (running and jumping)


Here let's clean things up a bit by adding a stop and scaling our robot

  • object scaling
  • removing velocity
Tweaking the Game

Time to destroy the bombs!

This lecture covers:

  • setting up a listener for a specific tile
  • removing a tile
Picking Up Items

Let's add another level to the game

This lecture covers:

  • dynamic loading of maps
Adding more levels

We need to add a way for mobile players to move the robot, so we will create a virtual gamepad.

This lecture covers:

  • making objects follow the camera
  • offset objects from the camera
Adding a Virtual Gamepad

Now that we have the gamepad let's add the actions to each key.

Adding Events to the Gamepad

Just for fun, let's add some monster to fight our robot

This lecture covers:

  • review of creating multiple objects in a group
  • setting up the group objects to interact with the map

Adding Monsters

Sometimes it is helpful to see the physics body properties of an item. This lecture will show you how to do that.

This lecture covers:

  • The render function
  • body debug info statement
Debuging Physics in Phaser

Right now our monster are stuck in a corner! Let's add some logic to their movement.

This lecture covers:

  • Detecting if blocked left or right
  • reversing movement
Adding Collisions to the Monsters

Let's give our robot the ability to squash the monsters by jumping on them

This lecture covers:

  • detecting collision when jumping
Jumping on Monsters

This lecture will show you how to add a timer bar to your game

This lecture covers:

  • Timers
  • Image scaling 

Adding a Timer Bar

The mega template lets you add the development files to create a polished game. 

There is very little in the template not already covered in the course, but it saves time developing games later.

This lecture show you some of the features of the template.

The Mega Template

This lecture shows you how to add your files from the robot game into the template framework

Adding the Game to Template

This lecture shows you how to add sounds to the framework

Adding Sounds to the Template

This lecture shows you how to add background music to the framework

Preview 01:30

Our game is just about done!

This lecture show you a few final tweaks to improve the game.

Final Code

One final play through.

This lecture covers:

  • What you can do improve the game
  • My final thoughts
Final Thoughts
About the Instructor
William Clarkson
4.3 Average rating
66 Reviews
1,854 Students
2 Courses
Game Developer at Gaia Online

I've been a coder since I was a kid and I've always loved making games. As I got older that got into serious application programming as well, but games have always been my passion. I've been working professionally as a programmer for the last 15 years. I've worked all around the US, and a few years in Asia, for companies from around the globe. I've estimated I've made over 300 games in my career, and I'm nowhere near done!