Chevron Left Icon
Learn Phaser: Multi-Scened Games
Lesson 1 of 2
Chevron Right Icon
  1. 1
    Phaser games are defined by Scenes. In a simple game, we might only use one Scene. In more elaborate games, we can use multiple Scenes to build out start screens, end screens, or even different lev…
  2. 2
    In this exercise, we’re going to refactor the code from the Learn Phaser: Physics Lesson. One major change that we’r…
  3. 3
    Since we’re now using the class syntax in our Phaser game, we can add another class that will render a start screen for our players. This start screen will give our players a chance to ready themse…
  4. 4
    Phaser has built-in methods that make it easy for us to transition from one Scene to another. For us to transition between Scenes we have to .stop() the playing of a Scene and .start() the next Sce…
  5. 5
    Having two Scenes, a gameState object, and our config object in the same file can make our code feel cluttered. As we add more Scenes, this file will continue to grow and it can become difficult to…
  6. 6
    Great job refactoring our game! We now have the ability add additional features using multiple Scenes! In this lesson we covered: * The usage of JavaScript class syntax to include multiple Scenes …
  1. 1
    A static image can only convey so much information. Imagine using a static image for a Sprite and moving it around the game. Will players really get a sense of when it’s walking? or running? Does i…
  2. 2
    One common tool used to create animations is a sprite sheet that contains all the images that depict how a sprite can move. Take for instance: As we move through the frames (individual image…
  3. 3
    With our sprite sheet loaded in, we can now create our sprite object and the animation sequence. This logic goes inside our create() method: class ExampleScene extends Phaser.Scene { // … Prev…
  4. 4
    ✓ Load in sprite sheet ✓ Create the sprite obect ✓ Create animation from sprite sheet ☐ Animate sprite We have everything else set up, now let’s bring our sprite to life! Inside update…
  5. 5
    Codey’s animation looks great moving to the right. But if we apply the exact same logic to move left, Codey looks like they’re being blown back by some wind or doing the moonwalk. (While it’s cool,…
  6. 6
    Learning how to start an animation is one thing, pausing it is another. When it’s game over, or if we decide to include a pause option, we might opt to pause one or all of our animations. In Phas…
  7. 7
    While animations allow us to play through the frames of a sprite sheet, tweens help refine the transition from frame to frame. By creating in-between frames, sprites undergoing changes like the…
  8. 8
    What if we wanted something to happen after a tween finished playing? Or while it’s looping? How about before it starts playing? Conveniently, Phaser allows us to provide the tween with callback fu…
  9. 9
    You did wonderful work with animations and tweens! In this lesson, you learned how about: The difference between an image and a sprite sheet. Loading in sprite sheets. * Creating animations. …

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