Making an RTS/RPG Part 3 – Water Rendering

Part 1 – Concept

Part 2 – Buildings/Game Flow/Story

In a game set in the ocean, water plays a huge part in the graphics as it is what you see a lot.

Unfortunately, ocean water is a tricky thing to replicate in games for a few reasons.

  1. Its surface needs to not look flat
  2. It is transparent
  3. It needs to have reflections and ideally glimmer in sunlight
  4. It can refract objects underwater
  5. The deeper you see into the water, the more ‘foggy’ it appears. (Shallow water and deep water display differently)
  6. It needs to be easy for the GPU to render, as this is a game and while important, water should not be heavy to process on the device.

I played around with different shaders I found online.

Water 1

My favourite part about this water is it has foam around the intersections where objects touch the water. It’s a really sweet effect but without any surface detail, it looks really bland. Even if I add a texture, it’s still evenly flat throughout.

Water 2a

This was the water I eventually used for the Demo. When animated, the ripples are really mesmerizing to look at, and you can feel the bumpiness of the ocean water because of the way it captures light. But my favourite part about this shader is its simplicity and performance. It may not have reflections, but it works on any device that supports normal maps.

It is a standard shader, but with a few tricks. To create a believable effect, I used two normal maps animated in different directions, perpendicular to each other (e.g. one normal map scrolls northeast, the other northwest). Not only does having two layers of normal maps overlapping making it look really cool, but what the perpendicular angles does is it makes it look like it’s really flowy. In my opinion, this is a great balance of visuals with performance.

The only catch is that I could not get reflections to work as intended.

Water 2b – Screen space reflection

Screen-space reflections was used above. It has too many artifacts and gets dark when approaching the horizon, which is not supposed to be the case. As for planar reflections, it is restricted to Unity’s HDRP, a different render pipeline in the engine that I use and an existing solution requires a custom shader which does not have the overlapping normal map support.

Moving on…

Water 3a – Reflection

Look at those reflections! This one has dual layered normal maps, but the intensity of the surface bumps cannot be varied. Nonetheless, the reflections look really pretty at night when the city lights up.

These reflections are not screen space, therefore you can actually see the underneath of things that aren’t visible to the camera. What it does is there is a second camera that captures the objects in the world and projects it as reflection. It sounds intensive and it does indeed almost double the processing time requires because it has to draw everything twice. Which is why the resolution of the reflections is capped at 256 by default. I don’t need the reflections to be super crisp and sharp or detailed. This makes it a lot more manageable to calculate reflections.

I had some fun submerging my city with water too.

Water 3b – Refraction

A different mode of the water above allows it to not only be translucent, but also refract things underneath it. This is really cool, and I submerged my city even more in the above screenshot to really see the effect. It’s really cool as I can use it to illustrate shallow and deep water with a few more tricks, but out of all the water shaders, this is the most EXPENSIVE for the device to render because the water now has to calculate how to refract things underneath it.

Best Water?

But what if I could push graphical fidelity to the highest? What would be the best looking water?

Water 4

The best looking water of all! No trickery with normal or height maps but actual waves being simulated! There is a foam, refraction, and you can even dive underwater! There is underwater ‘fog’, and even caustics (refraction of light rays causing the rainbow colours on the sand!)

This is truly amazing but I’m holding off implementing this in my game for now. The above was made possible with Crest, an ocean plugin that I sourced from Github.

Ultimately, I used both water 2a and 3a in my game. I offer a high quality toggle mode that allows people to turn off the advanced water effects of 3a, and use water 2a instead. By default, mobile devices will use 2a, and desktops use 3a.

Wait did I just mention mobile?

Yes I did a test of this game and it runs on my android device!

Experimental Mobile Build

Early Mobile Test on 21 March (8th day) – do not get hopes up, not expected to be properly supported till later.

I wanted to be able to play my game and show it off while on the move, so I built a mobile version of my game!

It actually looked better than I expected, but because it was a very quick test, it is not optimized and will drain quite some battery.

Mobile is still experimental, so it is still being tried out as a low priority. I had to adapt the controls for mobile from arrow keys to click to move. I don’t want a keypad or joystick yet as I think it takes up a lot of screen space.


While playing with materials, I ended up accidentally making what looks like a winter DLC for my game!

Everything has turned white!

In here, I am trying out performance improvements if I were to switch to using a technique called Color Atlasing where I can use a single material shared between different 3d models. This greatly reduces the work the GPU needs to do to draw multiple objects on screen, as it allows the engine to ‘batch’ render.

Batching reduces the work needed by your computer, similar to how you only need to make one phone call to order 10 foods from your supermarket.

Without batching, it may be like having to make 10 phone calls to order food from 10 different supermarkets. It is much more work to do and time consuming. Batching them means if certain conditions are met, you only need to issue a single set of instructions to execute multiple tasks.

It is not automatic and my 3D assets have to be created in a way that allows the engine to perform optimization.

The above was a test to see what difference it makes, so I can evaluate the ratio of the effort required to work on it versus the outcomes of this optimization technique as compared to other methods.

Happy Mother’s Day! (Making a 3D animation)

I made a dance animation using my game assets to celebrate Mother’s Day, which occured last Saturday on 8 May 2021. Above is the video.

My mother was listening to this song on repeat some time ago so I made this for her using my game’s assets. Happy Mother’s Day to all mothers!

Dance Choreography Design

I used to take dance classes, and I really enjoyed Dance as it was a way to express myself without having to use words. It also is a fun way to exercise and keep fit. I never would’ve expected that it would come in useful in my career as a game developer. Well not exactly related to games, but still.

It was really fun to ‘design’ this dance and you can see above that the dance has ‘layers’, which are animated with offsets. I learned about layers from my dance classes, and I integrated it here.

My favourite bit was actually syncing the camera angles to the music beats near the middle of the video.

The great thing about designing a digital choreography is you can keep going back to it and finetune the dance until it is perfectly how you envision it, and if the animation or timing doesn’t look right or feel great, you can very easily tweak it. You can duplicate more dancers, remove dancers just with a few clicks, it’s just insane. You can get the perfect timing, perfect moves and even their positions because everything is virtual and you just replay and replay until it matches your vision.

It is really surreal when you’re moving the dancers with a flick of your mouse, and making them dance faster just by changing an ‘animation speed’ property, and easily shift the camera angles virtually to get the perfect composition.

Technical Information

I built this cinematic using the Unity game engine, sequencing it together with Timeline, and using Cinemamachine to design the composition, the camera angles and shots.

The animations were obtained from Mixamo and its animation data was imported into the game engine as clips I could splice together in Timeline.

The entire animation is real-time rendered.

Total production time: 2 hours

I didn’t count exactly, but I started work on the night before Mother’s Day after I ended work that night and had my dinner, which was around 9pm, and I was done by 11pm. I had to keep my headphones on while working with the music and pacing as this video was meant to be a surprise. I managed to trick my mother into thinking that I was asking her for feedback on an animation instead of a Mother’s Day video, which was really funny.

Of course, the reality is that making animations is a lot of work and usually takes days and not hours. I am only able to build it fast because I’m experienced and am familiar with my workflow, and with help to the tools within the game engine that make this possible:

Using Game Engines to create 3D animations & Cinematics

Snapshot of Timeline, one of the tools I use in the game engine to sequence my animation

A lot of people have a misconception that game engines can only create games. And most people don’t use game engines to create 3D animations or cinematic content. That second part is true, but only because I think many people are still more used to the traditional technique of using Maya or Blender, as game engines were not built for this purposes until recently a few years ago. Additionally, it is rare to find the skillset for doing this in game engines, as it is currently quite niche from what I hear.

Screenshot of the viewport with the red icons representing the different virtual cameras in the scene that capture the different camera angles in the video

I however, have found several advantages to using a game engine for creating cinematic content.

The great thing about a game engine is since my game is already built with the game engine, I can just use it to also create animations without having to export the assets into another tool.

I can very easily create animations without going into Maya or another DCC. I also iterate extremely quickly because I am very familiar with game production tools and I have a separate set of scripts to assist in creating cinematics rapidly. And of course, the best thing about a game engine is it uses real-time rendering, so lighting is not just easily adjustable, but what you see in the viewport is the final lighting and effects which do not require compositing.

In terms of workflow, I find myself many times more productive and able to make many more creative decisions in a short time span. While it may seem like the quality isn’t directly ‘better’ than traditional techniques, the hidden costs saved is in how much more quality you get from having greater creative freedom and time expenditure wise, it is much better.

Snapshot of the Recorder window, which on the click of a button, renders the 72 second long video.

The entire video is a direct output recorded from Unity, including even the music and any sound effects, so the final render does not even have to go through Premiere or After Effects. I just hit render and upload it online. Amazing isn’t it?

Making an RTS/RPG Part 2 – Buildings + Game Flow + Story

In Part 1, I talked about coming up with a concept and creating a demo prototype in 3 days to test the idea.

After creating the demo prototype, I wanted to program the game systems properly moving forward.


The first system is a BuildingManager script, as buildings are core to the game.

A manager in programming is similar to a manager in real life – it manages a group of people objects in the game, and I can retrieve information like how many buildings are on the map in total, how many of them are houses, etc.

This is important as it will be where I write the code to determine the construction logic. For example, to construct a building, I need to do 3 checks:

  1. Do I have enough resources to build this thing?
  2. Is there a wooden deck underneath to build this on? (Cannot build on water)
  3. Is this grid occupied by something else? (Check for overlaps)

Aside from that, I need to create for myself a way to store building properties. I created ScriptableObjects which store data for each building, and these values are all easily adjustable in one place.

Things like what is its name, its description, its cost, what resource it consumes and produces, are all stored in one convenient place, and can be adjusted on the fly.

I had modelled different buildings and to save time, created a scene with all buildings in it.

To capture the icons, I use a 1:1 aspect ratio and scale them to fit the screen.

At the top half of the image above, you see the scene view but on the bottom half, it is what the camera captures. I set my camera to capture at 1024 x 1024 resolution. Sure the icons only display at 128×128, but capturing a higher resolution and using an import setting to cap the resolution allows me to scale up if necessary in future.

One of the cool scripts I wrote in a previous project is an automated way to capture 2D icons of 3D objects, and output them with a pre-determined file name, so that if the 3d model is updated, I just need to run the script to update the 2D icons. Cool isn’t it?

I am working alone, and don’t have a UI artist or a concept artist to work with to handle the 2D elements, so I have to think of ways I can reduce my workload in those areas and work smart.

Game Flow

To make a plan of what kind of buildings I want to design, I sketched out a pretty looking game flow.

One of the issues I struggle with is how to blend RTS and RPG together.

In an RTS, the camera is of a third person view and usually very far away, to give players an overview of their base, and the ability to freely move the camera and click on any object on screen.

Zoomed out RTS view

But in an RPG, the camera is usually up close to give you a more intimate feeling.

Closer camera that follows a character – typical in RPGs

While the game now has a player character to control and follow, this was not the initial plan. Initially, I wanted this to be more of an RTS. You don’t take control of a character – you’re more like god building up a town.

But one of the conscious choices I made early on in the development, after consulting with a friend, is to give the player a a playable character that they control. Rather than using the arrow keys to move the camera, the arrows keys will move an avatar, and this player character is how they interact with the world.

It is a dramatic change.

But I think it is better this way as it adds a level of immersion into the world. You’re not just a god manipulating the world, you’re an actual person living in it, and you now make choices through this character, that will influence the world and people around you. I think that with a character, the game will flow much better, and you as a player can immerse yourself into the world of Stranded.

Not to mention, if the game has a story, it would be better experienced by a character.

Lastly, I am going for a game with very relaxing vibes. Here is a slide I wrote in my deck about my vision for this game. I think if the game were to have activities to engage in, or even quests to talk to people, which is a very RPG thing, then having a player character is beneficial.

Speaking of which, I wrote a story draft.


You don’t have to read the above, as it is just a wall of story text that is likely going to change during development.

I think it is an important moment when the player meets their first outsider. I name him Alf, and he will be the person to kickstart the story and be the Call to Adventure. The story will slowly unravel as he meets and ‘recruits’ more people to come aboard the settlement.

Currently, you are able to build a pier in the game.


When you build it, the game will show a short 3 second cutscene, and the camera’s aspect ratio changes to a cinematic one. The cutscene is only triggered by the player’s action. It is made seamless and flows naturally in the world to not take away too much control from the player or disrupt them.

Boat appears

I believe this is an improvement to storytelling from my previous games. All cutscenes should ideally be a result of player’s actions, and will trigger an event to happen. It should also be clear what is going on. In the above case, a boat with a survivor appears.

It should also not have distracting elements. Thus I hide the UI in cinematic mode and the black bars coming in is an indication to the player that ‘hey! this is a cutscene, you don’t have to click anything, just watch what happens’.

You can then go closer to Alf and click on him to talk to him. You are then presented with a Dialog.

I scripted a dialog system similar to the one I wrote for Enchanted Heroes. It allows me to create multiple player choices, which will be very interesting down the line, and allow different choices made to have different consequences in the world. My dialog script is also dynamic enough to do some really cool story events.

I personally love having mystery in the game, and I love science-fiction, so thinking of those elements made me really excited to develop the world and story.

One improvement I made over Enchanted Heroes is using TextMeshPro for my project, which unlocks better ways to display my text and include sprites within dialogs as well to better make fancier text and provide clarity. This being a resource management game, saying 20 Wood is rather long, but saying 20 <icon of wood> is a much faster way to read the information.

The sentence at the top is not only shorter but you can clearly read the resources you require by opening your inventory as the inventory displays all your item icons.

That’s it for now!

Project Stranded Begins – Part 1 (Concept)

Something exciting is happening. I am very excited to present a new game I will be working on!

Six weeks ago, on March 13 2021, I have officially started on a new game project, called Stranded. Below, you will see a demo video of the prototype I made in 3 days to showcase the concept.

Stranded Game Demo (Prototype made in 3 Days from 130321 to 150321).

In this post, I want to talk about what this game will be about, and how I arrived at its concept. As well as share my inspiration.

What is Stranded?

It is a strategy survival game I will be working on during my leisure time.

I love serene peaceful vibes and the idea of being stuck on an island in the middle of nowhere has come up a lot in my 3D art and drawings.

A drawing I did years ago of a turtle looking into the ocean.
My first ever 3D environment, made back in 2017 when I first started doing 3D after releasing Enchanted Heroes.
Another 3D environment I made.
And yet another another 3D environment I made.
And another even bigger and more detailed environment.
And here’s one where I made a magic wolf walking on water. You get the idea. Water & island and island on water. This one is even titled ‘Serenity’.

However, I never thought about making a game around this theme. Until one night at 3am, my sleep deprived brain got a little crazy, and I wrote this.

I had a simple composition of a stack of houses, with people on what appears to be a floating pier, and had a strange idea to make this into an actual game.

It was a rapid prototype – the people are just a sphere and capsule and they jump around with no animation.

However, I added music, a calm relaxing ambience and that immediately set the mood. Instantly, I imagined myself not reveling at a loud party but relaxing by myself on a floating pier in the ocean. At 3am, I was all by myself and my feelings peaked. Off topic, I feel like this would be a game that attracts Introverts lol. Just kidding though.

The above 3D environment was made years ago, in 2018, as part of Project Grey, a side project serving as a test to create procedural houses. It was honestly just a fun thing that never really took shape as I was never serious about it. That and even when I got the idea in July 2020, making a game is a lot of hard work and investment and I didn’t want to start a new idea unless I was really sure I could execute it.

I didn’t know it back then, but this composition would eventually form the baseline and inspiration for Stranded.

Fast forward to 2021, I have developed Unlikely Heroes, my prettiest looking 3D game, where I was the Technical Artist and Programmer.

Screenshot of Unlikely Heroes

Alongside other 3D projects, I believe I now have the abilities to take on such a challenge, and handle both the art production and programming as a fallback as I do not expect to be able to easily find collaborators early on.

In February 2021 I wrote a game deck listing 3 ideas I was really interested in to take further.

  1. Enchanted Heroes 2, a 2D Idle RPG
  2. Stranded (this one)
  3. A science-fiction Tower Defense.

I shared the ideas with friends of various groups (gamers and non-gamers) and at the end, there was an overwhelming number of votes for one of these three ideas, and the one that got voted most was Stranded. I was surprised, as I spent equal amount of effort pitching the ideas and almost everybody I talked to lit up when I explained Stranded’s concept, and proceeded to talk about it as though the other ideas did not exist. It was amazing.

It is not all the time you get a clear winner or decision to make, but on that day, I decided what game I was going to build.

At the core, I wanted to build a resource management and simulation game, as I love Tower Defense and Strategy.

This idea isn’t solely about being alone and stuck in nowhere, but the core inspiration was a vibe of peace and calm. Not exactly things you think of when you play a real-time strategy isn’t it?

That’s why I am not trying to make this game be solely that. I want to try to inject some RPG mechanics. My core inspiration for that will be Stardew Valley. And that’s when I thought that this game could be a twist, a blend between RPG and RTS. I don’t know if the idea will work, but I believe it is worth a shot.

Stardew Valley on Steam
Image from Stardew Valley Steam Page

When I first played it, its intro hit me in the feels. It follows a story of a person who chooses to leave his mundane office job to do something different with his life. Quite an outlier and I kinda relate to that. It hooked me in immediately.

However, I never got through the game. It is too sandbox-y for my taste, and I got lost at what to do that I didn’t have much motivation to play again. I think the biggest issue in the sandbox genre is the lack of goals. Most goals are made by the player rather than the game giving you specified objectives, but not everybody would give themselves goals to do in the game. And personally I happen to be one such player, haha.

That is why for Stranded, I want to have a main ‘questline’ that will guide the players. It is optional, but for players who need goals, this should give players some guidance on what the next thing to work for is.

Thus, what I imagine for this game is Stardew Valley meets resource management, in a survival setting.

Early concept art

You have to attract people and feed them, keep them happy and working

You research technology to improve Quality of Life, such a automation or electricity.

The game will have you start as nothing in the middle of an ocean and the end goal is a sprawling city. 

For archiving of my thought process, I wrote the pros and cons of this idea at the start of the project to remind myself how I arrived at this decision.

Why I want to make this:​

– A really fun and cool idea, friends seem to like its premise​

– The idea of reaching different “milestones” of progression can add interesting depth and twists to the game​

– Had a lot of fun with resource management games, so I can see its appeal​

– I really love Planetbase and this could be some form of it​

– The sense of isolation can create interesting narrative and visuals​​

Why it may be a bad idea:​

– I have not played similar games very much​

– I am not as experienced in building base building games (from a game design perspective), compared to the other ideas here​

– Could still try to be more unique from existing games (look at Airborne Kingdom, Flotsam and Raft Survival)

Yes. The truth is I have not played or built a game similar to this, so it is risky from a game design perspective. I do however really like how much potential this idea has after discussing with friends.

I don’t have any more pictures to share so I will end this post before it gets too wordy and I ramble on. I promise that future posts will have less words and more images and videos.

The next post will be about how I start building the base game.

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:

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:

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!