Building Games with Phaser
4.7 (41 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,392 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.7 (41 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,392 students enrolled
Created by William Clarkson
Last updated 4/2017
English
English
Learn Fest Sale
Current price: $10 Original price: $55 Discount: 82% off
15 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • 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.
Description

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
Expand All 69 Lectures Collapse All 69 Lectures 03:29:52
+
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
02:18

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

Setting up a Local Server
03:04

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
02:19

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
06:05

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
02:57

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
02:15

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
02:12

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
05:47

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
01:49

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
04:22

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
02:40

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
02:17

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
01:44

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
02:40

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
02:51

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
04:13

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
02:20

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
04:20

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
04:36

Sound effects can add pizzaz to a game!

This lecture covers:

  • Loading sounds into the library
  • Playing sounds
Adding Sounds
02:33

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
01:16

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
04:02
+
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
03:45

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

Quick Orientation Set Up
01:31

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
Animation
02:25

Let's give our Dragon somewhere to fly!

This lesson covers:

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

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
02:33

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
02:47

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
02:34

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
04:29

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
04:45

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

This lesson covers:

  • review of adding states and buttons
Adding Game Over
02:42

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

Adding the Start Screen
01:37

Let's add a start screen to the game

This lesson covers:

  • copying animations
  • flipping animations
Adding Animation to the Start Screen
02:36

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
02:03

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

Adding Instructions
03:43

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

This lecture cover:

  • Review of toggle buttons
  • Updating buttons
Music Buttons
05:28

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
Sounds
02:16

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

This lesson covers:

  • looping sound
  • adjusting sound volume
Background Music
04:19

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
03:19

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

Game Balancing
02:39
+
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
01:33

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
02:26

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
02:54

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
03:40

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
03:15

Now to reach everywhere, we need to jump!

This lecture covers:

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


Jumping
03:28

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

  • object scaling
  • removing velocity
Tweaking the Game
02:14

Time to destroy the bombs!

This lecture covers:

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

Let's add another level to the game

This lecture covers:

  • dynamic loading of maps
Adding more levels
02:55

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
04:13

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


Adding Events to the Gamepad
03:10

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
04:28

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
01:31

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
03:10

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
02:28

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

This lecture covers:

  • Timers
  • Image scaling 


Adding a Timer Bar
04:00

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
01:25

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

Adding the Game to Template
04:17

This lecture shows you how to add sounds to the framework

Adding Sounds to the Template
03:14

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
03:20

One final play through.

This lecture covers:

  • What you can do improve the game
  • My final thoughts
Final Thoughts
01:09
About the Instructor
William Clarkson
4.8 Average rating
44 Reviews
1,746 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!