Phaser World Issue 211
Richard Davey
In this issue, we have the free version of Phaser Box2D and new versions of Phaser v4 and Phaser Editor.
⭐ Phaser Box2D Released as open-source
A free, high-performance, industry-standard 2D physics engine built on Box2D v3.
We’re happy to announce that Phaser Box2D is now available completely for free and has been released as open-source.
The Phaser Studio team is thrilled to announce the release of Phaser Box2D, the ultimate 2D physics engine for creating realistic, physics-driven games for your browser. Whether you’re building fast-paced shooters, intricate puzzle games, or sprawling RPGs, Phaser Box2D is here to take your creations to the next level.
Phaser Box2D is powered by the latest version of Box2D, a cutting-edge physics engine designed for accuracy and performance. We’ve painstakingly converted the Box2D v3.0 API, written in C, to modern JavaScript, making Phaser Box2D the only v3 port available for the web. We’ve optimized it specifically for browsers, so it’s fast, powerful, and ridiculously easy to integrate with all modern web stacks.
It's also open source and released under the MIT license, so you're free to use Phaser Box2D in your games and applications. Phaser Pro and Enterprise customers can also benefit from priority technical support from the team that created it.
No one likes laggy physics or buggy collisions, and with Phaser Box2D, you won’t have to deal with either. Thanks to a fancy new Soft Step Rigid Body Solver, your physics will stay stable and smooth—even with fast-moving objects or crazy stacks of bodies. Plus, its island-based sleep management keeps things efficient by letting inactive objects and your processor take a break.
Have you ever had a bullet magically phase through a wall? Not with Continuous Collision Detection (CCD). Whether it’s high-speed objects, tricky AI behaviors, or complex aiming mechanics, Phaser Box2D makes sure everything behaves exactly how you expect.
We’ve kept it simple. Phaser Box2D works right out of the box as an ES Module. It’s also tiny — just 65KB when zipped — so it’s perfect for web games and playable ads. And for those of you who’ve used Box2D before, good news: we kept the original C API function names, so you’ll feel right at home. The added benefit of this approach is that if Box2D is new to you, you can rely on its rich 18-year history to learn it faster because tools like ChatGPT and Cursor understand its C API well.
It’s also packed with features you’ll love:
Shapes, Shapes, and More Shapes: From circles to chains to rounded polygons, create the environments and characters of your dreams.
Composite Bodies: Combine shapes for vehicles, ragdolls, or even funky robots with multiple collision parts.
Versatile Joints: Build swinging doors, working pistons, or even car suspensions—if you can dream it, you can make it.
Smooth Physics: Speculative collisions and continuous motion handling keep everything looking and feeling real.
We’ve also included over 50 examples to get you up and running in no time. From mini-games to single-feature demos, you’ll have everything you need to get inspired and start building.
Phaser Box2D is here to help you create incredible, physics-driven games that wow your players. Whether you’re an indie creator or a pro studio, this is the tool to bring your ideas to life.
Ready to get started? Let’s make some magic together!
🚀 Project X: Light Years
Classic Shooter Gameplay Reimagined with Cutting-Edge Visuals and Design
Project X: Light Years is an exciting reimagining of the classic Amiga shooter, brought to life by MK Games and Team17. Fans of the original Project X will find themselves immersed in a modernized experience that pays homage to the roots of the genre while introducing new twists for today's gamers.
Scheduled for release on Steam, this game offers a fresh perspective on the beloved side-scrolling space shooter format. In partnership with Team17 this is an official entry in the Project X series. Engage in space combat as you navigate through visually stunning environments and swarms of enemies, and upgrade your arsenal to become the ultimate space fighter.
A demo version and gameplay videos are available on Steam.
⭐ Phaser Editor 4.8.1 Released
Enhancing Your Workflow with Compressed Textures, Asset Management, and more
Phaser Editor 4.8.1 launches with powerful compressed texture support, enabling seamless integration into scene and animation editors. The streamlined workflow pairs compressed textures with standard image files as fallbacks, while introducing robust blend mode controls for game objects and enhanced Glow FX capabilities with fine-tuned quality and distance parameters.
The update increases workflow efficiency through further improvements: a dynamic asset pack visibility system for superior asset management, quick OS terminal access via the Files view, and an improved file deletion system that utilizes the recycle bin in the Desktop edition. This polished release also squashes key bugs, addressing sprite animation preview glitches, Outline view navigation issues, and scene editor grid rendering at high zoom levels.
Subscribers can download this version immediately.
🔦 Phaser Raycaster Plugin
The latest update of this raycasting plugin is now available
Phaser Raycaster is a Phaser 3 plugin, released by Wiserim, which provides raycasting for geometric Game Objects, Sprites, Arcade Physics, and Matter Physics bodies.
It has been in development for a while, but the new v0.10.11 release has just been made available, with updated documentation and examples to be found on CodePen.
Read more about Phaser Raycaster
⭐ Phaser v4 Beta 3 Released
The final release of the year introduces the new Filters Component and more fixes.
We're very happy to announce that Phaser v4 Beta 3 is now available on GitHub and npm. This represents all development work over the past month and takes us another step closer to the final release in Q1 2025.
The biggest change in this version came about thanks to the community feedback in the Phaser Discord. In short, we decided to rework the way RenderFilters work:
Previously, the RenderFilters object wrapped game objects to apply Filters. This worked well in several ways, but because it replaced the existing game object, it made object references less reliable.
The decision was made to change Filters to a component on game objects. This is similar to the old FX system, but it is now built into the base GameObject, so it can be used everywhere. Filters are not FX (they're better).
For those who have been using Phaser 4 beta 1 or 2, this will change the way you use filters. The core principles are the same, however: filters are still divided into internal and external lists.
Read more about Phaser v4 Beta 3 and be sure to read the Dev Log this issue too
📺 Build a Retro Style 2D Game
Learn Game Development with Phaser 3!
Jeremy Morgan has released a new tutorial on his site, How to Make Games, and also published it on YouTube: "Have you ever wanted to create your own video game but didn’t know where to start? In this video, we’re diving into game development with Phaser 3, a powerful and beginner-friendly JavaScript framework. Whether you're a total newbie or just curious about coding games, this is the perfect place to start!
Phaser Studio Developer Logs
The Phaser Studio team is all off enjoying their holidays at the moment, but both Arian and Ben left developer logs before they went - so here’s a slightly reduced Dev Log for you all.
🧑💻 Rich - CTO & Founder
This is the final issue of Phaser World for 2024, and I’m taking a week off from writing, returning in early January 2025. Approaching the end of a year always makes me think back to what has been accomplished in the previous 12 months. I find that a little retrospection helps to focus the lens on what should be achieved in the coming year.
Suffice it to say that 2024 has been an epic year.
When you consider that Phaser Studio was only formed in December 2023 and consists of just 8 full-time staff (and a selection of lovely contractors), the fact we’ve managed to output so much is a testament to the determination and hard work of all those involved. I was planning on making a list of everything we released as a team this year, but the length of it was getting silly, so instead, here are some highlights:
Constant Phaser Editor updates. From v3.66 to v4.8.1 with almost a release a month.
Constant Phaser updates. From v3.80 up to Beta 3 of v4.0.0.
The creation of a brand new state-of-the-art renderer for Phaser 4 from scratch.
Over 50 Phaser Templates for React, Vue, Rollup and many, many more.
The release of the Create Phaser Game CLI app.
Complete documentation overhaul with hundreds of pages of new content written.
A huge free book published! And lots of new tutorials covering Discord, Ionic, and Box2D.
Phaser Compressor, Phaser Explorer, Phaser Playable Ads, and Phaser Sandbox released.
A stunning new website 😀 and a growing new YouTube channel.
50 issues of this newsletter and 200 articles posted to the Phaser website (most of which I wrote!)
And this isn’t even everything. It is, however, a good representation of the diverse types of tasks any modern software company needs to undertake. Yes, of course, you need to write code, but if you don’t pay attention to the whole ecosystem around it, all of that hard work can often be in vain.
And if you do pay attention, the rewards are worth it.
The Phaser Templates we published? Our analytics show they’ve been used over 76,000 times in the past couple of months. Right now, someone is building a Phaser game every minute of every day.
Or the website? After the relaunch at the start of October, we’ve seen a dramatic uptick in registrations and time spent on the site. This week, we passed 27,000 registered users, which is an incredible amount of people if you stop to think about it for a moment. As for page views, we’ll close the year with over 7 million of those. You guys are reading a lot!
Interest in building games for the web is truly stronger than it has been in a long while.
I would attribute this to a couple of factors. The first is that you can now play web games pretty much anywhere. Everything is a games platform. From Discord Activities, Telegram, WeChat, YouTube Playables, Reddit, and even LinkedIn. Big tech is waking up to the appeal of games to keep people on their sites or apps. And game devs are waking up to the notion of taking their games, or little slices of them, to the places where gamers dwell. Of course, where there is a captive audience, there is a need to build for them, and Phaser is optimally positioned right in the center of this perfect storm.
The other factor that shouldn’t be ignored is the rise of AI.
How we write code has changed forever. Our first port of call is now a Copilot, Cursor, or LLM, which we’re using to supplement our skills and knowledge at a faster pace than ever previously possible. For skilled developers, AI is an enhancement tool like no other. Yet, we’re also seeing the opposite end of the spectrum. Developers are coming to the Phaser Discord and showing us games they’ve made entirely with the help of ChatGPT. Because OpenAI, Anthropic, and the rest have ingested and trained upon all of the Phaser documentation and API, it’s tightly embedded into their vector stores, making it relatively easy for them to guide beginners through the process of game creation in a way that was previously unthinkable.
Of course, this also extends into game assets, too. The creation of sprites, characters, title screens, logos and other game elements is now commonly handled by AI tools. We had originally planned to create an Asset Marketplace for Phaser developers so they could easily buy graphics and sounds to use in their games. In all honesty, this now seems like a pointless endeavor. Based on progress in this space alone in the past year, it’s only a matter of time before the type of developer who would have previously purchased assets from a store will generate them instead. This tidal shift is inevitable. It’s not going to replace game artists of course, there will always be a place for those skills, but in projects where it’s a solo dev, or small non-art team, they’re the perfect candidates for these tools.
Quite how this fits with Phaser we’re not entirely yet sure. But as I mentioned at the start, you have to keep an eye on the whole ecosystem to understand what direction to take. And like it or not, AI is now a key part of game development.
At the most basic level, it means we ought to consider how to provide Phaser documentation in a way that makes it easy for LLMs to digest and parse rather than writing it for humans first. And I can’t help but wonder how long it will be before we need to start designing our APIs in a similar manner. Classes, function names, and parameters tailored specifically for AI so that it can generate the most optimal and error-free code possible. It’s all food for thought as we round out the year.
Of course, the immediate technical priority of Phaser Studio in 2025 will be to get Phaser v4 released and used. And this is being built for humans 😅 I just wonder if I’ll be saying the same in a year’s time.
All that leaves me to say is thank you for joining us on this exciting journey, whether this is your first issue or you’ve been on this crazy ride since the very start. 2025 will be another epic year for Phaser Studio, and I hope it is for you, too.
🧑💻 Arian - Phaser Editor
Hello friends,
In the last few days we have been working on a new release of the editor. It is ready and will soon be announced on our channels. The key thing about this new version is that it incorporates support for compressed textures. This is a feature that many of you will not use, but for some cases the possibility of using these textures is of great importance. In addition, for the release we have reviewed the list of issues on GitHub and have implemented some of the community requests.
Some of these issues are: Send to the recycle bin instead of deleting a file. Add a parameter to the JavaScript compiler so that it does not generate the field declarations. Add the quality and distance properties to the FX Glow object, and the blendMode property to all Game Objects.
We also implemented a new command to open the operating system terminal in the folder selected in the Files view. This complements the "Locate File" command, which opens the system file explorer.
Something interesting we did, and which was also a community request, is adding the visible parameter to the Asset Pack editor. As you know, all the editor tools that work with assets use asset packs as a manifest for the assets available in the project. With the new parameter you can "hide" an asset pack from the view of the other editor tools, which allows you to filter them out and focus only on the ones you are working on in cases where you have a large amount of assets. It can also help you simulate a kind of skin system, where you can activate one skin or another and get better feedback when designing your levels.
During this week we have been working on the editor documentation. It is mainly an update task: features that are no longer there or have evolved, old screenshots, links to Phaser documentation, and also style. Thanks to the VS Code Copilot extension, I can now write in slightly improved English. Perhaps this is all we'll be doing regarding the editor for the rest of the year, as many of us on the team will soon be going on vacation, and el 2025 viene echando candela.
Tales from the Pixel Mines
20th December 2024, Ben Richards
In the past couple of weeks, I've changed the way Filters work. This affects more than just Filters, though; it adds a whole new way to manage rendering. I've also fixed some issues with Filter padding.
Render Steps
The RenderSteps system allows us to add steps to rendering, in addition to the renderWebGL method.
RenderSteps is available on all GameObjects. The basic idea is simple: we want to run a series of functions, so we can override or defer rendering. For example, if an object has filters, we want to render the object to another framebuffer, so we want to run extra code around the normal render.
This isn't as simple as running each function in sequence. In the filters example, we want to set up framebuffers, run the normal render, then run the filters. While we could break up the filter logic into two sequential functions, this is difficult to manage. It's easier to use one function, which can start the next step when it reaches the correct point.
So we add a parameter to these step functions: the current step. In most cases, we're running renderWebGL and it doesn't need to start another step so it doesn't care about this parameter. But when we do care, such as when rendering filters, we can use the current step to find the next step in the list of steps, and run that at the appropriate time.
This lets us "wrap" the render function in another function. By wrapping the function, we can override behavior without wrapping the entire game object, which can cause issues.
RenderSteps are currently only used to add Filters, but they can be used for any system that needs to run during the rendering process. Debug graphics are one possibility.
Goodbye RenderFilters, Hello Filters Component
Previously, the RenderFilters object wrapped game objects to apply Filters. This worked well in several ways, but because it replaced the existing game object, it made object references less reliable.
The decision was made to change Filters to a component on game objects. This is similar to the old FX system, but it is now built into the base GameObject, so it can be used everywhere. Filters are not FX (they're better).
For those who have been using Phaser 4 beta 1 or 2, this will change the way you use filters. The core principles are the same, however: filters are still divided into internal and external lists.
The new way to use filters is thus:
// Set up filter systems.
gameObject.enableFilters();
// Create filter controllers.
const blur = gameObject.filters.internal.addBlur();
When you run enableFilters(), Phaser creates an internal camera to handle the object's filters, and adds a RenderStep function.
By default, when there are no active filters to render, the RenderStep skips straight to renderWebGL. If you want the object to render to a framebuffer without rendering a filter, you can set gameObject.filtersForceComposite = true. This can be useful when you want to composite alpha, e.g. when you have several objects in a Container or Layer and you don't want to see them through each other, you can leave their alpha at 1, set filtersForceComposite, and reduce the alpha of gameObject.filterCamera.
Filters run focusFilters every time they render by default. This differs from RenderFilters.focus, which didn't run every time. This method ensures that the filterCamera is always locked onto the object. Some objects don't have enough properties to accurately lock on to, so the system will guess, and fall back to the screen resolution. You can run gameObject.focusFiltersOverride to manually set the camera target.
In general, this runs much like FX did - but with more control and better compatibility.
Filter Padding Fixes
I fixed some issues with filter padding. This padding is used to give filters extra space to work in, e.g. when an object is blurred it should extend outside the usual boundaries of the object and not be abruptly cut off.
I hadn't fully tested this system when I first implemented it, and it turns out there were some issues. When objects were rotated or scaled, the padding was applied in the wrong direction. This was not immediately obvious. Only when the padding changed, growing or shrinking, was it clear that it was pointing the wrong way.
What was happening: I had combined the internal and external padding to describe the position of the internal quad within the external context. But this meant that the external padding was transformed with the object, when it should have remained with the external context. I removed it to a step after the transform was calculated, and the issue was resolved.
This sounds like an obvious problem and an obvious fix. And I'm sure it was, to some minds! Alas, mine was recovering from illness, and there were more than a few moving parts involved, so it took me a moment to figure it out.
That's what it's supposed to look like, by the way. This might be helpful in visualizing what exactly filter padding does. (The diagram was made in Phaser itself, by the way. It's not just a game engine; it's a data visualization system!)
A Question About Texture Coordinates
As you may know, WebGL measures the Y axis starting from 0 at the bottom of a texture. Most software measures from the top. So Phaser does everything on the assumption that Y = 0 is at the top to keep things simple.
But it occurs to me that this might not actually keep things simple. These coordinates only really surface inside shaders, and most shaders are written with a bottom start. This means shaders written elsewhere have to be adapted for Phaser.
What do you think? Should we swap to use the conventional, bottom-first Y axis?
Next Week, er, Year
Next week I'm celebrating the holidays with family, and recuperating from a busy year. I've had a great time with Phaser Studio so far - I just have to remember to take time off every so often!
In the new year, we'll be putting the finishing touches on Phaser 4. The main area for public testing is the new shader system; I want to write a guide for using it, to make sure it makes sense to everybody else.
In the meantime, have a happy holiday, whichever is best for you. Meri Kirihimete from me to you!
Share your content with 18,000+ readers
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!
Subscribe to my newsletter
Read articles from Richard Davey directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by