The Ooze Factory prototype is ready to play!

This is a game that I’ve wanted to show off ever since I made it. There’s a lot I love about this little game. From the color scheme to the way I ended up designing levels, I love it!

More on that I’m sure will follow, but first I wanted to talk about what it took to take the dev copy of the game and make it ready to publish.

78KB

The biggest problem I wanted to work on was trying to reduce the amount that needs to be downloaded. In the end, the entire game fits in less than 78KB compressed, which did require some fancy foot work.

Custom Build

The first step was building a custom version of Phaser only including the modules I was using. That got me down from 800KB to 459KB minified.

Code Coverage

The cooler part of all this–which I’d like to write more about in the future–was to use Chrome’s Code Coverage to further reduce the size of the Phaser library. Coverage keeps track of all functions that are used and not used and lets me export that data to a JSON file.

I had some issues replacing unused functions with noop functions, as some ranges were off but it got me close enough to finish the job.

Using this information I was able to reduce the final size of the library from 459KB minified to 288KB minified.

This, however, isn’t without risks.

The problem with this method is if a section of code doesn’t get executed while I’m analyzing the code (i.e. playing the game), it won’t get marked as used and will subsequently be removed from the library.

In the future I could plan on this one better but at the time I was right not thinking about it.

For now, the game is simple enough and I’m willing to take the risk. It’ll only be edge cases that fail to work and being a prototype, I’m sure I’ve missed other edge cases too. If I’m going to fail, might as well fail big, right?

Regardless, I might cut this optimization in a future update. I did this for fun and wanted to show off the results.

It’s the only method I’ve mention that isn’t simple or straight forward to solve so of course it’ll definitely be the one that will cause me the most headaches.

Compression

Itch’s CDN serves HTML and JSON files compressed but not JavaScript files. At first, I was disappointed. While I was able to get the Phaser framework down to 228KB minified that is still quite hefty compared to the final size of 52KB compressed.

This was quite simple to solve. All I needed to do was embed the minified JavaScript right into index.html. I could have also included the JSON level data but that would have required rewriting my level loading code and JSON is already served compressed.

The tricky part was navigating the Windows/Unix line endings differences. It’s all my fault. Working in two different environments on the same files has issues. It just forced me to handle it properly.

Narrow Browser Windows

The rise of mobile and tablet use has made it necessary to have a usable narrow format website. I take advantage of this when I’m working on my laptop (single screen) and need to reference something too. Sometimes I’ll continue to browse that way.

Why am I bringing this up?

I originally set my game’s width to 640px which is the default Itch also sets the width of a game when played in a browser.

But there’s a problem.

If I resize my browser window below around 1000px, the layout of the page switches to narrow layout where content is restricted to 600px. The game will resize just fine no matter the size of the window but Itch does not resize the game. So, about 40px of the right side of the screen is cut off.

The quick fix is to set the width of the game to 600px and adjusting the height proportionally to have the game fully rendered when using a narrow layout.

Of course, that’s assuming all design decisions weren’t reliant on needing a specific screen size. That’ll complicate things.

Next Up: Mobile Support

I’d really like the ability to play Ooze Factory on my phone. It’d be cool to be able to speed run through the game when I have a spare minute on my phone.

If you’ve tried to play it on mobile as of this writing, you may see some artifacts from when I implemented basic mobile support to test the waters. I forgot about it shortly after I wrote it and haven’t looked at it since. I need to test it and make any changes necessary before I add it to the final game.