After a lot of work updating our build tool chain, I released Phaser 3.0.0 Alpha today. This is a huge milestone for us and compacts months and months of hard work into a few hundred kilobytes. I would love it if you could help us test it out. Here is how to get involved:

Getting Started with the Alpha

There are several ways to get hold of the V3 alpha:

GitHub Release

Go to the GitHub Alpha Release page and download the build files. There is a phaser.js file and phaser.min.js. The phaser.js is a development build and includes a source map inside of it (hence the massive file size!), which is perfect for giving you accurate runtime errors. The min file has the source map and comments stripped out and is more like what a production build of Phaser 3 would be.

Download from NPM

The Phaser 3 Alpha has been published to npm. You can grab it using the following tag:

npm install phaser@3.0.0-alpha.2

Build files are not committed to the repo or in npm, so you'll have to run an npm install and then 'npm run build' command.

Webpack Project Template

We have also prepared a sample project template for you. This uses Webpack to build and is a quick and easy way to get started. Use the following to get the template:

npm install phaser3-project-template

Once it has downloaded go into the folder and issue the command: npm run build and it will build the sample project. Open the index.html file into a browser to see the end result. You can modify the source in the src/index.js file to play around with it, or just use this template as a basis for your own. We will expand it over time to add in features like Live Reload.

Build from the source

The final way to get the Alpha is to download the Phaser repo and build it locally. This gives you the most flexibility and allows you to view the Phaser source easily but takes a little more effort.

Full instructions are given on this page.

As an update to those instructions you can perform a build of the dev version now by issuing the command npm run build or you can build a distribution version with the command npm run dist which will create minified compressed builds.

Alpha Feedback

We would really like to know what you think of v3. I appreciate that because we haven't started the documentation yet it's going to be hard going for you, but there are hundreds of examples to inspect and learn from and things aren't that different to v2.

We need both bug reports and your feedback on the API. Of course, we want to squish as many bugs as possible, so bug reports are really important for us. But we also want to get your feelings on the API changes too, so if you think a method name doesn't make sense, or you have a suggestion for a feature or property then please let us know! There are lots of ways:

GitHub Issues

This is our preferred method of receiving bug reports and suggestions. Please open a new Issue on GitHub and throw in as much detail as you can. Source code snippets are even better.

Phaser 3 Forum

There is a new Phaser 3 Forum running on HTML5 Game Devs. You can attach files or embed source code and it's a good place to get discussion from other devs too. We are monitoring this forum daily.

Email

Old school, but it works. You can email rdavey@gmail.com. Please understand I cannot enter into long support style discussions via email (there just aren't enough hours in the day!) but I'm happy to take v3 feedback here.

Phaser Slack

You can also talk to me on the Phaser Slack channel. Just use @rich and I'll get the message when I'm not online (if I'm not there at the time).

Whichever method you use, please do use one! All comments are useful, even if it's just to let us know that something works, that's good too. Bugs are best suited to GitHub Issues as you will then know when we fix them because the issue will be linked to a commit but if you'd rather not register on there we'll happily take them via any other means listed.

Input Manager Updates

I spent last week working on the Input Manager and made some fantastic progress with it. It's now very nearly feature complete and even has the start of the mobile touch support added as well. The following demos show some of the new ways to use it - remember you can click the 'Edit' button on any demo to view the source code. All of these demos are running with the v3 Alpha release.

First here is a quick demo showing pointer events working across multiple cameras, even if they're rotated and scaled:

Input Zones

The next example shows off a new feature in v3, which is the ability to make zones input enabled:

The above example (which makes me hungry each time I load it!) shows how you can use a Zone as an Interactive Object. Zones are game objects that have no texture or display properties. They have a position and size and can be transformed, but they never render or have any related components. This makes them extremely tiny and also useful for hit areas. This example demonstrates adding 6 zones over the top of a single image and it is the zones that dispatch the input events, not the image. This could be extremely useful if you wanted to add interactive areas over the top of a video or an image that constantly changes without having to use 'blank' sprites to do it. The following code shows the creation of the zones and the related event handler:

Drag and Drop

Any Game Object can be enabled for dragging by calling the setDraggable method of the Input Manager. It can accept a single object or an array of objects and they'll all be flagged as being draggable. Here you can see a bunch of draggable cards, each rotating and a different scale, but all draggable:

In the above example, you can use the arrow keys to move the camera as well, showing that drag input works even across scroll factors and z-depths.

Objects set to be draggable emit their own special events, such as DRAG_START, DRAG and DRAG_END. Also available are the options to set 'drag time' and 'drag distance' thresholds. These are values (given in ms and pixels respectively) that once exceeded a drag is considered as being invoked. For example, you could say that a sprite isn't being dragged unless it has been moved at least 10 pixels, or held down for at least 2 seconds.

Drop Zones

Another new feature is drop zones. Any interactive object can become a drop zone and they have a whole bunch of associated events all modelled on the Drag and Drop DOM API. This example shows a rectangular drop zone:

Drag the cards into the drop zone. As long as the pointer is within the zone the card will remain there when dropped, otherwise, it is returned to its start position. Drop zones don't have to be rectangles either. Any shape that a hit area can use is valid.

If you drag a game object across one that has been flagged as being a drop zone then you get lots of useful events such as 'DRAG_ENTER', 'DRAG_LEAVE' and the essential 'DROP' event. What you do inside of these events is entirely up to you of course but it gives you a lot of flexibility out of the box.

Top Only

Another feature that landed is the ability to control what the Input Manager will return. If you had a stack of sprites on-top of each other and clicked the top-most one, then by default events will be dispatched for the top sprite only. This is exactly how the DOM works and we emulate it inside of Phaser too.

However, it's often useful for you to be able to get all objects below the pointer, not just the top-most one. So you can now set the topOnly boolean to 'false' and it'll work across all interactive objects below the pointer, from the top down. You can observe the difference in this example:

As you can see above, you can drag all cards below the pointer at once. If you're very careful and click to the edges of a stack of cards you can peel them away one by one :)

It's really handy feature though, allowing you to have a lot more control over your interactive objects than you can in the DOM.

Per-Vertex Alpha Support

The last feature to mention this issue is that you can now set the alpha of each vertex of a game object. Just like you could tint each vertex you can now control the alpha directly via the properties: alphaTopLeft, alphaTopRight, alphaBottomLeft and alphaBottomRight. This allows you to make some really lovely transition effects without using any custom shaders or masks, such as this:

The above example is just two images with a tween controlling the alpha of one. Naturally per-vertex alpha is a WebGL only feature. The original 'alpha' property still exists and works in exactly the same way as before too.

Phaser 3 Labs

Visit the Phaser 3 Labs to view the new API structure in depth, read the FAQ, previous Developer Logs and contribution guides. You can also join the Phaser 3 Google Group. The group is for anyone who wishes to discuss what the Phaser 3 API will contain.