Navigation

The Evolution of Phaser 3 and Lazer

Published on 21st December 2016

As things close down briefly for the holiday period, I just wanted to share with you all what we've been doing recently - and ask a big question relating to it.

Those of you who read the Development Progress reports in the weekly newsletter will have an idea of what we've been working on, but perhaps not a clear idea of the overall objective we're working towards.

There is a lot of confusion over what Phaser 3 is, and what Lazer is. So it's time to explain it as best I can.

January 2015

Let's jump back in time to the start of 2015.

I personally was flat-out working on Phaser 2. It was gaining in popularity massively around this time, and I was fixing bugs, and implementing new features, left right and center. However I knew we were limited by the current renderer, so I funded a friend of mine, Pete, to work on creating a brand new one.

Using the money I was earning from client work, and Phaser plugin sales, I paid for him to work on a brand new renderer from scratch. He spent months on it, and we published regular updates as he progressed.

There were 2 main problems though: The new renderer was being built entirely outside of Phaser, which itself was rapidly changing internally - and more importantly, it didn't contain all of the features that Pixi 2 had, which is what Phaser used at the time. Even so, it was extremely fast, supported multi-batching, layers, boned animations, lighting, and all kinds of neat effects.

It also had big glaring issues: The canvas renderer was never completed, there was no mobile testing done at all, and the coding style made it extremely hard to re-use. I've lost count of the number of times I've revisited the renderer source (which we'll called pbRenderer to avoid confusion), and just given up trying to get it to work with Phaser 2. The reason is that Phaser was so tightly built around Pixi, that it made extraction from Pixi, or the introduction of a replacment, next to impossible.

So pbRenderer sat and gathered dust, and my personal investment in it went down the drain. To this day I'm still a little annoyed at myself for spending so many thousands on it, and never actually doing anything with it. I think I was just blinded by my passion for wanting Phaser to be as good as it could be, that I didn't analyse it from a business perspective.

I'd like to be clear that this was in no way Pete's fault. I made the mistake of hiring him part-time (a couple days a week), which is never conducive to development, and there was no work flow in place to check that what we was building, could actually be used.

Now, nearly two years later, I've come to terms with that and have written it off. As the saying goes: Don't throw good money after bad.

During 2015 I worked tirelessly on Phaser 2. Loads of new features landed, hundreds of bugs were fixed, and I was feeling good with progress knowing that pbRenderer was taking place in parallel. It wasn't until the end of the year that I came to realise that using pbRenderer wasn't going to happen (and I think I still believed it could be saved at the time). I was also really interested in what was happening with ES6.

November 2015

The concept for Lazer was born, and to me it made a lot of sense. All of the issues Phaser suffered from (God classes, giant library size, ultra-wide namespace) needed to be addressed. Plus I was pleased with how ES6 was evolving. The tools were still very basic, browser support was virtually non-existent, but it had promise (and Promises :))

Phaser 2.4.4 was the current release at the time. I'd been flat-out on it all year, and honestly when you're that involved with something, it's easy to be distracted by something new and shiny. So without any real kind of plan, development on Lazer started.

Q1 2016

I was effectively full-time on Lazer, with Phaser 2 being side-lined, until the end of February 2016. Felipe joined in May 2016 and picking it up from there. I paid for him to be a full-time developer (again out of my own client money, although also Patreon was helping at the time too).

Between us, we built a huge amount of new tech. Felipe created Arcade Physics 2 for example, I built a new State Manager, Loader and all kinds of things. Because we weren't shackled to how Phaser 2 worked it was like building on a clean slate, which as all devs know, is a liberating feeling.

Lazer was effectively a complete, from the ground-up, balls to the wall rewrite of Phaser, in every possible way.

The problem with multi-tasking

The issue though was that I couldn't work on Lazer and Phaser together. They were so wildly different, my time stretched so utterly thin, that swapping between the two became incredibly hard.

The GitHub issues for Phaser started to build up, and peopled questioned my commitment to it. And honestly, I never wanted to leave it alone. I felt like I still owed Phaser, I still wanted it to 'go out' with one last hurrah. So I decided to stop work on Lazer and return to it, giving it my full attention.

February 2016 - August 2016

During February I released Phaser 2.4.5, and over the following months I stayed focused on it from then on. New versions of Phaser would come out almost monthly, often containing massive new features and updates with each one.

By this point Patreon had really picked-up too, so I felt like I owed it to you all to carry on working on the tool you were actively using daily. It was a good, and productive period of time. The downside? Lazer was on hold, and pbRenderer was dead.

September 2016 - November 2016

During this period Felipe helped address some of the problems Phasers renderer had; adding in loads of cool changes (multi-texture support, compressed textures, etc), and I carried on work tidying up the internal renderer a lot. Because we were now following proper semver numbering it was identified that the changes we'd been making should form a Phaser 3 release.

The decision was made that Phaser 2.7.0 would seed the Phaser CE (Community Edition) version, and that 2.6.2 would be the last 'official' release. On 22nd November Phaser CE was released, and the git repo was restructured for Phaser 3 development. CE was handed over the community to maintain, while we worked on Phaser 3, and so far you've all done a great job with it - well done :)

Webpack-ho!

As part of this restructuring for v3 I decided it was time to get rid of the horrendous Grunt based build process Phaser had. For several years now I'd been asked, over, and over, and over again, when would Phaser be modular? So you could build a Phaser game using webpack for example, like most other libraries allowed.

I had originally disregarded these requests because of all the work I'd put in to Lazer, which I saw as the natural evolution of Phaser. ES6 modules solved that problem, so, job done, right? But really it was just an excuse. There's only so long you can say "Yeah it's coming" before people realise it really isn't (me included).

So I spent a day installing webpack2 and creating a few little tests, and I liked what I saw. webpack2 is still in beta, and some things were utterly broken (like loading in json files), yet on the whole it worked nicely. I ported a few of the Phaser 3 files over to CJS, built it with webpack2, and it just worked. So I ported over a few more, split a couple of the big classes up into functions, and carried on testing it. And I liked very much what I saw.

December 2016 Deja-vu

I made the decision that if I was going to go through the effort of making Phaser 3 work with webpack modules anyway, that I might as bloody well do it properly.

So I started picking apart Phaser 3, and splitting it all up. And of course was hit by a wave of deja-vu, because this was almost the exact same process I had gone through with Lazer, where I was (at the time) chopping up Phaser 2 into ES6 modules.

And it dawned on me: it was time to benefit from the time and money I'd spent on Lazer, by folding it in to the new modular Phaser 3. I started going through the Lazer source, pulling it into the Phaser 3 code base, and building up around it. As it stands today, Phaser 3 is a hybrid of all the work I had originally done with Lazer to make it modular and component driven, and all the work we've done with Phaser 3 to introduce new features like the great new State Manager, Transform Manager, Event system and Main Loop handler.

January 2017

So here's the plan: Right now I've got a large part of Phaser 3 ready. It's all building with webpack2, there's a brand new examples runner with built-in code editor, and it's now trivial to build your own custom Phaser bundles, which is a great relief.

Felipe and I are working full-time on this. The Patreon money and plugin sales cover his salary, and I'm paying my own salary from client work I've done this year.

Our aim is to charge towards a Beta 1 release as fast as we can.

There are still some fundamental parts of Phaser 3 missing, either because we've not yet ported them over, or because they require re-thinking and re-doing from scratch anyway, but progress is steady (as you can read each week) and consistent. Phaser CE being out stops us being distracted, too much, by issues there, and we're avoiding client work for the moment as well.

You can help!

If you've time, an interest in the project, then there are some key parts of Phaser 2 that still need breaking down into modules and functions for Phaser 3. If this is something you'd like to help with, then please let me know. The more hands on deck, the faster we get ship shape.

Email me (rdavey@gmail.com), grab me on Slack or Discord, reply to this post, or find me on the forum - however you want to get in touch, please do so.

Finally, the big question ...

Phaser 3 feels the closest and most tangible it has ever felt. It has been a long, painful gestation period for sure. Part of me feels like we're woefully behind where we could have been, but the other part of me reminds myself that actually, I have literally spent the past 2 years working flat-out maintaining Phaser 2 as well, and at the end of the day, for the majority of that time it has been just me, on my own, doing that work.

The other side of me realises that in a somewhat ironic twist of fate, everything I ever wanted Lazer to be, is now manifesting in Phaser 3. The modularity, the new components, the brand new features, the new renderer, the new state manager, most of the cool renderer updates that appeared in pbRenderer now have direct parallels too (we're not using the pbRenderer code, but the same functionality pervades).

Everything is coming a full circle, and I don't think I've ever been more excited about a release before in my life.

But it begs one giant, important question: What should we call it?

Literally the only real difference between Phaser 3, as it stands today, and what Lazer was meant to be, is that Phaser 3 doesn't use ES6. And I'm absolutely not going to pivot again, and redo all the work we've done in v3 to make it ES6 either. That isn't an option (so don't suggest it, please).

Which leaves us with a few choices:

1) We release Phaser 3, carry on using semver responsibly, and close down the Lazer project.

2) We rename Phaser 3 to Lazer, and release it as Lazer ES5.

3) We release Phaser 3, give it time to bed-down, iron out issues, solve bugs, go through a good bunch of updates, and then port it to ES6 and release it as Lazer.

There are pros and cons for all options. Some off the top of my head:

Pros:

  • The name Phaser is very well established. It has a huge amount of cachet attached to it, something perhaps more valuable than anything else.
  • We can carry on using the same GitHub repo, with all of its stars and followers intact.
  • Pivots in software are not unusual, you could even say they are expected: Look at the changes between Angular 1 and 2, TypeScript 0.5 to 2.1, etc.

Cons:

  • The Phaser 3 API is significantly different to v2, which instantly invalidates all existing tutorials, videos, etc. Using a new name (Lazer) helps with this transition.
  • We cannot maintain Phaser 3 and Lazer in parallel, as we don't have the resources. So the move from one to another needs to be clean.
  • I believe we can only get away with renaming this project ONCE, so it has to be done properly, for the right reasons. Is moving from ES5 to ES6 a big enough reason? Or a reason at all?

I'm sure you have some more thoughts to add to the above, and I'd love to hear them!

I hope you all have a great holiday period. I cannot wait to get back to coding again, but I'm going to enjoy the time off to play with my kids, and relax. I hope you all do the same.

Leave your comments, throw me messages on twitter or where-ever I hang out. I will read them all, and will let you know our decision in the New Year.

Cheers,

Rich