Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
29. May 2014



One thing every single game has in common is a game loop.  That said, it’s not always under your control!  Today we are going to look at how the game loop is implemented in the Phaser HTML5 game engine.


Pretty much every single video game ever created follows the same basic program flow:


Program Starts

Check Input

Update World

Draw scene

Program Exits


Of course this is a massive simplification ignoring things like updating physics simulations, multiple threads, streaming of assets, etc… but the basic flow is there in every game.  The three indented process, Input, Update and Draw are performed over and over in a loop, thus “game loop”.  In Phaser there is no exception, but the way it’s handled is a bit different.


If you’ve done any JavaScript game development before you’ve no doubt encountered requestAnimationFrame or if using an older browser setTimeout JavaScript functions.  Both perform basically the same task, they call a function once an interval, such as every 30th of a second if your game is set to run at 30fps.  This is the very heart of most JavaScript games and Phaser is no exception.  You the end developer don’t have to care about such low level aspacts though as this functionality is taken care of in the class Phaser.RequestAnimationFrame and is automatically created by Phaser.Game.  If you want to see the actual game loop driving your game though, I suppose this code snippet from RequestAnimationFrame.js is it:


    updateRAF: function () {;

        this._timeOutID = window.requestAnimationFrame(this._onLoop);



As you can see, its basically just calling Game’s update() over and over.  Now if we take a look at the source code for update in Game it all becomes clear:


update: function (time) {


    if (!this._paused && !this.pendingStep) {
        if (this.stepping) {
            this.pendingStep = true;



    else {
        // this.input.update();

    if (this.renderType != Phaser.HEADLESS) {



So there is your traditional game loop, just nicely tucked away.  So then, where then does your code fit in all of this?  Remember back in the Hello World post when we created a Game instance we past in a “State” object implementing create and passed in the function this.create to be called, like so: = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });


Well, that’s how we do it.  A State object has a number of functions that will be called, in this case we provide an implementation for create, now lets look at a slightly more complicated example:


class SimpleGame {

    constructor() { = new Phaser.Game(800, 600, Phaser.CANVAS, 'content', {
            create: this.create, update: this.update,
        render: this.render});

    game: Phaser.Game;
    textValue: Phaser.Text;
    updateCount: number;

    create() {
        var style = { font: "65px Arial", fill: "#ff0000", align: "center" };
        this.textValue =, 0, "0", style);
        this.updateCount = 0;

    update() {
        this.textValue.text = (this.updateCount++).toString();

    render() {"This is drawn in render()", 0, 80);

window.onload = () => {
    var game = new SimpleGame();


Here is the code running:



In this example the State object we are passing in to the Phaser.Game constructor implements create, update and render.  Create will be called once, predictably enough on creation.  Here we create a red text object like we did in the Hello World example.  This time however we keep a reference to it.  We also add a counter variable updateCount.  Each frame update() will be called, we simply increment the counter value and assign this to out text object.  Finally in render we draw our text using game.debug.text().  Phaser provides a number of convenient debug methods for dumping information on screen, either as text or graphically.  These functions however are *NOT* optimized and should not be used in production!


So as you can see, update works pretty much like you would expect, but instead of your game controlling the loop you implement methods in a State object that will be called by the Phaser engine.


Let’s look at a slightly more complex example that will probably make State objects make a bit more sense.  This is a two screen game, first there is a title sreen shown that when clicked then moves to the game state, which is the same as the above demo.  Let’s jump in with code:


module GameFromScratch {
    export class TitleScreenState extends Phaser.State {
        game: Phaser.Game;
        constructor() {
        titleScreenImage: Phaser.Sprite;

        preload() {
            this.load.image("title", "TitleScreen.png");
        create() {
            this.titleScreenImage = this.add.sprite(0, 0, "title");
            this.input.onTap.addOnce(this.titleClicked,this); // <-- that um, this is extremely important
        titleClicked (){

    export class GameRunningState extends Phaser.State {
        constructor() {
        textValue: Phaser.Text;
        updateCount: number;

        create() {
            var style = { font: "65px Arial", fill: "#ff0000", align: "center" };
            this.textValue =, 0, "0", style);
            this.updateCount = 0;

        update() {
            this.textValue.text = (this.updateCount++).toString();

        render() {
  "This is drawn in render()", 0, 80);

    export class SimpleGame {
        game: Phaser.Game;

        constructor() {
   = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');

  "GameRunningState", GameRunningState, false);
  "TitleScreenState", TitleScreenState, false);
  "TitleScreenState", true, true);


window.onload = () => {
    var game = new GameFromScratch.SimpleGame();


And when you run it you see ( click to proceed ):


One thing to be aware of right away is this example should probably be split across 3 files not in a single one.  I kept them together to make following along easier.


Here, instead of creating a state object inline we declare two of them.  Here we are using the TypeScript ability extend to create Phaser.State derived objects as inheritance really isn’t part of JavaScript. Let’s take a quick look at what this code does, starting with SimpleGame.


Here instead of providing a State object to the Phaser.Game constructor inline ( in { } form ) we register 2 different states using game.state.add().  The first value is the string value we will access this state using, the second is the state itself while the final value is if you want to start the state while adding it.  Finally after adding each state we start one calling game.stat.start and pass in the key value of the state.  Yes, we could have simply added true when we added the TitleScreenState, but I think doing it long form is clearer.


Once our TitleScreenState starts, in preload it loads an image, then in create it adds the image as a sprite.  Finally it adds a tap handler that will be called when the screen is tapped.  Image loading, sprites and input will all be covered later.  One very important thing to understand here though is the this parameter passed in to onTap.addOnce.  The second value is the context that titleClicked will be called in.  In other words, the value of “this” within titleClicked is determined by the value you pass here.  This is one of the warts of JavaScript IMHO and I wished TypeScript fixed it, although it appears it hasn’t.  The importance here is, if you don’t pass the context into the Signal (onTap) then the called function (titleClicked) wont have access to itself!  You will then get an error that is undefined.  Finally when titleClicked is called we launch the GameRunningState like we did earlier.  GameRunningState is basically just the functionality from our earlier example split out into Phaser.State form.


As you can see, Phaser.State objects allow you to logically split up your game functionality.  Of course you could just implement a single inline state like we did earlier and ignore them from this point on.



29. May 2014


Last week I published a resource round-up for OpenGL HLSL shader programming and one of the tools I mentioned was nVidia NSight.  One of the major downsides at the time was a lack of Visual Studio 2013 support, while the Eclipse version was Linux and Mac OS only.  With todays release of NSight 4 this has been rectified.

Visual Studio 2013 support isn’t the only new feature, the new release adds:


New NVIDIA® Nsight™ Visual Studio Edition 4.0 Features:
  • Support for the new Maxwell architecture (for example, found in the GeForce GTX 750 Ti and 750).
  • Added support for new GPUs, such as the GeForce GT 720M, GeForce GT 730M, GeForce GT 735M, and GeForce 740M.
  • Microsoft Visual Studio 2013 is now supported.
  • Visual Studio macros are now supported, so values such as $(TargetPath), $(ProjectDir), and $(LocalDebuggerCommandArguments) are able to be added on the NVIDIA Nsight properties page.


Graphics Debugging and Profiling
  • The Nsight Frame Debugger, when running DirectX™ applications, has been redesigned to use flexible, dockable tool windows.
  • Dynamic shader editing is now available for GLSL shaders.
  • Debugging of release compiled HLSL shaders at the byte code level.
  • Pixel history supported for release compiled shaders.
  • Frame Profiler results can be exported to an Excel/CSV file.
  • Support for FP16 vertices in the Geometry viewer.
  • Visual Studio can now visualize the Render Target/Back Buffer/Frame Buffer.


Compute Debugging and Profiling
  • Support for the CUDA 6.0 Toolkit.
  • Microsoft Visual Studio 2013 is now supported.Note: In order to build CUDA applications, your project settings will need to be set up for the Visual Studio 2012 or prior toolset.
  • Several bug fixes.


If you’ve never heard of NSight, in their own words it is:

NVIDIA® Nsight™ Development Platform, Visual Studio Edition brings GPU Computing into Microsoft Visual Studio. Build, Debug, Profile and Trace heterogeneous compute and graphics applications using CUDA C/C++, OpenCL, DirectCompute, Direct3D, and OpenGL.


It’s is a free download and can be downloaded here.  Be sure you are running a very current display driver and obviously nVidia hardware.

27. May 2014


So I’ve been looking at creating games using Phaser with TypeScript and I’ve run into my first few annoyances.  The first of which is certainly debugging.  At first glance debugging looks wonderful then I realized my mistake.  In the previous post I said I had to add the generated JS file to the project for a breakpoint to be hit and suddenly I understand why.


You can’t debug TypeScript code in Chrome or Firefox.




If you set a breakpoint in Visual Studio in a TypeScript file:



Then run your application using Internet Explorer as the target:






Now switch to Chrome or Firefox and your breakpoint will never be hit.



Well that kinda sucks.  At the end of the day it’s not a deal breaker, Internet Explorer is getting better and with Windows Tablets and Phones, should probably be a device target for you, so using Internet Explorer as your debug platform shouldn’t be a huge deal, especially if you are using Visual Studio as your development device.



Debugging TypeScript in Firefox or Chrome


Of course both Firefox and Chrome have built in debuggers so you can easily debug the generated JavaScript.  However, if you want to develop in the language your programmed ( be it TypeScript, Dart or Coffeescript ) you need another option…


Source Maps.


All major browsers support source maps now, but may require you to jump through a a couple hoops.  A source map is basically what it says, a map from one language to another, so the debugger can run the JavaScript code but show you the line that actually generated it.


First we need to tell Visual Studio to generate a source map for our TypeScript project.  Right click your Project file in Solution Explorer and select Properties.



Select TypeScript Build and in the Debugging section check Generate Source Maps.



Now build your project and the file should be generated.


Source map with Chrome and TypeScript


Now let’s take a look at the process in Chrome.  Run the project in Chrome from Visual Studio.  In Chrome we now need to enable source maps.

Press F12 to bring up the developer tools if not already open.

Select the gear icon.



In the resulting window make sure Enable JavaScript source maps.



Now you will see your ts files are available in the sources tree.  Notice how I set a breakpoint in the TypeScript source ( line 12 )?



Now refresh in Chrome:



The corresponding line in the generated JavaScript will be triggered when the breakpoint is hit.


Not perfect but definitely better.


Source map with Firefox and TypeScript


From Visual Studio run in Firefox.

Load the Debugger ( CTRL + SHIFT + S or Tools –> Web Developer –> Debugger ).

Click the gear icon and now select Show Original Sources



Now Firefox will show your TS source ( and no JS files unlike Chrome, to see them turn Show Original Sources off ).  As you can see you can now set a breakpoint in the TypeScript source:



Unlike Chrome however the debugger also works with the TypeScript sources:





Summary and another gotcha!


If you are working in Visual Studio 2013 the VS debugger works flawlessly with Internet Explorer.

If you want to work in another browser with TypeScript use Source Maps if you don’t want to work with the generated JavaScript.  In terms of browsers, Firefox supports source maps much better than Chrome does.


Now another gotcha that took me a bit of time to stumble to the solution of.  When you create a source map its actually added at the bottom of the generated JavaScript file (app.js in this case), like so:

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=C:/temp/Phaser/TitleScreen/


Here is the gotcha, you absolutely cannot use that pathing in Chrome nor Firefox, you simply wont get a source map in either browser.  Instead edit it to use relative paths like:


})(GameFromScratch || (GameFromScratch = {}));

And you are good to go.


23. May 2014



I believe there is an old law or charter that requires all programming adventures to start off with a Hello World application, and who am I to break the law ( or charter ) ?


Of course before you get started, you have to choose your tools.  One of the cool things about working in HTML5 is you can simply pick your favorite text editor ( such as Sublime Text or Notepad++ ) and just start typing.  TypeScript adds a small layer of complexity over top but not too much.  I’ll cover TypeScript in a second, in the meanwhile back to the tools.  Personally I like working in an IDE like environment, integrating as much of the development cycle ( build-compile-run-debug, although not all are relevant to HTML5 ) in a single location.  For TypeScript development there are two clear leaders to chose from, both of which I have access to licenses for.  Visual Studio and WebStorm.  You can use the Express versions of Visual Studio to do TypeScript development if you don’t have a full license, while Webstorm is available with a 30 day license ( and is well worth the 50$! ).


Personally I chose Visual Studio 2013 for a couple reasons.  First, I’ve been doing lots of Java development lately, so I miss the familiar comforts of Visual Studio, which in my opinion is still the best IDE on the market.  Second, Microsoft developed TypeScript, so you have to imagine the tooling support is pretty good.  And it is.  Of course you’ve got solid code completion, error checking and syntax colouring:



Perhaps more importantly, debugging support works as well.  You can set breakpoints, inspect values and step line by line:



However, there is a problem I encountered here in Visual Studio 2013.  It simply wouldn’t hit any breakpoints I set in code.  Granted, this is a bit of a big problem, no?  Anyways my solution was pretty simple… add the generated JS files to the project and you are good to go:




There is probably a better solution, but this worked for me.  Oh, speaking of Visual Studio 2013 problems, I encountered another one.  When you try to create a new TypeScript project, you may be prompted to install TypeScript for Visual Studio 2013.  However, when you click the link for it, it brings you to the website for TypeScript for Visual Studio 2012!  If you want to do TypeScript development in Visual Studio 2013 you need to download and install Visual Studio 2013 Update 2.  Advanced warning, it’s 3.6GB.  Of course, if you’ve been using Visual Studio recently, or just downloaded it, you probably already have Update 2 installed so it wont impact you.  Me, I was out and used my mobile connection to download the update… ouch!


Otherwise for getting started with Phaser in Visual Studio using TypeScript this tutorial is a great place to start.  A few things have changed ( like the above mentioned Get TypeScript link process no longer working ) and a few of the generated names are different ( default.htm is now index.html ), but otherwise it will get you up and running in a few minutes.  Basically you just download or clone Phaser from Git.  Truth is though you only need to add a few files to your project all available in this folder.  The files of importance are phaser.js and phaser.d.ts.  The first file is Phaser itself ( the .min version is optimized for size for when you deploy, but use the full slower to load version for development ) and the .d.ts are the TypeScript definitions.



Why TypeScript


You may be asking what exactly TypeScript is?

It’s a Microsoft created language designed to make JavaScript development easier.  One thing to be aware of upfront, TypeScript IS JavaScript, in that 100% of JavaScript is valid TypeScript.  This makes TypeScript a superset of JavaScript.  You could take any .js file, rename it .ts and it will run just fine.  At the end of the day, all TypeScript is compiled down to ordinary JavaScript, remarkably readable JavaScript to boot.


The “Super” part of superset is what makes TypeScript so useful.  Basically it adds a number of constructs on top of the language that make dealing with some of JavaScript’s worst warts easier.  More than anything, TypeScript allows you to deal with increasingly complex applications, something JavaScript really doesn’t make easy.  That’s all nice and good to say but you may be asking How?  Good question!


First of all TypeScript adds a Type system on top of JavaScript… thus the name.  JavaScript has very mutable types… if you pass a string where it expects a number, it happily converts as best it can, even if that isn’t what you want.  With TypeScript, if you define a type for a variable then use it wrong it will catch it at compile time.  This alone should cut down on hoards of logic errors.  Of course for those that want JavaScript style ducktyping “any” exists.


Second, TypeScript adds classes, something that is coming in the future for JavaScript.  This allows data hiding ( marking members as private ) as well as built in constructor support.  Data hiding is something JavaScript desperately needs, allowing multiple programmers to write code that doesn’t stomp all over each other.  TypeScript also adds the interface, which is a class without implementation, or somewhat easier to grok as a “contract”.  TypeScript also enables generics.


Third and somewhat related to the second, it also adds Modules, something modern day JavaScript hacks in using closures.  If you have used C++, Java or C#, think namespaces.  There is also functionality in there to make the JavaScript experience more consistent such as always prefering === for comparisions ( 1 == “1” isnt true in Typescript, in fact it’s an error ), consistent this handling, etc.


It’s Microsoft, shouldn’t I be afraid?

When it comes to programming languages this is a perfectly legit concern when it comes to Microsoft.  Many of us remember the “embrace and extend” approach of J#, which was a Microsoft supplied Java implementation that only worked on Windows machines.  JScript.NET and Managed C++ can certainly be looked at as lesser evils created by Microsoft.


In the case of TypeScript though, this isn’t really valid for a couple reasons.

  • it’s open source.  Real open source too not some fake opensource lite ( Its Apache 2.0 by the way ).  So if they try to make it MS only people can literally tell them to fork off.
  • there is nothing Microsoft specific in there.
  • at the end of the day, it compiles down to JavaScript.


TypeScript is hardly unique, is it?

Nope, there are other languages that work in a very similar manner and work to solve the same problems.  The closest two are CoffeeScript and Google’s Dart.  That said there are tons of other languages that compile into JavaScript such as GWT ( Java to JavaScript ), Haxe, Kotlin ( Kotlin –> JVM –> JavaScript ) and probably a few dozen’s more.  What makes TypeScript most appealing to me is it’s simularity to normal JavaScript ( unlike CoffeeScript ) and it’s not Google ( unlike Dart and GWT )… what can I say, I’ve been burned too many times from Google’s horrific developer support.  Unlike Microsoft, Dart does very much have vendor tie in ( Chome/ChromeOS native Dart support ), something to be very aware of!


Ok… set up, tooling and language bits behind us, let’s take a look at a simple Phaser app!


First you have your host index.html.  This is the webpage you load in your browser to get things started:


<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
    <div id="content"></div>


Most important lines here are the two <script> tags, bringing in first the Phaser libraries then your generated js code.  ( app.ts will automatically be converted to app.js by Visual Studio when you run if no errors occur ).


Now let’s take a look at App.ts:


class SimpleGame {

    constructor() { = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });

    game: Phaser.Game;

    create() {
        var text = "Hello World!";
        var style = { font: "65px Arial", fill: "#ff0000", align: "center" };, 0, text, style);


window.onload = () => {
    var game = new SimpleGame();


And that’s it.  Run it and your selected browser should automatically open and you should see:



Humble beginnings certainly, but beginnings all the same!

This is about the simplest Phaser application you can make.  The key line is creating game, a new instance of the Phaser.Game class.  The values we are passing in are the width, height, renderer, parent and a collection of functions that can will be called during the programs lifecycle.  The width and height are self explanatory.  The renderer tells Phaser how to render your game, using Canvas, WebGL or Headless ( for server side apps that don’t render ).  The value Phaser.AUTO let’s Phaser decide.  ‘content’ is the name of the HTML element to render to, you may notice back in the HTML file our DIV name is content, this is what connects Phaser to your HTML. The final value { create: this.create } is a name value pair saying for the “create” function use this.create.   There are a number of States that Phaser can be in, create, preload, render, update.  In this case we are simply defining the create state, so when Phaser enters a create state, our game’s create function will be called.


In the create method we simply create a text object and add it to our game using  The style value is in traditional CSS styling format.  The Text value is obviously the text to display.  Finally we wire up window.onload() to create an instance of our game starting the whole process off.  If you aren’t used to JavaScript programming window is a top level global object provided by the browser, onload is the method called predictably enough when your webpage loads.


Essentially the work flow goes:

  • user opens page in web browser
  • Phaser.js script is run and Phaser is loaded.
  • Your app ( app.js ) code is loaded
  • Your app registers a create method and creates a game instance then registers an onload handler.
  • webpage finishes loading, your pages onload is called creating an instance of your game.
  • Phaser enters a create state and your create() function is called.


Normally your application would continue to cycle through the various states ( update/render mostly ) and this is where your game would “run”.  We will look at this in more detail soon.


All told I have to say my initial impressions of Phaser are incredibly good.  There are hundreds of examples, the documentation is ample and well written.  Obviously it’s too early to comment on performance, design or other technical aspects yet.



21. May 2014


Yesterday saw the release of 2.0.5 of the Phaser game library.  Phaser is one of those libraries I am hearing about more and more recently.  It’s a JavaScript/Typescript game library featuring most of the things you would expect in a modern game engine, including:

  • WebGL and Canvas ( Pixi.js ) renderers
  • Physics
  • Sprites
  • Animation
  • Grouping
  • Input
  • Sound
  • Tilemaps
  • Caching
  • Plugins


Release 2.0.5 adds:

  • TypeScript definitions fixes and updates (thanks @luispedrofonseca @clark-stevenson @Anahkiasen @adamholdenyall @luispedrofonseca @WillHuxtable)
  • Input.getPointerFromIdentifier docs update to reflect where the identifier comes from. Pointer properties now set to give it fixed defaults (thanks @JirkaDellOro, #793)
  • Pointer.pointerId added which is set by the DOM event (if present in the browser). Note that browsers can and do recycle pointer IDs.
  • Pointer.type and Pointer.exists properties added.
  • QuadTree.retrieve can now accept either a Sprite with a physics body or a Phaser.Rectangle as its parameter.
  • PluginManager.add now accepts additional parameters and if given a function it will pass them all to the Plugin constructor.
  • Tilemap.getTile has a new nonNull parameter. If true it won't return null for empty tiles, but will return the actual Tile in that location.
  • Math.interpolateAngles and Math.nearestAngleBetween have been removed for the time being. They threw run-time errors previously.
  • PIXI.InteractionManager is no longer over-written if the object already exists (thanks @georgiee, #818)
  • Key.justPressed and justReleased incorrectly set the delay value to 2500ms. Now defaults to 50ms (thanks @draklaw, fix #797)
  • Stage.backgroundColor can now accept short-code hex values: #222, #334, etc.
  • Pointer.withinGame is now accurate based on game scale and updated as the Pointer moves.
  • Stage.bounds is now updated if the game canvas offset changes position. Note that it contains the un-scaled game dimensions.
New Features
  • New force parameter added to Group.set, setAll, setAllChildren, setProperty which controls if a property is created even if it doesn't exist.
  • Group.hasProperty will check a child for the given property and return true if it exists, otherwise false.
  • Phaser.Tween.from allows you to set tween properties that will end up where the current object is (thanks @codevinsky, #792)
  • Input.getPointerFromId will return a pointer with a matching pointerId value, if any. pointerId is a value set by the browser in the DOM event.
  • ArcadePhysics.getObjectsUnderPointer will return all children from a Group that overlap with the given Pointer.
  • InputManager.minPriorityID lets you set the minimum priority level an object needs to be to be checked by a Pointer. Useful for UI layer stacking.
  • New consts: Phaser.Tilemap.NORTH, SOUTH, EAST and WEST to use with plugins and generally just handy to have.
  • BitmapData.processPixelRGB added undefined check (thanks @muclemente, fix #808)
  • Phaser.Utils.transposeArray will transpose the given array and return it.
  • Phaser.Utils.rotateArray will rotate the given array by 90 or 180 degrees in either direction and return it.
  • BitmapData.rect provides a quick way to draw a Rectangle to a BitmapData.
  • Button.onOverMouseOnly is a boolean that causes onOver events to fire only if the pointer was a mouse (i.e. stops onOver sounds triggering on touch)
  • Tilemap.setCollision has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionBetween has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionByExclusion has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionByIndex has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Graphics.drawTriangles will draw an array of vertices to the Graphics object (thanks @codevinsky, #795)
  • Polygon.area will calculate the area of the Polygon (thanks @codevinsky, #795)
  • The Tiled JSON parser will now include Tiled polygons, ellipse and rectangle geometry objects in the resulting map data (thanks @tigermonkey, #791)
  • Input.addMoveCallback allows you to bind as many callbacks as you like to the DOM move events (Input.setMoveCallback is now flagged as deprecated)
  • Input.deleteMoveCallback will remove a previously set movement event callback.
  • Mouse will now check if it's over the game canvas or not and set Pointer.withinGame accordingly.
  • Mouse.mouseOutCallback callback added for when the mouse is no longer over the game canvas.
  • Mouse.stopOnGameOut boolean controls if Pointer.stop will be called if the mouse leaves the game canvas (defaults to false)
  • Tilemap.searchTileIndex allows you to search for the first tile matching the given index, with optional skip and reverse parameters.
  • Tilemap.layer is a getter/setter to the current layer object (which can be changed with Tilemap.setLayer)
  • Cache.checkKey added - allows you to pass in a Cache type and a key and return a boolean.
  • Cache.checkCanvasKey(key) - Check if a Canvas key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTextureKey(key) - Check if a Texture key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkSoundKey(key) - Check if a Sound key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTextKey(key) - Check if a Text key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkPhysicsKey(key) - Check if a Physics key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTilemapKey(key) - Check if a Tilemap key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBinaryKey(key) - Check if a Binary key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBitmapDataKey(key) - Check if a BitmapData key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBitmapFontKey(key) - Check if a BitmapFont key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkJSONKey(key) - Check if a JSON key exists in the cache (thanks to @delta11 for the proposal)
  • New movement data added for a Pointer Locked mouse (Pointer.movementX/Y) (thanks @woutercommandeur, #831)
  • ScaleManager.bounds is a Rectangle object that holds the exact size of the game canvas, taking DOM offset and game scale into account.

The Plugins have now all moved to their own repository

Bug Fixes
  • Line.pointOnLine corrected algorithm (thanks @woutercommandeur, fix #784)
  • Line segment collision fails under certain cicumstances (thanks @woutercommandeur, fix #760)
  • The P2 DistanceConstraint method signature has changed. Updated Phaser so maxForce is now passed as object (fix #788)
  • Moved the this._reversed flag outside of the property loop in Tween (as per tween.js issue 115)
  • Emitter.makeParticles updated to use Array.isArray() check on the key/frame values, so non-string objects can be passed in (thanks @AnderbergE, fix #786)
  • Tilemap.createFromObjects will now force the creation of the property again even if it doesn't exist (regression fix from 2.0.4)
  • Phaser.Line.intersectsPoints fixed by properly checking the boundaries (thanks @woutercommandeur, fix #790)
  • Group.set and setAll were changed in 2.0.4 to not create the property unless it existed. This broke backwards compatibility, so has been fixed.
  • now returns the Sound object (thanks @AnderbergE, fix #802)
  • Device Silk UA test updated to avoid Safari conflict (thanks @jflowers45, fix #810)
  • Sound.stop on Samsung S4 would randomly throw a DOM error. Wrapped the audio stop in a try/catch (thanks FSDaniel)
  • RandomDataGenerator.integerInRange would return a non-integer value if you passed in a float.
  • Timer class updated so that code-resumed pauses don't mess up the internal _pausedTotal value (thanks @joelrobichaud, fix #814)
  • Timer class when paused by code after a game-level pause wouldn't set the codepaused flag (thanks @joelrobichaud, fix #814)
  • Stage.backgroundColor now properly accepts hex #RRGGBB and color values 0xRRGGBB again (fix #785)
  • Color.getRGB would return incorrect color components if a color value without alpha was given, now works with both 0xRRGGBB and 0xAARRGGBB.
  • Color.getWebRGB now works regardless if you give an 0xRRGGBB or 0xAARRGGBB color value.
  • If an object was drag enabled with bringToTop, the onDragStop event wouldn't fire until the mouse was next moved (thanks @alpera, fix #813)
  • RetroFont.text would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
  • RenderTexture.resize would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
  • Group.hasProperty fixed to not use hasOwnProperty, but a series of in checks (thanks @mgiuffrida for the idea, #829)
  • Tilemap.removeTile sets tiles to null but should set to index of -1 (thanks @draklaw, fix #835)


Plugins being moved to their own respository should make contributing to Phaser easier.  The repository is available here.



Personally I’ve been meaning to look closer at Typescript for a quite a while now and I’ve decided to do it with Phaser.  Of course I am going to document the process as I go, so if you are interested in Phaser or Typescript, stay tuned.  It’s not going to be a proper tutorial; as I have zero experience as of right now.  It should however still be useful to someone looking to get started with Phaser.

News Programming

See More Tutorials on!

Month List