Welcome to Issue 133 of Phaser World

Web Version Unsubscribe

It's good to be back in the land of newsletters after a short break. There's quite abit of development news to catch-up on, new games to play, new tutorials to readand the Phaser stickers have been flying out the door, so grab some while youstill can! :)

This is a pretty long issue, as I had a lot to cover. If your mail client truncates it,please do read it on the web so you don't miss anything!

Until the next issue keep on coding. Drop me a line if you've got any news you'dlike featured by simply replying to this email, messaging me on Slack, Discord orTwitter.

Phaser Sticker Packs nearly sold out!

Over the past few weeks, I have been frantically shipping the Phaser stickerpacks to everyone who pre-ordered them. There have been some great photoson Twitter of Phaser stickers stuck to laptops and such-like :)

I have around 50 packs left and then I'll be sold out. Anyone ordering duringDecember will also get a free Phaser badge and a new pixel-art sticker too(those who pre-ordered got free Christmas cards and extra stickers thrown intheir packs!)

Click here to order a sticker pack.

The Latest Games

Game of the Week Fireboy and Watergirl Take control of the two titular heroes as they venture into the Crystal Temple on agem grabbing, puzzle infested quest.

Staff Pick Math Mahjong Relax This is a traditional solitaire game where you must take apart the constructionmade of dice.

Tap Tap Plane Just tap to keep your plane in the air, collect the stars and unlock the introsequences.

Booster Space The asteroid survival game! Can you take out the other players and the rocks inthis space blasting IO game?

Beehive Blitz The hive is buzzing and the bees are working furiously as they try to completetheir jobs by sundown!

What's New?

Retro Highscore Table Tutorial A new multi-part tutorial on creating a retro styled high-score table in Phaser 3with modern inputs.

Circle vs. Line Segment Tutorial A short but useful tutorial on handling circle to line segment intersection in yourgames.

Phaser UI Tools A set of powerful Phaser 3 plugins for creating UI components such as scrollbars, text buttons and more.

Facebook Instant Games Leaderboards Tutorial Learn how to create and use Leaderboards with the Facebook Instant GamesPlugin for Phaser 3.

Circular Endless Runner Tutorial Learn how to create a circular endless runner in part one of this new tutorialseries.

Down the Mountain Tutorial Part 2 In the second part of this series the prototype is updated so the jump is handledusing cubic bezier curves.

Making Games in Phaser 3 - Part 2 A video overview of Scene's in Phaser 3 and what they can do.

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.

Back the Phaser projectBecause 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. It's part of our manifesto thatthe core framework will always be free, even if you use it commercially, as manyof you do.

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

Those funds allow Phaser to improve, and when it improves, everyone involved

benefits. Your support helps secure a constant cycle of updates, fixes, newfeatures 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 permonth. The amount you pledge is entirely up to you and can be changed as oftenas you like.

Patreon renews monthly, just like Netflix. You can, of course, cancel at any point.Tears will be shed on this end, but that's not your concern.

All Amounts Matter

Traditionally, the Patreon platform promotes the concept of "the more you pledge,the more rewards you get". Their whole system is geared around this. I felt,though, that for something like open-source support it was time to level theplaying field. This is why all rewards are available to everyone, regardless of howmuch they pledge. There are a couple of exceptions, which I outline on thebackers page, yet to me, this felt like the fairest approach to take.

If you're able to be a higher tier backer, then I cannot stress enough how much Ithank you for that. Please don't feel that your contribution is undermined in anyway. At the end of the day, the money is being used to keep development ofPhaser going, and that will never falter. This move is about making everyone feelequally rewarded, regardless of financial ability. Equally, if it's at all possible toslightly increase your pledge at some point, there are now lots of more minor-increase tiers you can explore.

Backer Perks

▪ BackersNewsletter(dueearlyDecember)

▪ ExclusiveBackersExamples(firstbatchareoutnow)

▪ PrivateDiscordChannel

▪ One-on-OneTechnicalSupport(timerestrictionsapply,seepage)

▪ FreecopyofInterphase1

▪ EarlyAccesstonew

Tutorials▪ Early

AccesstonewBooksandPlugins

▪ ForumBadge

▪ PhaserLaptopStickers

▪ RoadmapRoundTable

▪ PromotionandAdvertisingforyourgamesorproduct

▪ SpecialOffers

Please help support Phaser on Patreon

Full details about the perks can be found on the Phaser backers page.

Thank you to these awesome Phaser Patrons who joined us recently:

Alex Otten Braelyn Sullivan Charles Torris Code For All, Lda

Container7 Daniel Romero Danny Ralde Đạt Đặng Quốc Dibas Baral Eric Theofanis Fabio Rogerio da Silva Jose Feng Li Gaku George Butter Ilya Tepeyolotich Jack M Jalmari Ikävalko James Lenoble James Pierce Jerome van den Heuvel Jf Fj Just Cooking Show Kate Kligman Katherine Brennan Kristian Dorland Lars Mathiasen Marcel Jolaoso MegaApple_Pi NecoDoS Noel Oszkar Biro Pablo Martínez Merino Paolo Di Stefano Paul Roberts Richard Searle Richard Sopuch Rudra Softtech LLP Saul Ignacio Ibarra Arce Saul Martínez Sergio Lopez Stephen Gose SUNG UK JANG Tamas Varga Tristsoalaire Vignesh S Vladimír Novák

Yaroslav Mykhalchuk Yutsi

Thank you to the following for increasing their pledges:

Scott McFarlane James Skemp Kristian Koivisto-Kokko

Also, thank you to Omer Gunduz and Satege s.r.o for the donations.

Dev Log #133Welcome to the first Developer Log in a few weeks. I took some time away fromthe newsletter to catch-up with other tasks, do some learning of my own (I'vebeen addicted to VueSchools videos!) and just have a bit of a break from therelentless news and editing cycle. But, that doesn't mean development of Phaseritself stopped. Far from it, in fact. There's quite a bit of ground to cover, so let'sget stuck in!

Phaser 3 Doc Jam is over!

Thank you to everyone who took part in the Phaser Doc Jam! I've now finishedimporting the last batch of comments into the code and it has bought the totaldown from 3,452 items left to document, to under 800. Which is a fantasticachievement for a few months of community effort.

As promised, I picked 6 who contributed the most towards the documentation, toreceive the Amazon gift vouchers. Those are as follows:

▪ @telinc1▪ rootasjey▪ ajmetal▪ cyantree

▪ ElliottWallace

▪ STuFF

Again, thank you to everyone who took part. You've helped make a real dent inthe documentation and we're closer than ever to being fully complete.

Phaser 3.16 Development

One of the side effects of working on the new Scale Manager is that because it'ssuch a massive system, it touches upon a lot of areas within Phaser. One ofthose is, of course, the Input system. After all, it's essential that input still works,no matter how the game is scaled. While working in the Input Manager I took theopportunity to improve a number of things.

Get to the Point

The first was that I wanted you to be able to detect when a pointer left the gamecanvas. This was previously half-implemented, but you had to listen to an eventcoming from the Game instance itself, and it only worked for the mouse.Responsibility for this has now moved away from the Visibility Handler to theInput Manager, as it should be. There are two new events: `gameover` and`gameout`, both of which come from the Input Plugin in a Scene, which meansyou can listen for them with this code:

This gives you a chance to react to the primary pointer leaving your game. Whatyou then do with that information is up to you, of course. It's worth noting that thepointer doesn't have to have left the game canvas bounds, it just isn't directlyover the canvas DOM element any more. This means that if you were to open-upa DOM based overlay for your game, like an advert or text input field, that itwould still fire a `gameout` because the pointer ain't in cansas any more (as thefocus has been taken by the new DOM element).

I also added two more events, which are related to this: `pointerupoutside` and`pointerdownoutside`. As you can infer from their names, they are dispatched ifthe pointer is released, or pressed down, while outside of the game canvas.Internally, a pointer will no longer think it is 'up' if you press it down on your game,then drag outside the canvas, and release it. Which I know had been a source ofconcern for some of you. I didn't want it to dispatch the usual `pointerup` event,though, because it's a much more specific action that has happened.

Hence the creation of the new events for dealing with pointers outside thecanvas. To go with these events the Pointer class gained the following newproperties: `downElement` and `upElement`. These hold a reference to the DOMelement on which the pointer was pressed down, or released. In normal activity,i.e. someone playing your game, they will both just be references to your gamecanvas. However, if someone presses down while outside your game, you cannow check these properties to see what it was they clicked on. This should comein handy if you want to create an external DOM driven UI layer, for example.

Pointer Gestures

While working on an example for the Phaser Backers on Patreon, I was asked if Icould show how you 'throw' a Game Object, by swiping on it. I had wanted to addin Gestures to the Phaser Input system for a while, so I figured it would makesense to try and kill two birds with one stone. In theory, all it would require is for aPointer to keep track of its velocity. From that, you can pretty much determineany gesture you like.

This should be trivial, I thought. After all, to calculate it all you need is thedifference between the Pointers current and previous position, right? Indeed if youdo any research on this matter online, that's exactly what all the implementationssuggest you do. So I added a naive velocity property based exactly on this.Strangely enough, it utterly sucked. In order to 'throw' something you need to getthe velocity at the point at which the mouse button (or finger) is released. As it'sthe release that indicates the user wishes to fling the object. The speed at whichthey were moving just prior to the release determines the velocity it gets thrown

at.

The issues with using a velocity based on just the previous position were two-fold. First, the browser samples DOM input events at a pretty high rate. And bytheir very nature, they're noisy as hell, too. What this means is that the data youget from the pointer positions is often all over the place, as it's sampling at such ahigh rate. In testing I found that most of the time when I released the mouse to'throw' my object, the pointer had a velocity of zero. This was because when youmove your mouse, it moves pretty fast, but when you release a button your handis in the act of releasing the button and is usually no longer moving the mouseany more at all. It might only be a split second this happens (that your mouseremains still as you release the button) but that's all it needs, as the inputsampling is so high. As far as the Pointer was concerned, it had stopped, so ithad no velocity at all. Which isn't much use for throwing things.

It was possible, with practise, for me to time the button release while still moving.But, it felt unnatural, and the results were inconsistent. A new approach wasrequired. My immediate thought was to increase the sample rate. So, instead ofbasing velocity on just the previous frame, instead I'd record a short movementhistory and calculate it from that instead. This presented it's own problems,however. How long should the history be? If the sample rate was too large, itwould take too long for the velocity to catch-up and would 'lag' behind thePointers true speed. If it was too short, it suffered the exact same problem as

before. Plus there was the issue of recording the history every movement, whichrequired array manipulation that I really didn't want to be doing in a potentially hotarea of code.

I spent quite a while working through different ways of handling this. Phaser 2 hadused the history array approach, but I was determined there was a bettersolution. What's more, each solution I tried varied from platform to platform.Using a high precision Steel Series mouse on my main work PC gave verydifferent results to using the trackpad on my Macbook, which in turn gave verydifferent results to using an iPad. Our hands just work differently in differentenvironments. Who'd have thought?! :)

Finally, I decided to flip the problem on its head. It was no longer about recordingthe history of the Pointer positions, but instead about using just the currentposition to influence a hidden vector that each Pointer maintained. Think of it as a'ghost' trailing the Pointer. This ghost is constantly chasing the Pointer, seekingthe Pointers last known position every frame until it finally gets there. It's nevertoo far behind, but just enough that we're able to read the data we need from it toget the angle of movement, the speed and the distance travelled. All variables weneed to calculate gestures and throwing motions. The ghosts path is also passedthrough a Smooth Step interpolation, to reduce the noise inherent in pointermotion.

You can now access all of the following values on any Pointer instance, from anyinput event:

▪ `Pointer.smoothFactor`isafloat-valuethatallowsyoutoautomaticallyapplysmoothingtothePointerpositionas

itmoves.Thisisidealwhenyouwantsomethingsmoothlytrackingapointerinagame,orareneedasmoothdrawingmotionforanartpackage.Thedefaultvalueiszero,meaningdisabled.Settoasmallnumber,suchas0.2,toenable.

▪ `Config.inputSmoothFactor`is

anewpropertythatallowsyoutosetthesmoothingfactorforallPointersthegamecreators.Thedefaultvalueiszero,whichisdisabled.Setinthegameconfigas`input:{smoothFactor:value}`.

▪ `Pointer.velocity`isanewVector2thatcontainsthevelocityof

thePointer,basedonthecurrentandpreviouspositions.Thevelocityissmoothedouteachframe,accordingtothe`Pointer.motionFactor`property.Thisisdoneformoreaccurategesturerecognition.ThevelocityisupdatedbasedonPointermovement,itdoesn'trequireabuttontobepressedfirst.

▪ `Pointer.angle`isanewpropertythatcontainstheangleofthePointer,inradians,basedonthecurrentandpreviouspositions.Theangleissmoothedouteachframe,accordingtothe`Pointer.motionFactor`property.Thisisdoneformoreaccurategesturerecognition.Theangleisupdatedbased

onPointermovement,itdoesn'trequireabuttontobepressedfirst.

▪ `Pointer.distance`isanewpropertythatcontainsthedistanceofthePointer,basedonthecurrentandpreviouspositions.Thedistanceissmoothedouteachframe,accordingtothe`Pointer.motionFactor`property.Thisisdone

formoreaccurategesturerecognition.ThedistanceisupdatedbasedonPointermovement,itdoesn'trequireabuttontobepressedfirst.

▪ `Pointer.motionFactor`isanewpropertythatcontrolshowmuchsmoothingtoapplytothePointerpositionseachframe.Thisvalueispassedtothe

SmoothStepInterpolationthatisusedtocalculatethevelocity,angleanddistanceofthePointer.It'sappliedeveryframe,untilthemidPointreachesthecurrentpositionofthePointer.Thedefaultvalueis0.2.

▪ `Pointer.time`isanewpropertythatholdsthetimethePointer

waslastupdatedbytheGamestep.

▪ `Pointer.getDistance`hasbeenupdated.Ifcalledwhileabuttonisbeinghelddown,itwillreturnthedistancebetweenthePointer'scurrentpositionandit'sdownposition.IfcalledwhenaPointerdoesn'thaveabuttondown,itwill

returnthehistoricdistancebetweentheupanddownpositions.

▪ `Pointer.getDistanceX`isanewmethodthatwillreturnthehorizontaldistancebetweenthePointer'spreviousandcurrentcoordinates.Ifcalledwhileabuttonisbeinghelddown,itwillreturnthedistancebetweenthePointer'scurrent

positionandit'sdownposition.IfcalledwhenaPointerdoesn'thaveabuttondown,itwillreturnthehistoricdistancebetweentheupanddownpositions.

▪ `Pointer.getDistanceY`isanewmethodthatwillreturnthehorizontaldistancebetweenthePointer'spreviousandcurrentcoordinates.If

calledwhileabuttonisbeinghelddown,itwillreturnthedistancebetweenthePointer'scurrentpositionandit'sdownposition.IfcalledwhenaPointerdoesn'thaveabuttondown,itwillreturnthehistoricdistancebetweentheupanddownpositions.

▪ `Pointer.getDuration`is

anewmethodthatwillreturnthedurationthePointerwashelddownfor.IfthePointerhasabuttonpresseddownatthetimethismethodiscalled,itwillreturnthedurationsincethePointer'swaspresseddown.Ifnobuttonishelddown,

itwillreturnthelastrecordedduration,basedonthetimethePointerbuttonwasreleased.

▪ `Pointer.getAngle`isanewmethodthatwillreturntheanglebetweenthePointercoordinates.IfthePointerhasabuttonpresseddownatthetimethismethodiscalled,it

willreturntheanglebetweenthePointer's`downX`and`downY`valuesandthecurrentposition.Ifnobuttonishelddown,itwillreturnthelastrecordedangle,basedonwherethePointerwaswhenthebuttonwasreleased.

Which is quite a lot! You have full control over this. If you don't want anysmoothing at all, you can disable it from a single config property. If you find youwant things smoother (perhaps you're making an art package and needsmoother brush movement?) then you can increase it, too. I'm very happy thatthese new properties will allow you to make any type of gesture you need and bepretty creative when it comes to pointer input in your games.

Using the new features in 3.16 I created a Pointer Monitor class, which you cansee below:

The idea is that you create a Pointer Monitor in your code and then it can listenfor swipe events. Meaning you can do this:

And all of a sudden, you've things being swiped and thrown all over the place :)The full code for this specific example is available today for Phaser backers onPatreon and will be released into the public domain in a few months time.

3.16 has also gained a really neat new blend mode called 'ERASE', which I'llcover with full examples next issue. I'm still working on packaging up a finalrelease, but there's still quite a bit to do before I'm happy with it. Part of me istempted to release it 'as is' just to get it out into the wild, but I'll make a firmerdecision on that towards the end of this week.

In the meantime you can find all the latest code in the master branch on GitHub.Every new feature being added and every bug being fixed, is of course free andpublic and you can test them all out right now if you don't want to wait for a finalrelease :)

This 16x16 Top Down Dungeon Set by s4m_ur4i is just lovely and a completesteal at $1.50 for 180+ sprites!

How to make a Roguelike is a truly massive article on creating rogue-likes, bestpractices, and innovation in the field.

Moon footage, sped-up, with techno music. It goes extraordinarily well :)

Phaser ReleasesPhaser 3.15.1 released October 16th 2018. Phaser CE 2.11.1 released October 2nd 2018.

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.

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

Preferences Forward