Learn Phaser: Basics
Lesson 1 of 2
  1. 1
    Hello World
    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…
    Start
  2. 2
    Draw A Circle
    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…
    Start
  3. 3
    Draw A Sprite
    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…
    Start
  4. 4
    Draw A Background Image
    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…
    Start
  5. 5
    Create A Config
    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…
    Start
  6. 6
    Start Making A Scene
    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…
    Start
  7. 7
    Move Your Bodies
    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…
    Start
  8. 8
    Storing State
    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…
    Start
  9. 9
    Input
    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…
    Start
  10. 10
    Keyboard Events
    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…
    Start
  11. 11
    Sounds
    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…
    Start
  12. 12
    Review
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

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