How to get the most out of code minification

Have you thought about the fact that if you use not thisa variable in the constructor and methods , then after minification, saving bytes will begin already in the fourth this?

// просто сравните длину строк
this.this.this.this.
var s=this;s.s.s.s.

I used this and some other hardened methods to participate in the js13kGames contest , the purpose of which is to write a game whose size will not exceed 13 kilobytes.

The game is almost ready, just a couple of days to stay awake ...

What kind of competition?

js13kGames, it seems, is not yet very popular in Russia, therefore, briefly:

• it is held every year from August 13 to September 13, starting in 2012;
• all code should be in one html-file;
• the size of the zip archive with this file should not exceed 13 kilobytes;
• the game should run in the latest stable versions of Chrome and Firefox;
• It is desirable that the game is consistent with the theme, voiced on August 13.

To the detriment of readability

The above example thisdoes not add beauty code to the code, but in designers and methods where it is thisused intensively, this approach saves 3 bytes per call, starting from the fifth. For example, in one of the designers there were 39 pieces this. Replacing them with self, it turned out to save more than 100 bytes.

I think in the whole project only these replacements saved more than a kilobyte.

Another technique suitable, perhaps, only for such small sports projects is a large number of global variables and functions. Almost all general-purpose tools ( random(), getUniqueID()and so on), as well as many specific things (like a function that disables anti-aliasing when scaling in a Canvas context) lie in the global scope. Here, of course, it is worth paying special attention to the names of these tools so that the code is as self-documenting as possible.

t.r() // tools.random
r() // глобальная функция

During minification, all these functions will occupy one character (instead of, for example, three if we put them in an object), which gives very impressive savings: only one function random()occurs 77 times in the code, and its “global” saves 150 bytes.

A very specific situation: I decided to store sprites in gifs encoded in base64, and noticed that all the resulting lines begin on R0lGODlh. There were 14 sprites in total (although, according to the initial idea, there should have been more), and taking this initial piece of string into a function that turns strings into objects Image, I was able to save about 100 more bytes.

The last nuance, which may even help a little with the perception of the code, is the strict need to follow the DRY principle . Why is it possible? Because the code sometimes gets too fragmented. Almost every few lines of code that are repeated at least twice become candidates for allocation to a function.

Biting off the gameplay

We managed to avoid a certain amount of code by imitating the surface on which the character runs: in fact, this is the level boundary, and the texture of the earth is simply “behind the scenes”. Unfortunately, because of this decision, the platformer, in fact, almost ceased to be a platformer, but there was no longer time to fix such a fundamental oversight.

Some units also fall into the category of “minus playability”, which, although they took up very little space, turned out to be too inadequate.

The main example: a stone, designed to diversify the landscape, could not become a surface on which you can jump. Instead, it repels the player and deals damage. I had to go to a quick hack to get out: the stone turned into a rat's den, and if you start to hit it, then a rat appears every five strokes from there.

Animation

As I said, all sprites are stored in GIF files wrapped in base64. They are minimal in size, and when creating an animation they increase by 16 times (this is the size of the in-game “pixel”). An object with a description of a sprite is also used by unit designers to determine sizes; that is, not the animation is adjusted to the size of the unit, but vice versa.

Unused

At the beginning of one of the ideas was widely replaced trueand falseon 1and 0, but, in the course of development, I totally forgot about it and remembered only at the end. Fortunately, I didn’t have to do this: by the time the work was submitted to the competition, it passed by size, and I can’t even imagine how much horror I would have to endure by resorting to such an unreliable tool.

To create music, I used a notation, where every two characters represent a sound: a string is a note, a number is a denominator of its duration (zero is a pause instead of a string). The actual duration in milliseconds is calculated by dividing the duration of the whole note by the denominator of the duration of the note.

notes: [
    'A4', 4, 0, 8, 'G4', 8,
    'A4', 8, 'A4', 16, 'G4', 16, 'C5', 8, 'D5', 8,
    0, 4, 'A4', 8, 'A4', 16, 0, 16,
    'A4', 8, 0, 8, 'G4', 8, 0, 8
]

The plans were to reduce the volume of the soundtrack by introducing “samples” - reused musical phrases, but it didn’t come to that, because the music was written for the last hour before clicking on the Submit button, and there was no talk of any sound variety.

Conclusion

Funny as it may seem, most of these optimizations for compression turned out to be superfluous: even with the original names of global variables, the game file turned into a 10.1 Kb zip archive (with index.html of 31.9 Kb). What really was not enough was time. Especially it was not enough for the level-design, a distinct soundtrack and at least a small number of playtests.

I already participated in js13kGames last year, but at that time I started work two days before the deadline. Therefore, and also due to less experience, the first pancake came out lumpy. This year I even have something to be proud of , although, of course, the gamedev is still far from the real heights of the game.

For minification enthusiasts: the code is available on GitHub .

It is interesting to learn about your tinycode-projects, share in the comments!