Welcome to the first issue of November 2024. It has been a release-packed year and shows no signs of slowing down. This issue features a new update to the classic Phaser Debug Tool, new games, new tutorials, and not one but two job adverts! If you feel like coding in Phaser as a full-time role, check those out.

🔥 Phaser Debug Tool

A browser extension for real-time inspection and modification of Phaser games.

The Phaser Debug Tool is a Chrome and Firefox browser extension that, when invoked, checks for the existence of 'Phaser' within the page. If found, it hooks into it and provides all kinds of tools to inspect and modify the running game.

🎮 Legion

Assemble a team of warriors and compete to be the strongest in this stunning multiplayer PvP game.

Legion is a browser-based multiplayer PvP game where players assemble and level up a team of up to 10 heroes, including Warriors, White Mages, and Black Mages, each with unique abilities. Engage in real-time battles across Practice, Casual, and Ranked modes, climbing through five seasonal leagues. Enhance your team's strength by upgrading equipment and mastering powerful spells that can heal, inflict damage, or alter terrain. The game utilizes Phaser for its engine, PreactJS for the client app, NodeJS for the server and matchmaking, and Firebase for authentication and serverless API.

Play Legion

🌟 Halloween Memory Match Tutorial

Learn how to create a spooky memory game using Phaser Editor.

It's that creepy time of the year again - and what better way to celebrate than with this stunning new Phaser Editor video tutorial by Scott Westover?

"Spooky season is upon us! Ready to make your very own Halloween-themed memory match game? 🎃 With Phaser Editor v4, we’ll turn your ideas into an exciting game! By using the editor to create our game visually, and with a little bit of code we can create awesome games like this."

Watch on YouTube

🚀 Shapecraft Game Hackathon

Join the Shapecraft Hackathon with $250k in prizes available.

What if we all work together to build an interconnected game universe? A universe that is interoperable, where a player can carry their items, characters, friends list and accomplishments wherever they go. A universe that is fun, containing many independent game worlds that aren’t tied to any particular platform or genre. A universe that is neutral, where the rules are laid out transparently and no single entity has root level control. A universe that is massive, where the collective lore and depth of gameplay can rival or even surpass the largest massive multiplayer online games.

This is the dream of Shapecraft, a four week game jam/hackathon starting November 18th. We’re calling all of you, professional and aspiring game developers, to help bring this vision to life. There will be $250k in prizes awarded to the most inspiring projects submitted during this time period that capture this vision.

😊 MobileFuse hiring Phaser Developer

Experience with Phaser and HTML/CSS? Join a powerful creative team.

MobileFuse (www.mobilefuse.com) is a leading mobile advertising network. We are currently looking to hire an outstanding Freelance Creative Developer to support our growth. We are looking for candidates who have a desire to learn new skills and improve existing ones. The perfect candidates will pay attention to details and take great pride in their work.

You will be joining a team of designers who are the leaders in our industry. Take advantage of this opportunity to use your talents and creativity to design and develop captivating ads for mobile devices. Our world revolves around cutting-edge technology and finding the best talent possible. If you believe you match these qualifications, then we can’t wait to speak with you!

Read the full job posting

😊 ProgGenius hiring Phaser Developer

Location: Remote
Employment Type: Full-Time
Budget: 2200-2400$/mo. (PayPal)

We are looking for a talented Phaser Developer to join our dynamic team at ProgGenius. In this role, you will be responsible for creating engaging and interactive 2D games using the Phaser framework. You will collaborate with designers and other developers to bring exciting concepts to life while ensuring high performance and user experience.

Project Overview Sea Battle Online is a multiplayer game within Telegram, offering a remake of Sea Battle 2 adapted for the Telegram Mini App environment. The main features include turn-based naval battles with enhanced capabilities, city development and visual customization, participation in tournaments, and completion of daily quests and achievements. Monetization is through in-game purchases, while the basic functionality remains free to play.

Fill out the Application Form

Phaser Studio Developer Logs

🧑‍💻 Rich - CTO & Founder

The fact we’ve now hit November both terrifies and excites me! The amount of things we have accomplished this year is nothing short of staggering. The team has really been pulling out all the stops these past few months. Yet it’s also exciting because we’re now in the final stretch towards releasing our Game Publishing Service, Discord Activities Tool, Phaser Box2D, and the first alpha release of Phaser 4.

The Game Publishing Service is our lite version of itch.io. From your user account, you can set your choice of phaser.games sub-domain, create a new game, and then drag and drop folders/files onto it from your local system. We’ll host the game for free, and you’ll get analytics and, over time, more options to customize the layout and build up your game portfolio. Of course, we’ll also build this into our templates, Phaser Launcher, the Discord Activities Tool, and Phaser Editor. Easy 1-click game hosting to share with your friends or clients.

As for Box2D, this creeps ever closer to completion. Pete was on holiday this week, but Zeke carried on putting the API through its paces by creating example after example. You can read his entry in this issue to see how it has been going! We have been very careful in retaining the Box2D API as it exists in the native C version. We have not renamed all of the functions or classes, for example. They still retain their b2 prefix and are name-spaced via the function name rather than an actual class structure. Box2D v2 was very OOP, but v3 changed all of that and it’s now almost entirely functional, but with OOP ‘emulated’ via the function naming. We kept that fully intact. The main reason is that it makes debugging easier, but another is that if you find a really nice Box2D tutorial or example written in C, you can easily use that with our port without having to worry about what ‘friendly class mapping’ we may have used because the function names are identical.

Someone asked on Discord if our Box2D library will be free or commercial. The answer (as I gave on Discord and previously in these Dev Logs) is that it will be commercial. This was the plan from Day 1 and we’ve never indicated otherwise. We’ll ensure there are suitable levels of pricing to make it affordable to both hobbyists and those wanting to use it for client projects. Personally, I would love for it to be free, but those who have been following along know that we’ve spent months of hard, full-time work on this, and as a result, we need to recoup some of that cost.

As for Phaser 4 - more on that soon! The goal is to complete Phaser Beam development and then release an alpha of effectively v3.86 with Beam replacing every single internal thing to do with rendering. It’s going to be a huge shift and I can’t wait!

🧑‍💻 Francisco - Phaser Launcher

This week, I focused on improving the Media Browser component within the text editor for Phaser.js, aiming to make file navigation and management more intuitive and functional. The Media Browser now allows smooth folder navigation using breadcrumbs, making it easier for users to locate themselves within the file structure. Additionally, I optimized file selection to allow both single and multiple selections.

The Media Browser is designed to open the assets folder, so having this module available to copy file paths directly into the editor will be valuable, streamlining the workflow by integrating resources directly from the Media Browser.

Another update is the addition of a contextual menu, which provides quick access to relevant actions for files and folders. This functionality makes the Media Browser not only more versatile but also more accessible to users, facilitating faster and more efficient file organization.

Next Steps

With the Media Browser shaping up, it’s time to start defining the application’s startup flow. I’m considering how best to structure folder opening and project loading for a smooth experience, including features that allow users to open a folder, load the current project, or even quickly access previous projects. The goal is to make startup intuitive and agile, catering to the needs of regular editor users.

🧑‍💻 Zeke - Box2D

Finally kicked off making a Box2D game demo on Monday. It’s called… Asteroids. Yes, it’s a classic and simple enough to build over a week while figuring out what functions, shapes and UI elements are needed to make this work.

First step, making a basic triangle shape and making it move around. Sounds easy enough, except it’s purely Box2D in JavaScript with no helper functions. The ship itself requires 3 components: a dynamic physics body, a collision shape and a triangle shape definition in vector format. To make it move requires getting the ship’s rotation and applying a force to the ship’s centre. Here’s what it looks like:

Step 2: Shooting. See what my first attempt at spawning bullets from the ship looks like:

Unexpectedly, smoke trails were created instead that look nice if implemented properly but that’s not my intention here. So after some tweaking and applying force to each bullet, I’m happy to see shooting working.

Tweaking shooting a little further to add a firing rate so bullets are not spraying out like a hose:

Step 3: Asteroids. What’s an asteroids game without it? Using a basic circle shape, this was a fairly straightforward step. I thought it looked good until…

At least collisions are working. Maybe I should change this to bumper cars in space instead. Before splitting the asteroid, I decided to add in a world wrap feature so bullets and asteroids will reappear after exiting the edges of the world.

Now to crack some asteroids.

After getting some feedback from the team, prettier asteroids are needed. So from a circle, it’s now a randomly generated 5 to 8 sided polygon.

Finally to add a simple UI to complete this demo.

It’s been a fun week learning more about Box2D and figuring out how to implement it in a game. The experiment has given me more ideas about what to build next. Until then, I’ll be working on creating specific physics examples to show you how to add specific physics elements like adding thrust, rotation and collision detection.

🧑‍💻 Can - Discord Activities Tool

This week was about refining and testing our Discord Activity launcher. Main tasks involved bug fixes and polishing to ensure a smooth user experience. I also implemented a cloudflared check to confirm if the package is installed, which adds a helpful UX layer before it launches the project. Another improvement we've made is moving from GitHub to our CDN. Downloading a ZIP of project struggles sometimes, responses slowly - with Phaser CDN, its much much faster now!

On the visual side, the app logo is shaped up beautifully (Ilija kills it, yet again), and I’m excited to reveal all together soon! So far, everything is progressing as planned, and I can’t wait to share more updates as we approach launch!

🧑‍💻 Arian - Phaser Editor

Hello friends

Our tilemap editor is almost ready. We have implemented all the features we planned for the next version of the editor, which should be released this week! Right now we are working on a new project template that includes a tilemap, which you can use to get an example of how to use it. In general, nothing changes from how you have used tilemaps before. Only now you can edit it from the Scene Editor itself. One thing we worked on all week was code generation. For this new version, all map data, including tile indexes, is included as part of the scene code. For future versions, we may give the option to save the data to an external file. Here is a screenshot of the example we are working on, which is an adaptation of the Sunny Land Forest demo created by Ansimuz:

Tales from the Pixel Mines

November 1st 2024, Ben Richards

This week has been a mix of squashing bugs and implementing filters.

Bugs

RenderFilters Focusing

There were a few issues around RenderFilters focus. This is an important aspect to get right, because the old FX system was supposed to just work. RenderFilters requires a bit more precision due to its greater capabilities, but we want it to just work too.

My solution is to detect imprecise child size, and toggle a flag to put the RenderFilters into "context focus" mode. This means that it derives its size when it renders, using the current DrawingContext. The DrawingContext includes a camera which the RenderFilters can copy. This is exactly the same as the old FX system. When the RenderFilters is rendered through multiple cameras, it will resize to each in turn.

DrawingContext Release

Several issues came up with DrawingContext release. It's vital to get these correct.

See, when we're working with filters, we need a constant stream of framebuffers to use and discard. We get these with DrawingContext objects, provided by a pool where they're recycled. Most of the time, the whole game only ever uses a couple of extra framebuffers under this system, which is very efficient.

The first problem is early release. When we release a DrawingContext, it goes back to the pool, and can be re-issued to another use. But if we want to use the DrawingContext in its original form, we have a problem. Very often, it's immediately taken and drawn to for another purpose, so the original is lost by the time we come to use it. Instead, we see something unexpected drawn where we don't want it.

The second problem is failure to release. If we don't release a DrawingContext, we never have a chance to reuse its framebuffer. But that framebuffer still exists. And we need a framebuffer, so we make a new one. Framebuffers quickly pile up, and the WebGL context quickly runs out of memory. WebGL crashes. This is a bad time.

The solution is, simply, to track all the complicated uses through, and make sure we're releasing everything correctly.

I also added the ability to "lock" a DrawingContext, preventing it from returning to the pool until unlocked. This is useful for "diamond-shaped" logic, where a given filter result needs to be used in two separate places before being combined. It's complicated stuff, and can crash WebGL entirely if you get it wrong, but it's there if you need it. (Mostly, it's there because I need it.)

Parallel Shader Compilation

The parallel shader compilation extension for WebGL is not available in some browsers, mainly Firefox. A logic bug prevented some shaders from ever compiling when the extension was not available. I fixed the logic and it works fine now.

You can enable parallel shader compilation in Beam by adding the following code to your game config: skipUnreadyShaders: true. This feature will skip rendering a shader until it's fully compiled, allowing your game to keep running in the meantime. It prevents stutter as shaders take several milliseconds to compile. This will result in blank renders, so it's best to pre-touch shaders and rendering options before you need them.

Quicktime Support

I added the ability to load Quicktime .mov video files, which was missing.

This is a horror story.

Quicktime videos load just like any other videos. There's nothing wrong with them. But Chrome on Windows (on my machine) says it can't play them. It can play them. I checked. It's lying.

Because media files are so complicated, browsers have a special interface to tell you whether you can play a given file. The HTMLVideoElement.canPlayType function has three possible results: "no", "maybe", and "probably".

There is no "yes".

And, as we've seen, sometimes browsers lie.

Suddenly, a monster joins our story: HEVC, the High Efficiency Video Coding standard. This is a monster of human creation, spawned by greed and carelessness. Taken by itself, it's a beautiful thing, supporting cool features like transparency, better file sizes, and improved color handling. But the megacorporations which created it wanted to get a return on their investment, so they put licensing fees on it.

As a result, many organizations were unable to use HEVC. For example, the Firefox browser can't implement it, or they'd have to charge you money to pay the fees. And, as we've seen, media file support is extremely vague on the Web. So when Chrome tries to play a file with HEVC, it comes out wrong. (In this case, the alpha channel is missing, replaced with a black background.)

And HEVC isn't a file type. It's a codec. That means it can be inside a MOV or MP4 file, with no way to tell until you try to play it. My Firefox says it can "maybe" play MOV files, so it gives it a try and throws an error because it finds HEVC.

HEVC could be lurking in any video, waiting, biding its time. Sometimes it behaves nicely. But every so often it reveals its hidden face, and does something wrong, or just crashes your game.

If you can help it, don't use HEVC. Not even for the cool transparency features. The VP9 codec does transparency without these issues, as part of the WEBM container. You might still be ambushed by a video that doesn't work as expected, but as I said, this is a horror story. The story of video in the browser has no happy endings. If you're lucky, you'll survive.

Filters

Color Matrix

Color Matrix is pretty much the same. However, the FX version concealed the fact that the color handling wasn't done by an FX Controller. It was a separate object, skinned to look like a controller. Because Filter Controllers are a bit heavier, this was no longer practical. The main difference is that you'll now call colorMatrixController.colorMatrix.negative() to set colors, instead of colorMatrixController.negative().

Because Filters run on cameras, we can take the previous scene, and put it through a camera with the Negative color matrix. This reverses the negative to positive, and changes the unfiltered items to negative. This is the kind of cool stacking effect you can make when there are no limits on stacking filters!

But there's more. Notice how the background didn't turn negative. That's because it's not part of the camera! That's the game background, which is set outside any scene or camera, and thus is outside the realm of filters. You can also add a background to a camera, which is affected by filters. This is a useful distinction to know about.

Barrel

Barrel is still the same. I had an interesting time replicating the example above, though, because the order of operations is slightly different. Padding won't get the same effect. Ultimately, I used box.focus(undefined, undefined, box.width + 64, box.height + 64) to enlarge the scope of the camera while keeping the sprite centered. You can do a lot of different things with the controls available to filters!

Blend

WebGL is infamously short on blend modes. While it has plenty of blend options, few correspond to the blend modes familiar in Photoshop or the Canvas renderer. You're left with ADD, MULTIPLY, SCREEN, and ERASE, where Canvas has dozens of familiar and useful modes.

While we still can't set those blend modes straight on objects, the new Blend filter will help. It gives you every blend mode from the Canvas renderer, from ADD to XOR.

But it's better than that. Because these are applied by shaders, you can tune and overdrive the blend. The Blend filter has a color property, which multiplies the blend texture, allowing you to tweak the behavior. And the blend amount property can go beyond the range 0-1, a setting I call "overdrive". This lets you do things that are otherwise impossible with a single blend, like apply intense colors or reverse a blend.

In the example below, I've used Blend in ADD mode to modify three gems, adding them to themselves. One is super bright. One is brightened just in the red channel. And one is brighter in red and darker in blue, turning it from cyan to orange. As you can see, overdriving a blend gives you new kinds of control you never had before!

Bloom

Bloom was the last filter on my agenda, and it turned out to be the hardest. It's a composite filter, using several passes to blur the input, then blending the blur with the original input. If that sounds like everything else in this log entry, you're right! I had to develop everything to support this filter.

And I'm not done, because I want to make Bloom look as good as possible. See, the original Bloom FX was composited in a way that made it darker in some places. Now that we have Blend shaders, we can composite it properly, making the image as bright as it was originally.

The question is, which Blend mode to use? ADD? SCREEN? COLOR_DODGE? I think the correct answer is to give the choice to you, and expose blend mode as a setting on the filter controller. But I still want the default to look great. I think SCREEN is probably best - it's way less garish than the alternatives in my tests.

If you're reading all this and getting flashbacks to the Bad Old Days of bloom 20 years ago, don't worry. You have the power to control every aspect of the filter. You can right the wrongs of the past.

Next Week

I'm going to polish off this batch of filters. (That implies more batches to come. I have ideas. They won't be in this release of Beam, but there are plenty more things to empower your games.)

Then I'm going to work on the Shader game object. This fills a vital role in game rendering. I think of it as the counterpart to textures: a way to cover a quad with something that's not an image file. It's also how you get new shaders into the game.

Fingers crossed, we're going to hit the last few features soon, and start the laborious process of tidying everything up and making sure it works. I'm pretty confident, but I also know that complicated things attract bugs.

Time to fire up the bug zapper...

Created a game, tutorial, code snippet, video, or anything you feel Phaser World readers would like? Then please send it to us!

Until the next issue, happy coding!

Phaser World Issue 204