Restoring our History: Animal Crackers v2.0!
Published on September 1, 2018
At long last, Animal Crackers has been ported from Flash to HTML5! Not only that, but we’ve launched our official 3 Halves Games store! Play the game then hop over to the store to pick up a lovely stickersheet. Supplies only last for one month, so get them while they’re hot! Read on to learn more about the history of Animal Crackers, as well as how we ported the entire game.
The Original Idea
Back in late 2013, a game jam was hosted by Game Jolt, the theme of which was Party. We quickly thought of a cute concept to merge Political Parties with Birthday Parties. The animal theme was added secondary to maximize the adorable factor. You will notice that this was years prior to the formation of 3 Halves Games; indeed, it was our first foray into the world of game development. The game was developed for Flash using Flixel, a fact that will prove vital in the following sections. Unfortunately, university came up, stalling our progress and development indefinitely.
After 3 Halves Games was formed in early 2015, we rediscovered our source code and repository. To our amazement, everything was still functional, and the code, though old, was still maintainable. We quietly finished development and released the game three years ago to great fanfare. It was curated to the front page of itch.io, received multiple LPs, and somehow gained traction on Chinese video streaming sites.
From Flash to Haxe
Even when we first released Animal Crackers, many users reported having issues playing the game, and it all boiled down to them not having Flash. We knew in 2015 that Flash would soon die, but as we near the end of 2018, it is almost an inevitability. We decided at the start of the year that we wanted to port the game, and we had decided upon Haxe as our technology to employ. Flixel was a popular library for Flash, so popular that it led to two major ports: the first was to HTML5, eventually becoming Phaser. The second was to Haxe, simply named HaxeFlixel. Due to HaxeFlixel being the most similar in API to original Flash Flixel, we moved forward with development.
We discovered an open-source tool, as3hx, to automatically convert all our ActionScript 3 code to Haxe. Great! …or so we thought. The tool is very buggy and handles conversion quite poorly. As an example, anything involving dynamic casting broke, as did nearly every foreach loop we had previously used. Not only that, but HaxeFlixel has a number of API changes when compared against vanilla Flixel. Even further, the means of importing assets into a project are very different between Flixel and HaxeFlixel, thus forcing a rewrite of all the code that loaded audio, graphics, and more from disk. We embarked on an adventure to clear as many post-conversion compiler errors as we could, utilizing CLI tools like sed to find and replace multiple syntax-similar post-conversion code issues until finally, at long last, the game compiled.
Then the runtime errors began.
First, our font didn’t load properly at all. We ended up having to create a bitmap font of our font, which wasn’t a big deal. Unfortunately, this meant all our code for sizing textboxes got mangled with the change, leading to a very lengthy process of redoing how we display dialogue. This alone was the majority focus of our efforts, as without fully functional textboxes, our game was nothing. In this process, we discovered a horrific code relic: every single animal at all times every frame was calling code to recalculate the position of the text box with regards to the player’s relative position. Realizing this was extreme overkill, we added smart checks here and there to reduce this expensive call, thus helping performance.
Unfortunately, some aspects of the original game were framerate-dependent, such as Mousey’s movement. With the port, we decided not to make a change to these in order to stay as accurate as we could to the original. After a few more miscellaneous tweaks, we finally had a fully functional HTML5 port of the game, empowered by HaxeFlixel!
We really wanted to add a new animal to the game. After all, this is v2.0, isn’t it? Unfortunately, the game was already packed full of animals and items. As it turns out, there was exactly one spot left available for a new animal, seen above. We decided to bring back the alien bunny from our later game, EXTRA PLANETARY. What quest will the bunny send you on? What item will it give you? Only one way to find out: play the updated game!
Categories: Animal Crackers