Guide of common problems when exporting a pixi.js project with Google Closure Compiler

Imagine, the new features of your game project are finished, tested and working as expected, rainbows and kawaii unicorns flood into your imagination and a smile comes up from cheek to cheek. But… wait a moment, suddenly, you realise you just tested the development build, you haven’t tested the production build where Google Closure Compiler makes all its magic minifying, obfuscating code and crashing some things working perfectly on the development build. Bye bye, unicorns :(

Taking into account that creating the production version of a project isn’t something you do everyday, meaning you forget most of the errors you get, plus having all the code obfuscated changing ‘this.myDescriptiveVariableName’ per ‘this.ck’ can turn the task of checking that everything is working ok into an ordeal when a mysterious error shows up.

This post is a guide with the basic problems I came across when exporting pixi.js projects with Google Closure Compiler and its solutions.

Closure: The Definitive Guide: Google Tools to Add Power to Your JavaScript

Using a new library

If you added a new library you could get an error similar to this:

Example: ERROR — variable MSDFText is undeclared
message = new MSDFText.MSDFText(textString, textOptions);

Solution:

• Create an extern file (on this example it would be msdftext-externs.js file) and add it to the externs folder of Google Closure Compiler in your project. On this example, this would be the code to add to the file:

var MSDFText = {
 “MSDFText”: function(){}
}

• Make sure to add the path to the new externs file created to the object the other externs files are defined for Google Closure Compiler.
• In a perfect world, the normal thing would be that libraries include their own externs file, updated and ready to use, but that’s not always the case. On the other side, there are some externs generators where you provide the library and get the externs file generated, some work ok and some don’t.
• I got this error too with pixi.js new features such as NineSlicePlane, some filters like colorMatrix, and when animated particles support was added. The solution to apply is the same, add to the pixi-externs.js file:

// NineSlicePlane example, add this to "mesh" object
"NineSlicePlane": function () { }
// ColorMatrix pixi filter example, add this to "filters" object
"ColorMatrixFilter": {
 "contrast": function () { },
 "brightness": function () { },
 "hue": function () { },
 "saturate": function () { },
 "desaturate": function () { }
},
// Animated particles example
// Uncaught TypeError: Cannot read property ‘hasLoaded’ of undefined // (value.baseTexture.hasLoaded)
// Add “particleConstructor” and “AnimatedParticle” to "particles"
"particles": {
    "Emitter": {
        "scale": {
            "minimumScaleMultiplier": { }
        },
 "speed": {
            "minimumScaleMultiplier": { }
        },
 "spawnRect": {
            "x": { },
 "y": { },
 "w": { },
 "h": { }
        },
 "elapsed": { },
 "particleConstructor": function() { }
    },
 "AnimatedParticle": function() { }
}

Libraries specific parameters

When trying to access to a specific property from a library:

Example from MSDFText: Uncaught TypeError: Cannot read property ‘fontSize’ of undefined

textObject.fontData.fontSize=25;

Solution A:

• Replace all textObject.fontData with textObject[‘fontData’]:

textObject['fontData'].fontSize=25;

Solution B (recommended):

• On the library externs file, add the properties:

var MSDFText = {
 "MSDFText": function(){},
 "numberFont": {},
 "fontData": {}
};

Learn Pixi.js

TweenLite.to animation parameters

The problem I encountered is the animations made with TweenLite.to didn’t make the expected ease.

Solution:

• This is due to the ease parameter name (or other such as alpha or whatever) wasn’t between quotation marks or defined in some TweenLite related externs.js file. You can solve it as explained in the above case, but be careful, if you’re using object properties from a model or view defined in your project code you musn’t use quotation marks.

TweenLite.to(myObjectToAnimate, seconds,{'y':posY, 'ease': 'Elastic.easeOut' });

Objects dot notation crash

If we are reading data passed to our game from a server in JSON format, dot notation makes Google Closure Compiler to crash. Instead, we need to use square brackets notation so the property is read as a string (Google Closure Compiler doesn’t obfuscate strings)

Example: Uncaught TypeError: Cannot read property ‘gameEnded’ of undefined

this.bc.ll=s[o.ut].gameEnded

Solution:

• For this example, that unreadable text actually is: this.gameModel.gameEnded=data[GameData.STATE].gameEnded where we are saving the gameEnded property got from the server data.

this.gameModel.gameEnded=data[GameData.STATE][‘gameEnded’];

Setters silent crash

There’s no error, in my case, the problem came from a function whose purpose was to define a text string and print it on screen. The text wasn’t printed on the game.

The problem is related with Google Closure Compiler not being completely compatible with setter functions that do more than only setting a variable to a value, in fact, the function related is deleted from the code because Closure Compiler thinks it isn’t used: On the final code generated, there’s no trail of the function nor the calls to this function.

This issue doesn’t happen with all setters so I couldn’t get the particular reason for this to happen.

// Definition of setter
set myText(value)
{
    value = value.toString();
    if(!this._myText)
    {
        this._myText=
            this.createPixiText(
                value,
                this._myTextLayout,
            );
    }
    else
    {
        this._myText= value;
    }
}

// Call to setter
this.myText= "hello world!";

This code to be compatible with Google Closure Compiler needs to be refactored into this:

// Function definition
setMyText(value)
{
    value = value.toString();
    if(!this._myText)
    {
        this._myText=
            this.createPixiText(
                value,
                this._myTextLayout,
            );
    }
    else
    {
        this._myText= value;
    }
}
// Call to function
this.setMyText("hello world!");

I hope this guide can save some time and headaches and lets kawaii unicorns fly freely again 🦄

Advanced Game Design with HTML5 and JavaScript