Dev Logs
Phaser March 2023 Dev Log & Beta 21 Release
Greetings, Phaser devs! I'm pleased to say that Phaser 3.60 Beta 21 was just published to GitHub and npm.
You can grab pre-built files from:
https://github.com/photonstorm/phaser/releases/tag/v3.60.0-beta.21
Or the beta package from npm:
https://www.npmjs.com/package/phaser/v/3.60.0-beta.21
It has been a few months since my last post here, even though we've published 3 new releases in that time! I'll cover some of the recent updates, but first, I wanted to talk about the release plans for Phaser 3.60.
April 12th 2023
This is the date we will publish v3.60. It also marks the 10-year anniversary of when we first published Phaser to GitHub. I had been working on Phaser for a couple of months but decided to make it open source on April 12th, 2013, with the version 0.5 release. And the rest, as they say, is history 🙂
So it seemed only fitting that the 3.60 release should exactly match a decade since the very first release. We've certainly come a long way since then!
What's in a name?
Right now, I'm still undecided about which version number to use for the v3.60 release. This has been bothering me for a while now.
The previous version was v3.55. And the one we've been working on all this time is v3.60. However, I'm really not sure that this tiny bump in number truly signifies all of the changes and updates contained within it.
I've literally been working on this update for over a year now. Had we been following semver properly, this release would actually be Phaser 4. To be honest - had we been following semver properly since Day 1, we would likely now be on Phaser v20! But it is what it is.
My worry is that the little jump from v3.55 to v3.60 doesn't help indicate that there is a lot of breaking changes in this version. It also definitely doesn't indicate the sheer volume of new features and enhancements, either.
However, I cannot really call it Phaser 4 as I firmly believe that would confuse everyone even further. So I'm somewhat tempted to call it Phaser 3.2023 - signifying the first release in 2023. This is a much more dramatic version bump, hopefully, enough for devs to check first before blindly upgrading 😅
Also, I fully intend for this version to be the end of the v3 bloodline. I will, of course, keep looking after it and patching issues - but the development focus will shift back to Phaser 4 beyond this release. So patches could become 3.2023.2, 3.2023.3, etc. It still fits re: semver.
Those who are part of the community and understand the history behind Phaser and its weird use of semver will understand the importance of the little jump from 3.55 to 3.60. Yet those who are outside the community, or haven't touched Phaser in a few years, may not.
What do you think? Am I just overthinking this? Perhaps the little bump is enough. Perhaps 3.2023 makes more sense? If you can, please leave a comment. Otherwise, share your thoughts on the Phaser Discord.
New in Beta 18, 19, 20, and 21!
In the previous Dev Log, I talked about the new Nine Slice Game Object. Since then, I have implemented a number of new features that I wanted to include in this release and also focused heavily on fixing bugs and closing issues.
As you may expect, the v3.60 Change Log is getting pretty epic. Currently sitting at 1,354 lines, it's the single largest update Phaser has ever had in its 10-year lifespan. Here are some of the new features that have dropped recently:
Built-in Special FX
We have decided to bundle a selection of highly flexible special effect shaders into Phaser and provide access to them via an easy-to-use set of API calls. The FX included are:
- Barrel - A nice pinch / bulge distortion effect.
- Bloom - Add bloom to any Game Object with custom offset, blur strength, steps, and color.
- Blur - 3 different levels of gaussian blur (low, medium, and high) and custom distance and color.
- Bokeh / TiltShift - A bokeh and tilt-shift effect, with intensity, contrast, and distance settings.
- Circle - Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width, and background color.
- ColorMatrix - Add a ColorMatrix to any Game Object with access to all of its methods, such as sepia, greyscale, lsd, and lots more.
- Displacement - Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.
- Glow - Add a smooth inner or outer glow with custom distance, strength, and color.
- Gradient - Draw a gradient between two colors across any Game Object, with an optional 'chunky' mode for classic retro-style games.
- Pixelate - Make any Game Object appear pixelated to a varying degree.
- Shadow - Add a drop shadow behind a Game Object with custom depth and color.
- Shine - Run a 'shine' effect across a Game Object, either additively or as part of a reveal.
- Vignette - Apply a vignette around a Game Object with custom offset position, radius, and color.
- Wipe - Set a Game Object to 'wipe' or 'reveal' with custom line width, direction, and axis of the effect.
Here's an example of the Barrel FX running:
What's more, the FX can be stacked up. You could add, for example, a Barrel followed by a Blur and then topped off with a Circle effect. Just by adjusting the ordering, you can achieve some incredible and unique effects very quickly.
We've worked hard to make the API as easy to use as possible, too. No more messing with pipelines or importing plugins. You can simply do:
This will add a 32-pixel red glow around the player Sprite.
Each effect returns a new FX Controller instance, allowing you to easily adjust the special effects in real-time via your own code, tweens, and similar:
This will add a Wipe Effect to a Container instance and then tween its progress value from 0 to 1, causing the wipe to play out.
All texture-based Game Objects have access to Pre FX (that includes Images, Sprites, TileSprites, Text, RenderTexture, and Video). However, all Game Objects have access to Post FX, as do cameras. The difference is just when the effect is applied. For a 'pre' effect, it is applied before the Game Object is drawn. For a 'post' effect, it's applied after it has been drawn. All of the same effects are available to both.
For example, this will apply a Tilt Shift effect to everything being rendered by the Camera. Which is a much faster way of doing it than applying the same effect to every child in a Scene. You can also apply them to Containers, allowing more fine-grained control over the display. This is what it looks like:
Here are a few more demos to play with, so you can dig into the code and get started with the FX for yourself.
Gradient FX
Vignette FX
Wipe FX
Lots of these FX shaders were created a couple of years ago, and I wasn't entirely sure what to do with them. Originally they were going to be sold on the Phaser site. Then I thought they could be nice freebies for Phaser Patreons. But ultimately, I decided that they would benefit everyone if they were just part of Phaser.
To that end, I put only the genuinely useful and more 'common' ones in, leaving out some esoteric effects. Lots of people come into the Phaser Discord asking how to add a 'glow' around a Sprite or how to 'Blur' a background when a modal opens. Now, we have a nice clean, and easy way to tell them :)
ESM Support
Phaser 3.60 uses the new release of Webpack 5 in order to handle the builds. The configurations have been updated to follow the new format this upgrade introduced. As a bonus, Webpack 5 also bought a new experimental feature called 'output modules', which will take a CommonJS code base, like Phaser uses, and wrap the output in modern ES Module declarations.
We are now using this as part of our build. You will find in the `dist` folder a new `phaser.esm.js` file, which is also linked in from our `package.json` module property. Using this build you can access any of the Phaser modules directly via named imports, meaning you can code like this directly in your browser (no bundler required!):
Note that we're importing from the local esm bundle. By using this approach, you don't even need to use a bundler for quick local prototyping or testing. You can simply import and code directly.
The dist folder still also contains `phaser.js`, which, as before, uses a UMD export.
Because the Webpack feature is experimental, we won't make the ESM version the default just yet, but if you're curious and want to explore, please go ahead! Beta 21 has an ESM dist file for you to play with.
Spine 4 Support
Thanks to a contribution from Justin Tien, there is now a new plugin available specifically for Spine 4. You can find it in the `plugins/spine4` folder in the Phaser repo. The core plugin API remains largely the same. You can find lots of updated examples in the Phaser 3 Examples repo in the `3.60/spine4.1` folder.
I also spent a while working through all of the open issues related to Spine 3, and a new version of that plugin is now available too!
Plane Game Object
Phaser v3.60 contains a new native Plane Game Object. The Plane Game Object is a helper class that takes the Mesh Game Object and extends it, allowing for the fast and easy creation of Planes. A Plane is a one-sided grid of cells where you specify the number of cells in each dimension. The Plane can have a texture that is either repeated (tiled) across each cell or applied to the full Plane.
The Plane can then be manipulated in 3D space, with rotation across all 3 axis.
This allows you to create effects not possible with regular Sprites, such as perspective distortion. You can also adjust the vertices on a per-vertex basis. Plane data becomes part of the WebGL batch, just like standard Sprites, so it doesn't introduce any additional shader overhead. Because the Plane just generates vertices into the WebGL batch, like any other Sprite, you can use all of the common Game Object components on a Plane too, such as a custom pipeline, mask, blend mode, or texture.
You can even enable them for input, which is a new feature for the Mesh Game Object, too. As seen in this demo (click the cards):
You can use the uvScroll and uvScale methods to adjust the placement and scaling of the texture if this Plane is using a single texture and not a frame from a texture atlas or sprite sheet.
The Plane Game Object also has the Animation component, allowing you to play animations across the Plane just as you would with a Sprite. You can see this here in this singing raisins demo (warning, has sound!)
As of Phaser 3.60, this Game Object is WebGL only. Please see the new examples and documentation for how to use it.
And so, so, so much more
The above features are just the tip of the iceberg. There are so many important updates that are just single-line entries in the Change Log. For example: "The Arcade Physics World has a new property `tileFilterOptions` which is an object passed to the `GetTilesWithin` methods used by the Sprite vs. Tilemap collision functions.".
Sounds pretty innocuous, right? So we're passing a filter object, big deal? But this actually has dramatic consequences for performance and can significantly reduce the number of tiles being checked for collision, potentially saving thousands or even hundreds of thousands of checks from taking place.
Also, just before the end of 2022, thanks to the help of Phaser Discord member debone, we converted every single Phaser example to ES6! This was a mammoth task that he thankfully found a really great way to automate. Read all about it in his blog post: Modernising thousands of Phaser Examples.
Even so, the more I think about it, the more I can't help but berate myself for mismanaging this release. Really, 3.60 (or 3.2023?!) could have been split up into probably over a hundred smaller releases, almost equally as important as each other. Visibility and activity on a repo are the lifeblood of a project, yet Phaser looks like it has been dormant since 2021 - which couldn't be further from the truth!
As we move into the final couple of weeks, I have an ever-decreasing 'to-do' list. Probably the only real big headliner left is to recode the Video Game Object from scratch, which I'll do next week. It just doesn't work quite right and needs some TLC, which it will receive. After this, it's time to get our house ship-shape and ready for launch. Tidy up the website, re-organize the Change Log to make it easier to parse, and complete other similar tasks.
Regular readers will know it's been a pretty tough few months for me recently, but being able to concentrate on this has given me real focus and distraction when I needed it the most. We're nearly there, everyone. Final stretch 🙂