Welcome to Issue 147 of Phaser World
Do you enjoy the hit Netflix show Stranger Things? Me too! So it was a real treat to see a promotional game for the show and Polaroid cameras created in Phaser, and it's a real treat too, full of that lovely 80s vibe you've come to expect.
There's also a massive new release of Phaser Editor, the premier IDE for all things Phaser. As well as an extensive new tutorial on using Quest AI to allow you to build Phaser games purely via drag and drop. As usual, be sure to so you don't miss anything.
Got a game or tutorial you'd like featured? Simply reply to this email, or message me on Slack, Discord or Twitter. Until the next issue, keep on coding!
The Phaser Stickers are back!
If you missed out on getting some Phaser stickers at the start of the year, you'll be pleased to know that I've re-stocked! As before, all orders via the newsletter will get a free Phaser pin-badge and a new transparent sticker included along with the magnet, art print and sticker sheet.
Click here to make your laptop look cool :)
The Latest Games
Game of the Week
Stranger Things: Monster Flash
A pixel art arcade action game harking back to the era the Netflix show is set in. Grab your camera and shoot your way through the monsters.
Staff Pick
A cute chess game designed specifically to help teach the younger generation how to play this classic.
We're professionals now, John. Blast away the enemies that rush you, avoiding their fire and hunting down the rifle and shotgun power-ups.
Lay waste to the oncoming aliens as they attack in a variety of waves, with end of level bosses and more to encounter.
Lead as queen of a bee colony! Start a hive near flowers, lay eggs, and set the jobs of your expanding force of worker bees.
What's New?
A massive new release of the best Phaser IDE ever created is now available, including stunning new features and updates.
Learn how to create a Phaser game with Quest using their online tool and art templates.
Extend a Sprite in Phaser 3 Tutorial
Extending existing classes can be very powerful. In this tutorial learn the basics of how to extend a Sprite in Phaser 3.
A new tutorial on how to reduce the file size of your Phaser bundle by creating a custom build.
Create a space themed game to celebrate the moon landings.
Phaser 3 Game Development Course
A complete Phaser 3 and JavaScript Game Development package. 9 courses, 119 lessons and over 15 hours of video content. Learn to code and create a huge portfolio of cross platform games.
Help support Phaser
Because Phaser is an open source project, we cannot charge for it in the same way as traditional retail software. What's more, we don't ever want to. After all, it's built on, and was born from, open web standards. The core framework will always be free, even if you use it commercially.
You may not realize it, but because of this, we rely 100% on community backing to fund development.
Your support helps secure a constant cycle of updates, fixes, new features and planning for the future. There are other benefits to backing Phaser, too:
Click to see the full list of backer perks
I use Patreon to manage the backing and you can support Phaser from $1 per month. The amount you pledge is entirely up to you and can be changed as often as you like.
Please help support Phaser on Patreon
Thank you to these awesome Patrons who recently joined and make continued development of Phaser possible:
Alex Pintea
Brian Cama
Cameron McMillan
Feng Li
Giviz
Jaakko Kenttä
Javier San Juan
Kimmet
Mark Scott
Paul Hastings
Richard Farrell
Zatapov
Also, thank you to Jerry Dean Weimer for the pledge increase.
Dev Log #147
Welcome to Dev Log 147. It's been a few weeks since writing one of these, so there's quite a bit to catch up on. There may have been no dev log published, but that doesn't mean for a second that I've been resting. Far from it, in fact.
3.18 Beta 1
The 3.18 release of Phaser is nearly ready. I've been working solidly on it since 3.17 dropped because a few annoying issues wormed their way into 3.17 that needed addressing quickly. I'll talk in more detail about what 3.18 changes, but first, if you want to test it out right now then head on over to npm and grab it. You'll find it under the beta tag.
Rewriting the Input API
The biggest change in 3.18 is that I have completed the work I started on the Input API back in 3.16. Prior to this, input worked on an event queue and native DOM events would be placed into the queue, waiting for the next game step to be processed. While this worked well and kept things consistent, it also meant we had to hack our way around browser security issues (with code not running in native DOM callback handlers, i.e. opening a new browser window from a Phaser input event), and it also meant there was a delay between the DOM event happening and it being processed. It wasn't a long delay, usually, but in games, every ms counts.
So, in 3.16 I started removing this event queue and introducing an immediate mode. Where-by the DOM events filtered directly through to their Phaser callbacks without any queue. In 3.17 this was refined a little further, but still, both systems were in place, living and arguing together inside the API like two siblings.
In 3.18 the work has been completed. I've removed entirely the old 'queue' system and all associated switches and flags. Doing this has meant the removal of a huge chunk of code from the input API, which is always good. And more important, it has meant I've been able to streamline the process a lot. There are now far less jumps between the native DOM event coming in and it reaching your Phaser Game Objects, making it faster and more responsive.
This means a large number of internal API changes in 3.18. On the surface, the public API hasn't altered all that much, but if you author plugins that use the input system then you should take time going over the Change Log to see exactly what has changed, as I always list both internal and public API changes in there.
As well as streamlining the input API internals it also meant I could drop in some new features. Here are a few of them.
Mouse Wheel Support
Starting in 3.18 you can now listen for Wheel events coming from the mouse, or similar input pointer. They can be extremely handy for in-game UIs, such as scrolling content in text windows, or offering a zoom control in an RTS game.
As with most input events, there are three different ways to consume the new event.
The first is `POINTER_WHEEL`, which is dispatched on a global level from the Input Plugin itself. This is handy if you're using the wheel to scroll a backdrop or camera, such as in the example below:
The second event is `GAMEOBJECT_WHEEL`. This event is again dispatched by the Input Plugin, but only if the wheel event occurs over an interactive Game Object. It's not picky about which object that is, so long as it's interactive and in the current Scene.
The final event is `GAMEOBJECT_POINTER_WHEEL` which is dispatched by the Game Object itself. This is the event you want to use if you wish to listen for wheel actions taking place over a specific Game Object, such as in the example below:
When a wheel event is dispatched it will send the delta values created by the native DOM event to your handler. You'll get the x, y, and z delta values, so you can react based on horizontal, vertical or Z-axis movement accordingly. It's worth noting that different input devices, OSs and browsers can give you different results inside of these values, so if you're going to use the wheel, test, test and test your game!
Window Events
A few versions ago the input API changed so that Phaser now listens for DOM events on the browsers window object, as well as on the canvas. There is a very good reason for this, but it also has some side-effects that you should be aware of, along with a way to disable it from happening.
One of the biggest issues I kept seeing reported over and over was with the Input API getting 'stuck' because the user had moused-down inside the canvas, then moved the mouse outside of the canvas and then released it. Perhaps on purpose to try and click something else on the page, or maybe because the game was a fast and vigorous one, and they didn't even realize they'd done it. Whatever the reason, it happened often, and when it happened the pointer that was currently 'down' within Phaser kept on thinking it was down. This didn't get reset until the player then moused back over the game again, and clicked once more, resetting the points state.
The opposite was also true. If the player was to mouse down outside of the canvas, and then move over it, the Phaser pointer would assume it was in an 'up' state, forcing the user to have to release the pointer and click again to put it back in sync again.
Although Phaser was technically doing nothing wrong, it still felt wrong to the end user, hence the issues and bug reports being filed. The reason it happened is that Phaser only listened for DOM events on the canvas object itself.
To combat this issue Phaser now listens for input events both on the canvas and on the window. If you mouse-up while outside of the canvas, Phaser now knows about this and reflects the change instantly in the Phaser Pointer. The opposite works as well. In the window handler Phaser would never call `preventDefault` on the event, it would only listen to it, meaning it would still happily trigger for any normal DOM elements on the page, so it wasn't an invasive action. All in all, it now feels right and does what you'd expect a game to do.
Of course, though, one-shoe never fits all. While in most cases this behavior is exactly what you'd expect and want your game to do, there is a use-case where it causes a problem and this occurs when you have DOM Elements positioned over the top of your game canvas. In this situation, the window listener would fire when you interact with the DOM element, and because it's over the canvas, it would potentially cause a mouse down event within your game too.
In this specific situation it may be beneficial to disable the window listeners entirely, which you can easily do via your game config with this simple flag:
Voila! Phaser will no longer listen for window events at all. You could also add this flag to save on some additional processing, if your game runs full-screen and fills the entire browser window, i.e. when there is no other 'window' space for an event to even occur on. Mostly though, you'll want it left on, which is why it's enabled by default.
Full Multi-Touch Support
Another nice side-effect of dropping the old queue event system is that 3.18 now handles multi-touch events fully. Previously, you may have noticed that things like the 'over' and 'out' events only worked for the first finger down in a multi-touch game, and additional active touch pointers were ignored. This has all changed and now any pointer, from any finger, no matter how many others are pressed down, dispatches all the same events as any other.
This means you can happily have all fingers dragging Game Objects around, or drawing in a multi-touch paint app, or tapping away furiously, with no limitations any longer (beyond the number of fingers you physically posses!). If you're on a touch-device, try the following touch demo out:
It may not be the grandest of pianos ever, but hopefully, you can still hear the results of proper multi-touch over support!
There's still some more work to be done on 3.18, specifically a few more input api updates (such as the rightButton handling) and finishing off the Spine plugin. Even with those needing to be done, I'm still confident we can release within a week and then set my sights on 3.19.
The June Code Bundle is now out for everyone who supports Phaser on Patreon or via PayPal. This month the bundle includes:
▪ 13 new shaders for use in your games (these are all bundled into the single 'shader bundle' example.
▪ 2 really nice shader mask effects (swirl and wave), both of which can work on any image and are easy to edit the glsl source for too.
▪ A fun little tween effect I call the Jelly Tween. By just tweaking the scale and position of an object you can make it look like it's stretchy gum or dancing :)
▪ The Toaster is a demo of using two tightly strung matter constraints to hold a body in place and what happens if you then destroy one of them!
▪ The Bow and Arrow examples are 3 examples that show the evolution of a bow and arrow physics game. In the first iteration, you can click and drag back on the bow, with the bow rotating to the mouse and the drawstring pulling back realistically. All the bow data is exposed and then used in the second example, which creates an arrow-shaped matter body and launches it. Wind friction is applied to the arrow in order to keep the flight realistic (within reason!) and you can stick the arrow into the ground. In the final version targets are added and you can shoot arrows into them at will :) The code includes showing how to detect which side of the target is hit, how to not allow the arrow to stick should the angle or speed not be right and this could easily be evolved into a full game.
▪ The final example is Bank Panic - which is actually complete game. You'll see I split the code up into different Scenes, rather than lumping it all together, so you can work through it more easily and see how Boot leads onto Preloader and so on. The game is a classic one: shoot the bandits, not the civilians, as they try to rob the bank! There are even amusing sound effects to go with it all :) Look through the source code to see how it all works, I leave comments in all over the place and use properties and method names that should be easy to digest.
If you support Phaser today, you can download the pack instantly, along with all previously released packs too.
TEXTREME is an extremely meaty text editor. If you can survive not having a headache after a few minutes use :)
Next-Generation 3D Graphics on the Web. This video from Google IO 2019 shows off the killer features of WebGPU.
Kontra.js is a really tiny game-framework created for making js13k game entries. It has loads of features and is well worth looking at!
Phaser Releases
Phaser 3.17.0 released 10th May 2019.
Phaser CE 2.13.2 released 24th May 2019.
Please help support Phaser development
Have some news you'd like published? Email [email protected] or tweet us.
Missed an issue? Check out the Back Issues page.