Welcome to Dev Log 148. It's been a good while since the last Dev Log and a lot has happened. Phaser 3.18 and, most recently, Phaser 3.19 have been released, so if you're still on an older release now may be the time to upgrade. You'll find full details about both releases in this Dev Log. I also made an announcement on the Phaser Patreon about how the development of Phaser 4 will begin shortly. Yes, you read that correctly. Read the article about what is planned for Phaser 4, then feel free to chat about it in the Phaser Discord.

Starting with Dev Log 149 I will return to the more usual format of detailing what coding has been taking place and mixing that in with mini-tutorials. For this issue, however, there's a lot of ground to cover. If you follow Phaser closely then you will know about most of this already, but I'm well aware that lots of you like to keep abreast of Phaser just via the newsletters - so this one is especially for you. Please, dig in and see what's been going on these past few months!

Phaser 4 Announcement

Hi everyone - I want to share with you some exciting news that paves the way for the future of Phaser in 2019 and beyond. It’s with great pleasure I can announce that thanks to the continued support from the Facebook Gaming and the Instant Games teams, I’m able to start the development work required to build the next iteration of Phaser. This post will outline what’s planned and hopefully answer many of the questions you may have.

Phaser has been working together with Facebook Gaming for some time now. We initially started work together back when we jointly released the Instant Games plugin and associated tutorials for Phaser 3. The working relationship has been great and has allowed us to come up with the next evolution of Phaser together.

The continued support from Facebook directly allows for something I’ve been wanting to do with Phaser for a while now: Rewrite it in TypeScript.

Those of you who have been around Phaser for long enough will remember it was originally written in TypeScript, way back before TypeScript was even at a 1.0 release. We moved away from it due to an endless stream of bugs with the TypeScript compiler and tools. Quite frankly, we had adopted it far too early and got burnt badly in the process. Fast forward 5 years and the world is a very different place. TypeScript has matured beyond all recognition and the tooling around it now is best-in-class. What’s more, lots of you are now using it for your game development projects, too. Far more than ever before if our TypeScript defs stats are anything to go by.

Let me clear up a few important points now:

1) This is not an API rewrite. Phaser 3 is comprised of hundreds of small modules already, so the work will be focused on porting those to TypeScript. Yes, I will absolutely use this process to improve the API as I go. There’s no way I will make any claims about “the API not changing” because I know it will. The core work, however, isn’t to rewrite or restructure, it’s to port.

2) You will not need to use TypeScript in order to use Phaser. Phaser releases will still be published as ES5 bundles. If you code in ES5 JavaScript nothing about your workflow need change.

3) The TypeScript version of Phaser will be Phaser 4.0. I really didn’t want to have to bump the number like this, because for Phaser the major number is part of the name, not the release version, but I feel it’s an important enough update that I have no choice but to mark it in this way. It will also mark a clean point of separation for users.

4) Even with this continued support from Facebook, I still absolutely need your support via Patreon. All of my projections are based on a combination of resources and support from one source does not cancel out the others. It’s still vitally important to the project that Patreon continues.

Why TypeScript and not ES6?

Although I’ve been discussing this work with Facebook for months now, I hadn’t made a call on if the port should be to ES6 or TypeScript. Facebook had indicated they were open to either option and personally I had no strong leaning in either direction either. A few things tipped the scales in TypeScript’s favor, though. The first is that I’ve sunk a lot of resources into our current TypeScript definitions generator. While it works, it’s less than ideal and we are forever tweaking the output to make it more accurate for TypeScript developers. This is a problem beset by all projects that use tools to automate the creation of TypeScript defs and I see issues around it across many, many projects outside of Phaser. As more and more developers use TypeScript as their primary language, it will give them a perfect developer experience, while taking nothing away from JavaScript developers.

Recently a few bugs have slipped into the API that would have been solved by using strict types, which TypeScript will bring. Although most bugs are, and always will be, logic rather than type related - catching even just one type bug before it hits production is a win in my books.

Finally, this move will significantly help those new to the API. If they choose to use TypeScript they’ll get full and 100% accurate code insight and context awareness. This is a huge benefit and shouldn’t be under-estimated. It will help me, too, as I work on the API, speeding up my development workflow as much as anyone else's. I spend hours and hours inside of VS Code each day and I’ll finally be able to benefit from the massive number of tools it contains. Time saved is time gained.

I’m expecting the development of Phaser 4 to begin by the end of August 2019. 3.x issues will still be addressed, and new versions published. As I near completion of 4.0.0 this process will halt. Until then, nothing will change.

I know better than to give any kind of estimation for when Phaser 4 will be published. And honestly, I don’t actually know. I’ve made estimates, of course, but I’m not committing to a date, no matter how vague. As with all versions previously, you will be able to track progress openly via GitHub and my Dev Logs.

I’m really looking forward to this next stage. Phaser 3 had quite a difficult birth, although that was due to scope and expectations, not technology. This work allows me to pull it kicking and screaming into the modern web era and tighten-up ship as we go. It’s not about reinventing for the 4th time, it’s simply about super-charging and streamlining what we already have. And that is genuinely exciting.

Phaser 3.18 Released

After another month of hard work, we're very happy to announce the release of Phaser 3.18. In this release, we took the time to rewrite large chunks of the Input API. This allowed us to fix a number of issues that had arisen, as well as optimizing the internal event flow. Native support for complete Multi-Touch support, Mouse Wheels, and more advanced Pointer Button handling are now available. The whole API is smaller and tidier after the clean-up, which is always a good thing.

We've also added lots of other features and updates, including better Matter physics constraint handling, Arcade Physics improvements, Audio decoding events, Text justification, new Bounds methods and a lot, lot more. As usual, it doesn't end there, though. You'll find hundreds of great new features, updates, and fixes.

Thanks to some hard work updating the Phaser website, you can now run all of the Phaser 3 examples directly from it! Such as this fun multi-touch piano example :)

3.19 is Released

I'm pleased to announce that Phaser 3.19 is now available. This release includes our brand new Spine plugin. Spine allows you to bring animation to life in your games, offering a dedicated 2D skeletal animation system and workflow. Our plugin makes integration with Phaser seamless and is fully updated for the Spine 3.7 Runtimes with support for WebGL and Canvas renderers.

This version will properly batch Spine skeletons where possible, potentially saving hundreds of draw calls. The plugin is fully documented and exports both debug and minified files, suitable for ES6 'importing' or ES5 plugin inclusion. The whole plugin is just 68KB in size (min+gz), or a paltry 57KB if you only need the Canvas renderer! That's a really tiny payload for such a massive feature-set. You can find out more about Spine from the Esoteric Software website.

3.19 also introduces a huge overhaul to the Tween system. Tweens now have 100% documentation and we've extended their capabilities significantly. There are lots of new Tween Events to listen for, such as 'COMPLETE' or 'REPEAT' to allow you to trigger actions without needing to create callbacks. Tweens can now tween both 'from' and 'to' a value, with the ability to set a starting value for any tweened property. There are lots of new handy methods and properties, such as Tween.hasStarted and a rewrite of the Tween seeking function, so it now allows you to seek to any point in time across a tween.

Finally, we've added in the great new 'StaggerBuilder'. This allows you to easily add staggered offsets to a bunch of tween targets, including all kinds of options such as staggering across a grid layout, stagger directions, starting values and a lot more. Please see the docs and examples for more details.

As usual, it doesn't end there, though :) Another very useful feature is Shader.setRenderToTexture. This allows you to redirect a shader to its own framebuffer / WebGL Texture instead of to the display list. This allows you to use the output of the shader as an input for another shader, by mapping a sampler2D uniform to it. It also allows you to save the Shader to the Texture Manager, allowing you to use it as a texture for any other texture based Game Object such as a Sprite. Combined with the new setSampler2DBuffer method you can now easily chain shaders together, using them as buffers for other shaders.

One thing I've been seeing asked for a lot on the Phaser Discord is the ability to 'save' a Render Texture to an image. So, I added the new methods RenderTexture.snapshot and snapshotArea. This allows you to grab whatever is on the Render Texture at that point in time and turn it into an Image. You could then save this image to the Texture Manager, if needed, or just save it out to the filesystem, or transmit it to as web service. Great for things like avatar creators or art packages.

Download Phaser 3.19.0 from the GitHub releases page, or pull it in via the npm package. There are also the pre-built files available on the jsDeliver CDN.

The brand new 3.19 documentation has been updated and published. As before, you can read it online, or check out the repo to have a local copy.

The TypeScript definitions have been improved further still and are now available in the main Phaser repo. So, there's no need to clone another repo when updating Phaser any longer.

As always, please check out the Change Log for comprehensive details about what recent versions contain.

Phaser Code Bundle - August 2019

The August Code Bundle is now out for everyone who supports Phaser on Patreon or via PayPal. This month the focus is mostly on Spine, the bone-based IK system from Esoteric Software. I've been working on the Spine plugin for Phaser 3 for a few weeks now and, truth be told, it turned out to be far more complex than expected. Even so, I'm very happy with the end results and you'll find the latest version of the plugin, along with exclusive examples, in this months bundle, which also contains:

▪ Sprite Sheet and Atlas Frame Explorers. I had a need to visually be able to select a frame from an atlas and find out what it's frame name was. Rather than pour through the JSON file, I built a little tool to do it and it turned out to be really quite handy. So, then I built one for inspecting Sprite Sheets too :)
▪ Spine Examples. To go with the latest version of the plugin here are 9 different examples for you. They start with the basics, such as changing animation, skins and slot attachments, and then progress into more complex territory such as bone movement and aiming, vertex effects and color controls. You'll also find an example called 'Commando' where you can run around shooting (trying running while shooting up too!). This is a handy example of combining Spine with Arcade Physics and keyboard controls - and honestly, it feels ripe for evolving into a full game.
▪ Phaser 3.19 includes lots of enhancements to the Tween system, including the ability to create powerful new Stagger effects. You'll find two examples showcasing this. Personally, I really love just clicking through the 'grid stagger' example and seeing what effects it comes up with :)
▪ I've also included an example showing one method for dragging a sprite along a path. You can tweak the values to achieve different results but hopefully, it will help some out.
▪ Last, but by no means least, is Snowmen Attack! Because it's the middle of one of the hottest summers on record here, so what better than a snowball fight? :) Based on the arcade classic Tapper, move the penguin up and down, throwing snowballs to knock-back the attacking snowmen before they reach, or shoot, your eggs. This is another complete game, full of animation, audio, and special effects. As before, hopefully, all of you enjoy playing it, but perhaps the more beginner level of you will benefit from the way in which I structure the project and handle scene progression.
▪ Sprite Sheet and Atlas Frame Explorers. I had a need to visually be able to select a frame from an atlas and find out what it's frame name was. Rather than pour through the JSON file, I built a little tool to do it and it turned out to be really quite handy. So, then I built one for inspecting Sprite Sheets too :) ▪ Spine Examples. To go with the latest version of the plugin here are 9 different examples for you. They start with the basics, such as changing animation, skins and slot attachments, and then progress into more complex territory such as bone movement and aiming, vertex effects and color controls. You'll also find an example called 'Commando' where you can run around shooting (trying running while shooting up too!). This is a handy example of combining Spine with Arcade Physics and keyboard controls - and honestly, it feels ripe for evolving into a full game. ▪ Phaser 3.19 includes lots of enhancements to the Tween system, including the ability to create powerful new Stagger effects. You'll find two examples showcasing this. Personally, I really love just clicking through the 'grid stagger' example and seeing what effects it comes up with :) ▪ I've also included an example showing one method for dragging a sprite along a path. You can tweak the values to achieve different results but hopefully, it will help some out. ▪ Last, but by no means least, is Snowmen Attack! Because it's the middle of one of the hottest summers on record here, so what better than a snowball fight? :) Based on the arcade classic Tapper, move the penguin up and down, throwing snowballs to knock-back the attacking snowmen before they reach, or shoot, your eggs. This is another complete game, full of animation, audio, and special effects. As before, hopefully, all of you enjoy playing it, but perhaps the more beginner level of you will benefit from the way in which I structure the project and handle scene progression.If you support Phaser today, you can download the pack instantly, along with all previously released packs too.