Navigation

Phaser Actions and new Triangle Geometry

Published on 31st March 2017

image

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.

image

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:

image

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:

image

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):

image

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.