Learn Phaser: Physics
Lesson 1 of 1
  1. 1
    Building a Phaser game with Physics
    “I wonder if my character will make that jump…” - Every gamer ever. Figuring out the rules of a video game is a one of the joys of starting a new game. We wonder how fast our character can go, or …
    Start
  2. 2
    Adding a Sprite
    Let’s jump right in and make a sprite. We’ve made sprites before using the method this.add.sprite(), but this time around, we’re going to use this.physics.add.sprite() and have our sprite affected …
    Start
  3. 3
    Implementing Physics
    In the previous exercise, we saw our sprite carried away by our game’s gravity. The reason we were able to implement gravity was through the use of a physics plugin which decides how GameObjects …
    Start
  4. 4
    Adding Static Groups
    We’re gonna get that player sprite to land on some steady ground. But first, we need to create a ground platform! This ground platform will not be affected by gravity but we want it to interact wit…
    Start
  5. 5
    Detecting Collisions
    We have a platform sprite, we have a player sprite, but they’re not interacting with each other! What’s missing? Remember, our physics plugin determines how GameObjects interact. The way to decide …
    Start
  6. 6
    Adding Controls and Velocity
    Until we can telepathically instruct characters in games, we need physical controls to direct our player characters on how to move. One way we can implement controls is by using Phaser’s this.inp…
    Start
  7. 7
    Adding Enemies
    At this point, we have a controllable player sprite, a platform, and a collider set up. Let’s make some enemies! Unlike the player sprite, we probably want multiple enemies to triumph over. And u…
    Start
  8. 8
    Timed Events
    Currently, our game creates a few enemy sprites and stops. But we could create a loop to consistently create more enemies to make the game more challenging. To implement this loop we can call this….
    Start
  9. 9
    Removing Enemies
    Our enemy sprites threaten to take over our game if we don’t remove them! We’re going to need to use Phaser’s .destroy() method to remove enemy sprites from our game. Let’s first take a second to…
    Start
  10. 10
    Adding a score
    One thing we’re still missing from our game is a scoring system to motivate our players. We can store our score as property in the gameState object and increase it as the game progresses. To displa…
    Start
  11. 11
    Losing Condition
    It’s great to see our score increase, but it doesn’t mean much if there’s no way to lose. One common losing condition is when a player sprite collides with an enemy sprite. This means we need to in…
    Start
  12. 12
    Resetting A Scene
    Once a game ends, we should allow players to restart and try again! Phaser has a convenient method to solve this issue: this.scene.restart(). Like the method’s name implies, this.scene.restart(), …
    Start
  13. 13
    Review
    Great job using Phaser’s Arcade physics plugin to make an entire game! In this exercise we covered: * Creating sprites that are affected by physics. * Creating groups of sprites affected by physi…
    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