jscramble logo

I was looking for what HTML5 game developers do to protect their source codes. Coincidentally, Emanuale Feronato made post last week about JScrambler, which seems to be the state-of-the-art of free tools in protection for  Javascript codes.

Protecting your code is important for several reasons. Javascript is an interpreted client-side language, which means that the browser of the final user will read the code and execute it to run the game, and this same code can be accessed by the user simply looking in the page source code.

Now, suppose that your code is neither minified or obfuscated. In this case, the final user will see the exactly the lines you wrote. With this, he can: copy and modify all components of your game with the minimum effort and re-distributed as a completely new one; hack your code to submit scores without even playing your game; among other undesirable things.

Notice that, as Javascript runs in client-side, there is no real way to avoid the user to see your code and to stop him to try to decode it. But, you can make your code as harder as possible to decode. This is what JScrambler do, makes your code hard to read, to copy, to modify, and to redistribute without your permission.

Look at the following example. The code below is a function that merges two different objects, just like jQuery do:

(function() {
    "use strict";

    var merge = function() {
        var obj, name, copy,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length;

        for (; i < length; i++) {
            if ((obj = arguments[i]) != null) {
                for (name in obj) {
                    copy = obj[name];

                    if (target === copy) {
                    else if (copy !== undefined) {
                        target[name] = copy;

        return target;

window.merge = merge;

Using JScrambler you get:

var I2Y={'n':function(Y,R){return Y!=R;},'g':function(Y,R){return Y===R;},'H':function(Y,R){return Y!==R;},'d':(function(J){return (function(N,G){return (function(k){return {I:k};})(function(W){var V,j=0;for(var M=N;j<W["length"];j++){var e=G(W,j);V=j===0?e:V^e;}return V?M:!M;});})((function(S,Z,v,U){var O=26;return S(J,O)-U(Z,v)>O;})(parseInt,Date,(function(Z){return (''+Z)["substring"](1,(Z+'')["length"]-1);})('_getTime2'),function(Z,v){return new Z()[v]();}),function(W,j){var B=parseInt(W["charAt"](j),16)["toString"](2);return B["charAt"](B["length"]-1);});})('6i2bf2j20'),'t':function(Y,R){return Y<R;}};(function(){var h=I2Y.d.I("fe3d")?"use strict":"merge",z=I2Y.d.I("a6")?null:function(){var R=I2Y.d.I("b2")?"H":"target";var A=I2Y.d.I("f1")?"length":"g";var c=I2Y.d.I("8858")?null:"length";var p=I2Y.d.I("b331")?"target":"n";var E=I2Y.d.I("2c3")?"t":"obj";var P=I2Y.d.I("abf8")?"target":"length";var L=I2Y.d.I("dcf")?null:1;var s=I2Y.d.I("74")?0:null;var X,o,l,b=arguments[s]||{},q=I2Y.d.I("36")?L:"length",T=I2Y.d.I("cbb4")?"obj":arguments[P];for(;I2Y[E](q,T);q++){if(I2Y[p]((X=arguments[q]),c)){for(o in X){var w=function(Y){l=Y[o];};w(X);if(I2Y[A](b,l)){continue;}else if(I2Y[R](l,undefined)){var D=function(Y){b[o]=Y;};D(l);}}}}return b;},u=function(Y){var R="merge";window[R]=Y;};h;u(z);}());
Read more

Ludum Dare is an online “competition” that happens every 4 months and you can participate by yourself or with a team. The solo competition is the most traditional event where you:

  • Have 48 hours to create your game;
  • Must work alone;
  • Create your game based on the theme;
  • Make available the source code;
  • Can use any content and development tools (such as Photoshop and Flash);
  • Can use personal code (if declared and shared prior to the competition);

There is a list of possible themes that are voted by community, at this moment, we have in the final round themes such as: “Control More Than One”, “It’s NOT suppose to do THAT!”, “You Are Your Own Enemy”, among others.

Ludum Dare 29 will happen this weekend. Next week, after the 48 hours, community will judge the games. All participants that SUBMITTED a game can do that, giving star ratings (1-5) in 9 categories: Innovation, Fun, Theme, Graphics, Audio, Humor, Mood, Overall and Community.

My first and last Ludum Dare was the #24, where I create Hungry Flies, based on the “Evolution” theme.

I hope to make a good game this weekend.

Read more

This week I made some contributions to EaselJS project. These contributions were simple pull requests to the official repository, but I’ve never did such things on Github or other version control systems, so it was a bit confusing. This post just register the steps I took to do this.

1. Create a fork of the project you want to contribute. This can be made on github interface:


2. Clone the forked repository, for example:

git clone git@github.com:<username>/EaselJS.git

3. Create a new branch to make the changes. A branch is an isolated version of the project which will contain all modifications you made.

git checkout -b <branch_name>

4. Make the changes and commit it:

git add -A

git commit -m “<description>”

5. Push the changes to your forked project:

git push origin <branch_name>

6. Pull request the branch to the official repository. In the Github interface, all branches will created will be highlighted on the page of the forked repository together with a “Pull Request” button. Just press this button and send it.

You can send multiple pull requests, just adding new branches.

Read more

Few days ago, after all sprites for the player character, monsters and items were done. I was creating the background images for my game, and I notice how big they were. For example, the following image is the background of the first level and was originally saved in PNG, which resulted in 1.08MB. A whole megabyte is a lot for a single image for a simple web game, and it was in the resolution of 1024×768. The HD version of this image (2048×1536) had 2.54MB!

Dungeon Thief -Level 1 Background

These ridiculous file sizes are the result of a bad choice for the image format. An image format describes how the pixels of an image are represented. A format can trade the image quality to make the file size smaller (Lossy), or can save the image in the best quality but in the cost of the file size (Lossless). A format also can specify if the image will have a limited number of colors (Indexed) or it will have no limitation (Direct). Common image formats includes: BMP, GIF, JPEG, and PNG.

BMP is a Lossless format and can be Indexed or Direct. There is no compression at all in this format, resulting in very large file sizes. It is an old format and have no application nowadays.

GIF uses a Lossless compression which preserves the image data, but it is an Indexed format used for images with less than 256 colors, impacting on the image quality. GIF also accepts transparency, but only in 100% (totally transparent) or 0% (totally opaque) levels. It is a pretty good format for simple images with limited colors, such as logos and some simple icons.

JPEG (or JPG) is a Lossy and Direct format, preserving the colors but losing image data. This combination makes the format specially useful for rich and complex images such as photographies, where losing some data are not (or barely) noticeable.

The PNG format also uses a Lossless compression, resulting in files with much less size than BMP, and is not limited to a fixed number of colors, such as GIF, thus, resulting in high quality images. PNG accepts alpha transparency, i.e., the transparency may range from 0% to 100%. PNG was created to improve and replace the GIF format.

Given these descriptions and examples, we can summarize:

  • JPEG for complex and detailed artworks and photographies without transparency;
  • PNG for simple images such as sprites, icons, logos, and all images that need transparency;

The first image presented here, which had 1.08MB for 1024×768 and 2.54MB for 2048×1536, converted to JPEG (and keeping a good quality) resulted in 201KB and 336KB for the 1024 and 2048 resolutions, respectively. This show the importance of knowing the different formats and choosing the right one for your images.


Read more