Using webpack2, new Examples Browser and tutorials

Published on 25th November 2016

image

There is quite a lot to get through this week, so let's jump right in ...

Phaser CE is Released

Quick Link: http://phaser.io/news/2016/11/phaser-ce-released

You're probably thinking "what on earth is Phaser CE?" The CE stands for Community Edition, and it represents a massive shift of ownership for Phaser 2, from us, to you. I created a short video, and wrote this news article, explaining the decision, and what it means going forward.

We seeded it off with all the work we'd done on Phaser 2.7.0, for which you should definitely check-out the Change Log, and then handed it over to the community. In practical terms what this means is that if you submit a Pull Request for Phaser CE, we will unconditionally approve it, and merge it right away. In the past we would check the code carefully, to make sure it aligned with our vision for Phaser, then it would eventually be merged into the dev branch, and finally find its way to an official release. This whole process could often be a couple of months round-trip, or more.

We have done away with the dev branch. It is literally gone. You can issue PRs against master, and as soon as we're online and see them, we'll merge. When you, as a community, are ready to publish a new build, just ask and we'll do it. By dramatically reducing the lifecycle of a code change or feature we hope it'll help Phaser CE flourish. Even in the few days since launch there are already some great PRs merged, and a version 2.7.1 isn't far off!

So please, get involved. Talk on Slack / Discord / the forum, try and help fix issues on GitHub, and just see how you can contribute.

Advanced Rendering Tutorial

To go with the release of Phaser CE I have written and published a new 8 part tutorial on Advanced Rendering techniques in Phaser. The tutorial includes instructions and examples for taking advantage of multi-texture support, compressed textures and rotated texture frames.

image

There are lots of screen shots and details, so hopefully you'll be able to get the features implemented in your games quickly, as they can have a dramatic impact on performance when used correctly.

Felipe joins the Phaser Team

I'm very pleased to announce that starting Monday, Felipe Alfonso, known to most as @bitnenfer on Slack, will be joining the Phaser team full-time. He has already implemented lots of cool rendering tech into Phaser CE, and will be working with myself to ensure that Phaser 3 rocks as hard as we can manage. From my own point of view, it'll be great to have another dev on the team full-time, especially one as smart as Felipe :)

Phaser 3 Progress

I'll be producing a new video next week to show progress of Phaser 3 (as this weeks video was about Phaser CE) - but I still wanted to mention what I've been working on.

Phaser 3 is now built entirely with webpack2. All of the code is being updated (or has been updated) to use CommonJS format modules. And webpack2 is managing the tree-shaking and package building of the whole thing. There are no grunt or gulp scripts to be seen anywhere, as we simply don't need them. On a side note I've also been using yarn for package management, and it's truly great! The speed is shockingly impressive.

To go with the new build process I also created an entirely new Phaser Examples browser. This is still in early stages, but it has one killer feature that I've been using a lot during testing: a built-in code editor. It works much like the Phaser Sandbox does, only it runs locally and doesn't need an Internet connection. You can use your own locally running web server (like WAMP or MAMP), or it works great with http-serve, which is installed along with the repo as standard.

The code editor is using a version of Monaco, which is just a thing of sheer beauty. It's the exact same engine that powers Visual Studio Code, and it's really smart. Mixed with the Phaser TypeScript defs, it means you can get code insight on Phaser objects immediately. Built into the Phaser code editor is the ability to load any example from the repo into it, and then save your own local changes to it. The changes are saved using PouchDB, a client-side database that uses IndexedDb internally in the browser. So the original source file never gets modified, but all your changes, and all versions of them, are stored. You can even run a diff on previous versions of the example code. The benefit of this is huge, it means you can clone the examples repo, and hack away on the examples immediately, saving all your work as you go, but never actually changing the contents of the repo - meaning you can do another pull at a later date, and not have to worry about having made local modifications that need discarding first.

Next week I'll be carrying on the work of converting the code base to CJS. It's nice to finally be using some modern tooling to build it all, and it will make life for those of you who want to just 'require' Phaser into your projects a whole load easier. Not to mention the fact that we can now produce different versions of Phaser easily, just by using a modified entry point.

Phaser 3 development now takes place in the v3 folder of the Phaser master branch in GitHub. It used to be on the dev branch, but since the release of Phaser CE we've consolidated and trimmed the fat. So follow-along if you like, and look out for the next update in Issue 58 :)

image

There is quite a lot to get through this week, so let's jump right in ...

Phaser CE is Released

Quick Link: http://phaser.io/news/2016/11/phaser-ce-released

You're probably thinking "what on earth is Phaser CE?" The CE stands for Community Edition, and it represents a massive shift of ownership for Phaser 2, from us, to you. I created a short video, and wrote this news article, explaining the decision, and what it means going forward.

We seeded it off with all the work we'd done on Phaser 2.7.0, for which you should definitely check-out the Change Log, and then handed it over to the community. In practical terms what this means is that if you submit a Pull Request for Phaser CE, we will unconditionally approve it, and merge it right away. In the past we would check the code carefully, to make sure it aligned with our vision for Phaser, then it would eventually be merged into the dev branch, and finally find its way to an official release. This whole process could often be a couple of months round-trip, or more.

We have done away with the dev branch. It is literally gone. You can issue PRs against master, and as soon as we're online and see them, we'll merge. When you, as a community, are ready to publish a new build, just ask and we'll do it. By dramatically reducing the lifecycle of a code change or feature we hope it'll help Phaser CE flourish. Even in the few days since launch there are already some great PRs merged, and a version 2.7.1 isn't far off!

So please, get involved. Talk on Slack / Discord / the forum, try and help fix issues on GitHub, and just see how you can contribute.

Advanced Rendering Tutorial

To go with the release of Phaser CE I have written and published a new 8 part tutorial on Advanced Rendering techniques in Phaser. The tutorial includes instructions and examples for taking advantage of multi-texture support, compressed textures and rotated texture frames.

image

There are lots of screen shots and details, so hopefully you'll be able to get the features implemented in your games quickly, as they can have a dramatic impact on performance when used correctly.

Felipe joins the Phaser Team

I'm very pleased to announce that starting Monday, Felipe Alfonso, known to most as @bitnenfer on Slack, will be joining the Phaser team full-time. He has already implemented lots of cool rendering tech into Phaser CE, and will be working with myself to ensure that Phaser 3 rocks as hard as we can manage. From my own point of view, it'll be great to have another dev on the team full-time, especially one as smart as Felipe :)

Phaser 3 Progress

I'll be producing a new video next week to show progress of Phaser 3 (as this weeks video was about Phaser CE) - but I still wanted to mention what I've been working on.

Phaser 3 is now built entirely with webpack2. All of the code is being updated (or has been updated) to use CommonJS format modules. And webpack2 is managing the tree-shaking and package building of the whole thing. There are no grunt or gulp scripts to be seen anywhere, as we simply don't need them. On a side note I've also been using yarn for package management, and it's truly great! The speed is shockingly impressive.

To go with the new build process I also created an entirely new Phaser Examples browser. This is still in early stages, but it has one killer feature that I've been using a lot during testing: a built-in code editor. It works much like the Phaser Sandbox does, only it runs locally and doesn't need an Internet connection. You can use your own locally running web server (like WAMP or MAMP), or it works great with http-serve, which is installed along with the repo as standard.

The code editor is using a version of Monaco, which is just a thing of sheer beauty. It's the exact same engine that powers Visual Studio Code, and it's really smart. Mixed with the Phaser TypeScript defs, it means you can get code insight on Phaser objects immediately. Built into the Phaser code editor is the ability to load any example from the repo into it, and then save your own local changes to it. The changes are saved using PouchDB, a client-side database that uses IndexedDb internally in the browser. So the original source file never gets modified, but all your changes, and all versions of them, are stored. You can even run a diff on previous versions of the example code. The benefit of this is huge, it means you can clone the examples repo, and hack away on the examples immediately, saving all your work as you go, but never actually changing the contents of the repo - meaning you can do another pull at a later date, and not have to worry about having made local modifications that need discarding first.

Next week I'll be carrying on the work of converting the code base to CJS. It's nice to finally be using some modern tooling to build it all, and it will make life for those of you who want to just 'require' Phaser into your projects a whole load easier. Not to mention the fact that we can now produce different versions of Phaser easily, just by using a modified entry point.

Phaser 3 development now takes place in the v3 folder of the Phaser master branch in GitHub. It used to be on the dev branch, but since the release of Phaser CE we've consolidated and trimmed the fat. So follow-along if you like, and look out for the next update in Issue 58 :)