Learn Phaser: Basics
Lesson 1 of 2
  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.add.circle(). This creates a GameObject that we can u…
  3. 3
    Phaser gives us very similar tools to create a GameObject 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 us…
  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 new Phaser.Game(). Phaser.Gam…
  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 update() function to our Scene that adds motion, animation, and interaction! We’re going to start with somethin…
  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 create() 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…

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