Chevron Left Icon
Learn Phaser: Basics
Lesson 1 of 2
Chevron Right Icon
  1. 1

    Welcome to Learn Phaser! Phaser.js is a game framework built with JavaScript that you can use to make video games on the web! Phaser gives us a set of utilities that we can use so that we don’t h…

  2. 2

    In this exercise, we’re going to cover how to make a simple geometric shape in Phaser. A Circle! To do this, we’re going to use the method […] . This creates a […] that we can use to represe…

  3. 3

    Phaser gives us very similar tools to create a […] for sprites that we provide. A sprite is an image that is intended to represent a character, enemy, or some other object in a game. We use i…

  4. 4

    Now that we’ve covered drawing a sprite, let’s talk about drawing a background image. A background image is not a sprite — usually the player will not interact with the background at all. Bec…

  5. 5

    We’ve been making GameObjects in an existing game, but let’s take a step back and think about how to create a Phaser game from the beginning. We can do that by calling […] . […] by itself cr…

  6. 6

    It’s nice to have our games made to be a specific size with a specific background color, but where do we define game logic? Phaser games are composed of Scenes that we define and pass to Phaser i…

  7. 7

    Now we’re going to add motion to our Phaser game! You might recall that we can add an […] function to our Scene that adds motion, animation, and interaction! We’re going to start with something…

  8. 8

    Because we handle all of our Scene information in different functions, it becomes important to pass information between our Scene functions. Something we created in […] will need to be updated …

  9. 9

    It’s time to make a game that we can actually play! Phaser gives us ways to handle mouse and keyboard input, so that we can trigger events to happen in the game. In this exercise we’re going to loo…

  10. 10

    Only some games exclusively use the mouse to play. Plenty of browser games, especially those with more complex gameplay, require keyboard input. Before, we assigned mouse events to specific GameObj…

  11. 11

    Games aren’t just idle toys. Many games cultivate experiences, blurring the distinction between a momentary diversion and artwork that you can interact with. To this end, there’s few things that ca…

  12. 12

    With all of the tools we just learned, we have everything we need to make a huge number of games. Think about games that you’ve played and try to imagine how they break down into the following step…

  1. 1

    In this lesson we’re going to provide functionality to make our first game, a coloring-book game called Color a Pegasus.

  2. 2

    We’ve been given the basic layout of our Game — it’s up to us, the game developer, to provide the part of our game that makes it playable. We need to create the mechanics of the game, the p…

  3. 3

    Now that we can change the color of our pegasus, let’s get to work on making that palette selector functional. When we click on a color, we want that to become the selected color. We need to use a…

  4. 4

    Coloring the pegasus is great, the “playing” aspect of our game is figured out, but we need to consider our presentation. If we want someone playing our game to know where to click and how to actua…

  5. 5

    Our game is a lot more playable now that people know what they’re clicking on, but how can we keep track of what color is currently active? By adding relevant hover events to our […] s!

  6. 6

    Congratulations! You made your first game, Color a Pegasus! Over the course of this lesson you created the sequence of event handlers to: - Own and update the state of the game. - Update the …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo