GOOD NIGHT, SWF PRINCE
As many internet content creators from the early 2000s will tell you, making games with Flash was quite an enjoyable experience. It was easy to bundle all the assets and code into a single SWF file and send it out into the world for hundreds, thousands, even millions of people to immediately enjoy. Clicker Heroes was, of course, one such Flash game that found an audience and really took off in popularity.
Sadly, that same ease of use and distribution also allowed for ridiculously invasive and poorly created ads and scam applications to flourish, causing major performance strain on some websites. And so–for the sake of internet sanity and security–Google, Mozilla, Microsoft, and Apple banded together to slowly push the Flash player plugin off a steep cliff, with Adobe giving the last little nudge from behind in October of 2020 to send it over the edge.
And with that came the end of playing Flash games–and Clicker Heroes–in the browser.
So, yeah…it’s probably about time to pull back the curtain on what we’ve been working on.
Clicker Heroes is currently being recreated in Unity. With this port, players will once again be able to play the game in the browser.
We’re quite anxious to get this port out as soon as we can. However, while a lot of progress has been made, it needs a bit more time before it’s ready to show off.
In the mean time, let’s take a little look at what went into making this port.
FROM ACTIONSCRIPT 3 TO C#
The original Clicker Heroes was programmed in ActionScript 3, a language similar to JavaScript but exclusive to Flash. AS3 is very dynamic and allows programmers to create data structures on the fly. Such flexibility means you don’t have to write as much code, though it also makes it slightly more difficult to manage.
Unity, however, uses C# as its programming language, which is much stricter and requires more code to match all of our use cases, but also executes a lot faster and makes debugging easier.
All of Clicker Heroes’ code had to be manually analyzed and ported from AS3 to C#. Thankfully, the base game code–the logic that dictates things like leveling heroes, buying upgrades, dealing damage–was organized rather well and mostly separate from the code controlling the visuals. Converting this portion of the AS3 codebase to C# was fairly straight forward, but still extremely tedious since there were thousands of lines of text to pour over in many, many files.
PORTING ANIMATIONS
Part of the reason why Flash games were easy to make is because the art and code could effortlessly interact with each other. Creating rollover effects and playing detailed animations was an almost frictionless experience on the developer side. Unfortunately, that experience has considerably more friction when it comes to Unity. All of the lovely, crisp vector art had to be rendered out to images, which makes them lose some of their flexibility. The upside to this conversion is that rasterized art renders faster than vector art. So one of the first steps was exporting the monster animations from Flash to a format compatible with Unity.
There are over 120 monsters that needed porting in Clicker Heroes, as well as some special animations, like level up effects, opening new gilded heroes, et cetera. Quite a monumental task.
To make the process easier, a tool was created…using Flash. Specifically, Adobe AIR, which allows Flash based programs to directly access a desktop’s file system and call other programs as needed. This AIR application takes monster animations and renders each frame out as a separate image. Once all the animation frames are fully rendered, the application then creates a custom .TPS file and executes a command to another program called Texture Packer to export the frames into a sprite sheet that Unity can use. This made it possible to select literally every single monster file at once, drag-and-drop them into the exporter, and have Unity compatible sprite sheets in a matter of minutes. Despite the number of files, this ended up being the easiest part of the porting process and took the least amount of time to do because of this tool.
RECREATING THE UI
Monster animations are fun, but the actual game is about 95% UI. A lot of care went into trying to match the original look as closely as possible, down to using the same button and panel sizes, text colors, and font settings. Most of the UI in the port is nearly identical, though there are a few places where an exact match could not be achieved.
Positioning all these UI elements was mentally taxing. This is because Flash uses a coordinate system that starts at the top left of the screen and has horizontal (x) coordinates increasing as you move to the right while vertical (y) coordinates increasing as you move down. Unity, on the other hand, uses a world coordinate system that is quite different. Assuming the camera is set up for a 2d gaming experience, the origin starts in the center of the screen instead of the top left. The x coordinates still increase as you move to the right, but y coordinates go in the opposite direction, increasing as you move up the screen instead of down. So the position of all UI elements had to be converted from one system to another. The task was very menial and time consuming, but necessary for the port to be as close to the original as possible.
PERFORMANCE
Clicker Heroes is a game that runs in the background while doing other things, maybe even playing other games. So it’s important that we try to use as little of the CPU as possible. Idle games tend to be very UI heavy because information has to be polled and updated quite often for players to make informed decisions on how to progress. To prevent redundant information from being updated over and over (especially text!), the Unity port uses a process separate from the UI that tracks and flags changes in the game’s data. Leveling up a hero, for example, sets a flag for that specific set of information. Unlocking Golden Clicks is another flag. Using Golden Clicks is a different flag. Before a section of the UI is drawn to the screen, it checks the corresponding flags to see what has updated, refreshing the appropriate text and graphics only if there if the information has changed. Once the UI has been updated, the flags are cleared and wait for further changes from the game.
THAT’S ALL FINE AND DANDY, BUT WHEN CAN WE PLAY IT?!
The port is progressing well, with clans being the final big feature to be completed. Hopefully after that is operational and we’ve gone through a period of quality testing, it can be released and you’ll be able to click to your heart’s content in the browser of your choosing.
For now, we ask you to be patient a little longer while we do our best to finish up and polish the game to our standards.
AND THEN WHAT?
We aren’t quite ready to share that yet. What we can say is that Clicker Heroes got its start on Web and it will finally make its way back.
Until we can share more we’re simply excited to be updating our game so that you can enjoy playing it more easily, wherever you might be 🙂
CLOSING THOUGHTS
At Playsaurus we see the Web as a powerful medium to share fun and interesting projects. We are optimistic about the future of web gaming and look forward to making more browser-based entertainment in the coming years.