• Register
Post news Report RSS Optimization Over a Family Dinner

I talk about how Unity Profiler tool helped me optimize the game. How aesthetics influence design decisions, including visual indicators as opposed to using an overly HUD.

Posted by on

Tail Lantern:
It's funny how you get so involved in development of new content that you totally forget about existing features. Case in point: Tail Grab! I completely forgot that the tail can carry objects. So by sheer accident I was carrying a new item into the dark passage and quite innocently grabbed the lantern while carrying the Jerry Can. Needless to say I was quite pleased by the shadow show that ensued:


Unfortunately... my feeling of being pleased with myself didn't last long as someone pointed out how come the cat body is casting a shadow on the background when the lantern is obviously being carried behind the cat? *humph*

Optimizations:
While fiddling around with a mobile build, I noticed a peculiar frame drop when the cat uses any stairs. I finally had an excuse to use a Unity3D tool I never used before, the Profiler. I was quite taken aback when I saw the huge overhead the stairs script causing:



This prompted me to take a closer look at what the Profiler could do. It allowed me to drill down to responsible objects, to guilty functions. It was a real eye opener! It was quite addictive hunting down all the weird anomalies happening in the background. It also helped me find unnecessary components. In just a day of refactoring I managed to shave off 5ms:



Further improvements in old code really helped smoothen the game further. The boost in frame rate testifies to that. The editor fps jumped from 60'ish to what you see in the picture!



Lights out:
A story segment of the game requires that the electricity be cut from the house. The most obvious tool accomplish that is found in every modern home, the circuit breaker panel. I had a candidate location for the breaker panel, but during development that location got more and more busy placing it there seemed like overkill. So instead, I looked for an alternative location and expanded it to accommodate enough space to place the circuit panel. The dimensions of the new room extension was used to derive the size of the asset I needed to create to represent the circuit breaker panel.



Don't be fooled by its nice shading. The panel and the cabling is just a flat white image. I duplicated it, blurred it, reduced its brightness to black, and placed it beneath it slightly offset. Then simply added a tiny air-brushing shadow beneath the panel box to make it look like it's extruded above the main cables. Very quick and easy and gives it a very convincing depth effect.

Now comes the fun part. The game actually starts out with the house section of the map quite dark. That's accomplished by putting all the objects I want dimmed into an array and looping through them with a new color assigned to them. I took that code and expanded a little on it. I added the ability to manipulate the color from the Unity Editor. Now from a gameplay standpoint, you can't have a pitch black environment. Instead you find an artistic way to convey darkens. That the reason I made real-time color picker, so that I could experiment a bit. I have to say I was really impressed by the tones I could create. Of course, they're not supposed to be usable in-game, but gosh it was fun to screw around and watch all the pretty colorz!



An unintended effect from the image above was that the car seemed to be lit inside. This was simply me forgetting to add one of the sprite layers of the car to the object array I use define the objects that are affected by the color change.

Now another problem presented itself. Since character lighting is achieved via light maps, I needed to create another set of "dark" light maps that I swap in when the lights go out. You can see in the image above the cat retains its same dark tone when the lights are on. This is problematic as in other parts of the house it's too dark, and with a dark cat it becomes too hard to see.

To solve this, I had to fall back on some aesthetics, artistic license. Which ever color I choose to dim the house to, I would have to use the complimentary color to light the cat. In the example below, I chose a dark purple tone for the house. What's the complimentary color of purple? Green. I created a second set of light maps that a green hue. As you can see in the image below:



Visual Indicators
Anyway, back to the spider's nest (which I will dedicate an entire post to soon). The Jerry Can I mentioned earlier in the post is used to carry fuel around. Now, items in the game are aesthetically characterized by a bright, de-saturated, soft glow look. The Jerry Can posed a unique problem. You see, it is supposed to be used multiple time on a single fill. So, how was the player to tell if the Jerry Can canister had fuel in it? I have a no "HUD" policy. So I couldn't add a percentage indicator of any kind on the screen. For that I had to break my "item look" art style. I added script that changes the color according to how much fuel it is carrying. So a full tank is dead red. Draining it slowly de-saturates its color until it turns white meaning it's empty.



Continuing visual cues, when facing the giant spider you're supposed to activate, and operate a multi-sectioned machine in a certain sequence. Now I don't want the player to fumble around this area too much. I want there to be a hint that wasn't too obvious to guide players to the next part. This being a puzzle game, and this section being under constant threat from the giant spider, and this area being visually very active and disorienting, I don't want to put off the players with an unnecessary difficulty spike. So I came up with two solutions:

  • I will introduce electrical cable connectors that light up towards the next part.
  • Machine operating panels with on/off blinking lights.



Family Dinner:
Still in development, the family dinner is a cheerful (sure...) breather during the story. I've got the animation almost locked down. I need to add some shading to the characters, and I need to somehow visually make this setting "special". Either manipulate the lights or add some occasional ornaments. The male character needs to be scaled down as he looks like a giant next to the standing maid.



This segment involves something to do with dressing fancy, hence everyone dressed up. So it involves a new mechanic dealing with wearable items, namely a hat. It has caused me a few headaches cause I use a subset of the item carrying (in the mouth) function for it. With a little pivot manipulation, the hat looks like it's resting on the cat's head and not being carried in its mouth. I added code that locks the head animation to a certain animation state because the cat's head has several "differently pivoted" poses according to its actions. This would throw off the hat alignment. So artificially locking the frames was needed... but now the problem of what if you carry the hat with the tail comes up? To which I have no answer right now. Cheers!

Post comment Comments
Guest
Guest - - 689,255 comments

This game looks so good, I can not wait til its out.

Reply Good karma Bad karma0 votes
tariqmukhttar Author
tariqmukhttar - - 10 comments

Thank you! Hopefully the wait isn't too long now.

Reply Good karma+1 vote
Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: