Warning

Due to the rapid pace of change some links or details may no longer be correct.

Published in Phaser World Issue 58 on 2nd December 2016 by Richard Davey   @photonstorm

Transform Bounds and building the new Loader

image

I'm very pleased that pull requests for Phaser CE keep coming. I'm merging them as fast as I can, but we're already hot out of the 2.7.1 release and zeroing in on 2.7.2. As outlined in my video about Phaser CE, it will only really live for as long as the community wish it to do so. Your updates are literally its life blood.

Phaser 3 Updates

On the Phaser 3 front development has been split between myself and Felipe. Felipe started off the week adding in getBounds support to the new Transform class. It'll now accurately determine the local and global bounds, iterating intelligently through its children as needed:

image

He then moved on to starting work on the new Graphics functions. The Graphics class in Phaser is of course based on the Pixi v2 Graphics class, and allows you to draw geometry to a Graphics object, setting line, stroke and fill colors as you go. The result Graphics object can be rendered as-is, or used for a mask. It has a few notorious issues, such as it's inability to render particularly smooth (or accurate) circles / arc shapes, and the fact that it causes a shader swap and batch flush whenever you encounter a Graphics object in the display list.

Rather than port it all over we figured now was the time to rebuild it, in a way more fitting for Phaser 3. Which is what Felipe has been working on. I'll have more to show on this front next week.

Please wait, loading ...

I had the slightly less glamorous, but no less important, task of getting the new Loader into Phaser 3. I had already done a lot of work on a new Loader for Lazer, so it was a case of taking that code, modifying it for CommonJS, and updating it. The new Loader is now in GitHub and works quite differently to the old one.

In Phaser 2 the Loader is one giant class that handles everything. It has a lot of features I'm very happy with, but it's hard to extend, and didn't map well in to a module structure. So I attacked it from a different perspective. In the new Loader the actual Loader class is tiny, nothing more than a few data sets and a queue manager. It works by taking in one, or more, File objects and then parallel loading them. The File objects themselves are fully self-contained tiny little loaders. They handle all the logic involved in the loading and parsing of themselves. This means it's entirely possible in Phaser 3 to not actually use the Loader at all, but simple create an instance of a File object and have it load itself, listening to the events as needed.

They're also a lot more powerful. Each File can have its own XHR settings, meaning you can set specific files to perhaps have their own xhr username or password, or response type. I'm also now using XHR to load everything, including images. In Phaser 2 images are loaded in via Image tags, and then converted upon load into WebGL textures. In Phaser 3 the image data is streamed in via XHR to an array buffer. WebGL can use this immediately, with no additional parsing. It also means you get a per byte download progress for every file, allowing for some highly accurate progress bars!

To support Canvas the array buffers are converted back into Image tags via base64 encoding, or you can instruct the Loader to just use Image tags anyway. The key thing here is choice: You now actually have one.

There's a little more work to finish off with the Loader early next week, and then I can progress to getting the Game Object Factory back in, and porting over the new renderer. I'm very happy with progress. The building blocks are really falling into place. It's feeling clean, and sensible, and well structured. Lots more to come, very soon.