Phaser World Issue 209
Richard Davey
A nice big chunky issue again! This time we’ve our brand-new Discord Activity Launcher available, two great new tutorials, two great new games and a Dev Logs section to enjoy!
🚀 Discord Activity Launcher Released
From Project Setup to Live Testing in Minutes with our free new tool!
Creating games for Discord just got significantly easier. Our new Discord Activity Launcher eliminates the traditional setup hurdles, offering a streamlined workflow for both newcomers and experienced developers working with Phaser.
The launcher automatically handles everything from initial project creation to proxy URL generation. Choose between single-player and multiplayer templates, and let the tool configure your development environment, install dependencies, and set up cloud tunneling - all through an intuitive interface.
For existing projects, the launcher serves as a quick way to generate proxy URLs, making testing on Discord seamless. It even integrates directly with the Discord Developer Portal, copying your proxy URL to clipboard and directing you to the right page when your APP_ID is configured.
Available for both Windows and macOS (including Apple Silicon support), the Discord Activity Launcher represents our commitment to making Discord game development more accessible.
Ready to start? Check out our comprehensive tutorial to learn how to use the Discord Activity Launcher and begin creating your own Discord games with Phaser.
Download the Discord Activity Launcher
🎨 Game Title Screen Generator Beta
Test out our new AI art tool that helps create game title screens
We’ve released a beta version of our new AI art tool, which has been built specifically to help you create title screens for your games or projects. It leans heavily into the retro 16-bit aesthetic, having been trained with a special dataset, and we’re really pleased with the results. Read about the development of this in this week’s Dev Log.
This is a time-limited beta release. If you’re reading this in the distant future, we may have already removed the service. Otherwise, feel free to have a play and share your favorite creations!
🖊️ State of Web Game Dev 2024 Survey
The survey should take no more than 20 minutes. The result will be used to evaluate the state of Web Game Development in 2024. The survey takes place between December 4th and 20th 2024, and we plan on sharing the results publicly in January 2025. Make sure to visit gamedevjs.com/survey/2024 for more details.
Please take part in this survey!
🧠 Create a Whack-a-mole Style Game
Learn how to use Phaser Editor to create this fun monster-bashing game!
Scott Westover brings us this great new tutorial on YouTube: "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.
🎮 Egg Hunt Mania
Scrambling for success in this fast-paced egg-catching challenge
Egg Hunt Mania turns the simple act of catching eggs into a surprisingly intense arcade experience. Players must deftly maneuver their basket to catch eggs rolling down from overhead chickens, all while managing their basket capacity and making crucial timing decisions about when to sell their collected eggs.
The game's core mechanic shines in its deceptive complexity. What starts as a straightforward egg-catching exercise quickly evolves into a challenging balancing act. The tension builds naturally as your basket fills up, forcing you to make split-second decisions: continue catching more eggs to maximize your selling price, or make a dash to the store before your precious cargo ends up as a mess on the floor?
🧠 Create a game like Vampire Survivors
Build a quick prototype of Vampire Survivors with Phaser
Emanuele Feronato is back with the start of a new tutorial series sure to interest a lot of you: "I bet you’re all familiar with Vampire Survivors, the bullet hell roguelike that spawned a new genre of video games and hundreds of imitators.
Did you also know that it was originally built with Phaser? Probably, if you follow the fortunes of this fabulous framework.
So why not write a script of a handful of lines capable of running a prototype of Vampire Survivors?
🎮 Lottie Arcade
Where Retro Meets Modern Web Technology
The team at Lottie, known for their web animation technology, has turned their talents to classic gaming with Lottie Arcade. Built during an internal hackathon, this collection of games brings beloved arcade classics to the modern web.
The arcade features three carefully crafted titles that capture the essence of retro gaming. Command Earth's last defenses in Space Invaders, where waves of alien forces descend with increasing intensity. Test your reflexes in Flappy Bird, perfectly timing each tap to navigate through an endless maze of pipes. For speed demons, Highway Rush offers an intense arcade racing experience as you weave through traffic at breakneck speeds.
Phaser Studio Developer Logs
Here is what the Phaser Studio team has been up to this week:
🧑💻 Rich - CTO & Founder
Here in the UK, and I assume elsewhere in the world, there is a TV show called “I’m a Celebrity, Get Me Out of Here”. My wife and daughter love it. I can’t stand it. So I figured: What fun little evening project could I work on while this is on TV and they are otherwise engaged? Plus, I don’t have to endure watching people swim in beetles (poor beetles 🪳)
The answer came in the form of learning all about AI art generation. This has been a hot-topic for a while. We’re all no doubt familiar with Stable Diffusion’s ‘sausage-finger’ images combined with its inability to even render simple text. But I figured that things don’t really sit still for long. What was next to useless just a year ago, may be a lot more advanced now. And I wasn’t wrong. Some cursory reading on the subject led me to a new alternative model called Flux, created by Black Forest Labs. The results from this were quite staggering. It could do text! It could do fingers! It could do “display a solid red square on a white background” - such power! 🙂
But could it do pixel art? The short answer: No. Not really. It clearly has no actual concept of what pixel art even is. I was about to give up when I started reading about fine-tuning and creating your own LoRA (Low-Rank Adaptation). A LoRA works by modifying the fine-tuning process. It freezes the original model weights and then applies a separate set of weights, which are blended with the original parameters. In short, you don’t retrain the entire model - because only a handful of tech giants in the world can actually afford to do that - instead, you fine-tune it by training on a specific set of data and using those weights to influence what gets output at the end.
Now, this was fascinating. I found a bunch of online sites that offered LoRA training services for very reasonable prices. All you had to do was prepare your dataset, click a button, wait several hours, and out came a safe tensor file on the other end. So I did what I suspect a lot of noobs do. I threw in a whole batch of images, hit “train” and expected it to understand what I wanted 😅 of course, that’s not how AI works at all.
My initial test images were just a grab bag of retro game screenshots. When I asked the tuned model for an image, expecting to get some pixel-art beauty back again, it didn’t have a clue what to do and gave back rubbish. My weights were having no impact, or worse, ruining the base model. But on TV, contestants were still trying to drink blended cockroach smoothies, so I figured there had to be a reason for my training failure and dug deeper.
When you build your dataset, you have two components: the source image and a textual description of what is in that image. The quality of the description is fundamental. For example, have a look at the following image:
If you had to type in a description of this, you may write something like “a hand above a planet's surface.” I mean, sure, that is what you can see here. But the training needs much, much more detail. For example, it actually needs something more along the lines of this:
The image is a digital artwork, likely from a video game or old-school computer game, featuring a stylized, sci-fi scene. The central focus is a human hand reaching out from the bottom of the image, with fingers extended. The hand is rendered in a detailed, realistic manner with a slightly exaggerated texture, giving it a slightly cartoonish appearance. The hand is a light tan color with visible veins and creases, indicating a detailed shading and lighting effect.
Notice how precise we’re being about the placement of the hand. The shading, the color, the style. All of these things matter. This is how the LLM ‘learns’ what it is seeing. You cannot expect it to invoke any real ‘human sense’. There’s no actual ‘intelligence’ going on here. Just a huge vector cloud of related terms and weights.
Prompt an AI to create an image, and it isn’t like asking it to scan a database. If you ask for an “apple,” it doesn’t go and see what apple images it has stored and return one. Instead, AI image generation works more like the model has learned the "essence" of what makes an apple look like an apple. During training, it analyzed millions of images and their descriptions, learning patterns like "apples are typically round, have a stem, can be red or green, and often have a distinctive shape."
When you ask it to create an apple, the AI starts with random noise - imagine TV static or random dots. Then, through diffusion, it gradually refines this noise, using what it learned about apple-like patterns to transform the chaos into something that matches its understanding of "apple-ness." The LoRA is liking giving this understanding additional specialized training in a particular style or subject. When you apply a LoRA to an AI model, you're essentially tweaking its understanding of certain visual concepts.
Once I understood that, I understood the challenge a little deeper. The descriptions had to be excellent, and the source imagery had to be clean. Anything extra in the source imagery would be incorrectly perceived as being part of the image. Plus, for pixel art, you had to ensure all of the source images were properly scaled-up and all the same dimensions to avoid them falling into different training buckets.
Thankfully, Celebrity is quite a long show, so over several nights, I cleaned the source files, carefully resized them, and meticulously detailed them. I set the new training running and went to bed. The next day I got to see the fruits of my labor.
This hard work, combined with a massively powerful base model, resulted in some incredible images. They truly captured what a retro game title screen should look like to me. All bold faux-3D lettering, vibrant colors, and hard outline pixel art. That, when down-sampled and palette quantized, retained that sharp, crisp look.
I felt I was onto something enough to build a basic web interface to it all. This was some simple Bootstrap styles and a bunch of Node JavaScript. I threw it on a cheap VPS, and now it’s available for testing and playing with at:
I posted about it to BlueSky and the Phaser Discord, and it was fun to see what was generated. In the past couple of days, over 1000 title screens have been made! A few of my favorites are below:
Feel free to play with the service. I won’t keep it online for that long, so if you make something you like, please save it!
This work has been interesting, taught me a lot, and is a feature that will manifest in Phaser Launcher upon release. You’ll be able to enter your game name, ask it to create a title screen, and have it add it directly to your project for you.
Who knows what else we could train it to do in the future? 🙂
🧑💻 Zeke - Phaser Box2D
I started the week adding 3 more Box2D examples:
Static vs. dynamic vs. kinematic bodies
Multiple physics body shapes
Different types of linear movement
The remainder of the week was spent working on publishing the first draft of our Box2D documentation on Phaser’s Hashnode Documentation site. I’m happy to announce that it’s up although there is still room for tidying up and tweaking to make everything cohesive and readable.
Until next week, happy game dev-ing!
🧑💻 Francisco - Phaser Launcher
Hi everyone,
This week, I’ve been working on user authentication for our new tool. The idea is to implement something similar to what Arian does in Phaser Editor, with a functional OAuth flow tailored to our application.
To achieve this, I needed to spin up a temporary server directly from the app, which I implemented using Rust. This server handles the authentication flow, including receiving the callback from the OAuth provider. Once authentication is complete, the server shuts down automatically to avoid staying in a listening state.
Ensuring the server closed properly was the most time-consuming part. Adjusting timings, handling errors, and making sure no orphan processes were left behind required several iterations, but I got it working in the end. Now we have a fully functional authentication flow, although it’s currently running as a separate project.
Next steps
Full integration: The next step is to merge this functionality with the main tool. This includes building a component to continuously validate with the server whether the user is logged in. Refinements: While the flow is functional, I want to make sure it’s robust against potential network errors or unexpected configurations. It’s been an intense week, but the result is worth it. We now have a solid foundation for authentication and are one step closer to a fully functional tool.
🧑💻 Can - Discord Activity Launcher
After enduring intense power cuts in my country, I'm thrilled to announce that the first version of our Discord Activity Tool & tutorial is finally complete—hooray!🎉
What I've Accomplished This Week
UI Restructuring & Polishing: Completely revamped the user interface for better usability and aesthetics.
Fixed Typos: Cleaned up all those pesky text errors.
Updated App Info & Mac Icons: Ensured all metadata and visuals are up-to-date and looks good.
Disabled Window Resizing: Locked down the app's dimensions for a better, controlled experience.
Improved Cloudflared Check: The app now skips the installation if Cloudflared is already installed and avoids redundancy.
Better Background Design: Thank you, Richard!
Tauri in Production
I discovered something unexpected about Tauri: even if you hardcode CSS colors in your app, Tauri will adjust the app's colors based on your system's theme mode (e.g., light/dark mode). While this can be neat in some scenarios, it wasn't what we wanted. Thankfully, it's an easy fix with a simple Tauri config tweak.
First Impressions of Tauri
Effortless Builds: Minimal hassle, excellent performance, and the lightweight build size is a dream for a web app.
Rust Experience: Although I'm not well-versed in Rust, implementing bug fixes and plugins wasn't as challenging as I feared.
Upgrading from v1 to v2: The upgrade process was straightforward, though the documentation still needs refinement. Some details are missing, and following v1 docs can sometimes mislead—but also guide!
Got feedback or ideas? Drop by our Discord's #discord-activities channel and share your thoughts or showcase your own projects!
May the pixels be ever in your favor! (Or, if you're feeling nostalgic: "May the force be with you!")
Arian - Phaser Editor
Hello friends
Last week I have dedicated almost entirely to a new feature of the editor: compressed textures.
Phaser has supported compressed textures for a while now, and now you can use it via Phaser Editor as well, you just have to define the textures in an asset pack.
The process is similar to other assets or images, you must first define them in an asset pack to then be able to use it in the scene editor.
Compressed textures have a peculiarity, and that is that the editor needs an image (PNG, JPG, etc...) as a reference, and you must also define its counterpart with the different compressed texture formats, since browsers can vary in the support of these formats. So, first you select the reference image, and import it as a "texture":
Then, in the asset pack editor, you can define versions of that image in the different compressed texture formats supported by Phaser:
The process for importing a compressed texture atlas is very similar. The editor needs an atlas of reference images, and then you define all the versions in the different formats.
This feature is now ready. We are working on various issues and features requested by the community. We should have a new release before the end of the year.
Cheers!
Tales from the Pixel Mines
9th December, 2024 by Ben Richards
I'm back in action. The last couple of weeks were a writeoff, thanks to a second bout of COVID-19. Very unpleasant; do not recommend. The main symptoms took me out for a couple of days, and left me barely able to code for another week.
This is why I mask up in public places. I don't want to infect anybody else, because I don't like being sick and I assume other people feel the same way.
So there's not much to report, sadly. I'm still working on Phaser 4 beta 3. The main objective is still to get Filters working as a component, much like FX in Phaser 3. This entails some rewrites of the transform logic, because filters previously had a separate RenderFilters object to hold all their transforms, but a component just has the single GameObject to work with. Overall, however, this approach is simpler and requires fewer moving parts. I'm confident that this is a better approach.
I reckon there will be plenty to share next week.
Subscribe to my newsletter
Read articles from Richard Davey directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by