Scott Westover has been creating Phaser tutorials on YouTube for a while now, and we are always happy to share his work here 🙂. His Phaser 4 mini course for beginners builds a complete falling-objects catch game from scratch, covering player movement, spawning, collision detection, scoring, and game rules, without jumping straight into physics engines so you actually understand what is happening. This first video covers the foundation: what Phaser is, how a game loop works, and how to get a project running.
What This Phaser 4 Tutorial Covers
The video starts with the big picture. Scott explains that Phaser is a JavaScript framework designed specifically for making browser games. It does not replace JavaScript; it gives you the tools games constantly need: rendering graphics, handling input, loading assets, and running all of this in a game loop. You write JavaScript. Phaser provides the structure.
To keep setup friction low, Scott provides a starter project template (linked in the video description) that already includes Phaser, a basic HTML file, and a simple scene. The video then walks through every file in that template so you understand what each piece does before writing a single line of new code.
The Phaser 4 Game Loop and Scene Lifecycle
The core concept of this video is the Phaser scene lifecycle. Every game ever made runs on a game loop: process input, update game state, render frames, typically 30 to 60 times per second. Phaser organizes this loop into three methods that you plug into every scene:
- Preload — Runs once. Load any assets your scene needs: images, sounds, data. Nothing renders until this is done.
- Create — Runs once, after preload. Build your game world: add sprites, set up cameras, create groups. This is where your scene comes to life.
- Update — Runs every frame, around 60 times per second. Check input, move objects, update game state. This is your game loop in action.
Scott's framing is worth quoting directly: if you understand preload, create, and update, you already understand the core of Phaser. Most beginner confusion happens when people don't know when their code runs. The video demonstrates this by adding console.log statements to each method and showing exactly when each one fires in the browser.
What You Will Build in the Full Phaser 4 Mini Course
This first video deliberately does not put a full game on screen yet. The goal is a clear mental model first. Over the rest of the course, Scott builds a complete falling objects catch game step by step, adding a controllable player, spawning objects, collision detection, a scoring system, and game rules, all explained from first principles rather than copied from documentation.
The starter project template is linked in the video description. Scott recommends VS Code with the Live Server extension by Ritwick Dey for running the project locally, though Python 3 and Node.js HTTP server are also covered as alternatives.
Watch the Tutorial on YouTube
Free on YouTube. Part of Scott Westover's Phaser 4 mini course for beginners. The starter project template is linked in the video description so you can follow along from the very first line of code 👌