4. Reaching 13k
- One month to go
- Same ol' framework
- 2D and 3D Rendering
- Reaching 13k
With the experience of past years, I knew that the way to go is to write cleanly designed, readable (as in explicit variable names and no convoluted construct), commented code, and avoid any type of premature compression. Zip will take care of that, and all 1k-compo-style optimizations to gain a few bytes are definitely banned. One should start paying attention to the size towards the end. A good approximation is 10 kb of readable, commented code translates to 1kb of minified, zipped archive. I hoped that with the repetitive nature of WebGL instructions, I could pack a bit more, but the final figures tally a ratio of only 9/1.
Each year I make the promise to automate the build process before the next competition begins, and each time I keep doing it manually. I still need to figure out a way to integrate external tools in the process. At least I am getting used to the different steps so they take no more than 5 minutes total. Which is still a lot when you are in the last sprint trying to reduce the archive below 13kb. Having a hook to your revision control tool to rebuild everything at each new commit is faster, and definitely stress relieving in those final moments, as weariness and stress compund the risk to make a mistake.
I keep a directory dist/ in the project folder to host all releases, including intermediate ones :
- create a subfolder for the new build
- copy the optimized images in the folder (see Image optimization section below)
- aggregate all javascript source into a single file
- minify that file (see Minification section below)
- insert the minified js into the index.html
- zip the images and HTML file together
Closure Compiler in Advanced mode does an outstanding job at refactoring code, pruning unused branches and renaming variables. Unfortunately, it has two major drawbacks. First, it transpiles everything to ES5, adding polyfill functions which cost extra space. I manually reverted to code to ES6 exactly once, took me half an hour, before I decided it was not worth it. The only workaround I found was not to use ES6 constructs at all.
Second, it ignores some obvious optimizations. I solved that by using a second minifier step, using Javascript-minifier. It shaves about 1Kb (out of 45) from CC's output, amounting to about 150b packed.
PNG export straight out of GIMP, even with all optional fields unchecked, is quite bigger than needed. Before you reach this step, design with size in mind : indexed colors instead or RGB, restrict to 16 colors if possible. Then try one of the optimization tools. Your mileage may vary, the one that got the best compression back in 2014 was only in the middle of the league this year.
In the past year, I trusted Ken Silverman's Kzip to consistently produce the smallest archive. That's a constant 500 bytes below Windows' built-in packer. This year, I discovered than advzip performed even better :
Things are well rounded and everything seems to be rolling smoothly ? Well, . Game development is like a roller coaster with highs and downs, and this one was no exception.
About 2 days from the finish line, I started keeping a close eye on the final size. 13600 with debug code. Out goes the debug. 12200, more features coming in. 13061. 13211. Two more to add (sfx and starfield). 13471. Oops ... Unfortunately, at that point I had already expended all the options above to reduce the code size, so I had to get creative. After all, that was only 150 bytes. Well, that starfield is drawn with GL_POINTS, so normal and texture coordinates are superfluous, right ? The fragment shader needs something in the attribute, sure, but it is only used for triangles, not points. Reusing the ones from the Death Cube will be perfect, good thing they are numerous enough (19.700 vertices vs 8.000 stars). Good try, worth 40 bytes, 110 to go as midnight passes. To speed up things I cut on the AI, leaving one message for each event instead of a choice of two as initially set. 13245. All set.
I am still unhappy with the way explosions look, although the engine exhaust uses exactly the same routine and looks fine. All of them (explosions and exhaust) are quads with a dedicated fragment shader. I deferred fixing this until the end of the project, unfortunately there was simply no time left for that.
- One month to go
- Same ol' framework
- 2D and 3D Rendering
- Reaching 13k