What is Phaser?

What is Phaser?

Phaser is a JavaScript game framework for making 2D games that run in web browsers. No downloads, no installs - players just open a URL and play.

What Can You Build?

Phaser excels at 2D games:

Real Phaser Games

Many successful games are built with Phaser:

• Agar.io - Multiplayer cell eating game
• Slither.io - Snake-style multiplayer
• Countless browser games on gaming sites

Why Phaser?

Phaser vs. Other Options

Choose Phaser when:

• You know JavaScript/TypeScript
• You want games to run in browsers
• You're building 2D games
• You want free, open-source tools

Core Game Development Concepts

Before diving into code, understand these fundamentals:

The Game Loop

Every game runs a continuous loop:

┌─────────────────────────────┐
│                             │
│  1. Process Input           │
│     (keyboard, mouse)       │
│            ↓                │
│  2. Update Game State       │
│     (physics, logic)        │
│            ↓                │
│  3. Render Graphics         │
│     (draw everything)       │
│            ↓                │
│  Repeat 60 times/second     │
│                             │
└─────────────────────────────┘

This happens 60 times per second (60 FPS), creating smooth animation.

Sprites

A sprite is any visual object in your game:

• Player character
• Enemies
• Bullets
• Coins
• Background elements

Sprites are images positioned on the screen. They can move, animate, and interact.

Physics

Physics systems simulate real-world behavior:

• Gravity: Objects fall down
• Velocity: Speed and direction
• Collision: Objects can hit each other
• Bounce: Objects can bounce off surfaces

Phaser includes physics engines that handle this automatically.

Scenes

Games are organized into scenes (like screens):

• Main menu
• Gameplay
• Pause menu
• Game over screen

Each scene has its own logic and can transition to others.

Assets

Assets are the resources your game uses:

• Images: Sprites, backgrounds, UI
• Audio: Sound effects, music
• Data: Level data, high scores

You load assets before using them.

Your First Look at Phaser Code

Here's a simple Phaser game structure:

typescript
Copy
import Phaser from 'phaser';

class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene');
  }

  preload() {
    // Load assets
    this.load.image('player', 'player.png');
  }

  create() {
    // Set up game objects
    this.add.image(400, 300, 'player');
  }

  update() {
    // Game loop - runs every frame
    // Handle input, update positions, etc.
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MainScene,
};

new Phaser.Game(config);

Key parts:

• preload(): Load images, sounds, etc.
• create(): Set up game objects once
• update(): Run every frame (60x per second)

Don't worry about understanding everything yet - we'll build this up step by step!

What You'll Build in This Track

By the end of this track, you'll:

1. Set up a Phaser project with modern tooling
2. Create scenes with proper lifecycle management
3. Add sprites and animate them
4. Implement physics for movement and collision
5. Add audio for effects and music
6. Build a complete game you can share

Hardware Requirements

Phaser games are lightweight. You don't need powerful hardware:

To develop:

• Any modern computer
• Node.js installed
• A code editor (VS Code/Cursor)

To play:

• Any device with a modern browser
• Even mobile phones work!

Common Questions

---

Next: Set up a Phaser project with Vite and TypeScript.