Newsletter
Welcome to Issue 144 of Phaser World
Today, April the 5th 2019, Phaser is exactly 5 years old. Yes, today is the birthday of my little game framework - and wow, what an exciting 5 years it has been! Read this issues Dev Log for more.
The game CATS, from the creators of Cut the Rope, has been a massive success with over 100 million players of the mobile app. So when they bought it to Facebook Instant Games it was a thrill to see it created in Phaser :) Add to that the release of a brand new Codecademy Phaser Course (they've over 45 million leaners on their platform!) and it's really quite humbling to see Phaser getting used and covered like this.
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 Latest Games
Game of the Week
The hit mobile Crash Arena Turbo Stars game comes to Facebook Instant Games. Build the best fighting machine and become the star of the arena!
Staff Pick
Make new friends on the train ride home across Tokyo. Take selfies to rack up points while trying (not) to annoy your cute fellow passengers.
Staff Pick
Click to advance your brave dwarf warrior along the Bridge of Doom! Fending off goblins, spikes and more on your way.
Classic, fun and entertaining bubble blasting gameplay with lots of variations and game modes on offer.
A one-button platformer. Jump and bound your way around the pixel-art dungeon to get to the exit.
What's New?
Codecademy have just launched their first two Phaser courses covering the creation of several games spread over 4 hours worth of content.
Phaser Backer Examples April 2019
The April Phaser Backer Examples are now available including the new Phaser 3D class and no less than 34 examples.
Enter your own message and then run along a Mario level, hitting the blocks, to reveal it!
Facebook Instant Games In App Tutorial
A brand new tutorial covering setting-up in app purchases in Facebook Instant Games.
Phaser Backer Examples March 2019
The March Phaser Backer Examples are now available including a fully documented Virtual Joystick Plugin and lots of examples.
Getting Started with Phaser Part 3
Part 3 of the animated video series on getting started with Phaser 3, this time using Game Objects.
Creating a Multiplayer Phaser 3 Game Tutorial
A tutorial on creating a simple multiplayer game with Phaser 3 and Socket.io, with Phaser headless running on the Authoritative Server.
Grow a square so it will fit perfectly into the hole in this code-based tutorial.
How to create an Endless Runner style game using just a few lines of code and Arcade Physics.
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:
Björn Liebke
Daniel Cramp
Eddie Ward
Ibnu Triyono
James Albright
Jeff Cigrand
Jeffrey Revesz
Jens Nilsson
Kevin Whinnery / Twilio
Lee Davies
Matthew Gicquel
Robert Downey
Sathyaraj Shettigar
Scott
Simon Ralfe
Sten Roemaat
Also, thank you to Arian Fornaris for his donation :)
Dev Log #144
Happy Birthday Phaser!
On April 5th 2013 I started work on the very first version of Phaser. A couple of weeks later, on April 12th, version 0.5 was pushed up to GitHub and the rest, as they say, is history. You can read all about the very first version and see it running in this article, which I wrote back when it was celebrating turning 3. Today, however, marks the 5th year anniversary of Phaser. Yup, our little framework is growing up!
I recently saw this tweet that warmed every inch of my heart. In it, you can see a class of students who were being taught game development as part of the Primary & Vocational Education GameDev Project in Spain. Laptops covered in Phaser stickers are fun enough for me to see, but the thought of those kids being taught how to create their own games is even better. Honestly, it's what Phaser is all about.
To say things have changed a lot in the past 5 years is a vast understatement. It's been quite the journey, both personally and professionally. I've made so many mistakes along the way it doesn't bear thinking about sometimes. Usually as a result of trying to juggle too many things at once, sometimes as a result of ignorance or not planning far enough ahead, but ultimately I believe that even if the decisions made weren't always correct, they were absolutely always made with the very best of intentions.
The one overriding thing that has persisted for the past five years is that I always want Phaser to get better and be more useful. To have more features. To keep on growing and empowering developers, new and old, to create better games. Or just create games more simply. I've never once wavered in that belief or vision, and I truly don't think I ever will. Being able to create something is a gift we all have in common. Being able to share the means to create is what keeps me going on. Because let's face it, you lot are making some truly amazing things. It's humbling to think there are developers, indeed whole companies, out there, who are earning their living creating games in Phaser, or resources based on it.
While I'm reminising, below, you can see the very first colored sketch that Ilija drew of the infamous Phaser logo:
I honestly feel that his vision for the Phaser visuals over the years has really helped give it an identity and brand that lots of developers recognize, even if they don't use it.
In the coming weeks I'm going to wrap-up the 3.17 release and get it out there. It's actually Easter break here in the UK, so the schools are closed and other than a couple of days public-holidays, I can actually focus for longer than usual day-to-day. Regular readers will know that this newsletter is a bit late, this is because I've been overwhelmed with trying to complete a growing stack of coding tasks, so much so that I just couldn't find the time to take a whole day out of my working week to publish another issue. Part of me was frustrated that I was struggling trying to get 3.17 issues resolved, and didn't feel there was anything interesting to write about in a Dev Log. And another part of me just wanted to knuckle down and give my undivided attention to coding, rather than taking the considerable time out that is required to author the newsletter. Today being the 5th birthday, I had to make an exception.
Realistically I'm going to allow myself to publish Phaser World every two weeks, rather than weekly, for the next few months. This should hopefully be less intrusive on my coding, but still regular enough for you to feel connected to what's going on. So, what has been going on? ...
Arcade Physics 2
There were a number of issues in GitHub relating to some problems with Arcade Physics, mostly around the way it was stepping out of sync with the game update, meaning you couldn't do things like call colliders from within a Scene update. I fixed that within a couple of days and then started tidying up other small parts of AP that had been bothering me for a while.
For example, I added the functions overlapTiles and collideTiles, which allowed you to pass a Body along with an array of tiles to a callback, and have only those tiles checked against the body. The Tiles don't have to have been enable for collision, or even be on the same layer as each other, for the checks to work. You can provide your own process callback and/or overlap callback. This is handy for testing for overlaps or collisions for a specific Tile or area in your map, not just based on a tile index.
I also added overlapRect which you can test by clicking the image above. This allows you to get all bodies within a defined rectangle. Again, this is another way of quickly filtering bodies based on spatial criteria, which can be incredibly useful. What's more, it was a simple extension of the RTree functionality already built into Arcade Physics, making the cost effectively 'free'.
However, as is often the way, the more I worked inside of Arcade Physics, the more I loathed what I saw. It's one of the oldest parts of Phaser, having changed very little since that first version of it 5 years ago. There are so many ways in which you can break it so easily (just try stacking two bodies on-top of each other in a world that has gravity!) that at some point a few weeks ago I'd just had enough and figured it was time to whip it into a better state.
Which is what I've been doing (among other work) for the past few weeks. If you monitor the Phaser GitHub you'll see what I've been coding away on it for weeks now, day and night, trying to turn it into something more useful and functional, while retaining the same format and core API as before. I wanted to resolve the issue of bodies not being able to stack. I wanted to resolve the issue of bodies that you control via tweens or user input to be able to calculate their own velocities, making them still useful for collision and overlap checks! It took a lot of work, and it's still not 100% ready, and honestly it got quite overwhelming at points - because for everyone bug I'd fix, another bunch would magically appear. Sometimes you can just get too close to a problem to be able to see the solution.
I took a couple of days away from it to finish off the Phaser 3D Class (see below!) and write this newsletter, so I can revisit the final lingering bugs next week and hammer it out. I'm going to set myself a hard target of 3 days. If I haven't resolved what I need in that time, I'm going to revert every single change and release 3.17 with the previous version in place. By the end of Easter I want Phaser 3.17 published. Hopefully, fingers crossed, that will include Arcade Physics 2.
Phaser 3D
Each month I put together a pack of code examples that are then sent to everyone who supports Phaser on Patreon (or via PayPal). For the April pack, I had the idea of taking the work I had done with the new Extern Game Object and merging that with Three.JS, wrapping it in a helper class that exposed the most common parts via 60+ helper methods and packaging it up as Phaser 3D. Back when I was working on Spine support in Phaser 3, I created a brand new teeny tiny Game Object that had one special purpose. It is called an Extern and what it allows is for Phaser to pass-off full control over the gl context to a 3rd party, which can then do whatever it needs with it, and returns back to Phaser again.
Phaser3D is a plugin that uses a new Extern Game Object and injects Three.js into it. It configures it properly for you, so that three.js can happily write to the current context and then restores itself cleanly when it's finished. Because Externs sit on the display list like any other Game Object, you can layer your game content around a three.js scene. This means you could add 3D backdrops behind your 2D games, or 3D objects over the top of a 2D game, or any combination of.
Of course, you can fully control three.js from Phaser too. This isn't some cut-down hobbled version of it, it's literally the entire library. Every single thing three.js can do, you can do via Phaser3D. There are loads and loads of helper methods to ease your workflow. These cover features like creating all supported forms of geometry, add spot, point or hemisphere lights, enabling shadows and fog, creating cameras, groups and all lots more. I've also included support for GLTF Models. You can, of course, load any other format, but as GLTF is the new standard, I included methods directly for it.
You can preload any textures or models that three.js needs via the Phaser loader, so they can be part of your normal preload sequence, or you can use the three.js loader instead - it's up to you.
Included in the bundle are no less than 34 examples, covering all kinds of different features, from geometry to cube maps to an example showing how to layer a normal 2D Phaser game over a 3D backdrop. There's even a little demo showing how to use Matter.js bodies for 3D objects. It's a powerful combination and I hope Phaser backers have fun playing with the demos and creating stuff.
I will release Phaser 3D publically in a few months time, but for now backers get to play with this first, as they're the ones that enable me to work on Phaser full-time, so it's my way of giving back to them. It was also a really nice creative break for me. I had real fun putting the demos together and yet I only really scratched the surface of what could be done with it!
3.17 Release
As I mentioned above I'm going to spend the next two weeks working solidly on getting 3.17 ready for release. Hopefully, this will include AP2, but even if it doesn't there are still a bunch of important fixes and useful new features in there. Thank you for your patience with this, and for those of you submitting pull requests and issues. I very much appreciate the time people put in to help the project out.
Right now I'm going to have a cup of coffee and a slice of 5th birthday cake and then get back to the coalface. 3.17 ain't going to release itself :)
The History of Smash TV - Arcade Documentary.
PackTracker is a webpack bundle analyzer that allows you to analyze your bundle over time, per commit. Powerful stuff!
Snap Chat has launched it's new Snap Games Platform for more instant games built into their messenger client.
Phaser Releases
Phaser 3.16.2 released February 11th 2019.
Phaser CE 2.12.0 released 6th February 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.