Welcome to Issue 60 of Phaser World
I know it's still a week away, but if you celebrate it, Happy Christmas!
If you're anything like me, you're probably up to your neck in deadlines, gift shopping, family arrangements, and trying to avoid ever having to wear an embarrassing Christmas jumper.
On the plus side, there are no less than 3 'Staff Pick' games this issue, along with the fantastic game of the week, and a bunch of neat tutorials and plugins.
There is also a special extended Developer Progress Report on Phaser 3 too.
Because of the impending festivities there will be no issue next week. We'll be back on December 30th with a smaller catch-up issue, and then return to normal in the New Year.
Which just leaves me to say thank you for being here, and reading this newsletter, it's been quite a year, and it's not over yet.
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
Select your characters and take them on an adventure around the mini-game packed maps in this beautiful Mario Party inspired game.
Staff Pick
Solve and blast your way through this excellent randomly generated puzzler.
Staff Pick
You take on the role of a poor zoo keeper, who must catch the monkey over 24 levels of puzzling game play.
Staff Pick
A beautiful take on one of the most difficult types of solitaire game available.
Bash down the presents with your candy canes in this color matching festive game.
Phaser News & Tutorials
A bootstrap project to create games with Phaser + ES6 + Webpack.
The original Space is Key Tutorial freshly updated for Phaser 2.6.
Cordova Phaser Template using Typescript and Jed
A Cordova / PhoneGap TypeScript template set-up for easy internationalization.
Making games with Phaser: Color Zap
A new 173 page eBook about using Phaser to create a complete game, step-by-step.
A plugin that adds user registration and login support via Amazon Cognito.
Patreon Updates
Thank you so much to the following new Phaser Patreons who joined us this week: Magnus Kronnäs, Andrew, Ashley Williams and Matt.
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
First of all, how cool is that pixel art Christmas tree above?! It's from the Atari ST and felt suitable for this issue (click it to see more art by the same artist).
In Phaser CE I spent some time on Monday getting jshint running again. The config has been put back in, and I fixed all linting issues in the code. I also updated the readme with instructions on how to prepare a release of Phaser CE. It's good to have the jshint step back in again. It caught a few errors that shouldn't have been there, and you can of course use it to validate your own code before submitting. It also allowed me to close off a few more issues. Phaser 2.6 may have been the last official release, but I'm still spending time now and again helping out with CE.
Phaser 3 Weekly Updates
With Phaser 3 I started the week tweaking the Loader. You can now pass in your own XHR Settings object with any file. There is a global (loader-based) XHR Settings object, but you can now tweak it per file too. This means you can override things like the response type, or set a specific username and password for XHR requests. File loaders for all of the core types (excluding audio) are now in.
I also updated the Set and Map classes. These are ES5 implementations of what we've now got available natively in ES6. They're powerful, and extremely useful, and used throughout the new Loader and Cache classes. The API matches the ES6 implementation as closely as possible, meaning when support is broad enough we can deprecate them to polyfills.
As well as this I've been working on porting over more of the functions needed to support the first beta release, and have started building the main Phaser export package as well. Lots of the core math and utility functions have been converted, and I've updated the boot sequence as well. Loads more of the tests and examples are now running again, which is encouraging.
In Modules We Trust
I wanted to take a little time to explain about how Phaser 3 has evolved over this quarter, and why there won't be a release before Christmas:
Breaking Phaser down into modules has been a mammoth job. I knew it would be, because I had already gone part way through the process with Lazer. But that doesn't diminish the sheer amount of work involved. I've been slogging through it, often into the small hours of the morning, and I'm not done yet either. I'll be honest - it's not exactly fun or sexy work. But it is essential, and needs to be done right. When you dissect something so large, into something so small and singular, it forces you to be extra critical of each new function, and check them to make sure they are right.
While it would have been easy to just throw a bunch of 'module.exports' into our Phaser 2 class files, that would have defeated the whole point of moving to modules. Originally (i.e. pre December) v3 was meant to be a relatively low-key release. An evolved v2 codebase with some internal tuning, and bells and whistles added on the top. At that time I was bullish about having a release in time for Christmas, because honestly we were pretty close to it already.
But it was eating away at me that it just wasn't the right move. There was still a mammoth code base under the hood, it was still using God-classes, a gigantic grunt build process, and expected global scope (internally it created and used 'Phaser' level objects everywhere). Although I had tidied things up a lot, the tentacles from the internal plumbing were myriad and stretched deep.
It took a lot of soul searching and effort to decide to stop, and re-evaluate what was happening. Rather than keep adding ingredients into the mix, it was time to bake a new cake. Which is what Phaser 3 now is. On November 22nd I literally moved the entire codebase into a folder called 'merge' and started again from scratch. I had the same objectives, the same end goal in mind, just a different technology stack underneath it all. And quite frankly, one that everyone had been crying out for, for ages now.
In moving to webpack2, and CommonJS modules, I have to methodically go through the entire v3 code base, line by line, and break it into proper modules. This process is accelerated in places by revisiting the Lazer code, as I'd already gone through the motions for a lot of classes in that. I was literally pulling in code from Lazer (and 'downgrading' it from ES6 to ES5), merging it with Phaser, and injecting all the new things I'd added in v3 too. As you've seen from the hundreds of files committed over the past 4 weeks it's been a rapid, but intense, process, and it's not over yet.
My aim now is to marching towards a Beta 1. I'll focus on continuing to convert over the previous code into modules, and Felipe will focus on building the brand new renderer features (as you'll see in the next section on masking). The first version will absolutely be missing loads of features, because there is no need to wait until every last single thing is put back in before releasing it. As long as you can build something, to me that's a valid first Beta. And right now, Christmas aside, I'm doing everything I can to get there, as quickly as I can.
Phaser 3 Masking
Felipe explains what he's been working on this week: As a continuation of last weeks update to the new Graphics API we've added in support for masking. Even though our main approach was to have a similar API to the Canvas 2D context, we decided that for this feature we would go with something that is closer to what the internal WebGL renderer does.
For this approach we decided to go ahead and use texture masking. I do feel you can have better control rather than using other methods, since we can tweak the fragment shader to our own needs. Another good thing about this approach is that if you record your mask at the beginning of your program you don't have to update it unless it's needed.
We use 2 functions to record a mask. One is 'recordMaskBegin' and the other one is 'recordMaskEnd'. What you would do is put those two functions around your shape rendering. For example:
To use the mask already recorded we call the funcions 'applyMaskBegin' and 'applyMaskEnd'. Like this:
This is the result of this:
Here you can see how it looks if you want to add a textured pattern to that masked shape:
Geeky Links
From Kill Screen comes a great preview of Kingsway: "Andrew Morrish’s upcoming Kingsway is a fantasy RPG that riffs on the idea that the game is like a desk job, “pointing out the similarities between managing an RPG and daily tasks on a computer,” Morrish said. Players will have to rifle through a Windows 95–inspired operating system to navigate a slew of fantasy adventures."
Oliver Powell recently wrote about Talks that changed the way I think about programming. It's a really interesting read, with lots of great content.
The final link this issue is a Computerphile YouTube video all about programming the Sega Genesis in assembly language. It covers the hardware used, which looks pretty amazing, and dips into getting some things up on screen.
Phaser Releases
The current version of Phaser CE is 2.7.2 released on December 6th 2016.
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.