Game Development with Phaser

May 10, 2026

In the first month of this year I decided to learn about Game Development with JavaScript as the language. The goal was simple learn how video games actually work and rediscover my love of programming and building things and learn JavaScript OOP.

Why JavaScript?

I decided to use a language that I’m already “comfortable” with which is JavaScript. I quoted “comfortable” because during this journey of rediscovery I’ve learned that I’m not really that comfortable with JavaScript, I’ve learn so many new things that I didn’t usually use like class based programming.

With that in mind, I went and research about different game development frameworks that runs on JavaScript. I decided to use Phaser because I wanted to do the coding and learn the ins and outs of video games concepts and design. Instead of learning a new tool like Godot or Unity as there’s a lot GUI to know though Phaser have their own editor, I wanted to do much on coding than relying on tools GUI.

How did I actually start?

The very first thing I did was to learn using the Phaser Documentation, which is really informative and beginner friendly. And then after that I supplied it with AI and asked it to create a study plan for me that I can finish with 4 weeks ( but was able to finish in 8 )

## **Phaser 3: The 30-Day Blueprint**

### **Week 1: The Core Architecture**

Focus on how a game "lives" in the browser and the lifecycle of a Scene.

- **Days 1–2: Setup & The Config Object**
    - Learn how to use the [Phaser Sandbox](https://phaser.io/sandbox) or set up a local dev server (vital because of CORS).
    - Understand the `GameConfig` object (type, width, height, parent, and scenes).
- **Days 3–5: The Scene Lifecycle**
    - Master the three main pillars: `preload()` (loading assets), `create()` (placing objects), and `update()` (the 60fps game loop).
    - **Task:** Display a simple static image centered on the screen.
- **Days 6–7: Assets & Sprites**
    - Learn the difference between an Image and a Sprite.
    - Practice loading sprite sheets and setting up basic frames.

---

### **Week 2: Movement & Interactivity**

Now that things are on screen, let’s make them move and respond.

- **Days 8–10: The Keyboard Manager**
    - Use `this.input.keyboard.createCursorKeys()` to move a sprite.
    - Implement "wasd" movement using custom keys.
- **Days 11–13: Arcade Physics (Basics)**
    - Understand "Static" vs "Dynamic" bodies.
    - Enable physics in your config and make a player bounce off the world bounds.
- **Days 14: Collision & Overlaps**
    - Learn `this.physics.add.collider()` and `this.physics.add.overlap()`.
    - **Task:** Create a "Player" that collects "Coins" to disappear on overlap.

---

### **Week 3: Visuals, Sound, & Animation**

Moving beyond blocks and static images into "game feel."

- **Days 15–17: Animations & Tweens**
    - Create sprite animations (walking, jumping) using the Animation Manager.
    - Use **Tweens** for smooth UI transitions or "juice" (e.g., a chest that wobbles when touched).
- **Days 18–19: Cameras & World Bounds**
    - Learn to make the camera follow the player: `this.cameras.main.startFollow(player)`.
    - Set world bounds so the player doesn't walk off into the void.
- **Days 20–21: Sound & Groups**
    - Load and play `.mp3` or `.ogg` files.
    - Learn about **Groups** to manage multiple objects (like a group of 50 bullets or 10 enemies).

---

### **Week 4: Advanced Fundamentals & Final Project**

Tying it all together into a cohesive structure.

- **Days 22–24: Tilemaps & Level Design**
    - Learn to import `.json` files from the [Tiled Map Editor](https://www.mapeditor.org/).
    - Convert tilemap layers into physical walls your player can't walk through.
- **Days 25–26: Multiple Scenes & UI**
    - Manage a "Start Menu," "Game Scene," and "Game Over" screen.
    - Learn how to pass data between scenes (e.g., carrying your score to the Game Over screen).
- **Days 27–30: Final Project: The Mini-Game**
    - Build a simple platformer or top-down shooter from scratch.
    - **Goal:** A game with a menu, a playable level with physics/collisions, a score, and a restart mechanic.

This is the study plan AI created for me which is pretty good, easy, digestible and almost complete, just need some follow up questions, additional information and personal research as I go, which is why I didn’t finish it on time.

I also supply it by watching Scott Westover Youtube and read his public Github repository on how he creates Phaser games. I recommend his channel as he explain it in so much detailed and I also to check his repositories as his file organization where pretty solid.

Here are the Github repository for this study session with Phaser.

So what now?

This is the start of a new learning series for me which I will call “Building Games with Phaser”. I’ll posting more about how I built a game and showing off the Demo if I finish a game. I’ll try to be more detailed on what’s the game is about and what I’ve learned during the process.