You can try all new features shown in this Dev Log in Phaser 3 Beta 14. Grab it from GitHub pre-built, or from npm using the beta tag.

Sorry this Dev Log is a week late. The reasons are not something I can go into in depth here, suffice to say it involves being a Police witness to the near-death of two relatives and managing the aftermath. It wasn't exactly something you could ever plan for and as you can appreciate it took priority over work. I'm very glad to now be back in the world of Phaser though!

Sound Manager Update

Pavle writes: Last week was all about implementing a seeking feature for the v3 Sound API. It allows you to read the current position from a sound and set it to a desired value.

It was quite a challenge since the Web Audio API does not support seeking natively, so a lot of logic had to be added on top to make it work. Also, another tricky part was taking into account the playback rate and detune changes as they too very much affect calculating the current position of the sound.

Now that we checked seeking off the list, we are one step closer to being able to create a full-blown music player with Phaser v3.

The work was all very technical, so in order to lighten things up a bit, I made this example featuring Nyan Cat. Have fun dragging the cat around! :D

Pointer Lock

After his awesome work on the Tilemap API, we asked if Mike could work on a couple of other features on the todo list. One of them was adding support for Pointer Lock into the V3 Input Manager:

I integrated the pointer lock API in v3. The Pointer Lock API in the browser allows you to hide the mouse cursor and makes it so that the cursor is no longer limited by the browser/screen boundaries. You might be familiar with this from first person 3D games, but it can also be useful when you want to create mouse-based controls in a 2D game. Check out the clever use of pointer lock in the multiplayer game cursor.io where the player is literally a mouse cursor.

Once you successfully initiate a pointer lock in v3, the active pointer will have a movementX and movementY property that tells you how much the mouse has moved since the last update:

The annotated example in phaser labs also shows how to unlock the pointer and how to listen for changes in the pointer lock state. You can also use pointer lock with the new 3D mesh features:

Text Wrapping

Mike also worked on word wrapping this week, which comes with a couple of options. We’ve got basic and advanced wrapping as in v2 - click on the screenshot below to see the differences:

You can specify the wrapping in the style option or via methods on a Text instance:

Maybe you need some language-specific wrapping, or just want to inject your own line breaking logic? In that case, you can specify your own custom wrapping function:

My thanks to Mike and Pavel for their help with Phaser 3 this year. As we're now in holiday season their next contributions will hopefully be with Beta 15 in January as we head towards a final release.

Glow Shader

This was something I asked Felipe to work on because I had seen it requested so many times on the forum and in chat: the ability to add a glow to a sprite. The first stage of this was to create a shader that could be used by a RenderPass. He set to work exploring a few different techniques and in the end settled on two different shaders: the first used a fast gaussian blur technique (originally devised by Jam3). This used just one RenderPass and was the quickest option, in terms of rendering. The second method was a soft glow effect that used two shaders, one for the horizontal blur and one for the vertical blur.

You can see the difference in the following two examples:

Although the demos are slightly different you can see the subtle differences in the glow effects as well. In these examples, they're just being applied to a Graphics object but they can actually be used on anything renderable.

The plan is to introduce a range of Special Effects game objects that allow you to easily control effects like glow and manage the display list updating for you. These will be post-launch of 3.0 but are in planning already. In the meantime, the curious among you can dig around with the source in the examples :)

Graphics Mesh

If you've been following the Dev Logs for a while you may remember ages ago when we introduced the new Graphics object and I show-cased doing some fast line-drawing in it by spinning a few 3D shapes around. At the time this was done with a rudimentary object parser and some really early math code from Babylon.js :) But that didn't matter because all it was showing off was the speed of line drawing in the Graphics API.

The demo was finished, it worked and we moved on to other tasks. Recently though I revisited it as part of a different bit of work and figured it could be improved considerably. Taking the code I'd already built I refactored it, vastly updated the Wavefront OBJ parser, created a new Mesh geometry object and built it into the Graphics object. It means you can now natively load a model into v3 and it'll parse all of the mesh and texture data out, and then add it to a Graphics object. Here's an example:

As you can see we're loading a model, creating a mesh which we can influence (via rotation, position, scale, color, etc) and drawing it. This will work in Canvas or WebGL. This is the result:

Pretty neat for such a small amount of code, right? While I was at it I implemented backface culling. I also wanted to be able to fill the shape with a solid color, which leads to me finding a bug and missing feature in Graphics, and soon both were done:

If you mix this in with the new Glow shaders, it can have some interesting results ... :)

While I appreciate this has somewhat limited uses it was fun to work on. And importantly the code mostly already existed, is nicely self-contained so is easily excluded from custom builds and opens up the opportunity to create some real retro styled wireframe vector stuff should you wish.

And that is what Phaser 3 is really all about: the ability to explore and create. Even if that means making glowing squirrels in space.

Most of us have the next week or two off. Family commitments, events and the holiday period eat into the available time, as it should, and honestly it's good to step away and recharge your mental batteries. I'll be spending a few days going through the v3 issues and tidying things up. We're now just a single system (the Scale Manager) and finished documentation away from a feature complete 3.0 release.

January is going to be an exciting and very busy month for sure! :)

Phaser 3 Labs

Phaser 3 Beta 14 is out and ready for testing.

Visit the Phaser 3 Labs to view the API structure in depth, read the FAQ, previous Developer Logs and contribution guides.

You can also join the Phaser 3 Google Group or post to the Phaser 3 Forum - we'd love to hear from you!