Phaser Editor v4: Create a Monster Whack-a-Mole Style Game – Full Tutorial

#gamedev #phaser #phasereditor Hey everyone! Today, we’re diving into Phaser Editor v4 to create a fun, monster-themed Whack-a-Mole game! Phaser Editor makes it super easy to build HTML5 games thanks to its powerful, visual editor that helps us create engaging Phaser games with just a bit of code. In this tutorial, I’ll walk you through each step of creating a simple Whack-a-Mole-style game where you’ll learn a ton, including: Building reusable game objects with prefabs, Using script nodes to add interactivity, Handling click events to ‘whack’ the monsters, Setting up scenes and linking them, Adding audio, custom fonts, and more! All you’ll need to follow along is Phaser Editor v4. If you haven’t set it up yet, check the link in the description for installation instructions. Support me on Ko-fi: https://ko-fi.com/scottwestover 🔗 To crash course on Phaser Editor v4: https://youtu.be/upx7DST2blA Phaser Editor Installations Instructions 🔗 https://phaser.io/editor/docs/first-steps/download-and-install Phaser Editor Docs 🔗 https://phaser.io/editor/docs 🔗 Playable demo of the project that we build https://scottwestover.dev/games/whack-a-monster/index.html Project assets 🔗 https://github.com/devshareacademy/phaser-editor-whack-a-monster/releases/tag/assets https://github.com/devshareacademy/phaser-editor-whack-a-monster/releases/download/assets/whack-a-monster-assets.zip Video Chapters 0:00 - Intro 0:50 - Review gameplay 1:45 - Credits 2:31 - Project setup 3:08 - Run game locally 3:48 - Load assets 6:23 - Create animations 8:42 - Cleanup level scene 9:20 - Add level background 10:34 - Add text prefab 14:14 - Create ui text prefab 16:52 - Create base monster class 21:20 - Create monster prefabs 25:19 - Spawner prefab 31:38 - Test spawner prefab 34:09 - Show and hide animation 38:59 - Spawner groups 41:24 - Masks 46:11 - Gameplay script 49:50 - Spawn logic 59:54 - Score 01:07:01 - Timer event 01:15:25 - Fix timer start logic 01:17:18 - Add custom web fonts 01:21:47 - Phaser editor plugin 01:27:18 - Add audio 01:31:52 - Wrap up The completed code for this video can be found here: https://github.com/devshareacademy/phaser-editor-whack-a-monster/tree/finished-game Credits for assets: https://www.kenney.nl/assets/impact-sounds https://oscarleites.itch.io/free-halloween-music-pack https://free-game-assets.itch.io/parallax-halloween-2d-game-backgrounds https://ismartal.itch.io/2d-animated-halloween-characters https://bdragon1727.itch.io/free-smoke-fx-pixel-2 https://rexrainbow.github.io/phaser3-rex-notes/docs/site/webfontloader/ Interested in more great content? Check out my videos on Phaser 3 here on YouTube: https://www.youtube.com/playlist?list=PLmcXe0-sfoSjvK7-_4SNcp2V8kncg-Wpt Check out my videos on Phaser Editor here on YouTube: https://www.youtube.com/playlist?list=PLmcXe0-sfoShBVVcab8kB0A_2KGf30ClP Check out my free courses here on YouTube: Build a Space Shooter Game With Phaser 3: https://www.youtube.com/playlist?list=PLmcXe0-sfoShHpVWLDW2gqsyH1UFRni_2 Monster Tamer - Pokemon like RPG Tutorial with Phaser 3: https://www.youtube.com/playlist?list=PLmcXe0-sfoSgq-pyXrFx0GZjHbvoVUW8t Build a Solitaire Game With Phaser 3: https://youtube.com/playlist?list=PLmcXe0-sfoSh1o3fm-_2JOod-wRUxnqb_&si=zu5TKZ-0ciTtekA0 Introduction To GitHub Actions Course: https://www.youtube.com/playlist?list=PLmcXe0-sfoSig2tvPV6FOLFb9O5ruP_mG JavaScript Course: https://www.youtube.com/playlist?list=PLmcXe0-sfoSgHQRKVWeJuIldauc9dL4rR Follow Me: https://www.linkedin.com/in/scott-westover-77393a97/ https://github.com/scottwestover https://x.com/_scottwestover https://bsky.app/profile/scottwestover.dev Blog: https://scottwestover.dev/