A Man and a Dog – a game made in 72 hours for Ludum Dare 43


A Man and a Dog is a game I’ve made in collaboration with my friend, Chris Lee. It is a game made in 3 days, for the Ludum Dare competition.

You can play the game here: https://yyz.itch.io/a-man-and-a-dog

This slideshow requires JavaScript.

You can view screenshots of and feel free to rate the game on the competition page to show how much you liked or hated the game: https://ldjam.com/events/ludum-dare/43/a-man-and-a-dog


What is Ludum Dare?

For those that don’t know what Ludum Dare is, it is the world’s most famous game jam competition where participants have either 48 or 72 hours to make a game related to the announced theme. Anyone from any country can enter. On 1 December 2018, the theme for Ludum Dare 43 was announced – “Sacrifices have to be made”, and I spontaneously decided to take part, inviting Chris with me to join.

Here I will talk about how this game was developed in 3 days, how the core idea came to be, how it changed and will contain spoilers for the game so if you intend to enjoy the very short story or experience the little surprises in the game for yourself, you may want to play it first. Or if you don’t care, just read on.

This is also an exciting post because I will write about the entire game development pipeline all in one long post, from design to art to code to sound. Here we go!

Day 1 – Ideation

First draft of GDD (Game Design Document), used to outline the entire game’s features and gameplay mechanics

In light of the theme revolving around ‘sacrifices’, we initially had the idea of doing something related to the Trolley Problem, and make it into a game where the player has to make moral decisions, such as between sacrificing 1 loved one or 1000 strangers, and play out multiple scenarios like this one where you roleplay as possibly a different person each time.

Above you can see our brainstormed scenarios written in the GDD

However, in the end we decided that we needed to have an emotional context, or the player won’t feel anything for the sacrifices. So we needed a story! We needed a main character, so we decided about a Man. And maybe a dog! Basically, we want to tell a story about a man and a dog – I wonder what such a game should be called. The decisions the man has to make will get incrementally more devastating, starting with small decisions before ending with possibly having to sacrifice something he loves.

Given the time constraint, and this being our very first Ludum Dare entry, we had to be careful and humble with our scope.

Now that we had our idea grounded, we needed to settle how the game would look like or play out.


For art style, Chris suggested that we look at ‘The Monster Inside‘, aiming for a black and white, low poly Film Noir appearance. Our priority isn’t to have fantastic looking graphics as we want to spend the time focusing on our idea.

For story inspiration, we had a look at a short film: To Build a Fire

Day 1.5 – Prototyping

We spent about 1-2 hours just talking about the story and gameplay on Skype and Chris awesomely wrote down our discussion into a neat flow chart to structure our story and to label each scene for development.

Untitled Diagram 2
Diagram above contains story spoilers!

I then dived into writing the code and a system to establish the flow of the game and within a night I had a prototype running up with a complete system to add, remove and insert scenes wherever they are needed. This was done by creating a StoryManager singleton which can be thought of as a master script that controls the scenes and how they flow between each other.

The StoryManager

Why make a system when I could have easily done it faster with something simple like if-else statements?

Well, for me that is my preference and my takeaway from past projects. Thinking of and writing the code for a proper system can cost more time initially, but I felt it was important to have the flexibility of removing, rearranging or chucking in new scenes easily since this was our core concept and I didn’t want to waste time rewriting code later on if we underwent major story revamps.

I got started with some previsualization (previz) by modelling some simple objects for a typical forest scene. This was basically to visualize how the game looks and feels with some very basic assets (the 3D models of trees were just modelled with the bare minimum details to look like trees), so as to visualize a forest, which is our primary location.

Before and after configuration of lighting and post effects

This is the first look of our game on our first night I made up with some simple animated trees and some particle effects at the bottom (they are used for the campfire and fireflies). I quickly put those together to inspire Chris before he began working on the official art:

Early visualization of the game with swaying trees and particle FX

Along with some mock gameplay to test out our idea:

Scene to scene transition based on player’s choices

The player is able to select their choices by clicking the buttons below and they would each lead to a different scene, transitioned with black screen fade outs. Music was later added and is persistent through scenes.

Animation test: Scenes need to support playing different animations. Above, the character will always move toward path selected by the player.

I then showed this to Chris. Some things we noted: The characters were static and would only play out fixed animations based on the options we chose. The only thing the player can do is to pick one of two options. We felt this made the game feel too short and wasn’t very immersive. We wanted some level of interaction, where the player is able to interact with the environment and make choices on what to interact with.

We had only spent a few hours. Our first day was very short (less than half a day) as the jam was actually announced at a very bad timing called right-before-my-bedtime. So I went to sleep just as the jam started and we only had a few hours to work for day 1 before Chris knocked off for his turn to sleep.

Day 2 – New perspective and movement

The next day, we decided to then try out having controllable character movement similar to MOBA games like Dota. But we opted for WASD movement instead of clicking to move. The size of the world was also increased. It gave us this.

Adding the third person controller and a ‘WTH is that moving thing’

But now the world was too big and trees would occlude the camera view. However, we liked the dialogue popups that would appear as we get closer to certain objects and disappear as we moved away. Being able to control the character also improved immersion. So we shrunk the world back down to keep the play area small and kept the things that we liked.

Day 2.5 – Integrating final graphics

Then came the time to create the art. Chris handled much of this area, whipping up all the necessary 3D assets to create awesome environments, props, and characters. We went for very minimalistic shapes for the characters – cubes. But I felt the cube characters were a little bit too simple and I was worried the player may not be able to identify the secondary characters too clearly, so I added more facial features, such as jaws to the wolf to clearly identify it as a menacing creature, and two legs to the woman character, to show that she is a humanoid and not a four-legged animal.

The tree swaying and dog idle animations were made with by Chris with something called blend shapes – to make the tree move from one position to another smoothly, two “snapshots” of the tree’s shapes at the extreme positions are made, and then the software blends them together to form the missing pieces (the in-between frames) to give the illusion of motion, and hence, blend shapes!

For workflow, he passes me the characters and props assets individually as FBX files. FBX files are 3D model files (like PNGs but in 3D). So the tree FBX contains the geometry of the tree, the animation data (blend shapes) and also the textures. In this case, it may not look like we have textures, but we still have a ‘grey material’ on the tree.

We used only a single tree.fbx.

And then we have 16 environment models exported as FBX into the Unity game engine. The environment FBXes look roughly like this:

But the trees in the environment here weren’t exported with animation (by intention), just the geometry. So to get all the trees to animate they would have to be individually re-positioned in the engine (Unity) again even if they are done from the 3D modelling software! But isn’t that a waste of effort and time to do double work?

Well, I didn’t want to manually go through scene by scene and replace each tree 1 by 1 with the animated version of it, so I wrote a script to do that for me!

My TreeReplacer script (C#)

I’m not sure if this is actually a pipeline-related issue of exporting files from one software and importing into another, but from time to time on projects I face “time-costing” issues that are stuff which are super simple to do but just tedious. Sometimes I just use scripts to handle repetitive chores because that’s what programming is for – save time on repetitive tasks, even when it comes to art. So here I just wrote my own tool to save time when handling the importing of assets from different software. This script will add the necessary components needed for the animation and take care of scale, positioning, rotation of trees across all current, and future imported scenes. I ran the code in a safe test environment to confirm that it works (in case the script ends up destroying stuff), before finally letting the code run within the editor on the actual models. Within a few minutes I had replaced all the static trees with animated ones. It would be a LOT less fun to do this by hand with manual labour, and take up way too much time in a game jam.

The last thing to do was to play the animations at random timings so all the trees sway at different speeds. Yes, we only had just ONE tree model, ONE tree animation for the game. They were all just of different scale values, and playing at different animation intervals to make it look like we had a variety of trees. Talk about efficiency and cutting costs time!

Cool-looking swaying trees by Chris

Along with occasional particle effects, our forest was looking very alive. This is important even for a game where the environment isn’t the main feature because it makes your game more immersive, and you make the player actually feel eager to want to explore.  Now that we had our cool-looking swaying trees, it was time to move on.

I continued working on getting the dialogues ready.

Screenshot 2018-12-03 19.48.51.png
Multiple dialogues setup, with each dialogue containing its own unique choices.


This was a lot harder than it seems as every scene can have multiple dialogues as opposed to the previous system fixed at one dialogue per scene. The dialogues were also now at the world-space level rather than as a user interface, which means that they are placed within the game world itself rather than as a UI element overlay. We completely removed the need to interact with the mouse and choices can be made with the “Q” and “E” keys. Also in the image above, the dialogues were varying in sizes, so I changed them to be more consistent in size and positions, and used this shader which would make the UI render on top of all 3D objects, regardless of their z-pos. (By default, objects closer to the camera are drawn on top of objects behind. However, that shader allows me to have a dialogue panel all the way at the back of the environment, and yet still be drawn on top of it, without getting blocked by trees that are actually physically positioned “in front” of it in the world.)

Screenshot 2018-12-03 19.54.11.png
Consistent dialogue sizes

Chris also suggested that I lower the opacity of the dialogue background panels. This way, they weren’t as obstructive and I could make them bigger, and have larger font sizes for better readability.

Now we were getting somewhere.

Scripting wise, I wrote the text in Visual Studio, the IDE I use for programming.

A bunch of code that does some thing

Dialogue was previously determined in code. It was my preferred way. The script would determine what each scene says – the scene name, description, the dialogue choices and all the text data was nicely packed in one script and easily navigatable instead of scattering the text throughout different scenes.

My old way was to use a script to set the text in the dialogues

However, with the change to support different dialogue panels per scene, doing it by script could actually be less organized. So I implemented the dialogue in a more object-oriented fashion, which was more visual. So I got rid of the old scripting way of setting text.

blog 25 workflow.gif
Taking an object oriented approach to the dialogue texts

Above, I am able to dive into any dialogue panel and edit the text immediately and move them around in the editor to anywhere I want.

Edit mode in one of the environment scenes


The ‘range’ in which the player must be in for the dialogues to appear are indicated by the green spheres at the bottom, again very visual for me to edit and each dialogue panel’s radius can be customized too.

In-game look with all panels active


Day 3 – Animation and Scripting

Now came to the final day. This was the most intensive day of all. Chris had by now completed the 3D assets and prepared some sounds for the game. I worked to implement the story and scene animation.

Trigger colliders are the backbone of the game’s scripted animation events

Events were being triggered mostly through colliders. I placed a trigger collider on the player which makes it easy for me to trigger events based on player’s position to the target ‘interactable’ object. I would use these events to trigger various things like animations, dialogue popups to appear, and even sounds. This makes it super easy for me to call animations dynamically.

But that was the hard part too – dynamic animations meant some things had to be scripted rather than having purely keyframed animations.

This was a huge chore, and the animations for each scene would take me between 1 to 2 hours each! It’s not just animation, but scripting  as well as the animations are pertaining to dialogue choices. The game is actually more animation-heavy than I thought, as we have many scenarios and each scenario has multiple choices and outcomes!

For one of the scenes, Scene 6, I had “6a”, “6b” and “6c” animations to make, just for one scene! Even if they are just four seconds of animation each, they each take time.

It’s a small game but the list of animation files can compete with some of my larger games

There was not a lot of time left so I worked through the night to animate everything. All the animations were done on the game engine side, using Unity’s Animator tool.

It’s actually not that scary

The animator allows me to trigger events and functions, so you can have a trigger activating an animation that triggers an event that triggers some sound to play and triggers another animation. If you’re not careful you end up with ‘triggerception’.

More bunches of code that does things… like cutting off the player’s leg

If you’re actually reading my code, which you should not be, note that my code for the jam isn’t actually the cleanest. It is a game jam afterall, and speed is prioritized over cleanliness for some scenarios, though I always make an effort to stay organized.

Intertwining animation events and code frequently does get really complex in a narrative or story driven game like this one which relies a lot on these. I had never made such a game before so this was definitely a good learning experience.

The most simple animation controller ever ironically is the character.

Precious time was ticking by as I only had a few hours left.

I also changed the camera from Perspective to Orthographic, which was an idea by Chris, to make you feel like you are in control of the person from some higher being, and to get the 2.5D isometric look.

Top: Orthographic VS Bottom: Perspective

The perspective mode has a more 3D look and has more depth, but we didn’t need a huge looking world, just a small one where you can view the world at a distance. It also eliminates the worry of needing to have details up close, which matches our low poly style.

However, I really liked the perspective view, so I kept that for the Main Menu’s camera. Speaking about the main menu, it was time to do up a proper menu. A Main Menu is important because it is the first impression players get about the game. So making sure it’s not too haphazard was one of my priorities. I added a slick camera transition to move to and from the achievements, which was later improved to this:

blog15 menuCameraTransition.gif
“Fancy” – Chris

This was easily done by grouping the achievements’ UI and separating it to render under a different (world) canvas from the screen canvas, a trick which I’ve always used to render world-space text and UI. By using multiple canvases, I could fade out specific UI without affecting others, and also control each canvas’ graphic raycaster, thanks to Unity’s <CanvasGroup> component.

This also allows me to ignore clicking on the screenspace canvas when it is faded out, resolving a  bug where invisible objects were still receiving user input from mouse clicks and causing buttons to trigger clicks unintentionally.

With that, it was time to export the game to WebGL, so that it can be played within the browser! I was careful to make sure this was set up right because porting it to web can cause many issues depending in the project if not done well. I had lost hours just digging through web issues in the past where bugs or problems would occur on the web versions of the game despite looking fine when I played it locally on the computer.

Testing out the WebGL build for browser

This time, I faced no issues getting it to work on the web. I had made an interactive web piece recently, so the workflow and knowledge I had to export the game to WebGL was still fresh in my mind and this was done very quickly.

I also added an achievements screen into the main menu.

An achievements screen showing the lack of a default locked icon. Just a white square? Seriously?


At this point Chris has also just woken up and was able to help with addition of some sounds to help improve the game.

Even in a short game jam, sounds are very important to give audio feedback to the player, in addition to the visual feedback. Playing a sad whimpering dog sound versus a happy, excited dog bark makes the difference to help the readability of the consequences of the player’s decision in the game. Chris did a good job finding the sound.

One of the fun sounds I wanted to add was a jarring jump scare sound that I really wanted to have for this ‘shocking’ scene, where the player gets abruptly smashed by a FREAKING GIGANTIC CUBE with SHARP SPIKES AT THE BOTTOM.

crateFall JumpScare.gif
No I was not joking.


20 minutes left – But one last thing to do

With 20 minutes left to the final submission, I quickly cooked up a final feature, to make the final scene a lot more impactful.

For the entire game there was one thing evidently missing in the world by intention – colour. I wanted the final scene to have a visual impact and really sell the ending. As it is a simple game, there isn’t much more we could do to enhance gameplay or story. But to make the ending be more powerful, I added color.

Blog 08 Greyscale to Color.gif
The scene colours itself as you walk toward the exit

Yes it is partly because I was sick of seeing the grey, colourless world, but hopefully it also breaks the expectations of the audience to do something cool.

This was a quick way for me to make the ending of the game cool and memorable. It was done with swapping out the default post processing effect’s profile I had put on the camera with one that supported (de)saturation and changing the saturation level by script. Basically it’s realtime scriptable color grading, pretty cool.

By the way, the game assets are actually black and white, and the final scene is the only one where I gave them coloured materials.

To make this scene even more prominent that it’s the final scene, I extended the size of the map with a flipped duplicate of the square terrain (which I bet you did not notice). Not only does this give you more ‘distance’ to walk for the colour to fade in more gradually, but I feel it also kinda marks it in your subconscious brain that this is different from the previous levels and is the final level, setting the right expectations that the game has ended, leaving you satisfied instead of feeling abrupt.

And with that I submitted the game for the competition!

Polishing the little things

I added an achievement panel popups for when the player earns an achievement for the first time, so they know they unlocked something.

Blog 28 achievement.gif
A satisfying popup notifying player when an achievement is earned, accompanied with sound goodness

Then I added a proper settings panel with the ability to restart or quit, and adjust music and sound volumes separately.

The achievement icons got upgraded graphics and have some animated FX on the icons for when they are earned.

Achievement Screen with new icons and FX
I also drew a default locked icon for unattained achievements

I also used depth of field to create a background blur effect when the player dies.

Using depth of field to quickly create background blur

I also added ambient occlusion (SSAO) to ground the scene more and to get more dark shadows underneath the pine trees so the cone layers of the trees look more defined and closer to Chris’ reference layout images.

ssao comparison.gif
SSAO comparison: With and Without

Honestly it looks so much better. In case you were wondering why it isn’t baked, the effect is screen-spaced as there simply wasn’t enough time to use baked lighting to obtain true global illumination (GI) and AO for the 16 scenes that we have, so performance wise and visuals wise this could’ve been improved through baking the AO outside of the jam. This method is also so much quicker to do as it is just a few clicks.

It was also after the submission when I made the change to the final coloring visual effect to the final scene here, to transition based on player’s distance to the exit, so as he gets closer to the exit, color will slowly fade in. This was really cool, as opposed to the previous method where it just gradually faded in. I didn’t have time to write the proper code during the jam so it was only done when I had time for polishing.

blog 26 saturation.gif
As seen above, previously the level would colour itself based on time instead of character movement, which was cool but was cooler with it being position-based.

Unrelated to the game, here are some cinematic shots of the environment taken with a completely different perspective from the game. It has a totally different feel with colours and even looks like an entirely different game. I picked out some of my favourite compositions, which is basically all of them.

This slideshow requires JavaScript.

Upcoming Improvements?

1 day after the game’s release, we got our first rating and comment from a nice person on the internet, Lizouille.

Blog28 comment.PNG

Some improvements to make to the game as comments from my friend was that the first two endings didn’t felt like endings, which was not helped by how the “you died” panel wasn’t significantly different. So I will work on changing that. I initially planned to have a transition to full black screen slowly and then have just text on the final screen of each ending, but I had no time to do that during the jam, so it was dropped.

I also want the achievements popup to say 1/3 or 2/3 achievements earned, so the player knows that more endings are possible to get in the game.

My Thoughts / Reflections

This is one of my most relaxing game jams. I actually slept, bathed and ate normally. I didn’t feel that pressured by time until the last day, when it got pretty crazy. But it was still pretty chill. It was my intention to not want to sacrifice my sleep or take it too seriously because it was just a tryout and I was already late to the competition anyway, so I just wanted to take it with a more relaxed mindset as opposed to feeling frantically forced to work at a fast pace. I think we all have had enough of that in life already 🙂

And yes, I was late because I was confused by the actual competition’s start time due to different timezones. I thought I still had time to sleep before starting, but it actually started way earlier than I anticipated. I didn’t even have a team so I actually only started asking all my friends if anybody was interested to join me. And this was AFTER the jam had ALREADY started, and having to explain to everyone I asked that this was a super last-minute thing. I was half not expecting anybody to be able to commit on such sudden notice. Only one friend was free enough, Chris, which I am grateful for.

This being my first Ludum Dare, I was expecting to make many newbie mistakes too. But so far it was pretty smooth. I think having created lots of games before and having experience helps. As I was on Youtube reading and looking at other peoples’ jams, I saw that a number of people actually failed to submit – they just didn’t know how to fix their bugs, encountered problems with their project or simply faced technical issues that stopped them from making their game. So I am definitely happy with what we made and it really is something to celebrate to be one of the 2500 games in the world that made a game for this competition, given how little preparation we had. There were bugs on release definitely, such as the character getting stuck in the environment.

And character stuck in bear trap

(Which I’ve fixed.)

And the dog spawning in weird locations and falling off screen.

(Which I’ve also fixed..)

And a bug where the blur caused by depth of field did not get disabled.

Screenshot 2018-12-04 11.01.36.png
(Which I’ve also also fixed…)

Was that list of bugs ever going to end? Anyway, so what did I learn from this experience?

Expanding my Design & Technical scope

This is not the usual type of games I make. I have a preference for creating games with fun gameplay and a sense of progression, but I didn’t want to always work on familiar territory and genres or topics, so teaming up with Chris, and in joining this Ludum Dare, I get very curious to see what games other people would make too with the theme. This way my scope is expanded, and as mentioned above, I may be using familiar tools (Unity, Animator), but I’ve used them in new ways to create things that are normally not required of my projects, so this is a good learning opportunity for me as well.

While I could have gone solo, working in a team almost always provides better quality results, and is especially important during the design and feedback phase.

Animation Skill

This jam also lets me practice, train up and apply the animation principles I’ve learnt in the past year while studying Animation. I doubt I would’ve been capable of creating these animations without studying proper animation techniques prior. To make simple cubes look good, you have to think outside the box. Ha ha. Squash and stretch, easing in and out, staging – you’ll see those at play for many of the scenes and character animations created – I want to inject life into lifeless black and white cubes and make it feel good to look at them.


This project is a reminder to myself that animation isn’t just about making something move or performing an action for the sake of it. You want to make that behaviour look obvious, readable and the action interpretable by the player, without leaving him confused as to what he just saw or leading him to the wrong focal point. Moreover, you want to aim to have the animation be pleasing to watch if possible.

My favourite one is the dog circling animation at the start of the page which plays when you offer to share food with the dog (the other smaller cube).

Here it is again so you don’t have to scroll all the way up to view my awesome animation. (Ha ha.)

The way the dog appears to bob up and down excitedly, pouncing around in circles. He’s not just moving and rotating in a circle around a point which could’ve been the easy way out to ditch animation quality for time in the game jam.

The ones that got me spending the most time on was animating the final wolf scenes. Here are spoilers of the animations.

blog 18.gif
Wolves attack poor doggy 😦
Blog17 wolfFight.gif
Revenge on wolfCubes!

Okay so I am not an animation expert but these were what I did to make the scene’s animation as believable as possible. Having some anticipation action before the wolf lunges forward prepares the viewer for what is about to happen. The stretching of the wolf as he’s in the air and the squash as he gets hit by the man’s weapon exaggerates the impact and action. The man character leaning forward in the direction he is jumping toward gives him weight and makes the jump believable as you can tell by the posture where he is jumping toward even if it were to be a still picture. The man swinging the weapon backward just before he strikes the wolf makes the swing look more powerful as it looks like the energy has been built up. The big wolf’s rocking body as he struggles to get up when he’s overturned makes him feel heavy and stuck. And overall staging makes sure every character’s animation is the focal point at the right time and will be read by the audience. Usually only one animation should be playing at once and sufficient time should be given to ‘register’ an action, so that multiple animations don’t overlap and fight for the audience’s attention. (However, above there were some parts where the animation overlapped after I made a last minute edit that slightly screwed the timing). That’s animation in a nutshell and if I did it well, I will have to thank the animation professors who have taught me.

The best part of these animations is they were all just to do with rotating, scaling, and moving of the objects and all done in the engine without the need to go back to Maya or the 3D modelling software. No need for complex blend shapes or rigging (setting up of a skeletal joint system for characters) so in terms of the technique itself, there was nothing fairly fancy and complex which is perfect for a game jam as it is simple and saves time.

WHEW and that was how I spent my 3-day weekend. With all that done, it was time to get some rest, and look for the next exciting project!

Oh, and if you’ve read this far, thanks, and please consider rating the game HERE as every game needs at least 20 ratings to be qualified for a score during the results announcement in January 2019. And also maybe try out the other games. Ludum Dare really spawns some creative ideas out of people and some of the top games of past competitions are really creative!


Making an Idle Game Part 10

This is Part 10 of my journey of making an idle game.

Achievement Rework

Data sheet of the game’s achievements’ requirements and rewards

I had been wanting to change the achievement requirements and rewards for a long time, and was only able to do it recently after deciding that the end of the game would be at Zone 200.

After deciding the estimated point at which the game would end, I could make the achievements’ rewards and requirements based on that.

For the gold earning achievement, I decreased the requirements for the last few achievements of that group.

500Qa -> 50Qa
5Sx -> 50Qi
50Sp -> 50Sx
500Oc -> 50Sp
500No -> 10Oc


Most achievements should be attainable now, though I may need to decrease values further since this is just based on peoples’ statistics, and some people have gotten really far in the game that the data may not be good to use.

Other changes

This was quite some time ago. I saw comments on how the level 200 (final boss) monster’s description said that you could tap him to do damage even though it is immune to tap.


I was going to add a simple ‘Immune to Tap’ description to replace the boss’ hover tooltip, but then I somehow thought of this crazy idea where it would actually reflect your tap damage back onto your heroes if you try to tap him.

I got the idea when I was writing the dialogue for what the corrupted rune should say when you try to click on him… Hmm so what should it say?

How about it says that it hates you so much it reflects damage back to you?

It being the final boss, I was a little more motivated to make it do something never done in the game before, so I decided to see if I could do that.

Shield.pngI even drew a shield icon for when this happens but I think it’s going to be covered by all the damage numbers from the heroes. And after that was done, TADA!

Reflect success! Look at that bleeding warrior…

For fun: Secret Merchant


The character above is the Secret Merchant. He lives in the desert and is the person in charge of the Secret Shop. I intend to use him for some minor compensation in the future if I do intend to decrease the cost of items in the secret shop or even the guardian shop.

Final word?

Note: This has nothing to do with the game and more of my personal thoughts, you may skip this if you are not looking to read about me.

As I am going to be starting my studies soon, I predict that I may not be able to spend as much time developing this game as I want to, and juggling schoolwork + my personal projects may not be very easy. As such, I wanted to wrap the game up and my goal was to finish up Guardian 2 + Storyline conclusion before 23rd July. Fortunately I was just able to do it in the last week. As such, the game would probably not have anymore content or updates further down the road. Even if they are, they would likely only be fixes.

On the night I published the final update (v0.80), I decided to lurk in the game’s chatroom. I had a nice chat with some of the people in the chat. It was really fun and creating this game and publishing it is definitely an experience I won’t forget. Talking to these people and reading positive comments really remind me of the joy of creating something – creating a game, and sharing it with others can be a really magical experience.

The thing is, most of the comments I read on the game’s comment section are usually complaints or bug reports. Sometimes, I get comments that don’t make sense at all, getting called a sexist for the game not having so many male characters, or even get posts of browser problems that may be unrelated, etc. My friend did tell me that it is unlikely that much of what you read on the internet would be something good or encouraging I suppose, so I do kind of expect that most comments would not be something very positive.

However, I do occasionally read comments that brighten up my day. But I guess another thing I was also told to take note of when publishing a game is that it’s less of how I feel, and more of how other people feel. Reading the comments is something that I end up having to do, not to make myself feel better, but to make improvements to the game so that other people feel better. So it’s less about yourself and how you feel, but more of what the people feel.

Being in the chat room however, made me feel at ease. Perhaps I’ve been a little too stressed out lately, but talking with these other people who were enjoying the game and casually chatting rather than responding to issues made me feel so much better. It made me feel relaxed and happy to have created and published this game.

Thanks for reading.

Making an Idle Game Part 9

Making an Idle Game Part 9 – Cutscene Work & Optimizations


In this post I will mostly talk about some of the stuff in Unity. They probably aren’t too technical if you’re familiar with Unity, but for most people who don’t make games, I’ll just mark it as ‘technical’ since it may contain some jargon.

Aside from that, this is also a continuation of the previous post and I will talk a little bit about the cutscenes I had worked on.

Cutscene FX


Oh, here’s something I did for a particular space scene. I felt that for this scene, I wanted to have the ball look like it was shot out from something like a wormhole to denote that it is coming from another dimension. Without the wormhole, it looks like it just came from outside the camera and came into view. But I was a little tired to go back to my scene and add a wormhole, so I drew it as a separate asset and got the idea to animate it in Unity, using a particle effect system:


The above is not how it looks like in the game since and was just a quick test. I think the wormhole with FX may look better than just being a static object which I had originally made it out to be.

Level 150 Storyline Boss

I also drew a new boss! Yeah!


Survival Mode

I had been planning to make the game have an ending. Zone 201+ was meant to be for people who wanted to continue playing the game, and I wanted to make it clear that there was not going to be any more story  content past that, so the game had to be split into what most games do – have a campaign and survival.


I had a few ideas but it all ended up really convoluted and confusing, especially because I the game has 5 savefiles, 1 autosave, 6 cloud files, and then trying to make another type of ‘survival save file’ ends up just making a mess of the entire thing because there now has to be two copies of every single savefile. Then I need to think of whether I need some kind of “Load Story Game” and “Load Survival Game” in the menu? It was awkward design so I ended up with something simpler – just having a submenu after choosing a savefile to load.

After completing level 200, the savefile will be marked as a survival save file and you can only play on in survival mode.



There is nothing special for survival mode, though I did at one point considered changing the Level 300 boss to something. But I didn’t want to give any hints that there would be any form of storyline continuation, so I decided not to add anything to survival.


Unity Canvas (technical)

When making my cutscene, I had to decide what kind of canvas to use. In Unity, you would likely have to use a canvas – a canvas is something which contains all your UI objects (buttons, panels) and in your 2D game, it can contain images like your character sprites.

There are three types of Canvases in Unity and I had to think carefully about which was the best canvas to use for my cutscenes. Each canvas has its pros and cons which I was considering.

The three types of canvases in Unity are:

  1. World Canvas
  2. Screen Space – Camera
  3. Screen Space – Overlay

1) World Canvas

The World Canvas is good for a lot of things. For reference, a world is basically where you put all your primary objects like your heroes, and enemies.

World Objects vs Screen Objects

Therefore a world canvas is good for making UI part of your world – eg health bars over the enemy, floating damage numbers text. It’s the canvas I use for my main game.

However, there are parts of the UI that I don’t want to be part of the world. Things like the Gold UI and text should not be part of the world.

This is what screen space overlay is for.

2) Screen Space Overlay

For my Tower Defense game, I had to switch to using a Screen Space Overlay. Unlike the World Canvas, screen space overlay is put ON TOP of everything in your world. It’s perfect for UI.

For my Tower Defense, I move the camera a lot. It pans to follow an object, has zooming in and out…


Above, you can see the UI on the right does not zoom in and out with the camera. If you use a world canvas, objects will behave like world objects do, and zoom in/out, which is not what you want for your screen UI. In this case, I would use a screen space overlay for such UI.

3) Screen Space Camera

Screen Space Camera is like Overlay, except that since it isn’t an overlay, you can render stuff on top of the Screen Space Camera, which I primarily use if I want to have particle effects on top of the UI, like glowing sparkly buttons.


Because the Screen Space camera requires a camera, this allows me to do very specific camera stuff and special tricks.

For example, I can have a camera that only draws UI and another camera for everything else. I can even set up a camera for a top down shooter game that only draws the background and characters and not draw trees or enemies – useful if I want to make something like a game mini map.

The reason for having a specific camera to render the UI is because if you have a side scrolling platformer game, and your camera moves with the character, you don’t want to re-position all your UI all over again as the moment an object’s position changes in the game, you will have to recalculate its collider, bounding box, and apply physics to it (if you have physics rigidbodies on your objects). Therefore, when using Screen Space Camera, I set my UI to a separate stationary camera that does not move with the world camera.


In the end, I went with a totally different approach. I decided not to use the canvas for my world objects, and use a World Canvas only for the UI in the scene. I put characters and heroes and other objects outside the canvas and grouped the objects by the Cutscene they are used in.


Draw Calls (technical)

Another part of optimizing the game is to reduce draw calls, which I had done quite awhile back. I also did something in the game to help decrease memory consumption further (the game currently doesn’t use much memory while it runs anyway, but this may help on older PCs)

What is a draw call?

To draw an object (like a character) on your screen, the engine (unity in this case), has to make a draw call to the graphics API, which interacts with the GPU and “tells” the GPU what to draw on the screen – at least that’s the definition I read.


So if I had a hero that I want to render on the screen, Unity would get the texture of the hero, call the GPU and tell it to draw it on the screen. (To be accurate and according to Unity, the call is made to the graphics API like OpenGL, which interacts with the GPU)

But if I had another object, like an enemy on the screen, now I have to make two draw calls every frame. If I put in a background, I would need three draw calls. Here is a picture that starts out with a white wizard character and I slowly add objects to the scene:


However, if two sprites share identical textures, then no additional draw call is needed. Think of it as only one draw call would be made to the GPU, and it would be told to draw the texture thrice, at position A, B and C, rather than making three separate draw calls each time to draw the object. (this assumes all the objects share the same material). So if I add more enemies to the scene above, the draw calls made would not increase.


Draw calls are expensive and can be taxing on the CPU (and make your game lag), so you would want to reduce the number of draw calls in your game as much as possible.


In Unity, draw calls are also known as ‘setpass calls’ and the number of calls being made can be seen in the editor. In the picture with the white wizard I gave above, it is possible to reduce the draw calls from 3 to 1 – the background, the white wizard and the 3 bush enemies can all be drawn with a single call, thanks to something called the Sprite Atlas.

Sprite Sheets and Sprite Atlases

If you’ve tried making a game before, you would know of spritesheets. If you have a character walking animation containing 5 frames, and if they were five different images, the engine would have to make a separate draw call each time you want to change the frame – from frame 1 to frame 2, from frame 2 to frame 3, etc because it is using a different image.

But what a spritesheet does is no matter what frame your character is at, it is drawing the character using the SAME texture, and you don’t have to swap the texture to draw a different animation frame.

So all the engine needs to do is to tell the GPU to use the same texture, but draw a different section of it. Here’s my own neat animation of how spritesheets work, using my warrior character:SpriteSheet.gif

The engine slices your texture into different ‘boxes’ called frames and you specify which frame the character is on, and which frame to draw onto the screen. The slicing is done behind the scenes and is invisible to you, so you only need to specify the width/height of each box and the engine will ‘slice’ your texture internally.


So even though my texture has 8 different character frames in it, at any one point, only one slice will be drawn onto the screen at once, so you can’t have two frames at once.

Multiple sprite slicing

Moving beyond that, there is something called the Sprite Atlas, which is like a spritesheet. There isn’t significant differences between them.

Below is one of my Skill Atlases, which is one of the many Sprite Atlas-es used in my game. The skill atlas is a single huge image comprising of several individual textures. When I need to retrieve a particular frame or texture, I need to ‘download’ the whole atlas, and then retrieve the frame that I want.


I mentioned this in one of my previous posts and atlases work similarly to spritesheets, but you can pack a lot of things, even sprites that you may use for different objects or characters. Sprite atlases help to reduce the size of your game, the memory it uses (for WebGL). It is one step above spritesheets and can reduces draw calls since multiple objects will only require one atlas.

In the atlas above, I have three skills using this atlas – the blue Dragon Skin skill, the purple Weaken skill, and the yellow Slashing skill. All these 3 skills will only take ONE draw call instead of three as it normally would have been if I use just sprite sheets.

Also notice that the atlas above is square and is power of two (2048 by 2048 pixels). This is by intention as it allows the atlas to be compressed in a better compression format which further reduces memory consumption/ game size.

You can also enable rotation to pack the sprites in a more compact way so that as much of the 2048 x 2048 pixel space is filled up and no space goes wasted. If packed properly, this is a very huge gamechanger.

Memory consumption (technical)

This is very much linked to the topic above on sprite atlases and is pretty wordy.

I was looking into how the game is using its memory and a large portion of it is taken up by textures.

When a texture is loaded in the game, it takes up some memory. Bigger textures generally take more memory as each pixel of the texture takes up 1 to 8 bytes, depending on the compression format. Memory can be used up in other ways too – but for my game, 70% of it is by memory and you can see it in the picture.


In the first line, it states that the game is taking up 106.7MB of memory (out of 256MB that the game is given). This is in the game battle scene, which is the busiest and most resource intensive scene.

Out of that 106.7MB, 73MB is used by the GfxDriver, which is mainly textures. So I looked at the breakdown in texture memory.


Note that the above table is a snapshot of the EDITOR memory as I can’t seem to get the values of the actual player. As such the values above are MUCH higher than in the WebGL player and may not be accurate, but it is the best I can use and useful for a gauge on what’s contributing to the memory usage. You can see that the highest contributors to memory (IN THE EDITOR) were backgrounds and skill effects.

I decided to trim additional transparency in the background. Although trimming transparency doesn’t help very much with file size since all it does is remove the empty pixels, doing so reduces the memory used by the texture. As for skill effects, I cannot trim their transparent pixels as much since they are spritesheets and each frame has to maintain a certain width and height for the sprite to animate easily as seen above in the SpriteSheets section.

In all honesty, it is extremely difficult for the game to actually hit the memory limit, which is set at 256MB currently, and my time is actually better spent developing other stuff, like content, or fixing issues. However, I decided to take a look and dedicate time for this.


Above are my jungle area’s monster sprites. I throw them into an atlas below with the platform sprite (the huge tree). I’ve marked it in red because I’m going to talk about it below.


Two power-of-two (POT atlases are formed as a result and they are 2048 x 2048 and 2048 x 1024 px respectively. There is also quite some transparent space, due to the platform, (l have indicated the sprite’s bounds with a red rectangle) which shows that some “wasted” memory is allocated just to store the empty pixels in the texture. Can I pack them in a way such that I use the transparent pixels’ space? Apparently, yes! But it does come with some drawbacks.

Here’s a picture of the new atlas. Notice how the transparent pixels have decreased A LOT and they are packed so much more efficiently, and closer together.


In the game, I decided to change the way sprites were packed – and specified certain sprites to allow them to be packed with a tight rotation policy – these are mostly sprites like the platforms and monsters. Unity’s atlas tight packing policy will pack them with its own algorithm to make it space efficient. Packing sprites tightly reduces the memory taken up by texture, reduces the time taken to load the game and also improves performance as it gives the CPU more time to process other stuff rather than focusing on drawing stuff to the screen. A video here explains it much better than I can.

The number of pixels used by the jungle texture was reduced by 33%! (to 4.2 million pixels)

(I should make a game about optimization, and it shall be the opposite of an incremental game where you try to get as less pixels as possible! – Nah just kidding)

The tight rotated packing, while better than the default rectangular packing, does come with some drawbacks so I cannot use them for everything. I therefore have to specify some sprites to continue using rect packing. OpenGL may also handle rotated sprites differently and cause the sprite to look different if it applies additional anti aliasing / artifacts during the rotation process, but thankfully I don’t notice a noticeable drop in the sprite quality so far.

I also changed the way skills were packed and not pack frequently used skills together with infrequently used skills. This is because if you pack them both together, then whenever you cast a frequent skill, you end up loading the atlas of the infrequently used skill.

Wisdom Skill Spritesheet atlas

The above is the atlas for a skill called Wisdom. It has a high cooldown and can be cast quite infrequently, so I have given it its own atlas. This atlas is destroyed if the skill is done casting so it does not persist in memory, but has to be reloaded each time it is cast. I might change this if the reload actually causes a noticeable lag, in which case it is better for such textures to remain in the memory. Again it all depends on how frequently the skill is cast and thus how frequently the texture has to be (re)loaded.

This was done for the other less frequently used skills which were given their own atlas, and packed with a tighter policy. And when these skills (mostly buffs) are done casting, I remove the texture from memory. This will cause some overhead if I try to load the texture again, because now that it is gone from memory, all references to the skill’s spritesheet is DESTROYED, meaning that if I were to cast this skill, I need to reload and re-create the texture to put in memory again, which takes up CPU. And that is the tradeoff here. So although destroying a texture after it’s done frees up memory, I only do this for skills with exceptionally long cooldowns or are cast infrequently so that when it does not interrupt the game too much.

In the end, I decided not to destroy the texture after it is loaded, as the game consumes very little memory and hardly hits the 256MB limit unless you have played for a very long time, and I’m not sure if the performance tradeoff is worth it. However, the improved packing still helps to decrease memory usage and draw calls as the atlas is split more efficiently.

Making an Idle Game Pt VIII

This post will be very heavy on a new guardian for the game, an upcoming content which I hope to release by the end of of July or August. I may split this giant patch into smaller updates since there’s a lot of things to do.

Guardian 2 Dialogues

Guardian 2 was a little more complex to add than I originally planned out to be. And a large part of it was due to how to introduce this guardian to the game as well as organising the flow and dialogues.


I haven’t yet thought about how to design a simple straight forward way to organize the game’s dialogue messages in code – I currently ID them and link them from each dialogue (eg dialogue 228 can lead to 229 or 230) and because everything is written in code it gets very hard for me to visualize which dialogue leads to which. So sometimes, I draw flow charts. The introduction of Guardian 2 has 30 new dialogue panels! Half of which is part of a ‘Quiz’ dialogue which is something new to the game, and am pretty excited.

When getting Guardian 1 in the game, you can pay him 10 gems to ‘bribe’ him. This is good for those who do not want to wait to get him. But for those who want to sacrifice gems, they can get the Guardian 1 for free just by making their characters strong.


For Guardian 2, there is an upfront cost of 20 gems to get him. But you can reduce this cost by doing a very simple test. 🙂 I don’t want to spoil this too much though. It was very fun to write the test actually. But for those people who don’t like tests, they can go ahead and pay 20 gems to skip it. I intended Guardian 2 to be perhaps unlocked in the second run and I may reduce the cost to 15 gems since 20 can be a little high for new players. It’s a one-time cost.

I’ve also added buttons to change your current guardian. On the left, you can see my initial design. Two buttons just for previous and next. The second picture on the right is what the game uses now.

Blog177.png  Blog178.png

I decided to replace arrows with a picture of the guardian’s head. I think the guardian’s heads look very unique and identifiable – I’ve made their heads have a unique colour so even though I drew their heads with similar structures (so they look like guardians and not too human-like), no two guardians have the same head colour tones. This was something I kept in mind when designing my new guardians, speaking of which…

Designing the new Guardians

NOTE: There won’t actually be new Guardians added to the game. This is made mainly to end the story.


Above were the sketches of what I envisioned the new Guardians to look like. My favourite has got to be the “Guardian of Creation”:


Each guardian has his own colour tone. The guardian of Creation above is clad in purple robes and is holding a sphere like object. There are other smaller circles (spheres) around the character to represent planets, while the giant yellow sphere he’s holding is like a crystal ball that will show the galaxy.

Since the five Guardians revolve around being in space and being these other worldly beings, I took to the stars for inspiration. Here are some of the pictures that inspired me (not all of them are linked to what I wanted):


You can see above where I got the idea to make the guardian hold a ‘crystal ball’ of the universe. I also got my colour scheme when I realized a lot of the images have bluish to purplish hues. 🙂

Oh, just to get in the mood, I listened to this while drawing, looping it on repeat. It’s the soundtrack of one of the best and inspiring documentaries I’ve watched about space. I really love the wonders of space and this kind of things and I think this is what makes drawing the guardians and the Crossworld really, really fun!

The Crossworld

I also drew inspiration from the movie, Thor. I enjoyed the Thor world’s visual effect and especially liked the universe / starry space scenes, as well as the Gate Keeper.

I took a look at the Gate Keeper’s costume (picture on the left below), which is really cool, and used it as inspiration for the helmet’s shape of one of my guardians.

Gatekeeper   G4_Fight.png

Story Cutscenes

Something new to the game will be story cutscenes. I put together a completely new way of delivering the later part of the story. There will be only one cutscene sequence in the game.


Above is a draft of one of the cutscenes that will occur. Everything you see above is unofficial, so is the background – this was just a fast and quickly-animated scene for me to see how this particular shot plays out in the game. I most likely will not animate the sprites of element very much – for the particular scene above, I intended them to be just silhouettes.

I have drawn out a storyboard out for this sequence. (There will be only one story sequence in the game). One sequence comprises of several scenes.


The storyboard has several boxes, where each box is one scene of the sequence, like the animation above. I also refer to ‘scene’ as ‘cutscenes’. Each cutscene can have several states. States are one level below ‘cutscene’, and I use it to fine tune animations and control the triggers to certain events, in addition to using timers to control when stuff happen).

Now onto the programming and integration aspect. To make it easy to script the sequence and have control over the events that occur in a scene, I organise the scenes such that I have an indicator on which cutscene and state I am currently on.


‘currentMessage’ above refers to the accompanying text for the cutscene. For example, in a scene where I have to gradually fade in five guardians one by one,


I can use ‘currentState’ here to control which guardian is currently being faded in and which one to fade in next.

The entire cutscene took me about a week to do.

I spent one day writing out the story script, then drawing out the storyboard as well as some mock up art assets (the black outlines you saw in the animation above).

Then I spent the next few days drawing and creating the official art assets and animations- the characters and such.

Putting together the character animations, movement and their effects

While doing so, I also spent an equal amount of time in Unity choreographing the sequence and animations, as well as scripting the events that follow. I also wrote an AnimatedText script to animate the text to appear letter by letter. I added a few functions for myself to make the script re-usable if I do decide to extend this script to use for future games.

Animating text letter by letter

I added my own special way to easily add pauses into text, and you can see me type <p=1> in the story messages below:


Adding <p=1> makes the animated text pause for a second, before resuming. This makes it convenient for me to add delays in the dialogue via the message string itself! This is useful in cases where for example, I add a 1 second delay at the end of a long sentence, before displaying the next sentence in the same string. A one second pause is usually enough, but I can do <p=2> or higher to make it pause for longer durations.

Also just for fun, I did a mock of what I felt would be a cool main menu, with a crudely drawn bad shadowy guy of course, since I don’t have the art for him at this point.


As probably mentioned above, story is a really time consuming thing to do. It’s heavy on the art and planning side and can be very exhausting to execute. It was also not that relaxing on the programming aspect since each cutscene has unique effects and you got to code most of them manually most of the time.

Also, here are some icon variations I drew for the new Guardian’s abilities. (Note: They may not be the final icons to appear in-game, I will pick the ones I feel are most appropriate to be the official icons)


Balancing / Changes

I’m always working on other areas of the game even though I am focused on content for Guardian 2 right now. One of the things I wanted to address was the uselessness of the Blacksmith upgrade.

Countless comments are talking about it, here’s one. I didn’t have to look far to find it.


To address this, I intend to make Blacksmith apply its bonuses on ALL equipment/hero upgrades and not just be limited to enhancements to make it worth its high cost at higher levels. The formula will be changed to allow it to allow to in the future, have some way of being able to increase its max level beyond 10. (Currently it is capped at level 5, at a -50% cost reduction).

People also could not purchase expensive gem ugprades, so I made them cost enchanted gems if they are beyond a certain cost. Currently, the only upgrade facing this problem is Blacksmith.

Here’s a look at the old vs new blacksmith upgrade.


Making an Idle Game Pt VII

This is part 7 of my making of an Idle Game. And here are some of the things that I have worked on, am working on, will be working on, and will not be working on.

Guardian 2 Storyline


After pushing out v0.72 and having cloud save download, I could finally move on to other more exciting stuff. With only about a month left before school starts, I hope to at least get Guardian 2 out. That would also mean that I want to wrap up on this game and hopefully finalize the content. This also means that with the release of Guardian 2, content generation for the game will come to a halt soon. I’m not sure if I can juggle schoolwork and Enchanted Heroes simultaneously and even so, it will be extremely exhausting for me.

Anyhow, here’s a picture of the new boss that I just drew. It will be part of the Guardian 2’s storyline. You may get to fight him.

New boss?

As you probably can tell by his looks, he will spawn somewhere in a forest zone.

There will be some new really minor storyline related items. This is a new item that may look familiar to some players because of the item that this was inspired from:


I actually feel like improving some of the monster art, especially the bosses. Perhaps when I have the time to, I will be replacing some of the monsters.


UI Change


Some days ago I had a chat with one of my friends who was providing feedback for my game. He drew up a mock of how the UI can be improved on a sheet of paper. I think it would be great if the game could have this new UI, but it frankly is a lot of effort.

As much as I like to think that it’s just shifting things around as and when you like for fun, it is really not that straightforward.

I probably won’t have time to work on this and I may not even get to doing it since it is really quite a lot of work and this by the way, means that there will need to be two separate UI layouts for the mobile and WebGL versions, again, this can get messy if not done well. Furthermore, when I built this game I didn’t intend to have the game be able to support dynamically switching UI elements around like that.

Anyhow, here were some UI improvements I made for the game recently.


I noticed many people wanted to see their maxed upgrades remain in the shop, so I made them retain in the shop but move them to the bottom so they don’t block or make it troublesome to find unpurchased upgrades. I also made them greyed out a little. (See the above screenshot of the comparison between normal shade and darkened shade of the upgrade)

I also added a border around skill icons to signify what class the skill originated from.Blog171.pngBlog172.pngBlog173.png

I think this is the cleanest way to do it and to easily distinguish a buff/active skill. I might thicken the border since it looks pretty small.

Minor Skill Balancing (and the MP regen problem)

Skill Balancing is something I may never get to work on because of how little time I have left before school starts on 23rd July.

But I rolled out a minor skill patch. I actually have a BIG list for skills. But I may not have time to implement all. I may roll them out in minor patches, or not at all.

Here was the first minor change – the mana cost of Resurrect.


On the right, you can see the old absurd values, and on the leftyou can see the new values. The cost of resurrect was too high to make it useful especially in higher levels, so it was decreased. It was also capped at 75,000.

On the other hand, I want to solve the problem of “priest has lack of mana”, which appears many times in comments. I realised this is happening because the EXP cost needed to upgrade the skill falls much lower than the gold cost required to upgrade the earring’s MP regen. I think most people didn’t get that it was better to save your EXP if upgrading a skill means that it takes your toll on mana – I guess I didn’t design the mechanic well so it isn’t easy to tell straightaway that you should level down your skill if that happens. I guess trying to add a bit of ‘MP or resource management’ and adding some strategy on what your skill levels should be at didn’t exactly turn out the way I wanted to. Oh well.

Ideally, just when the cost of the skill gets too high, you should be able to get enough gold to upgrade your MP regen, but right now the skill’s EXP cost does not scale fast enough to keep up with the gold cost, which makes it easy to quickly upgrade a skill and before you know it – BAM! It’s costing loads of MP, loads more than how much MP you actually have.

Final Boss?

When making this game, I had planned for a boss every 100 zones, up to the 500th Zone. Unfortunately I was not able to design them all in time and only created the Warlock and the Zone 200 boss. To wrap up this game, I may add a final boss. The final boss will either replace the current Zone 200 boss or be a new Zone 300 boss.

Adding it as a Zone 300 boss is going to take a lot more time as content and story needs to be developed. Though I have a story script that is being developed for Zones 150-250, it takes time to add all that in and implementing such stuff is a real time killer. If done wrongly, the game turns out being grindy and not very fun. It is easier to make it replace the current Zone 200 boss, but it depends on how much time I can dedicate to this game.

The art for the final boss was done long ago, but did not get added into the game due to the lack of time. I may or may not be adding a boss at or after 200. But if you do see it, it might not be a good sign since it means that I will stop updating this game once the final boss is out.

Making an Idle Game Pt VI

It has been 3 weeks since I first published my game on Kongregate and the first two weeks were really exciting and crazy.

This post is pretty long so I have divided it into two parts. In the first half of this post I’m going to talk about the technical stuff (things going on behind the scenes) first and the other half will be about the game (the fun stuff!).

After publishing my game, there was an issue I met with immediately. Some people were losing their save files. It’s actually a small percentage of people, but because there are many people playing the game, a small percentage, say even 3% of 10,000 people, is still 300 people. And this was what filled the comments section and was an issue I had to address. I had to find out why this was happening!

For those that aren’t aware, my game is published on WebGL. It turns out that unlike the WebPlayer, which is able to write to a hard file to your computer, WebGL on the other hand is using IndexedDB to save the game’s data on your registry, and some people were losing their savefiles because indexedDB is not compatible with some browsers / computers. It’s a small percentage, but it quickly sent me into a panic mode.

I had to have an alternate way to save the game data.

Cloud Saving

I had previously looked into Playfab, which offers a cloud saving service. Here’s a flow chart I drew to try and understand how it works.


Despite my valiant efforts, I was not able to understand it completely and therefore unable to implement it. (I try not to mess with things I don’t understand because it usually leads to havoc). So I decided not to do cloud save before releasing the game since I did not anticipate problems with saving. With the game growing though, this was no longer an option, but a mandatory feature.

Working with my friend, he helped me to implement Cloud Saving. Of course, he didn’t want to do everything for me as he wanted me to learn, so he showed me the ropes and it got me started. Eventually Cloud Saving was added to the game.


That is my Playfab dashboard. Those animated “rows” going to the left are real-time updates of people who have just logged in and connected to the cloud service. They can upload or download their saves from the cloud.

This also makes it easier for me to restore peoples’ save files. If for some reason somebody is unable to access their save file, I can download their save from the cloud myself by retrieving their ID.

Prior to this, I had implemented KongregateAPI, so as long as you are logged in, the “Save to Playfab” button is enabled!

Then I send your data to the cloud!


In the meantime, there were also a small percentage of people who are unable to even play or load the game due to WebGL errors, or were facing out of memory issues. I published the game to WebPlayer eventually, but it was too late. Kongregate replied me with a (very late) email saying that transitioning to the Unity WebGL+WebPlayer option would cause everyone to lose their save files.

So instead, I ended up hosting the WebPlayer version of my game on Dropbox and put the link in the News box.

But now there was another problem – if people wanted to migrate from the WebGL game on Kongregate onto the WebPlayer game on my dropbox, or vice versa, they had no way to do so without restarting from scratch!

This was why there had to be a second way to backup data. And therefore this leads me to the…

Import / Export feature

There are 3 steps to export your save file

  1. Convert your save data to a string
  2. Encrypt it
  3. Send it to the player’s clipboard via Ctrc+C

You might think that the hardest steps are probably steps #1 and #2, right?

So wrong. Step #1 is literally one line of code. The thing is, on WebGL, there is no way to access your system clipboard, so that means Ctrc+C and Ctrc+V does not work in WebGL games. You can see this in games like Perfect Tower, which makes you download a .txt file and Endless Dream which creates a HTML box on top of the game.

Unlike Flash which has access to your system resources, accessing your clipboard (and a lot of other things) is not something WebGL allows, due to security reasons!

Thus, I had to use a HTML overlay to implement the import/export box. If you play the WebGL and WebPlayer versions of the game, you will notice the import/export feature looks different:

My friend taught me a bit of HTML and showed me how to use it. How it works in WebGL is this:


When I press the ‘export save’ button in Unity, Unity sends a message to the HTML wrapper. This in turn calls the export box to appear. So basically, Unity is saying “Hey HTML! Open up the export box!”

The code to open the boxes are not in the game, but in a separate file called index.html which I upload along with the game.

And when you want to import a save string, HTML will tell Unity “Hey, I got the player’s save string! Load this now!” and HTML sends Unity the save string to import. The key thing here is that both HTML and Unity needed to communicate with each other on two different “platforms”, which was something I found hard to do by myself.

Another difference between the WebPlayer and WebGL versions of the game is that there is no loading screen in the WebGL game.

But there’s one in the WebPlayer

This is because WebGL doesn’t support multi-threading.

The above are some of the technical and boring parts of game development – the things that I don’t see myself working on when I’m making a game. You might think making a game is all fun and games (pun intended), but these, along with optimizations are some things you will need to care about when making a game. If you’re a technical person, you’ll find this fun, but I’m not really one so I found this to be the more tedious part of game development.

Anyhow, onto the game itself! Here’s the exciting stuff.

I’ll talk about some of the stuff that I’ve added to the game in recent weeks, then talk about what I am working on and stuff that will be implemented in the future.

Auto Buy Mechanic

Meet Bushie!


Bushie here, is going to be part of a sub-feature in this game. He is a monster, but I suppose you can tell he may not be hostile. I think at some point I had ideas for having a pet, but I didn’t want to explore it yet.

I was working on a lame and boring auto-buy feature. It’s a panel with some words telling you that every few seconds, the game makes an automatic purchase for you.


This screen doesn’t look very interesting, does it? It also does not have much link to the game.

But is there a way to make it better? Tie it in with the ascension system and the game itself rather than be just a separate “feature”?

Most games would probably add a button called “Auto-Buy”, and clicking it toggles it on or off. But I wanted to try something more interesting, so I decided to create this character called Bushie. He is someone you can encounter after a mini event so you actually have to earn him rather than it being an automatic unlock from just simply achieving X ascensions. Once acquired, he hangs out in the shop and can offer to purchase things automatically for you.


Just by introducing a character, the auto buy mechanic becomes more integrated into the game. I was inspired by this and so I added an option to feed Bushie to upgrade him. I also gave him a sleeping state.

Sleeping Bushie

So rather than calling the feature “Auto Buy”, I later renamed the title of the panel to “Bushie”

I have been reading the feedback for this game and understand that some people are finding it a hassle to upgrade the heroes’ skills and spending the EXP after a few ascensions. In the future, I may extend the auto buy-ops, I mean “Bushie” to do more things. This is one of the things in my priority list for Quality of Life improvements. I have a To-Do list, which has several categories of things I need to do. It’s super long, and sadly even though this is high on the Quality of Life list, there’s even MORE stuff that’s more important than this that I have to work on, so it ended up being pushed down by other things.

Priority: 2/5



Many people have given feedback on the Achievements system, with a top comment having several upvotes even talking about it.


I plan to give Achievements a miniature overhaul. I disabled several achievements in an update some weeks ago because of absurb requirements and my lack of judgement. (Reach zone 500, anybody?)

Zone 500? NOPE!

Upon deciding that I had to review my achievements, and that I had not given sufficient thought to it, I created my own excel of the list of achievements in the game. This will help me for when I get to work on revamping the achievements.


Priority: 4/5



When I made this game, I had no intention of adding a story. But as the game progressed, I had lots of inspiration and ideas (I’m a really idealistic person) and I enjoy writing a lot. I love to write and I think adding a story subconsciously ended up being a kind of thing for me to do.

When adding the second guardian, I wrote a storyline script of the events leading up to it and what occurs and how it links to the story already in the game.

Guardian story script drafts

It has the dialogue planned out, so it kind of becomes like a director’s script, where it states which character says what and what happens in the game when this dialogue is occuring.

I think when making a game like this, you kind of became a miniature movie director / story teller too! Well, this game doesn’t have much special effects. But for my tower defense game, it actually had some effects where I played around with the game’s camera, zooming in and out of certain key elements of the map (like focusing on a boss monster) and some other story elements.

The game’s story script began sometime when I was creating the ascension system. I’m pretty sure you can tell this from the game. You probably noticed this when you first ascend – the feel of the game changes.

“That colour scheme…,” said my friend when he first visited the Crossworld.

When entering the crossworld for the first time, the entire battle UI is hidden and there are black strips on the top and bottom of the game. Your attention is suddenly focused on the characters in the middle of the screen and you aren’t allowed to interact with anything else except the character “dialogue” screens. Then you look at where the enemy is supposed to spawn but instead, notice someone new. The game makes a very clear distinction when it’s in “story mode” versus “battle mode”, which was very important to achieve the feel that I wanted – immersion into the story.

There is only one scene that was tricky to do – transitioning from story mode to battle mode while in the crossworld.


When visiting the crossworld and transitioning to story mode, the screen fades white. But a particular scene does not follow this rule – when you are in the crossworld and fighting the guardian. The transition is a bit more abrupt compared to the gradual white fading effect.


So far, this is the only scene in the game where a monster can spawn in the crossworld. Speaking of the guardians, I have been planning on what to add to the guardians.

Guardian 2

I have a document (GDD) listing of the planned abilities for the guardians, which are heavily subject to change. Warning: This picture below may be a spoiler.

Planned Guardian Ability List?

Adding new guardians and abilities is a pretty big feature and it will take a huge amount of time. I have begun working on it a bit but it’s not going to be a feature that I can release soon.

Guardian of Riches + Guardian of Eternity?

Priority: 4/5

Weather Effects / Special Bar

One of the things I explored out of fun was weather effects.Blog121-Snow.png

Featured above is a basic snow FX. I want to give the snowy area a special bar to charge up and when filled, you can make it snow. Snow will fall from the sky for a short duration. This removes the negative “frosty” debuff which reduces your mana regen and gives you a positive buff which increases your MP Regen while it is snowing. The description for the buff could be something cool like “Your heroes are having fun in the snow! MP Regen increased!

It will only work when in the snowy area and is a bonus to this area, so people don’t find that it is a chore to have to keep running back to the snowy area to get the buff, then run back to the highest zone just to be able to defeat the boss.

This is just an idea and has not been implemented. It’s a very low priority feature since it does not add much to the game.

Priority: 0/5

WebGL Game not running in Background (technical)

Note: This point is a bit technical, so you may want to skip to the next point if you don’t want to read this stuff.

For those that do not know, this game isn’t built on Flash (it isn’t a Flash game), it’s built using Unity and published as a WebGL game. You may have heard of the Unity WebPlayer, which Chrome has already dropped all support for, and so are other browsers. This is why the WebPlayer version of the game may not end up on Kongregate in the end.

Unlike Flash and WebPlayer, WebGL games and applications are stopped by the browser when they are unfocused, for security reasons. When a tab is unfocused, the browser stops it from eating up your computer’s resources, which is a problem with Flash when you run several things at once.

Something crashed! Nah, it’s just a screenshot.

I don’t know about you, but back in the days where everything used Flash, I used to remember having my shockwave flash crash often when I ran a lot of stuff in the background – and is one of the many reasons why Google and browsers are removing flash and plugins. The web itself is evolving with the removal of “old technology” like flash and WebGL/HTML5 is where the web is heading toward now. Yes, WebGL is actually new technology that isn’t full ready for games yet, which is why there are some memory issues which some people have been encountering. The removal of Flash is a sad thing for me too because I have a flash game that I have not released yet.

Back to the point. Not having my game (and an idle game at that) run in the background means that you’ll have to put my game in a separate tab to keep it running. I can’t prevent the game from running slowly in another tab because it is the browser that restricts it and it’s very difficult to find a workaround. It’s basically impossible to make a WebGL game run in the backround, but there is a tricky way.

Many WebGL idle games I know solve this by putting a time stamp when the browser loses focus, and when it regains focus, secretly give you resources according to your gold per sec multiplied by duration away. This makes it look  like the game is actually running while you are away.

This is a challenge to do here though due to the fact that there are several factors that affect your EXP/Gold per sec. Buffs, active attack skills, passive skills, guardian upgrades, DPS, survivability are all linked and connected to how fast you kill. I would have to basically simulate the combat system and may still not be able to accurately get your gold per sec.

This brings me to my next point.

Time Capsules / Offline Progress


Time capsules was a mechanic I made in the first week after I realized that my game, being on WebGL, is unable to run at full speed when unfocused.

If you didn’t read the point above on why this happens, I’ll summarise it: Basically, this happens because the browser is restricting the game’s FPS, and there is nothing I can do about it. Flash and WebPlayer do not face this issue because they actually get a lot of control over your computer, and is actually a pretty big security flaw that web browsers want to move away from (thuis the deprecating of NPAPI support and the WebPlayer).

Anyhow, because of this, it has made my life super hard and working around this is pretty challenging.

There are two things I’m working on (albeit this is taking a long time because of how boring it is to actually do it, and how difficult it actually is).

Solution #1:

Improve the current offline progress and try to simulate the actual combat system.


Real progress is seriously hard to emulate. A lot of things happen when the game is running. Buffs are running, skills are cooling down, your character attacks, the monster attacks, your characters regenerate HP, MP, cast skills, cast buffs, gain and lose boosts. It’s extremely challenging to simulate all of this offline. I can’t tell if your character is going to die against the boss you’re fighting based on your stats alone. I need to know what buffs you have, what level they are, do they have cooldowns, have enough MP to maintain, and also take into account not just HP regen but also the priest’s healing amount and interval to determine whether or not you will survive the current boss fight before simulating it. It’s way too difficult.

I’m not sure if there are any similar games I can look at who have tried this – Tap Titans doesn’t have monsters that can retaliate and yet their offline progress uses a very simple calculation. Something like


is easy to do when you do not have variables like skills / buffs / MP coming into play. Sadly, I might have made offline progress overly complex because of the way this game was made.

Trying to improve on this will take a seriously long time to get right because of the complexity of the battle system. Which is why… I have Plan B.

Solution #2 (Plan B):

Gain time capsules while offline. You can selectively choose what to spend the capsules on – skip zones, gain huge amounts of gold/EXP, or even “time travel forward”.


I think a number of players managed to try this feature when I accidentally made an update which did not reward offline progress. I ended up compensating some people with Time Capsules to help restore around 8 hours+ of lost progress.


The Time Capsules feature still needs a lot of work though and it might not be better than what the game already has.

Ultimately, trying to accurately recreate your progress offline is not my goal. My goal is to simply make a way for you to progress while the tab is away.

Skipping Early Zones

I’ve been reading a lot of comments from people. There are those who want to see more things to do in the game (active play), and there are those who want to see automation in the game. I feel the game should ideally have both. In this point, I’ll talk about some of my plans for automation.

Idle games get repetitive over time. And having played many idle games myself, I know this to be the top reason why I quitted most of them. As such, I hope to introduce some kind of automation for the things in the game.

I’ve covered auto-buy above above so here, I’m going to cover the monotony of ascensions. The problem with ascension lies in how repetitively boring the early zones are because you grow so strong that early zones are just a time waster.

Actually wait, the root of the problem lies with ascension itself. It causes more problems than it seems – repetition in upgrading skills etc. I’ve realized how easy it became to repeatedly ascend to gain quick rewards, but that is very hard to change now. I should have made ascension something really cool that you don’t do often, but I guess I didn’t think far enough and now everybody is ascending repeatedly because it is the most rewarding way to gain gems.

Rather than trying to solve the problem with ascension itself though, there seem to be a few requests to skip early zones.

This is the most recent comment regarding this matter

I have drafted two ideas. The second one is already a locked feature in-game where only a fraction of players had access to.

Idea 1) A guardian upgrade: After X ascensions, start your character off at a later zone, and maybe have their items leveled up (eg, Lv 100 sword)

An example implementation of #1:
Lv 1 ability: Start at Zone 20, with Lv 100 in Weapon,Chest,Lv50 in Shoe, start with priest acquired
Lv 2 ability: Start at Zone 40, with Lv 200 in Weapon,Chest,Lv100 in Shoe, start with thief acquired
– So on and so forth

Idea 2) The ability to allow skipping of early zones at a heavy price

Implementation of #2: Time Capsules
– Warp forward 10 zones with 5,000 TC. (eg if you use this ability at Zone 11, you will warp to Zone 21, but you do not get any rewards – no gold/XP/gems)


I don’t know what works best at the moment because before Implementation #1 can be done, the game needs more guardians. Preferably this is an ability that fits on the Guardian of Time, supposedly the 4th Guardian planned for the game and sadly is still really, really far from complete. I have not even done much for the second guardian yet!

Implementation #2 heavily relies on the offline progression system which I am still trying to resolve as mentioned above. Either way, it will take a long time before this can be done because of how dependent it is on other features that are not ready yet. Rushing this into the game is also something very risky and hasty to do.

I predict a big problem where starting at Zone 40 gives you so much XP from the first boss kill that it makes upgrading skills a chore – something I have to think about and fix before I can even release this.

Priority: 1/5

Since this is a quality of life upgrade and there are other, more critical issues with the game (like job balancing, achievements reward not good enough, etc), I have to focus on other content that will eventually allow this to be implemented – guardians / time capsules / skill upgrade automation, etc. It’s not that I don’t want to allow people to skip zones, but there are other things missing in the game of higher priority that need to be addressed and I only have a few hours each day to work on stuff. Prioritising what I can and cannot do is critical to making the game better for everyone.

Cheat Function

This is not much of a feature, but I thought I should share this. When testing the game, I wanted an easy way to give myself gold and EXP, etc. Sort of like a debug panel, but there wasn’t really an easy way to set values from the game itself, so I made my own in-game debug panel!


It comes in handy when people lose their progress too. Without this, I have to manually type a lot of code. I have my own codenames for the debug panel, so I can type “2301$” to give myself 2301 gold, “300G” to give myself 300 gems, and typing “70Z” unlocks all zones up to 70, etc. It’s really useful in helping to quickly restore peoples’ gems or lost progress.


You can see I put a lot of miscellaneous buttons too – get 100 gems, get 50 enchanted gems, visit Starry Dream (crossworld), meet guardians, unlock achievement, etc, to help with game testing.

In addition, I have a cheat function to force a savefile to have ascended stats, so with a click of the button I can set a savefile to have ascended once, unlock the characters, gone through all the tutorials, zones and start out with enough gold and EXP to do a lot of things:


That’s all for now!

There are a couple of other things I’ve worked on for the past 3 weeks that I wasn’t able to cover in this post.

One of the things I partially addressed was a UI issue in the game. In fact, I will one day overhaul the game’s UI. I had an interesting discussion with one of my friends at work and he has helped me to draw out a new UI layout for the game. I’ll see if I can talk about it in a subsequent post.

So that’s all for now!







Publishing my first original game

This post will be a bit different from my ordinary posts. I’m not going to talk about my game-development related work so if you are here for that, you should skip this entire post because here, I’ll be writing about and sharing my experiences of publishing my first game and a bit on what I learnt from this experience.


On 1 Jun 2016, I published my very first Unity game. It’s also the first original game that I published online, aside from OldStory, a Flash Game simulator.

I felt a couple of things – nervousness, excitement and also exhaustion.

I felt nervous because I didn’t know what to expect and I didn’t know what people would think of my game. It was the same feeling I felt when I published OldStory. I was afraid people wouldn’t like my game and call it rubbish, you know, stuff like that.

I also felt excited because I was looking forward to see what people thought about the game. Ironic isn’t it? I was excited to see people playing my game, a game that I had created. I believe everyone who has created a work of art will feel the same way when they showcase their work to the public.

Lastly, I also felt tired. Having worked on this game for quite awhile, I was growing tired of it. I wanted to move on. I wanted to make another game, I wanted to focus on other ideas, other things that I wanted to make. So there is this indescribable feeling where I say to myself “FINALLY, I’M DONE!”


All along I’ve kept most of my work to myself (and at best, shown to a few close friends) so publishing a game and pushing the Upload button was a pretty huge leap for me.

For the first hour after publishing my game, you can imagine me hitting the refresh button on the comments page, anxious to read new comments. A few hours after, not many people were commenting so I went to sleep. The game had 800 plays when I went to bed. The next day I awoke, I went to work as per normal, and when I opened my laptop, I saw that my game had grown to 7000 plays and a number of comments. I was quite taken aback because wow! That’s a lot, to me at least!

I was not expecting much from my first game, and so I was also very surprised to see my game on Reddit during the first few days when I had just posted this game.


I’m glad I didn’t have to do any self advertisement since I’m not really a marketing person, nor do I have such friends and I don’t tend to “spread word about my game”. It’s not that I’m not proud of my game, but it’s just something I can’t see myself doing without feeling like I’m promoting myself ><

It had been two really exhausting but amazing weeks. I had too much to do especially when faced with tons of issues with WebGL. Some peoples’ browsers are incompatible with indexedDB, which is what Unity’s PlayerPrefs uses to save files, causing them to lose their save. I got a couple of messages regarding this and it is a frustrating feeling for them understandably to have spent time on a game and lost their progress. I didn’t expect this to happen for my game.


I added my friend as a developer so he could help me reply to comments. I also worked with him to add Cloud Saving as well as an Import/Export feature to the game. He has helped me reply to the more technical comments – out of memory errors, browser incompatible with WebGL, game not saving/loading. I stayed up way past my sleeping time for several days, but finally Cloud Save and Import/Export was working and I managed to help a couple of people restore their save files within the first 3 or 4 days.

I guess publishing this game… kind of forced me to learn and sorta develop better communication skills. There were many times I simply did not know what to say to responses. The lack of a chat and forum meant that everyone was posting in the comments. I tried to reply to as many people as possible. It was very tiring.

If there’s a private message that I don’t know how to answer, how do I reply it? Should I move on to other comments & ignore it, should I wait a day? How about replies that were a few days ago but I have found the answer to – is it awkward to suddenly reply them when they had probably expected a reply long ago? All this kind of stuff and more I guess.

Because of the lack of a forum/game chat, the comments section was flooded. I’ve read good comments, bad comments etc. I try to reply to all of them.

But there is this one comment that left an impact on me. There was one time I decided to reply to a guy who had critiqued my game and called it ‘the most boring game on Kongregate’.


Even though his comment was already downvoted by the community and I could easily ignore it, I decided to reply to his comment. His reply to me was that he decided to give my game another try. One day later, I got a PM from him and he thanked me for the reply that I had given him, saying that his earlier opinion was a bit hasty and praised the story aspect of the game. He thanked me for providing an interesting game to the community. This likely would not have happened had I chosen to just ignore his comment. Of course, most of the time it does not end so favourably.

That’s my game down there!

As I was updating the game, I got to see how the game actually grew. The game actually started with a very low rating of 2.8 before stabilising at 3.0 for the first few days. I realised though that a low rating doesn’t mean much, and neither can high ratings speak about a game. I’ve played lowly rated games and enjoyed them and also played some highly rated games that were not as enjoyable. Still, I had kept watch over how my game was evolving so I put this together:


The game’s rating actually rose as days passed! I don’t know if it’s normal for new games’ ratings to fluctuate so much, but it’s pretty nice to see the game get better. I had also watched the play count increase.

The game hit 20k plays after 3 days, 100k plays after 9 days, and 200k plays after about 16 days.

It’s a pretty magical experience and I’m glad I published this game, even though I met with a lot of hiccups, problems and unforeseen issues and at times, felt stressed out.

But at the end of the day, I’m happy that I got this game out. I didn’t sleep very well for the first two weeks of publishing this game. After this game is done, I plan to take a break – away from the computer, away from the stress and responsibilities of life and just go to a place where I can sit down and not think about my game, or anything.


I ought to write a post on the top 10 things I learnt from making and publishing a game (and no, I don’t mean technical skills like programming or design, I mean other stuff like communication, time management, etc). June is the last month of my gap year and I was really busy with commitments – I had to get ready for school which starts in July, I have to go running to train up for a physical test in July and I’m also working in a game company currently. It’s actually really challenging for me because I seldom get bomboarded with so many things to deal with and thus I didn’t manage my time well. I suppose I will also write a reflection on my gap year. It has been a really crazily hectic year filled with emotional situations, scars but also some unforgettably wonderful moments. I’ll write about these next time.

Thanks for reading!


Making an Idle Game Pt V


This is part 5 of a series of posts of making an idle game. See Part 1, Part 2Part 3 and Part 4 here.

The Main Menu

Best looking menu ever!

As the game drew close to being published, I was looking up another game called Enchanted Cave, and then looking at my game, Idle Heroes. Suddenly, my friend said “Enchanted Heroes”, and I looked at the name and I went BINGO!

That was going to be this game’s official name. I was told that this game had an enchanted feel and this title fit well with the game.

Aside from a new game title, I wanted to redo the main menu at the same time.

I wasn’t quite sure that the new one was better. I felt that neither of them had the “wow factor” unlike the menu which I did for Introvert. But well, I didn’t spend as much time on the main menu for this game, and even less time was spent on my Tower Defense’s main menu.

There were other designs I had. How it works is that every time you enter the main menu, the background changes.


It is actually pretty fun but not many people will notice this. I intend to only include two main menu variations in the final game.

I also re-designed the game icon. I wanted to show the hero character since the game primarily revolves around the heroes, but it seems pretty ordinary – I checked out the app store and a lot of icons are showing the hero’s face in the icon. I suppose that’s the trend I guess? I also focused more on the head in v2 based on feedback. Since the final app icon is going to be very small, adding lots of details (like the armor) into the icon will simply clutter it unnecessarily. As far as app icons go, it’s better to be as simple as possible.

The v2 icon looks less appealing when enlarged, but it works really well on phones whereas v1 could be modified and widened to be used as the game’s icon on the web where icon sizes are generally larger and wider.


Level 101+ Backgrounds

In most incremental games, when you reach the 100th zone, the area loops back to the first zone and reuses the same monsters and background graphics.

It does feel a bit weird to do that. But most games have good reason to do that. It’s not just that they don’t want to put in effort to draw the new areas, but when I actually considered having 20 different theme areas, I realized that there will always be a point where you will have to loop back and restart from the same area. This is especially true in an incremental game.

Having so many theme areas also means that the game’s size will be really huge. Is it really worth it?

I decided to loop back to the first area at Zone 101 and wrote a little note about it in the storyline – that the heroes actually traverse back to the first area. But instead of reusing the backgrounds, I had a stroke of luck and thought of something.

Introducing… the random background generator!

I wrote two simple lines of code that randomly generates the background graphic and platform. A swamp in space? A tree in a desert? You got it!

The results were pretty comical but the game does not have to be so serious. (Hey it is a game after all and having the heroes go to space and fight without oxygen in the first place is pretty unrealistic!)


This made me feel like a lot could be done with a small amount of assets. The memory constraints of WebGL means that I can’t throw in as much art as I can into the game even if I wanted to. Your computer would need higher amount of memory to keep the game running. Maybe in some parts of game development, there will be times where you need to work smart to try and make things look refreshing while using little effort and not needing to add much to the game size.

The random background generator was just a test and I will not be using randomly generated backgrounds for Zones after 100. Instead, I will choose the ones that look really cool and put them in the game.

The good thing is that I can even apply certain colour tones to invoke a certain mood or theme.


 A previously day scenery can turn into night. The possibilities were plenty. I can swap backgrounds and platforms in and out to see what combination fits.

Or which combinations don’t…

However, I still retain consistency with the game’s area flow. The game has 10 theme areas and they follow a fixed order.

{“Grassland”, “Village”, “Jungle”, “Desert”, “Swamp”, “SnowyHill”, “Cave”, “Space”, “Candyland”, “FieryMountain”, “StarryDream”};

The 11th area, StarryDream is not actually an area. It’s just a codename for the hidden area called the Crossworld. It will never appear in the normal maps.



Sounds were not an intention to add in my game. I did want to add some skill sounds and some hit sounds when you use an attack skill but I decided not to do sounds in the end.

However as the game got close to publishing, I decided to add a few audio tracks. It started out with 3 basic sounds, then there were 5, and now there’s 10.


I have an audio player class and any time I play sounds, it calls the Audio Player. The Audio Player has its own sound volume control. This is in case if in the future I want to add music, I can keep the music and sound volume controls separate. If this is not done early, it might become tedious to try and separate sound and music volume controls if you design the code poorly, an issue I faced in the past when I had left sounds all the way to the end of development.

Unlike in Introvert, I don’t have budget for sounds so I source for free ones. But free sounds do not always fit my game, so I use Audacity to try and tweak the sounds.


I’m not a sounds person so I do really minor things. It’s really minor – it’s stuff like adjusting pitch or cutting off silence at the start of the tracks. (When you press a button or a skill, the sound has to play instantly. Most sounds I found have a few milliseconds delay which is very distracting and makes the game feel like it’s lagging).

I also soften sounds that are likely to be played repeatedly. For example, sounds that play when you tap the player or enemy will likely be playing many times a second and I had to soften them so they don’t overwhelm the player or drown out other sound effects.

It’s actually pretty addictive to add sounds into your game. You feel like everything would be better with sounds, but not all the time.

Sounds shouldn’t be added just for the sake of adding it. Sounds can be very important and helpful to your game.

Using sounds and animations to enhance your game

The sound in this game is very minimal. I use them to highlight important things. I noticed that players often don’t know when they have cleared a zone and can go to a higher one. They just keep farming the same zone over and over again!

The first thing I did was add an animation that appears when a zone is cleared.

ZoneClearedAnim (Legacy).gif

The issue is that this may become repetitive during ascensions, so I track two variables:

  1. Highest zone achieved in the current run
  2. Highest ever zone cleared (lifetime)

During ascensions, if you have cleared this particular zone in a previous ascension, the animation is 1.5x as fast, and NO SOUND is played. If you however, beat your old record, then the animation and sounds play as normal.

So if you had achieved a highest zone of 150, you won’t hear any sounds until you beat 150 and go to 151. This ensures that the effect of the sound and animation doesn’t become something that the player will ignore over time. (Having a lot of animations makes each animation have lesser weight on the player. The player will be like “oh,”. What I hope to make the player feel is “OH! I cleared it!” and this way, the player is able to distinguish clearly that he has beaten his previous record.

The animation has to be prominent enough since one cannot always rely on sound to provide feedback to the player (the game can be muted). I use sounds as additional enhancements on top of already existing effects.


I later added a jiggling exclamation mark icon that appears over the ‘next zone’ button since it may not be clear that you can move on to the next area/zone when you are done with the current one.

The same can be said of the free gold mechanic. Every 60 seconds, you get some free gold and you can click on this button to collect it.


Previously, I noticed that my friend did not collect the free gold even when it reached its max stack. So I made the button flash when the bar is full.



And it also plays a sound (if you have sounds enabled, that’s a plus). The same rules apply on animation as with sounds – flooding your screen with animations will just overwhelm your audience with too much information.


Early on in the game, I had added an autosave feature. Every 30 minutes, your current save file is duplicated and cloned and saved as an autosave file. This isn’t a very powerful safety feature or anything, but say if your computer suddenly shuts down without warning while the game is saving, it may corrupt or wipe the save file. However, chances are the auto save file will still be there to act as a backup to restore your progress to an earlier point in time.

Restoring a savefile from the autosave

Losing save files seemed to always have been an issue in the game. But if you wipe your cookies or do anything that would wipe out the save files, then the auto save will not help. It’s purpose is to save you from crashes or the like.

Offline Progress Fix

An early game screenshot of the offline progress panel

On a side note, I also found a potential tiny bug in the offline progress. This is more for mobile devices where the game can be paused. How offline progress works is that when the game is saved, it stores a time stamp. For example, last saved at 7.30PM. If it saves every 5 minutes, the next time it will save is likely 7.35PM.

If the game is minimized on mobile, onApplicationPause() is called. So if you paused the game at 7.32PM, and come back at 7.34PM, you should have gained 2 minutes worth of offline progress.

But I did not put a timestamp when the game is paused. So when you come back at 7.34PM,the game assumes 7.30PM was the last time saved, so it gives you 7.34PM – 7.30PM = 4 minutes of offline progress.


I basically just added a time stamp whenever onApplicationPause is called so you correctly gain the same amount of rewards equal to the duration spent offline.

What’s next?

I suppose I will want to focus on uploading the game soon, perhaps making it compatible with both WebGL and WebPlayer and perhaps adding some basic analytics / API so I can see how players are playing the game, which can be cool to see. It also has a practical use – to identify any potential problems with the game.

That’s all for now!

Making an Idle Game Pt IV


This is part 4 of a series of posts of making an idle game. See Part 1, Part 2 and Part 3 here.

Offline Progress

This being an idle game, there has to be some form of offline progress so you don’t have to leave your computer or phone on all the time just to progress.

Early UI for offline progress

It simply works by tracking how much time has elapsed since your last time of play. There are a few preventions I’ve made to prevent time travellers (people who change their system clock to gain huge rewards). This basically makes it harder for people to cheat and a little more tedious. I didn’t want to put in too much effort in cheat prevention since if people want to cheat, they will find a way anyway. At the same time, I think it is not good if a game is too easily exploited. Thus, I did not want to make it too easy to cheat in the game so I made a few extra checks in calculating the offline progress.

If the game detects that you have “time travelled”, it gives you a very visible warning. If you however, continue to time travel, and the game detects repeated time travelling attempts, your offline progress will be nerfed.

Character / NPC dialogue

Almost all of my games have some kind of dialogue system. Like the achievement system, it’s one of those “standard” kind of things that I end up re-using for every one of my games. This game is no different.

Dialogue Interface

The person talking appears on the left, which can even be your characters and heroes. The NPC will play the idle animation usually. The dialogue in this game is the most complex I have ever made.

Dialogue flow

I probably should have written a dialogue manager to organize the dialogues. How dialogue starts is I type something like:


Which brings me to:


Unlike my tower defense, each dialogue message requires its own ID. My tower defense used a different design where you could put multiple messages under a single dialogue ID which makes it a bit neater, but it cripples some of the customization I can do by separating messages into different IDs.


High resolution graphics

When I first started working on this game, I had issues understand what resolution to make my game at, but now I try to understand how graphics scale on different resolutions and devices and how the different camera settings affect the way graphics are drawn on the screen.

Early versions of my game had a “blurring issue” on high resolution phones, like my Samsung Note Edge which has a resolution of 2560 x 1600 pixels.

UI Blurring on the left vs High Res on the right

It was because my graphics were not designed for such high resolution devices, a pretty amateur mistake I had made when I was doing the graphics. In Flash, you only need to support the resolution you are publishing the game at. But for publishing a game to mobile, you have to cater for the HUGE variety of phone resolutions.

800 x 480, 1000 x 800, 1024 x 768, 1600 x 1000, 2560 x 1600 and so much more!

At this point I had realized that I had not set up my game properly to support these resolutions, but I worked around it and made a script called ResolutionSetter.

ResolutionSetter, also known as best script I’ve ever written, yay

This basically sets the resolution of your device to my target resolution. It’s the neatest and quickest fix I could find for my game at this point. So if your phone is 2500 x 1200, and my game is 1000 x 600, it sets your screen resolution to 1250 x 600, which allows my graphics to be displayed on your screen at a 1:1 ratio while still retaining aspect ratio. This causes no blurring in most cases.

Just for fun, I experimented with making my game run at four different resolutions on my Samsung Note. I made a 1/4 Res and Half Res version for fun. It was hilarious seeing the results and playing my game at ultra low resolution on my super high resolution phone.

Here’s how it looks:

Just like Youtube

It’s a very useful script I think I may bring over to future games. It basically does what Unity’s SetResolution does, but I modified it to not screw up my game’s aspect ratio, which somewhat combines the best of both worlds.

Res comparison while zoomed in on thief character

The advantage of this approach is that my graphics will never get scaled up even on high resolution devices which can cause interpolation and blurring. I retain high control over how my graphics appear on different devices. I can set it to render at high res on high res devices and set it to normal res on phones with resolutions lower than 1048 pixels for example.

It’s not the best approach to use, but it is the most suitable one for this project at this point in time.

A possible downside is if you want to design your game specifically for high resolution devices and want them to appear super sharp on those devices, your graphics will not be as sharp if you don’t build your game on a high resolution or export your graphics to cater for that resolution. But this is something I don’t foresee doing as my game is not built for high resolutions now. I’m using “1000 x 625” as my target resolution. If I were to support high resolution graphics next time, I would modify the script to a higher target resolution like “2000 x 1200” instead of “1000 x 600” and the script will aim for that.



At the top of the screen is a row of buffs. Rolling over them shows its description, effect and level of the buff. Each character has its own buff tray.


But how are the buffs applied?


Some things like critical rate can be stacked additively or multiplicatively. I usually put the word ‘boost’ in stuff that stack additively and ‘mult’ in those that stack multiplicatively.

For example,

critRateBoost  and  critRateMult

finalCritRate = (baseCritRate + critRateBoost) * critRateMult

This is executed from a script called the HeroScript which is attached to each hero. When you add or remove a buff, the bonuses from buffs are reset and you add any stats gained from any buffs existing on the character.

The Hero Script

There are over 80 variables and stats just for one character

The hero script stores every variable you need to know about the hero. From how much base damage, total damage, multiplicative damage he has, to how much health he regenerates when he attacks an enemy, to how much mana he gains each second, his defense, crit rates, his health multipliers, how much defense he gets from buffs and etc. EVERYTHING YOU NEED TO KNOW IS HERE.

But with so many variables it gets very confusing as to how they are calculated. If the calculations are done in the wrong or unintended order, it can lead to serious issues. But here’s a flow chart I drew that hopefully simplifies the process.

I have no idea why I created this chart when I work alone. It’s like I wrote it for myself to understand.

When the hero is created, he first initializes his base stats and gets data from what class he is (is he a warrior or a mage?). If he’s a warrior he may have higher base health and increment per level.

Then, apply any passive skill bonuses he has. A warrior typically has some passive skill that increases HP.


Then apply any class bonus boosts if he is a higher tier warrior (Knight / Paladin).

Then apply  the boosts from the main equipment upgrades which takes into account his equipment level.

Then apply any existing solo or party buff effects.

Then apply any global multipliers from the shop/achievement/ascension upgrades.

Now what happens when you buy something, earn an achievement that provides a passive bonus, or you buff or get buffed or if one of your buffs expires?

Recalculating the hero’s stats in every frame is expensive so if any of those things happens, recalculatePowers is called, which in turn recalculates the hero’s stats and gets the new multipliers from the various aspects of the game (Guardian, Shop, Achievement, etc).

Once everything is applied, the hero’s stats are updated with new values and then a call is made to the statsPanel and the upgradesPanel to update the UI to show his new stats. If the player is hovering over a popup over any of the buttons or skills, that popup must also be updated.


Loading Enemies


I was testing out my game on weaker low-end devices and the game actually crashed. Yes, it was that horrible. I had to make several changes to the way the game loads its content.

How unity loads the assets is that my game takes place in a “Scene”. This scene is called the Game Scene and it contains everything – all the enemies, their sprites, character graphics, backgrounds must all be loaded before the Game Scene can run.

The phone was crashing on the loading screen. So I ran the profiler to see if it can tell me what went wrong.


I saw that a lot of CPU resources were spent on Texture.AwakeFromLoad. It was likely because the game was loading all 150 enemy sprites when you start the game.


I kind of expected this, which was why I wanted to learn Asset Bundles. I had looked into it before. Instead of loading everything when the game starts, you should ideally only load WHAT IS NEEDED. This depends on your game though. But since my levels are separated into 10 main areas, I should only load the area the player is currently at.

Instead, I was loading all 10 areas at once, which causes huge overhead. Unfortunately, I was unable to figure out how to use asset bundles so I used an alternate approach.

I removed all references to the sprites. So basically the enemy is empty at the start. It stores no graphic and is literally just an empty shell of nothing. As the player enters an area, I load a prefab containing references to all the enemy sprites of that area. The enemy now has access to about 10 sprites, but not all the 150 sprites like previously.

So if I enter the desert, I load all the desert enemies. If I enter a swamp, I only load swamp enemies. I can also choose to unload the previous area’s enemies to reduce memory consumption (It seems that anything that is referenced or loaded in the scene, whether visible or not takes up memory, but I’m not sure and I need to run some tests).

Above diagram shows how it works now. If I’m in Area 2, I should only load Area 2’s enemies and graphics

This way, I only load what I need. The downside is that there is a noticeable pause on slower devices when advancing to a new area because the game has to load the new area’s enemies.

Previously before this change, the game has to load ten 1024×1024 px backgrounds ALL AT ONCE. However, now it only needs to load the background for your current area.

If you have played other games like Tap Tap Infinity and Tap Titans, you will notice the pause between areas as well. However Tap Titans was very clever. They hid the pause behind a fade to white screen transition. And the loading is executed while the screen is white. While loading, an animation showing the title of the next area moves into the screen, keeping you occupied while the loading is occurring. Most of the time, you don’t notice it because the loading is hidden behind the white screen and the title text animation.

Optimizing enemy loading further

Enemies are the biggest problem during loading times.

I decided to at this point reduce the resolution of my enemies. They are at 2x resolution to support high resolution devices. However, the enemies are currently taking up too much space on phones that do not have that kind of resolutions.

I mentioned atlases previously. An atlas basically combines individual enemy graphics into a combined image to be more efficient. If you’ve made or seen flash games, or any games, character animations are often put into spritesheets containing the different frames.

player - Copy.png
A sprite sheet for the turtle in Introvert

So if you have 10 separate images, you put them in a spritesheet and you have just one image containing the 10 frames. The game only needs to load that one image and not have to force the engine to keep swapping out image for your one character. This leads to better performance for your game.

Similarly in the diagram below, if you have all those 10 enemies on screen at once, you only need to make 1 draw call as compared to 10 draw calls since you only have one huge texture comprising of everything you need.

A Sprite Atlas of 10 enemies

But one should not blindly just put monsters into an atlas. If wrongly used, using atlases can turn out to have a negative effect.

In my previous atlas, enemies of different areas are being packed together! This is a BAD thing to do. What this means is that when it is trying to load a particular enemy, say the grassland enemy, it ends up loading the entire atlas, filled with other enemies from other areas that you never need. This takes up additional resources when it is unnecessary! I realized what a big mistake I had made.

Old Atlas packing

Instead of packing all my enemies into an atlas, I now split my enemies into different atlases by the area so the game does not load enemies that will NEVER be drawn on the screen. For example, if I am in the grassland, I should only need to load the grassland atlas and not have to make any requests to load textures from the candyland atlas.

New Atlas packing

This way, I have a maximum of one enemy atlas loaded in the game when I am in an area. Combined with the lowering of enemy resolutions, I could fit an entire area worth of enemies in a single atlas, which is really awesome!

The game loads in 4-5 seconds even on a very low-end device! It loads in 1-2 seconds on high-end devices.

Combining SpritePacker and Resources.Load

One small technical challenge I faced is that you cannot load sprite atlases in runtime. This is because the game cannot tell when you need the atlas. (Either you load them all at the start or you don’t load them at all.) To use a sprite atlas, you have to know exactly where you need it and when you need it. But I cannot predict when the player will reach the next zone.

This means that you lose out a lot in performance if you want to load individual sprites in the middle of the game (eg when the game has already finished loading the scene).

But you can be a bit creative with how to go about this issue. Actually it’s quite straightforward and takes advantage of how the game allows you to create objects in runtime.


Those damage texts that float up when you damage the enemy, those bullets that are shot from your player are all created in runtime (after loading is finished). So what I did was I created an object that held all the references to the sprites I need. This way, I’m not loading the sprites individually. I’m loading their references to the actual sprites. And those sprites can be sprite packed, which combines the best of both worlds.

This picture is self-explanatory, I hope.

When I want to load the sprites, I load the object, which stores the references to the sprites and assign the sprites to my enemy object.

Background Atlases

Another scenario where the Atlas is bad was when I packed all my backgrounds in a super huge atlas, which required the game to load the super huge atlas, just to retrieve one background.

Putting 11 backgrounds into one atlas is a very bad idea!

At any one point time in the game, only one background is drawn on the screen. In this case, the game is only using up less than 10% of the whole atlas, but is loading the entire atlas into memory. It’s a very inefficient use of atlases, which was why I split them up. Notice the white spaces below and above each background. The white spaces are added to ensure the image retains POT (Power of Two) dimensions.

An image with dimensions like 512 x 512 or 1024 x 1024 will allow it to be compressed more efficiently via a better compression format, resulting in smaller file sizes and less memory usage.

It was also good to move the backgrounds out of the atlas because the huge atlas was 4096 x 4096 pixels, and old devices have a maximum texture size limit of 2048 x 2048px. Anything higher and the device will be unable to display it. I’ve also changed my compression settings for backgrounds from [Compressed] to [Crunched].

Gotta love that format name

This is a new compression setting that only exists for WebGL and is really good. It literally crunches your textures, making them smaller. You can even set the level of ‘crunching’. Changing this for all my enemies resulted in my game dropping from 28MB to 24MB. It’s not a lot since the game already a super small size already and it’s amazing how well this game compressed from the initial 40MB. With the backgrounds, I believe it will drop even further. I set the quality to 50% because at 0%, though it is sharp, the colour quality is lost.

Quality comparison

Notice the sand giant’s mouth in the image above. While the rest of the monster remains consistent, the colour of the mouth is greyscaled at 0% crunched quality.

At 50%, my textures retain sufficient visual quality and look good while keeping the file size small at the same time. This part of game development leans more toward trial and error sometimes.

For WebGL, one of the outputs is a .data file (which is roughly the size of my game and contains all the assets of the game). This data file will sit in your browser and require a constant heap of memory. If my game is 30MB, it means your browser needs to constantly give me at least 30MB for my game to run, which is why it is essential to keep this file size small!

The editor log is not an accurate representation of final sizes, but it does give insight into what is taking up space. Below is the log from my build a few months ago. I managed to get the complete (uncompressed) size of the game down to 129MB from the 340MB it was in the past through using better compression formats and sprite atlas-ing.

Textures are the biggest contributor to file size for my game (and memory usage too depending on your game)

I also converted my backgrounds from JPEG to PNG. There was absolutely no advantage to use JPEGs and JPG’s lossy format was only going to contribute to lower quality graphics when they are compressed into the final game.

Shop & Secret Shop

Not much to talk about. It’s just stuff you can buy. They affect global multipliers like Shop.goldMult, which is taken into account every time you gain gold.


Because the game lasts a long duration, it is unreasonable to expect players to remember the storyline and I found this a request in many other games. People may want to re-read the storyline so I added a journal panel.


This summarizes what has happened and during the early game when there is little dialogue, it can be something for the player to read and explore about the game. It’s actually the journal which sparked off my interest in adding a story to the game.

Game Balancing & Math


When trying to balance my classes, I had to have a few sheets to calculate how much damage (DPS) each character was dealing. Because their skills have different starting levels and growth, it was important to make sure that they had similar cost ratios. For example, if the warrior gains +10% damage every 1000 EXP, and the mage gains +10% damage every 800 EXP, this eventually accumulates to a big difference and late game, players will just only upgrade the mage.

The balancing in the game isn’t perfect because there are a lot of variables which affect how each character scales. This is further made worse by status effects you can inflict on the monster, like poison, or weaken.

Status Icons

Or buffs that temporarily aid a particular character for a short span of time.

I am pretty sure it’s not difficult for people to find an exploit, but I want to try as much as I can to prevent imbalances in the game.

Version Control


One thing I learned in my company and working in teams is proper version control. I had been using Dropbox but it is unable to revert the entire project back to an earlier date – it only reverts individual files which makes reverting to an old version a tedious process. Even when working alone, I often found myself wanting to revert to a previous version of my game for various reasons. The most common reason would be that I did something that broke the game but there are other reasons like:

  • Going back to a previous version to compare the FPS
  • Looking at exactly what has changed from the previous build, and what code has changed
  • Looking for old code which I deleted but need to use again, which reduces the need to comment unused code which may clutter my scripts

Since the time I’ve learnt to use SourceTree for my project, I’ve already used it to pinpoint some errors in my game which would have otherwise taken some time to find out. I was really impressed. I’ve not used it to revert to an older build and it’s really, really rare that I need to look at it to see what has changed (it has helped me solve 3 problems in the past 2 weeks), but when I do need to refer to it, it often tells me what went wrong.

SourceTree highlighting changes in my code!

SourceTree was probably meant for teams to manage the game that is being worked on by multiple people, but it works really great for individual use as well. Also, a screenshot containing my first commit, which was at 3.43am on 16 May:


That’s all!

That’s all for this post. The game is still in its polishing stages. Despite no more content being added to the game, the final run is the most tedious part. It took some time to go around testing and fixing bugs or fixing the minor issues and cleaning up the game.

I suppose when this is done, it actually will be the closest game I have to be properly released to the public.

I’ll write about the main menu design and write a bit about sounds in the next post.

Link to part 5 here

Making an Idle Game Pt III

Hi !

It has been awhile since I last posted something, but I’ve not been out of touch with game development. In fact, I’m doing something related to it every day.

So what have I been doing?

I’ve been working with a team of game developers at a company that develops educational games.


I’ve been very busy and truth be told I could barely get the energy to continue working on my personal projects and games. I was really depressed. This internship is pretty fun but it can be very tiring and I have very little free time compared to before which ultimately eats into my sleep and my health takes a hit. Juggling work and my personal projects is tough (and hey, I need time to relax sometimes too you know). It took me several weeks to adjust to this lifestyle, but I believe I am now back on track!

Earlier this month, I was deciding whether to create a new game, and what game to create at that. With Web Player shutting down and WebGL far from being a stable platform to build games on, I realized that now is the perfect time to make a mobile game. Flash and web games are growing less popular by the day, but I decided to do one final push to put a game on the web. I was thinking really hard what I should do.

I looked up my old project, Idle Heroes, and finally decided that I should wrap it up and finish the game.

Idle Heroes (30 April 2015)

It was a game I started making when I was still in the army, back in 2015. I worked on it for two months before my army ended and I stopped.

1 year has passed. But now I have decided to finish what I have started.


This was my first Unity project, and though I had used Unity while I was studying in school, I barely did any programming then and barely touched the game engine itself. I took on the role of an artist in my final year school project and the programmer was the one who did everything in Unity.

So yea, it was only on April 2015 did I officially start to learn Unity and started this project, Idle Heroes.

It’s funny looking back at work you did one year ago because you’re going all “I wrote that code? That’s so inefficient!” Yes, I was spending a lot of time cleaning up my code and optimizing it for mobile devices.

‘Idle Heroes’ is no longer the game’s name, but it is still the project name and I will refer to it as such for consistency purposes. (I will show the new game name and main menu in a future post.)

What is Idle Heroes?

If you do not want to read Part 1 and Part 2 of the makings of this game, don’t worry as I will just explain it below.

Here is a video (gif) taken during the first week of development (therefore, no animations yet). It demonstrates the game’s core gameplay effectively.


Idle Heroes is an idle incremental game where you hire heroes and upgrade them in order to slay increasingly tough enemies. As you progress to higher zones, you meet new enemies and fight bosses. The gold you gain can be spent to upgrade your character or in the shop to further boost your gold or experience gain amongst other buffs. Each character is a unique class with a set of unique skills which can be upgraded as you gain experience.

Skill Icon Designs

As you slay bosses,you also gain gems. Gems are used in very powerful upgrades in the Secret Shop. If you beat the final boss, you can ascend and you will restart the game, but gain a huge boost in power as well as gain access to Guardians, mysterious powerful beings who grant you special powers to help you run through the game quicker and more efficiently.


There are 3 + 1 characters in the game and you unlock them with time. Each character has three tiers.

Early concept designs for the mage class advancements

You can advance into a higher class if you are powerful enough. For example, the warrior advances from a warrior into a paladin, which enhances his tanking abilities.

If you don’t understand, it’s okay because here is some information about the characters.

The Characters

image (11).gif

The warrior is able to attack enemies up close.

Characteristics: High health and defense, his skills boost party members’ defense and when he advances to a higher class, he gains ‘orbs’ when attacking enemies which can be used to increase his defense even further.

image (12).gif

The priest casts spells and magic and shoots magic bolts at monsters.

Characteristics: High mana but low health and defense. He heals party members and casts various buffs to boost allies’ offense and defense prowess. He is more of a support class at first but he can advance into Wizard later on which boosts his offensive abilities. (BTW, the animation above is sped up. He doesn’t attack that fast in the game.)

image (13).gifShuriken.pngShuriken2.pngShuriken3.png

The thief throws shurikens at the enemy from a distance. When he advances into a Ninja, he can inflict poison, which gradually drains the health of monsters.

Characteristics: Average health and mana, has high attack speeds and good against bosses. He has evasion to prevent getting hit by an enemy’s ranged attack and has a chance to steal additional money from monsters. His buff increases the critical rate and damage of all party members.

image (14).gif

Last but not least, the Warlock. He is an unfinished character. He is a very powerful end-game character and cannot be hired with gold. He also has an interesting storyline, being once a human until a mysterious curse turned him into an evil Warlock. Hint: You have to fight him in an epic boss fight.

Characteristics: High health, mana and damage but low attack speed. He can cast various auras on his party members. The stat boost depends on what aura he is casting.

I initially intended to have only the first 3 classes in the game, but after making a Warlock boss, I felt that it would be cool that once you defeat him, you get to learn about his backstory and eventually get to hire him as one of your party members. It made the game and story a lot more interesting. A player who played my game was excited to hear that he could actually choose to save the Warlock (in a story dialogue) and in doing so will be able to hire the Warlock.

Should have an option to kill him again to please the sadistic people

I think this character is very interesting and based on more player feedback I might eventually add him in the game. For now, his skills and stat balancing is incomplete and I decided to take him out of the game for now.

This game is pretty simple and each character only has 3 states:

  • Idle
  • Attack
  • Death
Assassin’s spritesheet

While I had initially used Unity’s default Animator class, I realized that it fell short of what I wanted to achieve with my characters.


Because my characters could advance and they would switch sprites, the Animator class required me to use 3 different idle animations, 3 different death animations and 3 different attack animations. It is a limitation of the Animator. I didn’t want to just copy paste the animations because they are all just the same action, just repeated with different sprites. So I made my own animator class and called it SpriteManager.


Here, I can define which sprite the character should use.


It’s actually pretty nostalgic because it’s how I used to animate in Flash. Aside from animations, I also had to consider how the different class tiers would look.

Character conceptualization
Colour tone experimentation


When designing the thief, I asked two friends to rate the colour schemes. I wanted them to rate and arrange them on two criteria:

  • How powerful the character looked
  • How nice the character looked

I asked them to rate each character from 1 to 5 on each of those factors (you can see I marked the ratings separately in RED and BLUE in the image above)

The purpose was that I wanted “strong” colours for the higher tiered thief, and “weaker” colours for the lower tiered thief. I’m just going by feeling and observations when I say this but I felt that desaturated colours make the character look weaker and saturated colours closer to the reddish tone look more powerful.

Area Design

The game has different ‘settings’ and ‘themes’. You start off in the grassland and eventually progress through higher level areas like the Forest and the Swamp. Each area spawns different enemies.

Early drawing of the forest BG

You can see here that I did not do anything different from other games. Like in most Idle incremental games, the scenery changes every 10 levels.Most games have areas like Desert, Antartica, Forest, City, and other really normal typical designs.

I have to admit, I wasn’t too creative with the area design for the first few areas, but I decided to do something different for the last few areas. I scrapped out some of the normal areas and made areas like ‘Outer Space’ and ‘Candyland’.


Those areas obviously don’t make much sense even in the game world (how is the mage breathing in space without any helmet?), but my friend who playtested my game said his favourite was Candyland because it was something special and unique and the monsters were special too.


I think I put a lot of love into the monster and area design for Candyland.


I even made the area boss a giant cupcake! I must have been high when creating these graphics because just for this area, I made a secret boss which is a chocolate yeti. I hope players find him!


The idea of chocolate yeti came when I drew an ice yeti and accidentally hit the colour invert button. This caused my yeti to change into a brown tone. It was amusing to me so I saved it as an image and named him ‘Enemy100’ which was an arbitrary name. It was later turned into an official enemy in the game and he received a proper name (and a candy cane).

Yeti.png   Enemy100.png

Monster Design

Candyland and Space are my two favourite areas in the game. I had the most fun drawing them. I like futuristic things like Star Wars and such, so I knew I had to include a futuristic themed area. It was so delightful drawing these that I had more monsters in this area than any of the other individual areas had.

Space enemies, with a futuristic theme

Just of note, each area has roughly 10 monsters and there are 10 areas. I didn’t go to each individual area and do a count, but this roughly means that there are over 100 enemies in the game! This figure is excluding the 20 area bosses and another 10 unique bosses (like the Guardian, Choco Yeti and other storyline-related one-time appearance enemies).

You might be wondering why the monsters do not have a ‘HIT‘ animation or why the monster only has a simply scaling idle animation. Am I just LAZY? Did I just simply could not be bothered to create more animation frames?

The reason is this – I simply do not have the resources to commit to animating several states for each monster, for 100+ monsters. It would require the game to be structured differently (maybe more enemy oriented, to have less enemies but make them have more detail.)

To be fair, some of the special monsters and bosses have attack animations, and it’s what makes them really stand out from the rest so people know they are fighting something significant and they retain a kind of special ‘status’ which differentiates it from even the area bosses. Currently only the storyline enemies have an attack animation and I intend to keep it that way.

At this moment this game only has 1 artist, programmer, designer and they are all the same person. It’s a lonely one man show and while I would want my game to have all these nice things and animations, sadly there is a limit to how much I can do in so much amount of time and I have to prioritize what goes in the game and what goes in the bin.

These are compromises that I have to make all the time and some of these decisions are not easy to make, such as having to scrap an entire equip item looting mechanic because some things look good on paper but are actually really unrealistic or just plain bad in actual implementation. (more on the item mechanic below)

If I had all the time and resources and manpower in the world, sure I could idealize the perfect game to make but I can’t. In making games, I learned that I have to exercise a lot of self control because if I don’t, I tend to go crazy and start adding content and features that the game was not initially designed for. Many people may think it looks trivial, but it can have very serious consequences.

The most painful decisions to make is to have to scrap something that had gone through so many iterations only to realize that it cannot be done and you have to acknowledge that despite all the time spent, something may just end up going out the window. But if there’s any consolation in that, it’s that you will (hopefully) be a wiser and more experienced person to know not to repeat the same mistake again. I think I talk about these things once in awhile in my posts and sometimes it is these invisible processes which most people do not get to see. Hopefully this didn’t come off as a rant, but if it did, the next time you see a long paragraph without pictures…you may want to avoid it haha.

Anyway, moving on…


Blog13.gifWeakenGIF.gifDragonSkin Animation.gif


As mentioned above, each character has skills. Above is an example of ‘Wisdom’, a buff that increases EXP gain for a short time, an old version of the ‘Weaken’ skill, which weakens an enemy, and ‘Dragon Skin’, which raises party members’ defense. The game has about 12 active and buff skills.

Spritesheet of the ‘Wisdom’ skill
Design for ‘Iron Body’ buff, a skill which was later turned into a passive.
Onion skinning produces cool effects like this

Skills in the game fall into three main categories:

  • Active Skills (attack the enemy with huge damage or multiple attacks)
  • Passive Skills (give you a stat)
  • Buffs (gain a boost in a particular stat for short duration)


Above were pictures of two buff skills when they were a work in progress.

The challenge came when some of the skills were really special and required me to do a few conditions. Take the Resurrection skill for example. When cast, it resurrects dead players, and restores some of their health (depends on the resurrection skill level) and gives them a protective buff.

This meant that Resurrection was not only was an active skill, but it also classified as a buff skill. It was tricky to code because the way I designed the skill structure did not cater for a skill that fell into two categories. But I managed to pull it off in the end. This is the same for drain, a passive skill that has a x% chance to cast a buff – is it categorized as passive or is it a buff?

Proper categorization is important because it affects a lot of things, such as whether the skill is able to be added to the skill tray or not.

Skill tray

The skill tray is where all active skills are displayed and the player can click on them to use them. Later on in the game, you can purchase AUTO-CAST which makes your skills cast themselves once the cooldown is over, a feature I felt was necessary in an idle game.

The skill tray was originally a scrollable interface which scrolls endlessly to the right when you acquire more skills, but I felt that was bad design and instead removed the scrolling while making excess skills roll over to a second row. To reduce clutter, skills on auto cast don’t get added to the skill tray, so even after the double-row implementation, the skill tray never leaks to the second row now.

My favourite skill is an attack called Eviscerate.


It decreases a percentage of the enemy defense and deals high damage. The skill has a cooldown of 1 minute, but each time you kill an enemy, its cooldown shortens by one second.

I used TexturePacker to pack my sprites before I learnt of the Unity SpritePacker.

TexturePacker packs the individual frames into a single combined image


Early on in the game, monsters dropped loot and you could collect basic equipment to upgrade the characters.

Warrior, Priest and Thief armor

However, the design was very confusing for playtesters and they did not get the idea of the drop mechanic. So I scrapped it. I was kind of disappointed because quite some time was spent on this feature, but the game was better without it. I was not skilled enough then to make a good design work together with the UI and it was a nightmare on mobile trying to display this information to the player.

Damage Numbers

When the characters attack the enemy or are hit, damage numbers should appear over them or the monster.


While I had worked with bitmap fonts in Flash before, it proved to be something slightly more tricky to do in Unity. The font required alphabets because I had to do number formatting for big numbers (eg 1,200,000,000 displays as 1.2T)


When attacking, damage is displayed which floats up and fades off. In fact, I can take it a step further by making the number bounce, making it bigger as it first appears then shrink back as it floats up. Most standard web games don’t do this, but you can see that in some MMORPGs and takes the text quality up a notch. This was something I learned at my company 🙂

Because the damage numbers can be pretty resource intensive, there is an option to turn them off in the settings. This is true for particle effects as well which has a toggle on its own.


Speaking of particle effects, I went a step further and added a blood effect on players recently.


On the left is a continous blood effect which could be displayed when the character is low on health but it looked weird. On the right is a burst of blood that only appears when the character gets hit. I also changed the shape so it looks more like droplets than just circles. The blood effect was an idea by a friend that I thought would not fit well with the game graphics, but I made it cartoony and it ended up looking pretty decent and somewhat comical. This was actually a very interesting suggestion.

The Ascension System


This is a very huge feature but in summary, it basically resets all your characters’ stats and you start over from the beginning. Any unspent gemsGem2.png you have collected are converted into Enchanted GemsGemGreenBig.png.

EnchantedGemPopup - Old5%.png

And as you can see, they give really huge bonuses to your character when held in possession. And not just that, they can also be used as a currency to purchase powerful upgrades from this guy:

The Guardian

Yep, he is the Guardian and when you meet him, you have to first defeat him as part of the storyline before he shares his powers with you. The fight takes place in a unique zone called ‘The Crossworld’ which you cannot access through normal means.

If you win, you get to own the Guardian and upgrading him will improve your prowess. Of course, this means sacrificing some of your own power since spending the Enchanted Gems means you get less boosts from it.


There are plans to have more guardians in the game, each one offering different abilities. Currently the other guardians are just colour reskins of the first one but I may add new abilities if the game gets enough attention.


Crazy isn’t it?

When I make a game, there is a high chance that you will see achievements in it. It is not something I will leave out of my games, unless it’s a simple enough game. Even my first flash game, which was a platformer game, had it.

In a lot of incremental games, they tend to duplicate achievement icons. It’s understandable – you have 100 achievements and drawing 100 icons is a lot of effort. It also makes it easy to identify what achievement it is. This game currently has 120 achievements and each achievement gives different rewards.

I don’t know if it helps, but I actually went to try and make it such that even when I duplicate the icons, I at least change some stuff like their saturation levels and hue so no two icons are exactly identical. The better achievements have more ‘powerful’ icons while your starting easier achievements are more dull. It may not look like it but just adding a little extra detail takes time and effort.

Making each icon as unique as possible but easily recognizable that they are from the same branch

The achievements in this game are probably the most complex I ever made. There are two groups of rewards, one-time rewards and passive bonus rewards. One-time rewards are give you huge amounts of gold/EXP for achieving something. Passive bonus rewards are given by harder achievements, but they last a lifetime! Here are some of them (with arbitrary numbers)

Examples of One-time rewards:

  • Gold +1000
  • Experience +5000
  • Gems +5
  • Enchanted Gems +1

Examples of Passive rewards (these are permanent and last through ascensions):

  • Gold gain +2%
  • EXP gain +3%
  • Hero damage +4%
  • Hero HP +5%

The rewards are defined in the Achievements class.

All achievement data in one place

As you can see it is possible for an achievement to give 5% hero HP and 3 enchanted gems (combining both passive and active rewards), but for simplicity’s sake and not to confuse the player, it is best to limit one type of achievement to give one or two types of reward at max. It keeps things organized and creates interesting gameplay like “the boss killer achievements give gems, they should be prioritised if you need gems, but if you need gold you can farm the other achievement”.

Each achievement’s rewards are entered in the editor, (see the green and pink fields above).

The other fields are set in the script because it’s more tedious to go through each item and enter their names manually.

Does typing all this look fun to you?
Because it’s not…

The whole achievements system is pretty wacky. I categorized them by achievement type to keep them neat and to keep them displayed in a sorted and orderly fashion in the game’s UI. It also makes it easy to add a new achievement tier without messing up the order.


But because there are so many different tiers of achievements and different reward types, something can easily go wrong if you are not careful. For example, mistyping dmgMult *= 105 increases damage multiplier to 105x when it’s probably intended to be 1.05x. This really happened by the way, I kid you not when I say my damage inflated suddenly after earning an achievement.

Achievement reward multipliers

Thankfully, there is a panel that summarizes your passive achievement bonuses, which is actually as useful to players as it is for me to see what the heck went wrong when something goes wrong.

The thing about this game is there are multiple sources of stats. For damage as an example, there is:

  • Achievement damage bonuses
  • Shop item damage bonuses
  • Guardian damage bonuses
  • Enchanted gem damage bonus and
  • Party damage Buffs

This is why it is actually very easy to screw up. They all have to work well with each other to keep the game balanced and working as intended. In my next post I will talk about the hero class and how all those different boosts work with each other.

Loading Screen

While this game did not require a loading screen initially, loading times significantly increase on mobile devices and it required me to have one. I made this today:Blog66.png

A random tip is displayed when the game is loading. This screen is disabled on WebGL though as WebGL does not support multi threading. I’m not an extremely technical person, but from what I understand, how it works is that the game runs the loading screen on one thread and is asynchronously loading the game at the same time. The loading screen fetches the progress of the other thread and displays it on screen. However at the moment, WebGL cannot run two threads at once so it will wait for the loading screen to finish loading before loading the game scene. Thus, it defeats the purpose of loading a loading screen if it cannot load the main game scene simultaneously.


Game balancing has always been something important. This being my first game that had a lot of stats and complexity, I learned how to use excel and its formulas. Later on, you’ll see some of the things I’ve done with it (plotting graphs and using those data to compare the power of the different classes at different stages in the game.) But for now, here’s a simple screenshot of the basic math when the game was in early development.


It calculates the health of the enemy and how much time it takes to kill it. Then, it uses the gold gained to simulate upgrading of your damage, and with the new damage, writes how long would it take to kill the next enemy. My friend wrote this, but it helped me get to see the power of math and excel and made me see how useful these tools were in game design. He even colour-coded the time column so one can easily see where the values are at their lowest/highest – aka where progression peaks and drops.


This gameplay was inspired by other idle incremental games, like Clicker Heroes and Tap Tap Infinity. I wanted to go with a different approach – instead of having so many heroes, I wanted to focus on having only a small number of heroes and focus on their character instead. In Clicker Heroes, each hero isn’t very unique and to achieve maximum DPS, I found that I only needed to upgrade the top 3 strongest heroes. So I was only upgrading a maximum of 3 heroes at any one point in time.

This is somewhat applicable to another game I played as well. In Tap Titans, you always aim to upgrade the most powerful character until you get stuck and eventually return to upgrade previous characters. But at any one point, one character is contributing 99.9% of your DPS and the other characters are rendered obsolete.

Me playing Tap Titans

There is of course nothing wrong with that design. I’m not saying it’s bad or anything. They work really well for Clicker Heroes and Tap Titans and they are really good games and my game likely will have similar problems. But I personally wanted my characters to stand out and have some depth, so I gave them mana, skills, unique abilities. Additionally, instead of making the enemy just a dummy for you to hit, they can fight back! I also added a storyline which reveals more about the game’s world as you progress.

I don’t know if this idea will work well, but it is of course a risk I took when I decided to walk down this path in directing the game’s design! You don’t need to look hard to pick out the flaws in my game’s design, but I’m still learning and my next game will definitely improve! I’m pretty sure there may be other games that may have done this. One of the games that has done this is Tap Heroes, which I drew inspiration from too.

Tap Heroes

It’s a very simple game (the characters don’t have skills and there is no ascension system or any complex features really), but it inspired me.

How long have I been working on this?

The short answer is… 1 year.

But that includes the time which I did not actually actively spend on making this game. I did not really dedicate a whole year to make this game… that sounds exhausting. So for a more precise answer, I looked through my update logs.


I write down any changelogs in the game and I keep track of every significant and here’s what I got from my change logs. The changelog is viewable in the game to anybody who plays, so they know what has changed since the last version.

Anyway, here’s a summary of the significant dates in the project timeline:

  • 11 April 2015: Idle Heroes created
  • 11 June 2015: Pushed a final update and stopped working on it
  • 13 May 2016: Revived the project
  • 28 May 2016: (Now)

So basically, I worked for two months, then stopped.


Then returned to work on it in May 2016, till now. I suppose if I were to count the actual production period, excluding the time which I did not work on it, it would be…

3 months spent to make this game!

The most awkward changelog ever.

It was a much shorter than I expected. I felt like I had worked on it for ages.

For comparison, my Tower Defense game was made in 10 weeks.

What’s next?

When I create my games, I often capture many screenshots of my development process. I don’t take screenshots all the time, but when I notice something really cool and worth talking about in detail, I take a screenshot and save them to talk about in my blog posts. I will look through my images as I’m writing. I even take videos sometimes.

Some of these screenshots are really interesting to see and I can’t wait to share some in the next few blog posts!

I’ll also write more of the behind-the-scenes technical issues I faced when trying to run this game on mobile and basic stuff I did to try and optimize a battery-draining and turn a slow, unplayable game into something playable. I’ll perhaps also talk about other stuff like texture crunching to reduce memory consumption on WebGL.

There’s also other features in this game I want to talk about that I was unable to cover in this post, like:

  • Offline progress
  • Character/NPC Dialogue system
  • Shop
  • The Journal Book
  • Hero Stats
  • Buff system
  • Sounds
  • Main Menu design
  • Level 101+ Area Design
  • Clicking/tapping mechanic and upgrades
  • How all the systems/reward mechanics stack and work together

But for now, that’s ALL!

Link to Part 4 here