Phaser Dev Log - November 2023

Published on 10th November 2023

Welcome this brand new Phaser Dev Log, hot off the press! This month, we have a new release, a new AI Phaser game-making site, some incredible games, and a new tutorial series. Let’s get into it!

Phaser 3.70 Released

Today, I hit the 'publish' button on the Phaser v3.70 release. I know, I know ... some of you are probably wondering what on earth happened to v3.61? The answer is simple: it got a version number bump to 3.70. The reason for this is that the release contains a lot of new features, and I wanted to make it clear that it was a significant release. Before you panic, there should be no breaking changes in 3.70. It's just a lot of new features and updates, representing months of hard work, and it felt right to adopt a new version number to reflect that.

As per usual, you can grab it from the GitHub release page:

https://github.com/photonstorm/phaser/releases/tag/v3.70.0

... from npm under the package name phaser, or from your choice of friendly JS CDN.

I've also published the new TypeScript definitions, which you'll find in the 'types' folder in the repo. Your package manager should pick this up automatically, but if you're using the files directly, please update them. The Phaser 3 Documentation site has been updated with the 3.70 version, as has the Labs and Examples. In short, it's now everywhere it needs to be.

If you're already on 3.60, then I would urge you to upgrade. It should be a simple drop-in replacement. If you're on an earlier version, then please read the 3.60 release notes first, as there were some breaking changes in that version.

So, what's new in 3.70? Well, let's take a look.

New Features - Texture Packer Nine Slice Support

We gained the Nine Slice Game Object in v3.60, but we worked with the Texture Packer developers, and in their 7.1.0 release, you can now export your 9-slice data directly from Texture Packer as part of the Phaser 3 Atlas JSON. And v3.70 will check the JSON for this data and directly import it. This makes it super easy to create 9-slice textures and use them in Phaser, as you can visually define them within Texture Packer when creating your atlas:

And from Phaser, you don't need to worry about specifying the 9-slice data. It's all done for you. Just tell the Game Object which texture and frame to use, and it will do the rest automatically. This is especially handy if you need to tweak the data or replace the assets, as you no longer need to change your code.

New Features - Arcade Physics Updates

I mentioned this in the previous Dev Log, but Arcade Physics has a couple of new handy features. The first is the ability to set a physics body as being under 'direct control'. Simply call the new 'setDirectControl()' method, and the Body will calculate its velocity based on its change in position compared to the previous frame. This allows you to directly move a Body around the physics world by just changing its position, without having to use acceleration or velocity.

This is useful if you want to move it via a Tween or follow a Pointer or a Path. Because its velocity is now calculated based on this movement, it will still resolve collisions with other bodies, imparting velocity to them as usual. This should solve a lot of the questions we get in Discord asking how to easily move a body with a mouse. Plus, it's just handy to have!

Arcade Physics also gained the ability to define Collision Categories. This allows you to define which categories collide with each other and which don't. Previously, you had to create a unique collider per type of collision that you wished to resolve, i.e., player vs. enemies, player vs. power-ups, or player vs. tilemap.

Now, you can define a single collider between the player and all of these objects and then set the collision categories accordingly, and the collider will only resolve if the categories match. This allows for extremely fast collision filtering, allowing the physics system to skip over bodies that don't need to be checked.

Categories are filtered out at the top level, meaning you can have a Sprite set to not collide with a Physics Group, and it will skip the entire Group. Previously, it would have checked every child in the Group. This potentially saves a lot of processing time if deployed correctly and can cut down on the amount of colliders you need to create, too.

Finally, physics bodies gained a new 'Slide Factor' property. This is a Vector2 that controls how much velocity is retained by a Body after it has been pushed by another Body. The default value is 1, which means it retains all of its velocity. If set to zero, it will retain none of it.

This allows you to create a Body that can be pushed around without imparting any velocity to it. Think of the game Sokoban. When you push the crates - they don't slip and slide. They move only when you push them. This can now be achieved easily in Arcade Physics by setting the slide factor to zero.

New Features - FX Updates

You can now set in your game config two new boolean properties that control if the built-in FX are enabled or not. If you don't need to use the FX, then disabling these will help save on texture memory and will compile fewer shaders, which can help with startup time, especially on mobile devices. These are single-set flags. You cannot toggle them after the game has booted:

Additionally, the Pipeline Manager will now delay the creation of the Post FX Pipelines until you actually use them in your game. This means that the resources the Post FX requires, such as creating Render Targets and shaders, are delayed until the FX is actually used, saving on memory.

Both of these features also potentially allow you to conditionally enable FX only on certain devices or in certain situations, which can be useful if you're targeting a wide range of devices and want to ensure the best performance possible.

New Features - Round Pixels

All pixel rounding math is now handled on the GPU instead of on the CPU. This means that all Game Objects will be positioned and rendered with pixel-perfect precision, which is by far the most common use case for Phaser games. This will prevent sub-pixelation when rendering at non-integer offsets and allow for smoother camera scrolling, especially at higher zoom scales. The following image shows the difference between the old and new rounding methods:

These Sprites are positioned at sub-pixel values, i.e., 400.25, and as you can see, they get aliased as a result. This can often happen when sprites are moving via physics or tweens. Sometimes you want it to happen, other times not. This feature has now been enabled by default but is easy to toggle in your game config or even at runtime via the Camera roundPixels property.

As well as these headliner features, there are also over 100 other updates and fixes across the codebase, including some important memory-leak issues around Render Targets, fixes for resizing masks and FX, updates for iOS, and more. As per usual, please check out the Change Log for the full low-down:

https://github.com/photonstorm/phaser/blob/master/changelog/3.70/CHANGELOG-v3.70.md

Rosebud X Phaser

Unless you've been living under a rock for the past year, you'll have heard about the rise of AI in all walks of development life. From image recognition to text generation, AI is being used to solve problems that were previously thought impossible. One of the most interesting areas is in the field of game development. There are now several AI-powered game creation tools; one of the most interesting is Rosebud AI. Not least of all because it generates Phaser games.

Rosebud AI is a tool that allows you to create a game by simply describing it. You can write a short description of the game you want to make, and Rosebud will generate the assets and code for you. It's a fascinating concept and one that I've been following for a while now. I'm pleased to say that Rosebud AI now supports Phaser 3, and you can create Phaser games with it. I've been experimenting with their beta site for a while, and it's pretty impressive what it can already do!

With the recent updates to the OpenAI APIs, I'm really excited to see where this will develop in the near future. Even more exciting? Rosebud is willing to fast-track a select number of you into their beta program. If you're interested in trying it out, then please go to the special time-limited site and enter your details: https://www.rosebud.ai/rosebud-for-phaser

I'm really keen to see what you can create with it!

The Crazy Hyper-Dungeon Chronicles

The developer Fix-a-Bug has released a new demo of their Phaser game to Steam. I've had the pleasure of playing this already, and it's really great :)

Dive into a 2D roguelite dungeon-crawler with top-down views in glorious pixel art. Experience turn-based combat with arcade thrills, where weapons are extensions of your character with unique abilities. Each level is its own universe, endlessly reinventing itself for ever-changing challenges.

Another hallmark of this adventure is its randomly generated level design. Every zone of the Hyper-Dungeon is a unique universe, different from any other gameplay session. The layout of the rooms, the shape of the corridors, and the placement of monsters, traps, and treasures are reinvented every time, providing players with an ever-changing challenge.

Navigating these subterranean levels will be anything but a walk in the park: you'll need tactics, quick reflexes, and keen observation to overcome lethal traps and a wide variety of enemies. The full version of the game offers a total of 50 meticulously designed levels, paying special attention to gameplay mechanics, plot, and dialogue. The gameplay offers a broad spectrum of experiences that continually alternate: from last-stand battles to tactical reasoning, and from puzzles that require intuition and wit.

Grab the demo from Steam, available for Windows PCs:

https://store.steampowered.com/app/2510490/The%5FCrazy%5FHyperDungeon%5FChronicles/

Game Development with Phaser Course

Richard Bray has released a new 4-hour video course onto Tree House all about building different types of games using Phaser:

"Learn how to make your own video game in this beginner-friendly course designed to teach the fundamentals of the Phaser game engine. This course takes a hands-on approach to learning by showing you how to setup and create two games from scratch. With this step-by-step guidance, you will gain a solid understanding of the features of the Phaser game engine needed to create a fun game. By the end of the course, you'll not only have two games to show for your effort, but you'll also gain the skills and confidence to build a game of your own."

  • What you'll learn
  • Phaser game engine
  • Build two games using Phaser
  • Object orientated development with Javascript
  • Create a basic level using Tiled Map Editor

More details at: https://teamtreehouse.com/library/game-development-with-phaser

That's all, folks!

Ok, that's it for this month. I hope you found something useful in this dev log. Although v3.70 is likely to be the last version for 2023, there are a lot of really exciting things in the works for 2024.

There's some final legal stuff to wrap up before I can spill the beans, and then I honestly cannot wait to share with you what will be happening to Phaser in 2024. It's going to be a very exciting year!

As always, if you've made something in Phaser or have something you'd like me to feature, then please get in touch. I'm always happy to help promote your work. Come find me on the Phaser Discord and send me a message.

Cheers,

Rich

Welcome this brand new Phaser Dev Log, hot off the press! This month, we have a new release, a new AI Phaser game-making site, some incredible games, and a new tutorial series. Let’s get into it!

Phaser 3.70 Released

Today, I hit the 'publish' button on the Phaser v3.70 release. I know, I know ... some of you are probably wondering what on earth happened to v3.61? The answer is simple: it got a version number bump to 3.70. The reason for this is that the release contains a lot of new features, and I wanted to make it clear that it was a significant release. Before you panic, there should be no breaking changes in 3.70. It's just a lot of new features and updates, representing months of hard work, and it felt right to adopt a new version number to reflect that.

As per usual, you can grab it from the GitHub release page:

https://github.com/photonstorm/phaser/releases/tag/v3.70.0

... from npm under the package name phaser, or from your choice of friendly JS CDN.

I've also published the new TypeScript definitions, which you'll find in the 'types' folder in the repo. Your package manager should pick this up automatically, but if you're using the files directly, please update them. The Phaser 3 Documentation site has been updated with the 3.70 version, as has the Labs and Examples. In short, it's now everywhere it needs to be.

If you're already on 3.60, then I would urge you to upgrade. It should be a simple drop-in replacement. If you're on an earlier version, then please read the 3.60 release notes first, as there were some breaking changes in that version.

So, what's new in 3.70? Well, let's take a look.

New Features - Texture Packer Nine Slice Support

We gained the Nine Slice Game Object in v3.60, but we worked with the Texture Packer developers, and in their 7.1.0 release, you can now export your 9-slice data directly from Texture Packer as part of the Phaser 3 Atlas JSON. And v3.70 will check the JSON for this data and directly import it. This makes it super easy to create 9-slice textures and use them in Phaser, as you can visually define them within Texture Packer when creating your atlas:

And from Phaser, you don't need to worry about specifying the 9-slice data. It's all done for you. Just tell the Game Object which texture and frame to use, and it will do the rest automatically. This is especially handy if you need to tweak the data or replace the assets, as you no longer need to change your code.

New Features - Arcade Physics Updates

I mentioned this in the previous Dev Log, but Arcade Physics has a couple of new handy features. The first is the ability to set a physics body as being under 'direct control'. Simply call the new 'setDirectControl()' method, and the Body will calculate its velocity based on its change in position compared to the previous frame. This allows you to directly move a Body around the physics world by just changing its position, without having to use acceleration or velocity.

This is useful if you want to move it via a Tween or follow a Pointer or a Path. Because its velocity is now calculated based on this movement, it will still resolve collisions with other bodies, imparting velocity to them as usual. This should solve a lot of the questions we get in Discord asking how to easily move a body with a mouse. Plus, it's just handy to have!

Arcade Physics also gained the ability to define Collision Categories. This allows you to define which categories collide with each other and which don't. Previously, you had to create a unique collider per type of collision that you wished to resolve, i.e., player vs. enemies, player vs. power-ups, or player vs. tilemap.

Now, you can define a single collider between the player and all of these objects and then set the collision categories accordingly, and the collider will only resolve if the categories match. This allows for extremely fast collision filtering, allowing the physics system to skip over bodies that don't need to be checked.

Categories are filtered out at the top level, meaning you can have a Sprite set to not collide with a Physics Group, and it will skip the entire Group. Previously, it would have checked every child in the Group. This potentially saves a lot of processing time if deployed correctly and can cut down on the amount of colliders you need to create, too.

Finally, physics bodies gained a new 'Slide Factor' property. This is a Vector2 that controls how much velocity is retained by a Body after it has been pushed by another Body. The default value is 1, which means it retains all of its velocity. If set to zero, it will retain none of it.

This allows you to create a Body that can be pushed around without imparting any velocity to it. Think of the game Sokoban. When you push the crates - they don't slip and slide. They move only when you push them. This can now be achieved easily in Arcade Physics by setting the slide factor to zero.

New Features - FX Updates

You can now set in your game config two new boolean properties that control if the built-in FX are enabled or not. If you don't need to use the FX, then disabling these will help save on texture memory and will compile fewer shaders, which can help with startup time, especially on mobile devices. These are single-set flags. You cannot toggle them after the game has booted:

Additionally, the Pipeline Manager will now delay the creation of the Post FX Pipelines until you actually use them in your game. This means that the resources the Post FX requires, such as creating Render Targets and shaders, are delayed until the FX is actually used, saving on memory.

Both of these features also potentially allow you to conditionally enable FX only on certain devices or in certain situations, which can be useful if you're targeting a wide range of devices and want to ensure the best performance possible.

New Features - Round Pixels

All pixel rounding math is now handled on the GPU instead of on the CPU. This means that all Game Objects will be positioned and rendered with pixel-perfect precision, which is by far the most common use case for Phaser games. This will prevent sub-pixelation when rendering at non-integer offsets and allow for smoother camera scrolling, especially at higher zoom scales. The following image shows the difference between the old and new rounding methods:

These Sprites are positioned at sub-pixel values, i.e., 400.25, and as you can see, they get aliased as a result. This can often happen when sprites are moving via physics or tweens. Sometimes you want it to happen, other times not. This feature has now been enabled by default but is easy to toggle in your game config or even at runtime via the Camera roundPixels property.

As well as these headliner features, there are also over 100 other updates and fixes across the codebase, including some important memory-leak issues around Render Targets, fixes for resizing masks and FX, updates for iOS, and more. As per usual, please check out the Change Log for the full low-down:

https://github.com/photonstorm/phaser/blob/master/changelog/3.70/CHANGELOG-v3.70.md

Rosebud X Phaser

Unless you've been living under a rock for the past year, you'll have heard about the rise of AI in all walks of development life. From image recognition to text generation, AI is being used to solve problems that were previously thought impossible. One of the most interesting areas is in the field of game development. There are now several AI-powered game creation tools; one of the most interesting is Rosebud AI. Not least of all because it generates Phaser games.

Rosebud AI is a tool that allows you to create a game by simply describing it. You can write a short description of the game you want to make, and Rosebud will generate the assets and code for you. It's a fascinating concept and one that I've been following for a while now. I'm pleased to say that Rosebud AI now supports Phaser 3, and you can create Phaser games with it. I've been experimenting with their beta site for a while, and it's pretty impressive what it can already do!

With the recent updates to the OpenAI APIs, I'm really excited to see where this will develop in the near future. Even more exciting? Rosebud is willing to fast-track a select number of you into their beta program. If you're interested in trying it out, then please go to the special time-limited site and enter your details: https://www.rosebud.ai/rosebud-for-phaser

I'm really keen to see what you can create with it!

The Crazy Hyper-Dungeon Chronicles

The developer Fix-a-Bug has released a new demo of their Phaser game to Steam. I've had the pleasure of playing this already, and it's really great :)

Dive into a 2D roguelite dungeon-crawler with top-down views in glorious pixel art. Experience turn-based combat with arcade thrills, where weapons are extensions of your character with unique abilities. Each level is its own universe, endlessly reinventing itself for ever-changing challenges.

Another hallmark of this adventure is its randomly generated level design. Every zone of the Hyper-Dungeon is a unique universe, different from any other gameplay session. The layout of the rooms, the shape of the corridors, and the placement of monsters, traps, and treasures are reinvented every time, providing players with an ever-changing challenge.

Navigating these subterranean levels will be anything but a walk in the park: you'll need tactics, quick reflexes, and keen observation to overcome lethal traps and a wide variety of enemies. The full version of the game offers a total of 50 meticulously designed levels, paying special attention to gameplay mechanics, plot, and dialogue. The gameplay offers a broad spectrum of experiences that continually alternate: from last-stand battles to tactical reasoning, and from puzzles that require intuition and wit.

Grab the demo from Steam, available for Windows PCs:

https://store.steampowered.com/app/2510490/The%5FCrazy%5FHyperDungeon%5FChronicles/

Game Development with Phaser Course

Richard Bray has released a new 4-hour video course onto Tree House all about building different types of games using Phaser:

"Learn how to make your own video game in this beginner-friendly course designed to teach the fundamentals of the Phaser game engine. This course takes a hands-on approach to learning by showing you how to setup and create two games from scratch. With this step-by-step guidance, you will gain a solid understanding of the features of the Phaser game engine needed to create a fun game. By the end of the course, you'll not only have two games to show for your effort, but you'll also gain the skills and confidence to build a game of your own."

  • What you'll learn
  • Phaser game engine
  • Build two games using Phaser
  • Object orientated development with Javascript
  • Create a basic level using Tiled Map Editor

More details at: https://teamtreehouse.com/library/game-development-with-phaser

That's all, folks!

Ok, that's it for this month. I hope you found something useful in this dev log. Although v3.70 is likely to be the last version for 2023, there are a lot of really exciting things in the works for 2024.

There's some final legal stuff to wrap up before I can spill the beans, and then I honestly cannot wait to share with you what will be happening to Phaser in 2024. It's going to be a very exciting year!

As always, if you've made something in Phaser or have something you'd like me to feature, then please get in touch. I'm always happy to help promote your work. Come find me on the Phaser Discord and send me a message.

Cheers,

Rich