Published on 31st March 2017
Welcome to Issue 74 of Phaser World
Here we are with the last issue of March, and honestly it feels like 2017 is zooming past pretty damn quickly. It's actually Phasers birthday next month, and I can't think of a better way to celebrate that than by continuing to work like crazy on it - see the Development Progress this week to see just how much has been going on.
And I'm not the only one who's been busy! There are another batch of great games and tutorials this week (Eraserhead being a personal favourite), and it's great to see the community thriving like it is. A testament to your creativity.
Until the next issue, keep on coding. Drop me a line if you've got any news you'd like featured (you can just reply to this email) or grab me on the Phaser Slack or Discord channels.
Games made with Phaser
Game of the Week
Swap and combine even-colored cookies in this delicious match 3 game.
Staff Pick
A wonderful and challenging two button platformer, can you rescue the love of your life?!
A mathematical game about adding numbers - it's a lot more fun than it sounds, really!
You're a tired office worker who just can't stop snoozing. Don't let the boss catch you.
An interesting combination of Snake and Minesweeper!
Phaser News & Tutorials
Phaser Fundamentals: Handling Collisions
A new tutorial on various types of collision handling and responses.
A plugin to integrate Web Workers into your game, for offloading CPU intensive work.
In part 2 of the series the card textures are made to work on mobile GPUs.
In part 3 the card code created so far is turned in to a simple game.
Get the complete source code to the great pipe rotating puzzle game.
After several months of hard work, with loads of new features and updates, we have published the latest version of Phaser Community Edition.
Patreon Updates
Thank you and welcome to the following awesome people who joined the Phaser Patron this week: Marcel Schiering. And thank you to Sebastian Bergman for increasing their pledge.
Backers are entitled for free monthly support from me via Slack or Skype, as well as discounts on plugins and books, and forum badges.
Patreon is a way to contribute towards the Phaser project on a monthly basis. This money is used entirely to fund development costs. You can also donate via PayPal.
Development Progress
Until recently it had been quite a while since I've been able to dedicate myself 100% to Phaser. I've always had other things going on, from the trivial like business admin, to the time consuming like client games, and each of those things ate away at the space in my brain in which I can hold all of my ideas together.
But I worked like crazy at the start of this year to earn enough money to now focus entirely on Phaser v3, and the difference it is making is phenomenal. If you cast a look over the commits this week you'll see no less than 62 of them from me alone. And these are not small atomic commits either, but each one of them typically a new feature or refinement. I've lost count of the number of times I've just sat down, gotten into the zone, and coded into the very small hours of the morning because I just didn't want to stop, but forced myself into bed anyway. We've all been there - when the code is flowing, things are just working, and you never want it to end :)
So, what have I been up to?
To get a granular overview you can look through the commit log, but I'll pull out a few headliners here.
Phaser.Actions
Last week I mentioned we'd added in Layers, a way to put Game Objects into a group and visually update them all at once. A few helper methods had been added, for example toggleVisible to switch the visible state of all layer items, and methods to change their position or rotation. I had a lot more of these helpers planned, but it occurred to me that the code for them didn't need to be specific to a Layer at all. So we broke them out into what are now called Actions. An Action is a single purpose function that just takes in an array of Game Objects, and then performs that action upon them all. So instead of being limited to just Layers you could now pass in any array of items you want, no matter how that was derived.
There are 36 different Actions at the moment, and they include features such as:
-
Aligning all of the items into a grid (with your own cell size and placement)
-
Mass updating the position, scale, rotation or alpha of the items
-
Rotating all of the items around a fixed point, or at a fixed distance from a point
-
Applying a Spread function to any property of the items, which can be a linear spread, or smooth step, or smoother step
-
Placing the items randomly within a geometry shape like a rectangle, circle, on a line, in an ellipse, or in a triangle
-
Arranging the items around the edge of a circle, line, rectangle or triangle
And there are lots more to come too! These Actions are bite-sized chunks of useful functionality, accessible directly from a Layer, or by calling the Action directly.
The example below demonstrates the 'place around a rectangle' Action in, well.. action :) If you change the URL to say 'edit.html' you can see how simple the code for this demo is. And that's the whole point: genuinely useful, tiny little features you can easily use in your games if needed.
Having the ability to easily place sprites around geometry is really handy, and allows for the quick creation of some pretty neat effects and layouts. For example you can place sprites around circles:
Here's the same example above, only with reverse moving circles.
Or how about placing them around a triangle?
Or even a simple effect like rotating a set around the center:
It wasn't all Layers and Actions this week however. I started planning how to handle rebuilding the Input Manager too, but quickly came to the conclusion that I needed to finish off the Geometry classes first. The most notable thing missing was the Triangle geometry shape.
Phaser.Geom.Triangle
Although not a common piece of geometry to find natively in game frameworks (they're often usually just 3 sided polygons, if represented at all) they are actually really useful, and fundamental to a huge part of game development.
It was something that was missing from Phaser 2, so I sat down and created a Triangle geometry class for v3 as a starting point, and then set about creating all of the functions that would be needed to support it. I created a few simple helpers, such as the ability to easily build an equilateral triangle, or a right triangle. Then I moved on to adding the features that would bring its use to life: such as being able to get the centroid, in center or circumcenter of the triangle. After lots of reading I added a 'Contains Point' function, a rotation function, and the ability to create a circumcircle too.
There are 15 Triangle examples right now and you can test them all. Having completed them I was able to do the most important part, and that was the intersection functions. For example here is a Triangle to Circle intersection test (move the mouse to position the circle):
Or you can try the Triangle to Line test, or lots of others. Phaser 3 now has support for all kinds of geometry intersection tests, which will be invaluable when it comes to input hit detection.
There were lots of other updates this week too, including fixing some rendering issues with Text and lines, adding in default fill and line styles to the Graphics class, and many more.
Felipe has been working hard on figuring out the new rendering pipeline Phaser 3 will use to handle complex batching and shader swapping, and we'll have a report (and hopefully demos) to show on this next issue.
Until then please keep reading each week, because things are moving at heck of a pace right now. It's fantastic to be fully back in the driving seat, with no other distractions. And the race is on to get this shipped.
Phaser 3 Mailing List and Developers Guide
If you're interested in helping evolve the shape of Phaser 3, then please join the Phaser 3 Google Group. Discussions this week have included varying render loops. The group is for anyone who wishes to help shape what the Phaser 3 API and feature-set will contain.
The Phaser 3 Developers Guide is available. Essential reading for anyone who'd like to help build Phaser 3.
Geek Links
A great PC Gamer article on what toilets can teach us about the art of game design :)
DorkShelf is one of my favorite new sites. Covering films, TV, gaming and comics, it is packed full of great content.
I'm slightly ashamed to say I've seen quite a lot of these: A curated list of movies every hacker and cyberpunk must watch. Ahh Lawnmower Man, you were so beautiful and so terrible :)
Got a suggestion for a Geek Link? Email it to me (support@phaser.io)
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 support@phaser.io or tweet us.
Missed an issue? Check out the Back Issues page.