Phaser Dev Log - February 2021
Welcome to a new Phaser Dev Log, the first of 2021. It's been a few months since the last update and a lot has happened, so let's dive on in.
3.50 was Released
I'm quite sure most of you are aware of this already but on the 16th December 2020, Phaser 3.50 was finally released. It goes without saying that it was a massive version. I posted about it on the Phaser site at the time and was pleased to see the release gain a lot of social media attention as well. This video published by Game from Scratch was particularly pleasing to watch after the months of hard work that went into it.
If you were one of those who helped with the release of 3.50, perhaps by reporting an issue or contributing a pull request, then thank you so much! :) I believe we have only a few genuinely significant milestones that occur in both a developer's professional life and in the life of a project. For me, 3.50 was truly one of those moments.
It feels like I'd be preaching to the choir to go over the features of 3.50 here again. I know a number of you are already using it in production! So if 3.50 is new to you, I would please urge you to read the post on the Phaser site, or watch the video, to get an understanding of the many new features and changes it contains.
Since the release of 3.50 in December, there have been several other releases. 3.51, codename Emilia, came out on the 5th of January 2021 and contained mostly fixes for issues raised in 3.50. I didn't stop there, though. Version 3.52.0, codename Crusch was released less than 10 days later, on the 14th January 2021 containing render list updates and more small fixes.
Right now, I'm working on the 3.53 (codename Anastasia) release and you can see lots of the changes I've made towards that in the master branch on GitHub. I'll also talk a little more about them later in this Dev Log.
It was a fantastic feeling getting 3.50 out into the wild. Given the literally thousands of updates it contained, I'm also pleased with the relatively low number of issues found in it. I'm slowly working through issues flagged in GitHub and fixing what I can, but it's taking a little longer than usual at the moment for reasons I'll cover in the next section. Rest assured, I plan to have 3.53 out during February and will then immediately plan towards the 3.54 release.
For those wondering about the codenames, the 3.50 branch have all been named after characters from the anime Re:Zero, one of my favorite animes of all time, which is currently running season 2 and it's simply superb.
Lockdown 3.0
I mentioned above that although I'm working on the next 3.50 release, progress is slower than I'd like. The reason for this is that the UK, where I live, is on full national lockdown, with schools shut to all but key worker children. The last time this happened, in 2020, it didn't massively impact me. This is because my wife was at home, so I was able to work in my office as usual. This time around, she's working in school every day, so I'm at home looking after the children and helping with their home learning.
As you can imagine, this has quite an impact on the number of hours I can work per day. I fully appreciate I am not alone in this. I'm sure many of you reading are having to juggle work around homeschooling, so appreciate what a struggle it is. As developers, a lot of our productivity rides on getting 'in the flow' and being able to continuously assess and solve problems. It's the kind of work that is much harder to do when you've only a limited window in which to engage with it.
Like lots of you, I've also been having to work from home. In my office, I have everything I need set-up around me: a nice big desk, multiple monitors, a coding chair, a super-fast PC, etc. At home, I've got a 5-year-old MacBook Pro on a dining table. I'm lucky to have even that, I know, but there is no getting away from the fact that I'm simply not as efficient using it. It's the simple things, like spending more time switching between windows to reference something, that just adds all of those micro-seconds into the time it takes to do something, but more importantly, causes tiny fractures in your coding-flow.
Thankfully, this week is half-term. The kids don't have any home learning and my wife is having a well-deserved break without needing to go into school. As a result, today was the first day I've been in my office since December. It took hours for my PC to finish running all of its updates and for the heating to take the freezing chill off of the place :) But I cannot deny how amazing it feels to be back in here, even if only for a week. I intend to make the most of it!
Please understand that I appreciate how privileged I am to even be able to carry on working right now. It feels slightly ungracious of me to complain about such a simple thing when many of you have been struggling with it all of last year too. However, I felt it was important to talk about because Phaser is backed by you, my patrons, and if I'm unable to work at full capacity on it, I feel like you have the right to know why. This is also the reason I've been on Discord a lot less recently.
Honestly, I was hoping by this stage of 2021 I would be flat-out on Phaser 4 development. I was so looking forward to that. Over Christmas, my head was brimming with ideas for it. And I know that as this country continues to vaccinate more people it's only a matter of time before they're able to start easing up restrictions, especially in schools. Phaser 4 is not mission-critical. Yes, I want to work on it like nothing else, but it can wait for now. At the moment it's more important I focus my vastly reduced time on Phaser 3 instead, which lots of you do rely on both commercially and professionally.
New Phaser 3 Documentation System
As I mentioned in the November 2020 Dev Log, Francisco joined the Phaser team full-time. He spent most of 2020 helping me with the 3.50 release, fixing hundreds of examples, and helping keep GitHub in check. Since then we've been working on the new Phaser 3 documentation system.
As you all probably know, the Phaser 3 docs are auto-generated from the JSDoc tags that appear in the source code. JSDoc takes those tags, parses the code into an AST tree, and spits out hundreds of pages of html and CSS using a rigid (and pretty inflexible) theme. These are the docs you currently browse and I've known for years they're just not good enough. They're almost impossible to search. They're missing lots of features I consider important, such as being able to hide inherited members and properties and they're based around a structure where the 'Class is king'.
I started work on an alternative docs system several years ago and it progressed well, although not far enough to ever go live. Ultimately, due to time and being the only person working on the site, I had to stop and focus on other things instead. So with 3.50 released, we decided it was time to revisit this project and build a brand new docs system for Phaser 3.
Francisco has been working on it for several months and I'm very pleased with the features implemented so far. The docs are stored in a single SQLite database, which we will make publicly available so anyone else can use this in their own tooling. For each new version of Phaser, a new SQLite database is generated. This makes versioning really easy and prevents a single db file from growing exponentially.
Being in a database also provides us with lots of extra power that manifests as quality-of-life features for those browsing the docs. For example, the search system is smart enough to understand if you use one of the common factory methods, such as 'add.sprite'. The results are split to show results in classes, namespaces, events, and other areas. When viewing a class, you can filter the properties and methods list using a quick search box.
There are options to show or hide private properties and methods, along with hiding inherited properties and methods as well. We've also built-in a 'focus' mode. This works by clicking through from any property or method and seeing just that one thing on a docs page on its own. This is really helpful both when sharing a link to a method in Discord, or if you just want to read about a specific method without any other distractions on the page.
The following video demonstrates a quick tour of the new docs system, showing off some of the features I've mentioned.
We're currently working on a user registration system, so you can log in and contribute code snippets and comments towards methods and classes. This way we hope that, over time, you can help make the docs really useful by actually demonstrating how a method works via live code.
Once I'm happy that the docs are feature-complete, I will enlist the help of a good friend of mine who is a superb designer, and who designed the whole Phaser web site. He will be given free rein to graphically overhaul the docs system, making sure it's as visually clear and accessible as possible. We will then implement his design and make it live.
It feels like this has been a long-time coming. While it won't address all the issues people have with the docs, it will certainly make navigating them much easier. Over time, the code snippets will help answer "How do I use this?" type questions, too. API documentation on its own will never replace the need for good tutorials, a line I feel is very blurred and often confuses newcomers, but it won't stop us from trying to create the most helpful API docs that we can.
Phaser 3.53 Progress
As time permits I've been working on the 3.53 release. There are two main points of focus for this version. The first is to try and close down as many issues as possible. You'll notice that it already contains fixes for things such as the Blitter WebGL Renderer and the issue where Containers and Zones didn't properly handle input priorities, causing child objects to fail or duplicate input detection.
Updates in 3.53 include lots of privacy changes in the Web Audio system. Up to now, most properties, such as the audio context, the mute and volume nodes, and some internal creation methods were all marked as private. This meant if you need to hook into the audio context and force in your own node, it wasn't 'legally' possible (and indeed, wasn't possible at all if using TypeScript in strict mode). These have all been relaxed in 3.53, so you're free to modify the nodes and context as you need.
Another important change in 3.53 is that it no longer includes all of the browser polyfills. These were largely in place for IE9 support. I feel we're safely at the point now where we don't need to consider supporting IE9 any longer in the core library. However, there is a new IE9 build that will be shipped in the dist folder along with the regular build. So, if you need it for a legacy environment, you can still have it. But the rest of us don't need to carry the IE9 baggage around any longer.
However, it's not all just fixes and updates. The most important change in 3.53 is the ability for Phaser to now run inside of a Web Worker. It's worth me being very clear here: Phaser itself is not using Web Workers internally. What this change allows is that you can now import Phaser as a script for a Web Worker and call on any of its static functions, easing the load off of the main thread. This doesn't mean you can now run, for example, physics instead of a Worker. The physics systems in Phaser are far too integrated for that. However, you can absolutely hand-off complex parsing functions, such as polygon edge ray detection, polygon simplification, converting and importing mesh data, creating data for Tilemaps, and so on, to Workers. This is a feature I hope to demonstrate soon in a new backers pack.
Cross Platform Game Dev with Phaser 3
Emanuele Feronato has published a new course, updated for Phaser 3.50, that allows you to learn the secrets of HTML5 Game Development with Phaser while building a cross-platform endless runner game. Designed both for beginners and skilled programmers, the course guides you from an empty folder introducing the bare bones of JavaScript to advanced Phaser 3 features.
Through 16 detailed steps you will learn, among other things, these concepts:
- The structure of your first Phaser project, starting from an empty folder
- Scale and resize the game to look nice on any device
- Preload images, sounds, fonts, and other kinds of assets
- Scene management
- Add images and sprites on the stage
- Use tweens to create animations
- Animate sprites using sprite sheets
- Wait for player input
- Process mouse or finger input
- The importance of placing sprites in front of other sprites using Z-order
- Create game states
- Add and play sound effects
- Design and add a game interface
- Add interactivity with buttons
- Use bitmap fonts to create text effects
- Save and load high scores using local storage
- Use timelines to concatenate tweens and generate complex animations
By the end of the course, you'll have a complete HTML5 cross-platform game but most of all you will master all the concepts to create a game on your own.
Phaser FX
Those of you who are Phaser patrons will already know about the new Phaser FX packs. When I released Phaser 3.50 I built-in the ability to create Post FX Pipelines. These are extremely flexible and you can create some lovely visuals with them that really elevate your games!
So far, I have released Wipe FX, Water Drop FX and Doom Wipe FX packs free to all patrons. These packs let you run smooth transition effects across a camera, layer, Game Object, or entire Scene. You can control the direction, use them to reveal things or blend between them. Each FX has different parameters to play with, such as the 'drop size' in the Water Drop.
Each FX Pack comes with full TypeScript source code, ES Module and ES5 versions of the effect, full documentation, and plenty of fun examples demonstrating how to use them.
I intend to release a variety of FX Packs in the coming months, covering all kinds of effects - from God Rays to Bokeh to FXAA to Lens Flares and lots more. Some of these will be free for Patrons, others will be commercial (but of course at a discount for Patrons) to help increase the Phaser coffers for 2021. I'll let you all know as soon as the FX packs are ready.
Until Next Time ...
Hopefully, the next dev log will contain more actual, you know, development. I'm quite pleased that even under lockdown limitations I've still managed to publish two new Phaser 3 releases, get Web Workers running, release 3 FX packs and get a long way to completing the new docs system. Here's hoping things start to ease-up for everyone as soon as it's safe to do so and then we can really hit the ground running.
Welcome to a new Phaser Dev Log, the first of 2021. It's been a few months since the last update and a lot has happened, so let's dive on in.
3.50 was Released
I'm quite sure most of you are aware of this already but on the 16th December 2020, Phaser 3.50 was finally released. It goes without saying that it was a massive version. I posted about it on the Phaser site at the time and was pleased to see the release gain a lot of social media attention as well. This video published by Game from Scratch was particularly pleasing to watch after the months of hard work that went into it.
If you were one of those who helped with the release of 3.50, perhaps by reporting an issue or contributing a pull request, then thank you so much! :) I believe we have only a few genuinely significant milestones that occur in both a developer's professional life and in the life of a project. For me, 3.50 was truly one of those moments.
It feels like I'd be preaching to the choir to go over the features of 3.50 here again. I know a number of you are already using it in production! So if 3.50 is new to you, I would please urge you to read the post on the Phaser site, or watch the video, to get an understanding of the many new features and changes it contains.
Since the release of 3.50 in December, there have been several other releases. 3.51, codename Emilia, came out on the 5th of January 2021 and contained mostly fixes for issues raised in 3.50. I didn't stop there, though. Version 3.52.0, codename Crusch was released less than 10 days later, on the 14th January 2021 containing render list updates and more small fixes.
Right now, I'm working on the 3.53 (codename Anastasia) release and you can see lots of the changes I've made towards that in the master branch on GitHub. I'll also talk a little more about them later in this Dev Log.
It was a fantastic feeling getting 3.50 out into the wild. Given the literally thousands of updates it contained, I'm also pleased with the relatively low number of issues found in it. I'm slowly working through issues flagged in GitHub and fixing what I can, but it's taking a little longer than usual at the moment for reasons I'll cover in the next section. Rest assured, I plan to have 3.53 out during February and will then immediately plan towards the 3.54 release.
For those wondering about the codenames, the 3.50 branch have all been named after characters from the anime Re:Zero, one of my favorite animes of all time, which is currently running season 2 and it's simply superb.
Lockdown 3.0
I mentioned above that although I'm working on the next 3.50 release, progress is slower than I'd like. The reason for this is that the UK, where I live, is on full national lockdown, with schools shut to all but key worker children. The last time this happened, in 2020, it didn't massively impact me. This is because my wife was at home, so I was able to work in my office as usual. This time around, she's working in school every day, so I'm at home looking after the children and helping with their home learning.
As you can imagine, this has quite an impact on the number of hours I can work per day. I fully appreciate I am not alone in this. I'm sure many of you reading are having to juggle work around homeschooling, so appreciate what a struggle it is. As developers, a lot of our productivity rides on getting 'in the flow' and being able to continuously assess and solve problems. It's the kind of work that is much harder to do when you've only a limited window in which to engage with it.
Like lots of you, I've also been having to work from home. In my office, I have everything I need set-up around me: a nice big desk, multiple monitors, a coding chair, a super-fast PC, etc. At home, I've got a 5-year-old MacBook Pro on a dining table. I'm lucky to have even that, I know, but there is no getting away from the fact that I'm simply not as efficient using it. It's the simple things, like spending more time switching between windows to reference something, that just adds all of those micro-seconds into the time it takes to do something, but more importantly, causes tiny fractures in your coding-flow.
Thankfully, this week is half-term. The kids don't have any home learning and my wife is having a well-deserved break without needing to go into school. As a result, today was the first day I've been in my office since December. It took hours for my PC to finish running all of its updates and for the heating to take the freezing chill off of the place :) But I cannot deny how amazing it feels to be back in here, even if only for a week. I intend to make the most of it!
Please understand that I appreciate how privileged I am to even be able to carry on working right now. It feels slightly ungracious of me to complain about such a simple thing when many of you have been struggling with it all of last year too. However, I felt it was important to talk about because Phaser is backed by you, my patrons, and if I'm unable to work at full capacity on it, I feel like you have the right to know why. This is also the reason I've been on Discord a lot less recently.
Honestly, I was hoping by this stage of 2021 I would be flat-out on Phaser 4 development. I was so looking forward to that. Over Christmas, my head was brimming with ideas for it. And I know that as this country continues to vaccinate more people it's only a matter of time before they're able to start easing up restrictions, especially in schools. Phaser 4 is not mission-critical. Yes, I want to work on it like nothing else, but it can wait for now. At the moment it's more important I focus my vastly reduced time on Phaser 3 instead, which lots of you do rely on both commercially and professionally.
New Phaser 3 Documentation System
As I mentioned in the November 2020 Dev Log, Francisco joined the Phaser team full-time. He spent most of 2020 helping me with the 3.50 release, fixing hundreds of examples, and helping keep GitHub in check. Since then we've been working on the new Phaser 3 documentation system.
As you all probably know, the Phaser 3 docs are auto-generated from the JSDoc tags that appear in the source code. JSDoc takes those tags, parses the code into an AST tree, and spits out hundreds of pages of html and CSS using a rigid (and pretty inflexible) theme. These are the docs you currently browse and I've known for years they're just not good enough. They're almost impossible to search. They're missing lots of features I consider important, such as being able to hide inherited members and properties and they're based around a structure where the 'Class is king'.
I started work on an alternative docs system several years ago and it progressed well, although not far enough to ever go live. Ultimately, due to time and being the only person working on the site, I had to stop and focus on other things instead. So with 3.50 released, we decided it was time to revisit this project and build a brand new docs system for Phaser 3.
Francisco has been working on it for several months and I'm very pleased with the features implemented so far. The docs are stored in a single SQLite database, which we will make publicly available so anyone else can use this in their own tooling. For each new version of Phaser, a new SQLite database is generated. This makes versioning really easy and prevents a single db file from growing exponentially.
Being in a database also provides us with lots of extra power that manifests as quality-of-life features for those browsing the docs. For example, the search system is smart enough to understand if you use one of the common factory methods, such as 'add.sprite'. The results are split to show results in classes, namespaces, events, and other areas. When viewing a class, you can filter the properties and methods list using a quick search box.
There are options to show or hide private properties and methods, along with hiding inherited properties and methods as well. We've also built-in a 'focus' mode. This works by clicking through from any property or method and seeing just that one thing on a docs page on its own. This is really helpful both when sharing a link to a method in Discord, or if you just want to read about a specific method without any other distractions on the page.
The following video demonstrates a quick tour of the new docs system, showing off some of the features I've mentioned.
We're currently working on a user registration system, so you can log in and contribute code snippets and comments towards methods and classes. This way we hope that, over time, you can help make the docs really useful by actually demonstrating how a method works via live code.
Once I'm happy that the docs are feature-complete, I will enlist the help of a good friend of mine who is a superb designer, and who designed the whole Phaser web site. He will be given free rein to graphically overhaul the docs system, making sure it's as visually clear and accessible as possible. We will then implement his design and make it live.
It feels like this has been a long-time coming. While it won't address all the issues people have with the docs, it will certainly make navigating them much easier. Over time, the code snippets will help answer "How do I use this?" type questions, too. API documentation on its own will never replace the need for good tutorials, a line I feel is very blurred and often confuses newcomers, but it won't stop us from trying to create the most helpful API docs that we can.
Phaser 3.53 Progress
As time permits I've been working on the 3.53 release. There are two main points of focus for this version. The first is to try and close down as many issues as possible. You'll notice that it already contains fixes for things such as the Blitter WebGL Renderer and the issue where Containers and Zones didn't properly handle input priorities, causing child objects to fail or duplicate input detection.
Updates in 3.53 include lots of privacy changes in the Web Audio system. Up to now, most properties, such as the audio context, the mute and volume nodes, and some internal creation methods were all marked as private. This meant if you need to hook into the audio context and force in your own node, it wasn't 'legally' possible (and indeed, wasn't possible at all if using TypeScript in strict mode). These have all been relaxed in 3.53, so you're free to modify the nodes and context as you need.
Another important change in 3.53 is that it no longer includes all of the browser polyfills. These were largely in place for IE9 support. I feel we're safely at the point now where we don't need to consider supporting IE9 any longer in the core library. However, there is a new IE9 build that will be shipped in the dist folder along with the regular build. So, if you need it for a legacy environment, you can still have it. But the rest of us don't need to carry the IE9 baggage around any longer.
However, it's not all just fixes and updates. The most important change in 3.53 is the ability for Phaser to now run inside of a Web Worker. It's worth me being very clear here: Phaser itself is not using Web Workers internally. What this change allows is that you can now import Phaser as a script for a Web Worker and call on any of its static functions, easing the load off of the main thread. This doesn't mean you can now run, for example, physics instead of a Worker. The physics systems in Phaser are far too integrated for that. However, you can absolutely hand-off complex parsing functions, such as polygon edge ray detection, polygon simplification, converting and importing mesh data, creating data for Tilemaps, and so on, to Workers. This is a feature I hope to demonstrate soon in a new backers pack.
Cross Platform Game Dev with Phaser 3
Emanuele Feronato has published a new course, updated for Phaser 3.50, that allows you to learn the secrets of HTML5 Game Development with Phaser while building a cross-platform endless runner game. Designed both for beginners and skilled programmers, the course guides you from an empty folder introducing the bare bones of JavaScript to advanced Phaser 3 features.
Through 16 detailed steps you will learn, among other things, these concepts:
- The structure of your first Phaser project, starting from an empty folder
- Scale and resize the game to look nice on any device
- Preload images, sounds, fonts, and other kinds of assets
- Scene management
- Add images and sprites on the stage
- Use tweens to create animations
- Animate sprites using sprite sheets
- Wait for player input
- Process mouse or finger input
- The importance of placing sprites in front of other sprites using Z-order
- Create game states
- Add and play sound effects
- Design and add a game interface
- Add interactivity with buttons
- Use bitmap fonts to create text effects
- Save and load high scores using local storage
- Use timelines to concatenate tweens and generate complex animations
By the end of the course, you'll have a complete HTML5 cross-platform game but most of all you will master all the concepts to create a game on your own.
Phaser FX
Those of you who are Phaser patrons will already know about the new Phaser FX packs. When I released Phaser 3.50 I built-in the ability to create Post FX Pipelines. These are extremely flexible and you can create some lovely visuals with them that really elevate your games!
So far, I have released Wipe FX, Water Drop FX and Doom Wipe FX packs free to all patrons. These packs let you run smooth transition effects across a camera, layer, Game Object, or entire Scene. You can control the direction, use them to reveal things or blend between them. Each FX has different parameters to play with, such as the 'drop size' in the Water Drop.
Each FX Pack comes with full TypeScript source code, ES Module and ES5 versions of the effect, full documentation, and plenty of fun examples demonstrating how to use them.
I intend to release a variety of FX Packs in the coming months, covering all kinds of effects - from God Rays to Bokeh to FXAA to Lens Flares and lots more. Some of these will be free for Patrons, others will be commercial (but of course at a discount for Patrons) to help increase the Phaser coffers for 2021. I'll let you all know as soon as the FX packs are ready.
Until Next Time ...
Hopefully, the next dev log will contain more actual, you know, development. I'm quite pleased that even under lockdown limitations I've still managed to publish two new Phaser 3 releases, get Web Workers running, release 3 FX packs and get a long way to completing the new docs system. Here's hoping things start to ease-up for everyone as soon as it's safe to do so and then we can really hit the ground running.