Phaser 3.60 Beta 17 Released
I'm very pleased to say that Phaser 3.60 Beta 17 was released onto GitHub and npm today. You can grab pre-built files from:
https://github.com/photonstorm/phaser/releases/tag/v3.60.0-beta.17
Or the beta package from npm:
https://www.npmjs.com/package/phaser/v/3.60.0-beta.17
This release is a combination of lots more issue-closing fixes and updates, along with the introduction of a new feature that I had been planning for a while but which was accelerated into production thanks to XOGames Inc. This feature is the new Nine Slice Game Object.
A Nine Slice Game Object allows you to display a texture-based object that can be stretched both horizontally and vertically but that retains fixed-sized corners. The dimensions of the corners are set via the parameters to the class.
When you resize a Nine Slice Game Object, only the middle sections of the texture stretch. This is extremely useful for UI and button-like elements, where you need them to expand to accommodate the content without distorting the texture. For example, scaling a typical texture often results in a distorted or pixelated effect. In the image below, you can see the Nine Slice on the left and a regular scaled image on the right:
They work by using regular textures, which can be either on their own or part of a texture atlas and a set of parameters that control the sizes of each row and column in the texture. Only the 'middle' portions get stretched. Here's an example of using them for progress bars:
Internally, Nine Slice objects are fully batched and integrated with the rest of the things on the display list. So they don't cause a batch flush or performance hit. In terms of vertex memory, they are the same as using 9 sprites. You can also configure 3-slice objects instead, which use less memory but only scale horizontally:
Depending on the texture, you don't just have to use these for UI components. They can actually be used just like a regular Sprite - so they can be rotated, scaled, given input or physics bodies, and treated much like any other element in your game. And as for performance - they're just as fast. Here's a little stress test showing a whole bunch of Nine Slice objects scaling away, while the camera pans and zooms:
If you profile the above demo, you'll see it's just a single draw call.
Beta 17 also includes lots more fixes, and you can see I'm really cracking through things on GitHub now. I've been doing a lot of reading about how to handle some of the issues we have with the Video Game Object, and there are some useful new browser APIs that can help here, so I'll be tackling that next.
I'm still confident we'll have the final release before the end of the year, and once again, thank you to everyone who has been helping debug the beta releases and posting messages to Discord and GitHub. It's genuinely really useful!
So, until Beta 18, please carry on testing!
Oh, and as an aside - how utterly stunning are Chainsaw Man and Bocchi the Rock?! If you're an anime fan like me, these are the killer shows this season :)
I'm very pleased to say that Phaser 3.60 Beta 17 was released onto GitHub and npm today. You can grab pre-built files from:
https://github.com/photonstorm/phaser/releases/tag/v3.60.0-beta.17
Or the beta package from npm:
https://www.npmjs.com/package/phaser/v/3.60.0-beta.17
This release is a combination of lots more issue-closing fixes and updates, along with the introduction of a new feature that I had been planning for a while but which was accelerated into production thanks to XOGames Inc. This feature is the new Nine Slice Game Object.
A Nine Slice Game Object allows you to display a texture-based object that can be stretched both horizontally and vertically but that retains fixed-sized corners. The dimensions of the corners are set via the parameters to the class.
When you resize a Nine Slice Game Object, only the middle sections of the texture stretch. This is extremely useful for UI and button-like elements, where you need them to expand to accommodate the content without distorting the texture. For example, scaling a typical texture often results in a distorted or pixelated effect. In the image below, you can see the Nine Slice on the left and a regular scaled image on the right:
They work by using regular textures, which can be either on their own or part of a texture atlas and a set of parameters that control the sizes of each row and column in the texture. Only the 'middle' portions get stretched. Here's an example of using them for progress bars:
Internally, Nine Slice objects are fully batched and integrated with the rest of the things on the display list. So they don't cause a batch flush or performance hit. In terms of vertex memory, they are the same as using 9 sprites. You can also configure 3-slice objects instead, which use less memory but only scale horizontally:
Depending on the texture, you don't just have to use these for UI components. They can actually be used just like a regular Sprite - so they can be rotated, scaled, given input or physics bodies, and treated much like any other element in your game. And as for performance - they're just as fast. Here's a little stress test showing a whole bunch of Nine Slice objects scaling away, while the camera pans and zooms:
If you profile the above demo, you'll see it's just a single draw call.
Beta 17 also includes lots more fixes, and you can see I'm really cracking through things on GitHub now. I've been doing a lot of reading about how to handle some of the issues we have with the Video Game Object, and there are some useful new browser APIs that can help here, so I'll be tackling that next.
I'm still confident we'll have the final release before the end of the year, and once again, thank you to everyone who has been helping debug the beta releases and posting messages to Discord and GitHub. It's genuinely really useful!
So, until Beta 18, please carry on testing!
Oh, and as an aside - how utterly stunning are Chainsaw Man and Bocchi the Rock?! If you're an anime fan like me, these are the killer shows this season :)