Newsletter
Welcome to Issue 52 of Phaser World
Greetings everyone! Next week I'll be speaking at a local JavaScript development group here in the UK. It's the first talk I've given on Phaser for quite some time, and it has been really fascinating going over my notes from previous talks, and comparing them to where we're at right now. With so much of my time being spent on Phaser 3 development I'm positive that when I give another talk next year, it'll be all-change yet again, but for the better :)
There are some super-cute games this week. Toy Hunt was lovely to play, and Fruit Connect took up way more of my time than I expected it to. There are more tutorials, including a great 'reverse texture packer' app.
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 channel.
Games made with Phaser
Game of the Week
Ready to hunt toys, dressed up in a Dracula costume? Try it, in this cute one-button game.
Staff Pick
Smash piñatas in this crazy backyard party adventure!
Hack through dozens of mind-bending puzzles.
A new HD remake of a classic fruity mahjong style game.
Aim, shoot and pop the multi colored bubbles.
Phaser News & Tutorials
Part 2 of the SameGame Engine Tutorial and Animations are added
10 successful examples of games using the SameGame Engine.
Reverse a texture atlas and data file back into single PNGs.
Create a card game using TypeScript and Visual Studio Code.
Visually debug a Phaser Tween with this new plugin.
Patreon Updates
Thank you so much to the following new Phaser Patreons who joined us this week: Anton Shein and Eugenio Fage. Also thank you to enriqueto for upgrading his pledge, and to Шеин Антон and Jeff Magill for their generous donations.
Patreon is a way to donate money towards the Phaser project on a monthly basis (you can also make one-off donations). Donations start at $1 and receive discounts, forum badges, private technical support from me, and my eternal gratitude, in return :)
Development Progress
This week I've been hard at work on the new WebGL Batch Manager. This manager is responsible for batched Sprite and Image rendering. I took the previous version of it, then took the multi-texture code Felipe wrote, and rebuilt the whole thing from the ground-up. It's got new vertex and fragment shaders, that allow for more control over the vertex colors, as well as a reduced main loop. The impact on reducing memory use has been dramatic. But it also has allowed me to open up some new features to you, pretty much for free (in terms of computation).
For example, you can now tint images with a different color for each corner of the quad. Taken from one of the new examples I coded, the images below show the effect. The black and white image on the top is the original texture with no tint applied, and the one below is with different tint colors per corner. As you can see, you can create some striking effects from this one tiny change alone.
As well as new tint options, you can now specify a background color that appears behind any Sprite. You've direct access to r.g.b values on the Sprite, so it's easy to apply tweens to them. The background color shows through any area where the alpha value of the pixel is less than 1.
This can be a really handy way to create roll-over effects, debug effects, or to color in assets based on different settings or levels. For example in the image below, the world map is transparent, and the Sprite has a purple background color set on it, so it shows clearly through the map area. There are lots of uses for this, beyond this little example, but it's another small new feature that was added in to make all our development lives a bit easier.
With the Batch Manager complete, WebGL rendering is now back in full flow and working again. While there are still a few areas to cover, such as improving the structure of the Stencil Manager, I'm very happy with how things have progressed this week.
It's a really great feeling to have the code so tidy at long last. I set-up a bunch of new, quite strict, ES Lint rules before I started work on this version, and I've been adhering to them consistently. All of the old Pixi code has been rewritten from scratch, following the code structure guides, and piles of classes have been removed, and inheritance chains taken out back, and buried away where they belong. As strange as this sounds, I can really feel the improvement just in the tests I've been build, and I can't wait to get this in a state where you can all begin to play with it too. It really doesn't feel like being far off that point either.
There are a number of things I'd like to do with the State Manager first though. I want to bring the Camera, and lots of other systems (like the Clock, Tween Manager, etc) and pull them all in to the State itself. What this means is that each State will have its own camera, tweens, and so on. Rather than existing on a global 'game' level, which will also set me up in a perfect position to have parallel states, something I've wanted to give you all for a long time now.
So keep an eye on the repo! I push code there literally every day, and you can get a sense of what I'm working on from the commit messages. Thanks to the Patreon funding I'm in a position where I can really knuckle down, and focus solidly on Phaser for the rest of the year, which is really awesome! Have a great week everyone.
Geeky Links
TIC stands for Tiny Computer. It's a virtual retro computer, with its own programming language, built-in editors and a 16 color palette at 160x102 resolution. If you're thinking this sounds familiar, it's because the concept is identical to that of the Pico-8. The main difference is TIC is completely free.
The State of JavaScript 2016 survey results are out, and make for some very interesting reading. Although it focuses on web dev, not game dev, it sounds like a lot of the issues those surveyed (over 9000 of them) put up with are very similar.
Finally this week is Motion Mark 1.0 - a graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate. It's good to see things like this, but the focus is all on canvas and SVG, so not a great deal of use given it excludes WebGL. Even so, try your browser, and see what happens.
Phaser Releases
The current version of Phaser is 2.6.2 released on August 26th 2016.
Phaser 3.0.0 is in development in the GitHub dev branch.
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.