Welcome to Issue 147 of Phaser World

Web Version Unsubscribe

https://madmimi.com/p/9835ae?pact=0-0-0-864282bb90492c26bd775b6a23655313fd13d23dhttps://go.madmimi.com/opt_out?pact=0-0-0-864282bb90492c26bd775b6a23655313fd13d23d&amx=0

Do you enjoy the hit Netflix show Stranger Things? Me too! So it was a real treatto 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 allthings Phaser. As well as an extensive new tutorial on using Quest AI to allowyou to build Phaser games purely via drag and drop. As usual, be sure to readthis newsletter on the web so you don't miss anything.

Got a game or tutorial you'd like featured? Simply reply to this email, or messageme 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'llbe pleased to know that I've re-stocked! As before, all orders via the newsletterwill get a free Phaser pin-badge and a new transparent sticker included alongwith the magnet, art print and sticker sheet.

Click here to make your laptop look cool :)

https://madmimi.com/p/9835ae?pact=0-0-0-864282bb90492c26bd775b6a23655313fd13d23dhttp://phaser.io/community/slackhttp://phaser.io/community/discordhttps://twitter.com/phaser_http://phaser.io/shop/apps/build-arcade-games-packhttps://gum.co/phaserstickers

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 Junior Chess A cute chess game designed specifically to help teach the younger generationhow to play this classic.

John Wick Inception We're professionals now, John. Blast away the enemies that rush you, avoidingtheir fire and hunting down the rifle and shotgun power-ups.

http://phaser.io/news/2019/06/stranger-things-monster-flashhttp://phaser.io/news/2019/06/junior-chesshttp://phaser.io/news/2019/06/john-wick-inception

Generic Space Shooter Lay waste to the oncoming aliens as they attack in a variety of waves, with endof level bosses and more to encounter.

Monarchies of Wax and Honey Lead as queen of a bee colony! Start a hive near flowers, lay eggs, and set thejobs of your expanding force of worker bees.

What's New?

Phaser Editor 2.1.0 Released A massive new release of the best Phaser IDE ever created is now available,including stunning new features and updates.

http://phaser.io/news/2019/06/generic-space-shooterhttp://phaser.io/news/2019/06/monarchies-of-wax-and-honeyhttp://phaser.io/news/2019/06/phaser-editor-210-released

New Quest AI Tutorial Learn how to create a Phaser game with Quest using their online tool and arttemplates.

Extend a Sprite in Phaser 3 Tutorial Extending existing classes can be very powerful. In this tutorial learn the basicsof how to extend a Sprite in Phaser 3.

Phaser Custom Build Tutorial A new tutorial on how to reduce the file size of your Phaser bundle by creating acustom build.

One Giant Leap Game Jam Create a space themed game to celebrate the moon landings.

Phaser 3 Game Development Course

http://phaser.io/news/2019/06/new-quest-ai-tutorialhttp://phaser.io/news/2019/06/extend-a-sprite-in-phaser-3-tutorialhttp://phaser.io/news/2019/06/phaser-custom-build-tutorialhttp://phaser.io/news/2019/06/one-giant-leap-game-jamhttp://phaser.io/news/2018/06/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 hugeportfolio of cross platform games.

Help support PhaserBecause Phaser is an open source project, we cannot charge for it in the sameway as traditional retail software. What's more, we don't ever want to. After all, it'sbuilt on, and was born from, open web standards. The core framework willalways be free, even if you use it commercially.

You may not realize it, but because of this, we rely 100% on communitybacking to fund development.

Your support helps secure a constant cycle of updates, fixes, new features andplanning 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

https://www.patreon.com/join/photonstorm?http://phaser.io/community/donate

month. The amount you pledge is entirely up to you and can be changed as oftenas you like.

Please help support Phaser on Patreon

Thank you to these awesome Patrons who recently joined and make continueddevelopment 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 #147Welcome to Dev Log 147. It's been a few weeks since writing one of these, sothere's quite a bit to catch up on. There may have been no dev log published, but

http://phaser.io/community/donatehttps://www.patreon.com/photonstorm

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 since3.17 dropped because a few annoying issues wormed their way into 3.17 thatneeded addressing quickly. I'll talk in more detail about what 3.18 changes, butfirst, 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 theInput API back in 3.16. Prior to this, input worked on an event queue and nativeDOM events would be placed into the queue, waiting for the next game step to beprocessed. While this worked well and kept things consistent, it also meant wehad to hack our way around browser security issues (with code not running innative DOM callback handlers, i.e. opening a new browser window from aPhaser input event), and it also meant there was a delay between the DOM eventhappening 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 immediatemode. Where-by the DOM events filtered directly through to their Phasercallbacks without any queue. In 3.17 this was refined a little further, but still, bothsystems were in place, living and arguing together inside the API like twosiblings.

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 removalof a huge chunk of code from the input API, which is always good. And moreimportant, it has meant I've been able to streamline the process a lot. There arenow far less jumps between the native DOM event coming in and it reaching yourPhaser Game Objects, making it faster and more responsive.

This means a large number of internal API changes in 3.18. On the surface, thepublic API hasn't altered all that much, but if you author plugins that use the inputsystem then you should take time going over the Change Log to see exactlywhat 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 somenew features. Here are a few of them.

https://www.npmjs.com/package/phaser/v/3.18.0-beta1

Mouse Wheel Support

Starting in 3.18 you can now listen for Wheel events coming from the mouse, orsimilar input pointer. They can be extremely handy for in-game UIs, such asscrolling 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 newevent.

The first is `POINTER_WHEEL`, which is dispatched on a global level from theInput Plugin itself. This is handy if you're using the wheel to scroll a backdrop orcamera, such as in the example below:

The second event is `GAMEOBJECT_WHEEL`. This event is again dispatchedby the Input Plugin, but only if the wheel event occurs over an interactive Game

http://labs.phaser.io/view.html?src=src%5Cinput%5Cmouse%5Cmouse wheel.js&v=147

Object. It's not picky about which object that is, so long as it's interactive and inthe current Scene.

The final event is `GAMEOBJECT_POINTER_WHEEL` which is dispatched bythe Game Object itself. This is the event you want to use if you wish to listen forwheel actions taking place over a specific Game Object, such as in the examplebelow:

When a wheel event is dispatched it will send the delta values created by thenative DOM event to your handler. You'll get the x, y, and z delta values, so youcan react based on horizontal, vertical or Z-axis movement accordingly. It'sworth noting that different input devices, OSs and browsers can give you differentresults inside of these values, so if you're going to use the wheel, test, test andtest your game!

http://labs.phaser.io/view.html?src=src%5Cinput%5Cmouse%5Cmouse wheel over gameobject.js&v=147

Window Events

A few versions ago the input API changed so that Phaser now listens for DOMevents on the browsers window object, as well as on the canvas. There is a verygood reason for this, but it also has some side-effects that you should be awareof, along with a way to disable it from happening.

One of the biggest issues I kept seeing reported over and over was with the InputAPI getting 'stuck' because the user had moused-down inside the canvas, thenmoved the mouse outside of the canvas and then released it. Perhaps onpurpose to try and click something else on the page, or maybe because thegame 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 thatwas currently 'down' within Phaser kept on thinking it was down. This didn't getreset until the player then moused back over the game again, and clicked oncemore, resetting the points state.

The opposite was also true. If the player was to mouse down outside of thecanvas, 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 backin sync again.

Although Phaser was technically doing nothing wrong, it still felt wrong to the enduser, hence the issues and bug reports being filed. The reason it happened is thatPhaser only listened for DOM events on the canvas object itself.

To combat this issue Phaser now listens for input events both on the canvas andon the window. If you mouse-up while outside of the canvas, Phaser now knowsabout this and reflects the change instantly in the Phaser Pointer. The oppositeworks as well. In the window handler Phaser would never call `preventDefault` onthe event, it would only listen to it, meaning it would still happily trigger for anynormal DOM elements on the page, so it wasn't an invasive action. All in all, itnow 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 isexactly what you'd expect and want your game to do, there is a use-case whereit causes a problem and this occurs when you have DOM Elements positionedover the top of your game canvas. In this situation, the window listener would firewhen you interact with the DOM element, and because it's over the canvas, itwould potentially cause a mouse down event within your game too.

In this specific situation it may be beneficial to disable the window listenersentirely, 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 thisflag to save on some additional processing, if your game runs full-screen and fillsthe entire browser window, i.e. when there is no other 'window' space for anevent to even occur on. Mostly though, you'll want it left on, which is why it'senabled by default.

Full Multi-Touch Support

Another nice side-effect of dropping the old queue event system is that 3.18 nowhandles multi-touch events fully. Previously, you may have noticed that thingslike 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 allchanged and now any pointer, from any finger, no matter how many others arepressed down, dispatches all the same events as any other.

This means you can happily have all fingers dragging Game Objects around, ordrawing in a multi-touch paint app, or tapping away furiously, with no limitationsany longer (beyond the number of fingers you physically posses!). If you're on atouch-device, try the following touch demo out:

It may not be the grandest of pianos ever, but hopefully, you can still hear theresults of proper multi-touch over support!

There's still some more work to be done on 3.18, specifically a few more input apiupdates (such as the rightButton handling) and finishing off the Spine plugin. Evenwith those needing to be done, I'm still confident we can release within a weekand then set my sights on 3.19.

http://labs.phaser.io/view.html?src=src%5Cinput%5Cmultitouch%5Cmulti touch test.js&v=147

The June Code Bundle is now out for everyone who supports Phaser on Patreonor via PayPal. This month the bundle includes:

▪ 13newshadersforuseinyourgames(theseareallbundledintothesingle'shaderbundle'example.

▪ 2

https://www.patreon.com/photonstormhttps://www.patreon.com/photonstorm

reallyniceshadermaskeffects(swirlandwave),bothofwhichcanworkonanyimageandareeasytoedittheglslsourcefortoo.

▪ AfunlittletweeneffectIcalltheJellyTween.Byjusttweakingthescaleandpositionofanobject

youcanmakeitlooklikeit'sstretchygumordancing:)

▪ TheToasterisademoofusingtwotightlystrungmatterconstraintstoholdabodyinplaceandwhathappensifyouthendestroyoneofthem!

▪ TheBowandArrowexamplesare

3examplesthatshowtheevolutionofabowandarrowphysicsgame.Inthefirstiteration,youcanclickanddragbackonthebow,withthebowrotatingtothemouseandthedrawstringpullingbackrealistically.Allthebowdataisexposedand

thenusedinthesecondexample,whichcreatesanarrow-shapedmatterbodyandlaunchesit.Windfrictionisappliedtothearrowinordertokeeptheflightrealistic(withinreason!)andyoucanstickthearrowintotheground.Inthefinalversiontargets

areaddedandyoucanshootarrowsintothematwill:)Thecodeincludesshowinghowtodetectwhichsideofthetargetishit,howtonotallowthearrowtostickshouldtheangleorspeednotberightandthiscouldeasily

beevolvedintoafullgame.

▪ ThefinalexampleisBankPanic-whichisactuallycompletegame.You'llseeIsplitthecodeupintodifferentScenes,ratherthanlumpingitalltogether,soyoucanworkthroughitmoreeasilyandseehowBoot

leadsontoPreloaderandsoon.Thegameisaclassicone:shootthebandits,notthecivilians,astheytrytorobthebank!Thereareevenamusingsoundeffectstogowithitall:)Lookthroughthesourcecodetoseehowit

allworks,Ileavecommentsinallovertheplaceandusepropertiesandmethodnamesthatshouldbeeasytodigest.

If you support Phaser today, you can download the pack instantly, along with allpreviously released packs too.

TEXTREME is an extremely meaty text editor. If you can survive not having aheadache after a few minutes use :)

Next-Generation 3D Graphics on the Web. This video from Google IO 2019shows 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 ReleasesPhaser 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 support@phaser.io or tweet us.

Missed an issue? Check out the Back Issues page.

https://le-von.itch.io/textremehttps://www.youtube.com/watch?v=K2JzIUIHIhchttps://straker.github.io/kontra/https://github.com/photonstorm/phaser/https://github.com/photonstorm/phaser-cehttps://github.com/photonstorm/phaser#supportmailto:support@phaser.iohttps://twitter.com/phaser_http://phaser.io/community/backissues

©2019 Photon Storm Ltd | Unit 4 Old Fleece Chambers, Lydney, GL15 5RA, UK

Preferences Forward

mailto:support@phaser.iohttps://github.com/photonstormhttp://twitter.com/photonstormhttps://go.madmimi.com/subscription/edit?pact=0-0-0-864282bb90492c26bd775b6a23655313fd13d23d&amx=0https://go.madmimi.com/forward/0-0-0-864282bb90492c26bd775b6a23655313fd13d23d?pact=0-0-0-864282bb90492c26bd775b6a23655313fd13d23d&amx=0https://madmimi.com/?

The Phaser Stickers are back!The Latest GamesWhat's New?Help support PhaserDev Log #147

3.18 Beta 1Rewriting the Input APIMouse Wheel SupportWindow EventsFull Multi-Touch SupportPhaser Releases