JSuper Mario 1K – My JS1K Spring Entry

by Vincent Thibault, posted Apr 10, 2013 in Blog (No Comments)

jsuper-mario

Two weeks ago ended the latest JS1K contest (submit an awesome demos in just 1K of javascript), I created for the occasion a Super Mario running in an infinite world (If you want to take a look at the Source code).

I had the idea of doing a Mario by visiting @jseidelin’s site, you can actually see in the background the sprites I used for my entry (thanks to him to allow me to use them).

Storing sprite

Before starting I knew that just storing the sprite in the script will exceed the 1K limit. I decided to store the pixel color using 0 and 1 and let JSCrush do its job, since there will have a lot of repeated sequence, the compression will be far better.

I came finaly with this:

for(k=a.createImageData(91,16);5824>i;i+=4)
    k.data[i+3]=1<<"0008888880000000088888800000088888800000008888880000000888888000008000000008800888888888880008888888888000088888888880088888888880008888888888000888888888000088888888808888888888888800888008000000008880080000008880080000000888008000000088800800888008888888880888888888888880808000800000008080008000008080008000000808000800000080800080088800888888888088888000008888080880008000000808800080000808800080000080880008000008088000800080088888888808888008880088808800008888800088000088888088000088888008800008888800880000888888008888888888888800888008880000000000000000000000000000000000000000000000000000000000000088000888888888008880088800888008888888000000088888880000088888880000888888888000088888888888000088888888808888888800088808888888888800008888880000088888888800088888888880008888888888808008888888880888888800888888888888888888000888888000008888808800000088808888800888888888880800888888888088888880088888008808808800008888888888000888888888800008888888808808888808808880888888888088888888888888800088888800000888888888800088800088880008888888888888888888888888000888888808888888800888880088888888000888888888800000880088880008888888888888888888888888800800888808888888880088888008888088880088000888800000008888888000888880088888888888888800000088800080888888888888888808888000888800000088888000000888888880088800000000000888880000000008888888088888888888888888888800088888000000000000000088888000008888000000000000000000000008888888808880000000000000"[i>>2]; // can be replace by i/4
(m=c.cloneNode()).getContext("2d").putImageData(k,0,0);

Which generate this:
mario-sprite

Map rendering

The map rendering wasn’t complexe at all, so I will not explain it here, just check the source and you will understand.
The tricky part was to change the sprite base on the Y position : if ( y < 4 ) rendering ground else rendering [?] cube.

Optimizing Space

Seems I know I will use JSCrush because just the sprite exceed the 1K, I did a lot of optimizations to gain bytes.
The idea was simple, try to repeat the same code multiple times to help the packer to pack bytes.

  • 150-16*j-0“, the -0 is not needed but added it to the code allow me to gain one byte (reason : there were multiple occurrences of “150-16*j-” in the code) (same as 150-16*j-16, it was at start 150-17*j).
  • (s=13,160)” before it was 150. I modify this part because there were a lot of occurences of 13,16 in my script.
  • j&&(i-5+x/13)% Another de-optimized part, the j was inversed in the check ecause used each time, it was better to not cache this operations.
  • Also, I don’t know if I’m the only one to think about it but JSCrush use variables, why not use the same variables to avoid recreating some others and gaining bytes ? So I used Y as a tick variable and $ as a look at variable. Which saved me 4 bytes.

Result ?

jscrush


Best compression Ever ?

Source code





Leave a comment