games made with phaserphaser.io/images/newsletter/pdf/issue73.pdfan interesting mix of the classic...
TRANSCRIPT
Welcome to Issue 73 of Phaser World
Happy Friday everyone! It's fair to say I'm in a really good mood after a full weekof Phaser work. I got to play a load of great games and add them to the site (Mr.Molotov being an insane favourite!), you have all been making awesome tutorialsand plugins, and I packaged up and released Phaser CE 2.7.4. We've beenworking really hard on Phaser 3 too, as all the demos this week will atest to. Ourvelocity feels great right now, and thank you to all the backers who make thispossible.
Until the next issue, keep on coding. Drop me a line if you've got any news you'dlike featured (you can just reply to this email) or grab me on the Phaser Slack orDiscord channels.
Games made with PhaserMr. Molotov Man
Game of the Week One Man. Infinite Molotovs.
Zafu
Staff Pick A minimal and addictive cushion stacking game foriOS!
Kupiter
An interesting mix of the classic game Asteroids withan educational study tool.
Long Lines
The latest game in the Game52 project, one game perweek for a year, is a line based puzzler.
Click Don't Blink!
Click the characters to repeat the sequence ofsounds and movement. Click, don't blink!
Phaser News & TutorialsPhaser CE 2.7.4 Released
After several months of hard work, with loads of newfeatures and updates, we have published the latestversion of Phaser Community Edition.
Underline Text Plugin
Seamlessly adds in the ability to underline text in aPhaser Text object.
Emitter Debug Plugin
Easily visually debug a Particle Emitter with this handyplugin.
Deck of Cards Tutorial
The first part of a new series about creating cardgames in Phaser, in this part: deck management.
Drag and Match Update 3
The Drag and Match engine is updated with a validmove feature and movement undo.
Drag and Match Update 4
The Drag and Match engine update is completed withobject pooling, removable tiles and combos.
Game Dev 101 Course
A day long web based game development course heldin Manchester, UK.
Patreon Updates
Thank you and welcome to the following awesome people who joined the PhaserPatron this week: Matt, Ahmed Khalifa and Mihail Ilinov. Thank you to ChaseNoel for increasing their pledge, and to 刘刘 肖毅肖毅 for the kind donation.
It's worth mentioning that Patreon backers are entitled for free support time fromme via Slack or Skype. Lots of developers have taken advantage of this since Istarted it. So if you're a patron (or have donated via PayPal) and you'd like to pickmy brains about a Phaser specific issue, or get some help, then please do useyour support time! Just email me or get me on Slack to arrange it.
Patreon is a way to donate money towards the Phaser project on a monthlybasis. This money is used entirely to fund development costs. You can alsomake one-off donations via PayPal. Donations receive discounts, forum badges,private technical support, and the eternal gratitude of the Phaser team :)
Development Progress
Ok we've got a huge update for you this issue, so let's get started!
First of all I published Phaser CE 2.7.4, and.. ahem.. 2.7.5 an hour later, due to aPR I'd merged that broke the runtime, which I hadn't spotted. You can get thelatest release from the Phaser site, GitHub, npm or jsDelivr. There are somegreat new features, including the ability to stop Pointers being paused, tile offsets,FireFox image cache bug fixes, and loads of TypeScript definition updates. It'sgreat to see the community carry on enhancing Phaser 2, and we will continue tomerge in PRs and help as we can in the coming months.
Phaser 3 UpdatesAs I mentioned last week I'm now working on Phaser 3 full time, having given upclient work for the next 3 months to give it the dedication it needs to see itreleased. I still have to manage the company, update the Phaser web site, dealwith support, write the newsletter, and all the usual tasks - but on the whole it hasmeant a lot more time for working on v3, as well as making new examples andtests.
How to edit the demo code
This week is heavy on the demos. I've linked each screen shot to its respectivedemo, so click them to see them running in browser. But one thing you may wantto do is this: In the URL of a demo you'll see it says view.html (followed by thequery string). If you change it to say edit.html instead you'll get the Monacoeditor running in browser, with the source loaded in it, and a preview to the right.Here you can edit and click 'Run code' as much as you like to tinker around. Ofcourse you can also clone the whole phaser3-examples repo too, but the aboveis a nice quick way to have a play. And now on with the updates.
LayersLayers are new to Phaser 3 and act in a similar way to layers in Photoshop, inthat you can use them to group together Game Objects, and then perform massvisual updates on them, such as changing positions, rotation, scaling, etc. Anexample may be sticking all the aliens in a Space Invaders game into a layer, andthen using the layer methods to move the aliens left / right. In Phaser 2 you hadGroups, but these were both visual and logical containers, where-as a Layer ispurely a visual container. We will be adding Groups as well, which will be purelylogical containers, soon.
It's important to understand that the Layer itself doesn't have a transform - whenyou add a Game Object to it, it doesn't suddenly reparent the Game Object, orhave its transform adjusted to become local to the layer, instead it just becomes achild of the layer and anything you do to the layer is reflected in the children.
We're sticking to our internal rule of having a single level display list, keeping itfast and lean, but still want to provide really useful tools that will let you makegames easily, and we honestly feel Layers will do just that.
Oh FlipThis is a simple but really useful addition: we added the ability to flip GameObjects. Just set 'sprite.flipX' to horizontally flip a sprite, or 'flipY' to vertically flipthem. The effect is instant and handled by the renderer. In v2 you could achievethis by setting a negative scale, and we've kept support for that in too (we knowold habits die hard!) but feel this is cleaner and will be more obvious in the APIdocs too.
Depth SortingLet's be honest, doing depth sorting in Phaser 2 is bloody hard, right? It's easyenough if you've got a very simple scene, as you can move objects up and downthe display list. But as soon as you introduce something like a few Groups, or aTilemap, things get a lot more complicated. This is a problem inherent withtraditional deeply nested display lists, and often requires special handling orplugins to get around.
In Phaser 3 however things become a whole lot easier, you simply set the GameObjects z property. This can take any number value (including floats), making ittrivial to match the z depth to a y value for example. And it doesn't matter if yourobjects are in different Layers, it will still work. Sorting only happens if a z propertyis updated during a frame, so we don't waste time changing the render list if wedon't need to. We're also using a stable sort utility function to handle it, rather thanthe unstable Array.sort method, to avoid those nasty flickering messes that canoccur. The end result is fast, and if you've clicked the mushrooms in a field of vegimage above, can look beautiful too!
Do you remember a couple of weeks ago, when I was messing around withwireframe 3D objects? (if you missed it, scroll to the bottom of this issue for theBack Issues link), well they are a perfect test for depth sorting that doesn't justrely on a y value. So I took one of the wireframe demos and threw a load ofsprites into it, one for each vertex in the shape, and kept the quad lines in toobecause they looked cool :) You can see it running here:
If you press the space bar while running the demo above it will cycle throughdifferent 3D shapes. The z values are being populated by the internal 3D data.The Graphics object itself (i.e. all of the green lines) also has a z index, althoughonly at one depth, which is how the balls can appear 'behind' the lines sometimes.Ideally the demo should have made the balls darker the further away they were,that would help with the depth illusion, but I ran out of time - feel free to have a gothough and submit a PR :)
After getting Phaser CE released yesterday I felt the need to try another type ofdepth sort demo. I'm thankful I did, because in the process we found an issue inour implementation which was then fixed :) but it occurred to me that a really goodtest of depth sorting is isometric maps. Now v2 has no support for iso maps at all(beyond a really neat community plugin), so I quickly exported a test map fromthe Tiled map editor, had to read-up on parsing the map data in order to build theworld, and then threw it together. I was surprised at how nice the end resultlooked! And how quick it was to do. But to complete the demo I wantedsomething walking around the map. I went to OpenGameArt, found a link to anopen source RPG game (called Flare) and found a really nice animated skeletonisometric sprite. I took this, added it into the map, and was blown away :) Here's ascreen shot (again, click it to run it) - note it's not likely to work on mobile at allbecause the skeleton sprite sheet is massive (some 4096px wide), so it may notactually load on crappy old GPUs either, but otherwise give it a go!
In the above example you've got an isometric map exported and parsed fromTiled, with a few house sprites (of course with their own z depth), and a bunch ofanimated skeletons walking around, fighting, and generally doing skeleton likethings. Finally the camera pans across the 1600px wide scene and back again.
If you look at the code you'll see I'm using a tween engine to handle spriteanimation! This is because the Animation Manager isn't finished yet (it's on mylist for next week), but otherwise it's a pretty clean example to have a scrollthrough. Feel free to add in your own skeletons (lines 190+).
So it's been a good week for sure, and this doesn't even cover everything we did(just the stuff worth demoing). Next week Felipe is working on the postprocessing engine, so we can apply cool special effects in the renderer, and I'll becarrying on with the Animation Manager. Hope to show you lots more eye candynext week too :)
If you're a patron, or have bought any of our books or plugins, then thank you! Itis what's helping us both work on this full time right now. I'm constantly beingasked when v3 will be released, and I still can't give a solid answer to that, butwhat I can say is that it genuinely feels like we're making awesome progress on avery regular basis, and that we're building a really solid and tidy internal structure.There is lots more work to be done of course, but it's an exciting journey for sure!
Phaser 3 Mailing List and Developers GuideIf you're interested in helping evolve the shape of Phaser 3, then please join thePhaser 3 Google Group. Discussions this week have included varying renderloops. The group is for anyone who wishes to help shape what the Phaser 3 APIand feature-set will contain.
The Phaser 3 Developers Guide is available. Essential reading for anyone who'dlike to help build Phaser 3.
Geek Links
I'm used to seeing amazing stuff on ShaderToy, but this was something else. Arecreation of a scene from the game Journey, all in a shader. Stunning.
Keep the Keep is a strategy game that sees you defend a Keep under siege byhordes of nasty little creatures! It's in Steam Greenlight, so please give it a vote ifyou like the concept as much as me.
Color Fonts are gaining strength, and I think we'll soon see them all over the web.Think of a normal font file, but with enhanced graphical data, and you get somebeautiful results.
Phaser Releases
The current version of Phaser CE is 2.7.5 released on March 23rd 2017.
Phaser 3.0.0 is in active development in the GitHub v3 folder.
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.
©2017 Photon Storm Ltd | Unit 4 Old Fleece Chambers, Lydney, GL15 5RA, UK
Web Version Preferences Forward Unsubscribe