Welcome to Issue 67 of Phaser World
I absolutely love sushi, but having played far too much multiplayer Sushi Battle this week (it's the cover game above) I'm feel slightly less enamored by it now! Damn those pesky customers :)
Phaser 3 progress has been fantastic this week, and you'll find loads of new demos, gifs and details in the Progress Report below. I know I say it quite often, but I don't think there is any over-stating just how awesome our Patreon backers are. You are literally the sole reason both of us are able to work on it so hard. Hopefully from the new features you can read about this issue you'll see it's paying off massively.
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
Sushi Battle is a fun sushi chef game. Serve your customers sushi rolls and unlock new recipes as you go. Make enough money to pay for supplies and rent each round. Compete against other players!
Staff Pick
Recruit new fighters, upgrade your businesses and soak those miserly mercenaries for all they're worth!
Train your brain in this unique logic puzzle game that will test your coordination abilities to the max.
An endless runner where you must ski away from the climate change created tidal wave that is chasing you.
Guide your hero to collect stars and escape the deadly planet.
Phaser News & Tutorials
This brand new video course will teach you everything you need to know about creating an RPG game, now includes the Phaser 101 modules.
A plugin to generate bar graphs from an array of numbers, with a simple API and flexible options.
Sliding Puzzle Tutorial and Encryption
The team at Jscrambler have released a tutorial on creating a puzzle game, then encrypting it with their service.
A great tutorial on merging images with your Bitmap Fonts, allowing you to easily display them without worrying about text sizing or wrapping.
A tutorial on creating a random boolean balancer class, to allow for more even distribution of 'random' values in your games.
Patreon Updates
Thank you and welcome to the following awesome people who joined the Phaser Patron this week: Terry Scrimsher.
Patreon is a way to donate money towards the Phaser project on a monthly basis. This money is used entirely to fund development costs. You can also make one-off donations via PayPal. Donations receive discounts, forum badges, private technical support, and the eternal gratitude of the Phaser team :)
Development Progress
It's been another solid week of progress and development on Phaser 3. Work has been split into two main sections. I have been updating the State Manager, and Felipe has been adding in Camera support.
New State Manager
In Phaser 2 States run in isolation. You can swap from one to another, but essentially they're lonesome little beasts. They also don't have any real responsibilities beyond being containers for your code, and some global (game wide) properties. In Phaser 3 this has all changed. The first and most important change is that States can now run in parallel. As many of them as you like. This means you could have a State that just controls the UI, one for the game background effects, and another for all the player sprites. This should help keep your code really clean and more modular.
You can easily transition between States now, with a user defined duration and callbacks. So fading between two States is now thankfully trivial. States also have all of their own managers. For example in Phaser 2 there is one single Loader manager, and when you do 'this.load.image' from within a State, it's actually just using the single global Loader to handle that. In Phaser 3 the State owns the Loader. So you can have multiple States all loading their own assets in parallel, and the load events are now specific just to the State that owns the Loader.
States also now have a position and dimension. You can set a State to render to a specific x/y coordinate, and have a width and height as well. They can also optionally render to their own textures, or use the global canvas. When a State renders to its own texture it has its own local canvas, that all children are drawn to, and then this canvas is composited to the game canvas at the end of the render loop. With the new callbacks this means you can do post-processing effects, or alternatively only re-render infrequently changing States as needed, rather than every single frame (effectively allowing you to 'cache to texture' the entire State, not just a single display object).
State configuration is also now handled via a JSON object (see image below):
In the image above you can see some new properties, such as x, y and renderToTexture. You may also notice a new 'files' array. This is a new addition in Phaser 3 that allows a State to preload assets in advance of the State actually starting. In Phaser 2 for example if you had maybe a game config JSON, or some preloader assets (like a progress bar or logo), you'd have to load them in one State, then swap to another one to load the rest of the assets. Using the new files array approach you can now use that to preload your 'initial' assets, and then use the State preload function to load the main ones. Although States have their own Loaders, assets are still stored globally in the Cache, available from anywhere.
Multiple Camera Support
The camera in Phaser 2 is a bit of a hack job really. It's basically a Display Object that everything else is added to, and it gets a bit messy for example if you want to rotate or it scale it (things like input events can get confused, and it can mess the physics up in some cases). Also it's not possible to have more than one camera. It was essential we did cameras properly in Phaser 3, and we have :) They're all now in the codebase, with examples available too. You can have camera-in-camera effects, because each camera can be scaled, positioned and rotated:
And all those effects, like camera shake, fade and flash? No problem - they're also now camera specific too :)
There are a 6 new camera demos available on the Phaser Labs site, for you to test it out for yourself. When browsing the labs site if you click the icons, it loads the example into a stand-alone page. If you click the text link below it, it loads the example into an online editor, so you can see (and change) the source code.
It's been another fantastic week for development, and I've only scratched the surface here. I didn't even mention the new Color objects, all of the new Graphics functions, canvas functions and Simplex Noise functions! Again, thank you so much to those who back our developments on Patreon - it really means a lot, and is quite literally the only reason the two of us are able to work on this so much. I've got an internal 'checklist' of features I want added before I consider this Beta 1, and we're very close now. There's a bit of gnarly work next week with transform conversions for input hit checking, but otherwise we're finally closer than we've ever been.
If you've any questions about Phaser 3 then please ask either of us in the Slack or Discord channels, and we'll do our best to answer them.
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
The CodeTapper site publishes Amiga Sprite Tricks deep-dives, which literally pulls apart the techniques used to perform some really impressive sprite tricks back on the Commodore Amiga. Various games are covered, including Videokid, Stardust and Shadow of the Beast.
This is a really interesting proposal from Apple's WebKit team about a new Web GPU API. The examples given look very much like Metal, but the team acknowledge it's just a starting point.
Value are shutting down Steam Greenlight, and replacing it with something new called Steam Direct, where you'll pay (and as-yet undecided) amount to get your game listed.
Phaser Releases
The current version of Phaser CE is 2.7.3 released on January 9th 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.