Phaser is 3 years old!
Note: This article is posted to the main Phaser web site, where you can read it with the images in-line. Which for some bizarre reason the Patreon editor doesn't seem to let me do, sorry!
A Happy Birthday retrospective about how Phaser began, and where it's headed.
On April 12th 2013 the very first version of Phaser was pushed up to GitHub.
This was version 0.5, hot off the press. It represented just a few weeks work at that point, yet had a pretty decent feature list.
Coded in TypeScript, itself in very early beta back then, the full library was 6636 lines of code including comments and gzipped down to 47KB. Consisting of just 20 core classes, plus a bunch of helper libs, it supported only Keyboard and Mouse input and rendered to Canvas only.
It came with a Test Suite included in the main repo. The tests were split up into sections like Camera, Collision and Mini Games, much like they are today for the Phaser Examples.
There were 35 tests in total. Looking back at them now, I can see features in this 0.5 build of Phaser that aren't even in the current build today. This is because they had to be removed when we swapped to using Pixi for rendering. Things like camera-in-camera support, with camera rotation, shadows and alpha:
It even supported running multiple instances of itself! So you could have two Phaser games next to each other in browser. This isn't something I've tried recently, so it may still be possible, but I'm not entirely sure :)
Looking back at the API now it's still very much like Phaser is today. If anything it's a little more long-winded to achieve the same things back then. Phaser has certainly become more refined over the years, but you would still recognise the structure even today. Here's a Sprites example (coded in TypeScript):
(function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addSpriteSheet('monster', 'assets/sprites/metalslug\_monster39x40.png', 39, 40);
myGame.loader.load();
}
var car: Sprite;
function create() {
car = myGame.createSprite(200, 300, 'monster');
car.animations.add('spin', null, 30, true);
[car.animations.play](https://car.animations.play)('spin');
}
function update() {
car.renderDebugInfo(16, 16);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if (myGame.input.keyboard.isDown(Keyboard.LEFT))
{
car.angularVelocity = -200;
}
else if (myGame.input.keyboard.isDown(Keyboard.RIGHT))
{
car.angularVelocity = 200;
}
if (myGame.input.keyboard.isDown(Keyboard.UP))
{
car.velocity.copyFrom(myGame.math.velocityFromAngle(car.angle, 200));
}
}
})();You can clearly see in the code above what would later evolve into the Phaser we use today. The 'States' concept is there, Input Manager and the Loader. You can also see that you accessed things like `velocity` directly on the Sprite itself, rather than through a physics body. And that the Loader wasn't 'smart' enough to start itself, and needed to be told to start loading :)
I was going to say that over the span of 3 years we've changed beyond recognition. But actually I think Phaser today shares a lot of the same traits as its early ancestor. Even back then you can clearly see I was striving to create something friendly and easy to use.
Development carried on at a rapid pace. Version 0.6 introduced scaling management and touch support. Version 0.7 bought in a seedable random data generator (still with us today). Version 0.8 introduced Dynamic Textures, which are now known as BitmapData. Version 0.9 added Geometry based Sprites and a large refactoring that stopped Phaser polluting the global name space. And little by little Phaser evolved.
The first ever Pull Request I merged into it was from @HackManiac and it introduced the automatic creation of a UMD wrapper for Phaser.
The first ever Issue
opened on the GitHub repo was by @xperiments, and it was talking about using TypeScript thick-arrow notation in the code, instead of `var that = this`. Since then I've dealt with another 1,421 issues and countless bits of help on the forum, IRC, slack, twitter and Skype.
I don't know how many refactors and updates to the codebase there have been, but it's a lot. I've never tried to keep track of how many hours I've spent working on it; let's just say it never leaves my thoughts for very long. Even when I'm not working on it directly, I'm still planning how it could be improved. I literally have a pile of ring-bound note books filled with ideas and doodles about what direction it could go in next, or what could be created to help it thrive and prosper as a framework. Some of those scribbles are just dreams, others may become reality one day.
Although the 0.5 code is 3 years old it mostly still works today. I had to fix a couple of lines where it tried to create a gain node using the old-style Web Audio API. That was the only breaking change though, after doing that it ran fine and was surprisingly fast. Tilemap rendering in particular was especially smooth, even with a camera-in-camera overlay on it. There were lots of camera effects like camera shake, fade and flash available back then too.
So where does that leave us now?
There have been so many excellent games created with Phaser over the past three years that I must have been doing something right :) However I can also see lots of things in the change log and in my notes that I really wanted to implement in Phaser and never had the chance, for one reason or another. Or features that were removed.
Knowing that its 3rd birthday was coming up got me a bit nostalgic. So for the imminent release of Phaser 2.4.7 you'll find lots of those old effects back in again, such as camera shake and smoothing.
The whole idea was that Phaser was to be API frozen and all development resources moved to Lazer instead, beyond bug fixing of course. Evidently I've not adhered strictly to this though. And I think part of the reason is that to me Phaser still feels a little 'unfinished'. I know that it will never truly be finished at all, that isn't what I'm striving for, but I can't help but feel that if I were to put it out to pasture right now, it just wouldn't be doing it justice.
So I've decided that after 2.4.7 there will be a Phaser 2.5 release. I'm not looking to add in piles of new features, but rather to tidy-up what is in there. I want to optimise the Tilemap classes. They used to be so fast and lovely, and need re-working. I want to get a proper SAT system into Arcade Physics. I want to get some audio effects into the Sound Manager (echo, reverb and custom filters). I want to work through the docs and examples, filling any gaps there may be, and I want to upgrade the core to Pixi v4.
I honestly see this being beneficial for Lazer in the long term as well. Because it's being built from the parts of Phaser, so it makes sense that we build Lazer using the best possible parts we can, recoding in ES6 as we go.
Ultimately Phaser has reached its end-of-life. I'm not changing my mind about that. I just want it to go out with a bang, not a whimper. I guess I owe it that much.
Thank You
Thank you to everyone who has helped over the years. In no special order:
- Dan Milward - I know things didn't work out how they should have, and for that I'm sorry, but thank you for giving me the kickstart I needed all the same.
- Ilija - Your pixels and characters helped define Phaser more than a mere API ever could.
- Tom Waterhouse - Thank you for designing such a beautiful web site for Phaser.
- To everyone who has ever made a game in Phaser and told me about it.
- To those who posted constructive feedback on the forums, or useful issues on GitHub. Without this Phaser wouldn't have grown as it did.
- To all of who you support Phaser on Patreon. Don't ever forget how important your contribution is, no matter how much it is.
- To anyone who has ever written a Phaser tutorial on their own site, such as Emanuele Feronato, SBC Games, Game Dev Academy, Josh Morony and many more.
- To those who ever bought a Phaser plugin or book from us. I'm not exaggerating when I say that the money this and Patreon brings in each month is what allows me to continue working on it.
- To GitHub for hosting the project, and Lee in particular for his support.
And of course thank you for using Phaser. It's a true testament to the open source spirit that it has thrived and grown the way it has.
I know for sure that the next 3 years are going to be radically different, but they sure as hell will be no less exciting :)
Cheers,
Rich
Note: This article is posted to the main Phaser web site, where you can read it with the images in-line. Which for some bizarre reason the Patreon editor doesn't seem to let me do, sorry!
A Happy Birthday retrospective about how Phaser began, and where it's headed.
On April 12th 2013 the very first version of Phaser was pushed up to GitHub.
This was version 0.5, hot off the press. It represented just a few weeks work at that point, yet had a pretty decent feature list.
Coded in TypeScript, itself in very early beta back then, the full library was 6636 lines of code including comments and gzipped down to 47KB. Consisting of just 20 core classes, plus a bunch of helper libs, it supported only Keyboard and Mouse input and rendered to Canvas only.
It came with a Test Suite included in the main repo. The tests were split up into sections like Camera, Collision and Mini Games, much like they are today for the Phaser Examples.
There were 35 tests in total. Looking back at them now, I can see features in this 0.5 build of Phaser that aren't even in the current build today. This is because they had to be removed when we swapped to using Pixi for rendering. Things like camera-in-camera support, with camera rotation, shadows and alpha:
It even supported running multiple instances of itself! So you could have two Phaser games next to each other in browser. This isn't something I've tried recently, so it may still be possible, but I'm not entirely sure :)
Looking back at the API now it's still very much like Phaser is today. If anything it's a little more long-winded to achieve the same things back then. Phaser has certainly become more refined over the years, but you would still recognise the structure even today. Here's a Sprites example (coded in TypeScript):
(function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addSpriteSheet('monster', 'assets/sprites/metalslug\_monster39x40.png', 39, 40);
myGame.loader.load();
}
var car: Sprite;
function create() {
car = myGame.createSprite(200, 300, 'monster');
car.animations.add('spin', null, 30, true);
[car.animations.play](https://car.animations.play)('spin');
}
function update() {
car.renderDebugInfo(16, 16);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if (myGame.input.keyboard.isDown(Keyboard.LEFT))
{
car.angularVelocity = -200;
}
else if (myGame.input.keyboard.isDown(Keyboard.RIGHT))
{
car.angularVelocity = 200;
}
if (myGame.input.keyboard.isDown(Keyboard.UP))
{
car.velocity.copyFrom(myGame.math.velocityFromAngle(car.angle, 200));
}
}
})();You can clearly see in the code above what would later evolve into the Phaser we use today. The 'States' concept is there, Input Manager and the Loader. You can also see that you accessed things like `velocity` directly on the Sprite itself, rather than through a physics body. And that the Loader wasn't 'smart' enough to start itself, and needed to be told to start loading :)
I was going to say that over the span of 3 years we've changed beyond recognition. But actually I think Phaser today shares a lot of the same traits as its early ancestor. Even back then you can clearly see I was striving to create something friendly and easy to use.
Development carried on at a rapid pace. Version 0.6 introduced scaling management and touch support. Version 0.7 bought in a seedable random data generator (still with us today). Version 0.8 introduced Dynamic Textures, which are now known as BitmapData. Version 0.9 added Geometry based Sprites and a large refactoring that stopped Phaser polluting the global name space. And little by little Phaser evolved.
The first ever Pull Request I merged into it was from @HackManiac and it introduced the automatic creation of a UMD wrapper for Phaser.
The first ever Issue
opened on the GitHub repo was by @xperiments, and it was talking about using TypeScript thick-arrow notation in the code, instead of `var that = this`. Since then I've dealt with another 1,421 issues and countless bits of help on the forum, IRC, slack, twitter and Skype.
I don't know how many refactors and updates to the codebase there have been, but it's a lot. I've never tried to keep track of how many hours I've spent working on it; let's just say it never leaves my thoughts for very long. Even when I'm not working on it directly, I'm still planning how it could be improved. I literally have a pile of ring-bound note books filled with ideas and doodles about what direction it could go in next, or what could be created to help it thrive and prosper as a framework. Some of those scribbles are just dreams, others may become reality one day.
Although the 0.5 code is 3 years old it mostly still works today. I had to fix a couple of lines where it tried to create a gain node using the old-style Web Audio API. That was the only breaking change though, after doing that it ran fine and was surprisingly fast. Tilemap rendering in particular was especially smooth, even with a camera-in-camera overlay on it. There were lots of camera effects like camera shake, fade and flash available back then too.
So where does that leave us now?
There have been so many excellent games created with Phaser over the past three years that I must have been doing something right :) However I can also see lots of things in the change log and in my notes that I really wanted to implement in Phaser and never had the chance, for one reason or another. Or features that were removed.
Knowing that its 3rd birthday was coming up got me a bit nostalgic. So for the imminent release of Phaser 2.4.7 you'll find lots of those old effects back in again, such as camera shake and smoothing.
The whole idea was that Phaser was to be API frozen and all development resources moved to Lazer instead, beyond bug fixing of course. Evidently I've not adhered strictly to this though. And I think part of the reason is that to me Phaser still feels a little 'unfinished'. I know that it will never truly be finished at all, that isn't what I'm striving for, but I can't help but feel that if I were to put it out to pasture right now, it just wouldn't be doing it justice.
So I've decided that after 2.4.7 there will be a Phaser 2.5 release. I'm not looking to add in piles of new features, but rather to tidy-up what is in there. I want to optimise the Tilemap classes. They used to be so fast and lovely, and need re-working. I want to get a proper SAT system into Arcade Physics. I want to get some audio effects into the Sound Manager (echo, reverb and custom filters). I want to work through the docs and examples, filling any gaps there may be, and I want to upgrade the core to Pixi v4.
I honestly see this being beneficial for Lazer in the long term as well. Because it's being built from the parts of Phaser, so it makes sense that we build Lazer using the best possible parts we can, recoding in ES6 as we go.
Ultimately Phaser has reached its end-of-life. I'm not changing my mind about that. I just want it to go out with a bang, not a whimper. I guess I owe it that much.
Thank You
Thank you to everyone who has helped over the years. In no special order:
- Dan Milward - I know things didn't work out how they should have, and for that I'm sorry, but thank you for giving me the kickstart I needed all the same.
- Ilija - Your pixels and characters helped define Phaser more than a mere API ever could.
- Tom Waterhouse - Thank you for designing such a beautiful web site for Phaser.
- To everyone who has ever made a game in Phaser and told me about it.
- To those who posted constructive feedback on the forums, or useful issues on GitHub. Without this Phaser wouldn't have grown as it did.
- To all of who you support Phaser on Patreon. Don't ever forget how important your contribution is, no matter how much it is.
- To anyone who has ever written a Phaser tutorial on their own site, such as Emanuele Feronato, SBC Games, Game Dev Academy, Josh Morony and many more.
- To those who ever bought a Phaser plugin or book from us. I'm not exaggerating when I say that the money this and Patreon brings in each month is what allows me to continue working on it.
- To GitHub for hosting the project, and Lee in particular for his support.
And of course thank you for using Phaser. It's a true testament to the open source spirit that it has thrived and grown the way it has.
I know for sure that the next 3 years are going to be radically different, but they sure as hell will be no less exciting :)
Cheers,
Rich