next »

[oahda]

I'm going to have to play around with something like that. I've already got glow maps, so I could expand on that, perhaps.

Thanks for the detailed explanation. c:

[WladM]

Thank you for the shoutout! This game has been one of my favorite projects to work on, writing music for it was a blast. Thank you everybody who took the time to listen!

[leblackdragon]

I've had this idea for sometime to force the player to play a piano as a puzzle. This is my attempt at making this a reality.

I made the room housing the puzzle awhile back. It featured a piano and a large moon as a background. The obvious choice of music to play was the Moonlight Sonata. Not only because it fit the setting, but also because it's quite an easy piece to get a grip with that features a constant loop:


To start with, a set of new animations would have to be made for the tail. Since the tail has a few fingers and is a separate sprite that would make my life just a "but" easier. Moonlight Sonata's right hand part is a repeat 3 notes. So the tail would have to show that 3 fingers are used for playing. Couple that with a "ready" animation to signal the player that the cat is on stand by on the piano. Here's the stand by ready animation, it's the fingers loosening up:


The start life out as a 3D object, that I export as sprite frames. It's much more easier and faster to animate the tail that way, and offers a far smoother animation. Here you can see the original 3D model as it uses in sequence the 3 separate fingers during playing. This is key frame animation by hand without references:


Once exported, the frames of each individual finger is a separate animation file. This why the transition between fingers can vary as the player is too slow or too fast playing the piano. Here's the first attempt at it in game:


So the concept is as follows: How well the player plays the Sonata compared to a professional recorded piece is the challenge. So it's a sort of mini rhythm game with only one button used. So how do I go about measuring the players performance? I started by downloading a MIDI file of the Moonlight Sonata, and isolated the part the player will play. It's the blue notes:



The MIDI editor provides you a timing unit for when the notes start, the Tick. Basically every 5 seconds contains 1065 ticks. Further more, the blue part uses only 11 notes. So I recorded each note individually. I created two arrays, one for the tick timings, the other for the corresponding notes:



When the piano sequence begins, the game will start counting ticks. Whenever you press the button, the game will compare the time you pressed action with the closest tick time of the original recording. Time your presses correctly and the notes will match up. Get lousy and you'll start to de-sync. Really be off key and you will activate a note that's either before or after the correct note. Simplez!


Back to aesthetics, let's just start by admitting the piano room is pig ugly! So a quick cursory image search of grand pianos to look for something more beautiful to copy... and what a difference that made! Side by side comparison of the old and new pianos:


Here's the revamped Piano sprite sheet. You can see its simple construction:


Story wise, the piano room is used to punish a little boy by locking him in and force him to practice the piano. The boy spending a lot of time alone playing started moving the mannequins, tailor dolls and positioning them around the piano to act like an audience. It looks especially creepy. You can't see it in the flat image, but they are placed all around the piano and into the background:


The piano room has two functions in the game story. It's a place to practice the piano, and a place to get locked in when you are naughty. So it has to be extra scary as a place of punishment. So an extremely dark theme was the way to go. Having a dark room contrasts really nice with the big bright moon outside. Being very dark but you can still make out near objects. So moving around the mannequins the first time is especially menacing. A carry-able lantern was added at the far end of the room to help the players see. Here I begin adding color tones to help distinguish objects from each other:


Impulsive perfectionist at it again. I wasn't satisfied with the static trees out side. I quickly copied over the animated trees from another area in the game and placed them outside the room. It's sheer blackness and creepy slow swaying in the wind really amps up the atmosphere!


Now the mechanism that triggers the piano challenge is an old vinyl record player. The room being very dark, I thought an on/off light on the record player would deliver a nice serving of atmosphere to the room. Spooky isn't it?



An unexpected redesign popped up. Initially, correctly playing the piano would unlock the door of the room since you were trapped in. I changed it when I design the small table the record player is resting now. Now the room remains unlock. The small table has a sliding door. What I did instead was, the sliding doors are closed. As you play it begins to slowly open. The better you play, the faster it slides. Cut your playing session to make a mad dash to grab the key inside and the door would quickly shut closed with a satisfying record swiping sound.


And here's the final product compared to the old:


Pretty satisfying improvement. Isn't it?

[oahda]

Nice idea! When I wasn't working on Vatnsmyrkr alone, something similar was actually suggested by my colleague (playing a piano to open a door), but obviously with a big submarine and underwater that gets... weird. So I dismissed it. I think they were inspired by the organ in Mad Monster Mansion of Banjo & Kazooie. Which I happened to be playing recently, actually.

You definitely went into a lot more detail than Rare did, tho! Nice stuff. And nice trees. And nice lantern. Et cetera ad infinitum ad nauseamque.

The closest I've done is in a Flappy Bird clone I made for fun where some stuff was synchronised with the cymbals in the background music (made this with the same person as mentioned above; their idea) and I had to hardcode all the positions in the song and check a timer against them.

[leblackdragon]

Nice idea! When I wasn't working on Vatnsmyrkr alone, something similar was actually suggested by my colleague (playing a piano to open a door), but obviously with a big submarine and underwater that gets... weird. So I dismissed it. I think they were inspired by the organ in Mad Monster Mansion of Banjo & Kazooie. Which I happened to be playing recently, actually.

I kind of imagined your sub playing the puzzle with some light panel just like the one at the end of "close encounters of the third kind" with ominous lights and deep bass sounds being emitted. I imagine it would fit well the the feeling I'm getting from your game's screen shots. But the actually "piano" apparatus I don't know. Perhaps since you're exploring beneath the waves you can have some ancient civilization setting invention that's more fitting of your submarine?

[oahda]

Oh, I personally don't see how it makes sense that a submarine would play a piano in any fashion at all, so it's not something I want to work with (it was never my suggestion in the first place). Just mentioned it by the by.

[leblackdragon]

Advancing towards the latter parts of the game, its time to develop of postponed NPC's. First up are the trio "The Failed Cats". They are our protagonists friends before fate had them split. While they are treated in-game as a single NPC character, the work involved to create their dialogue avatar is equal to three characters.

Here's the initial modeling of their avatar based of concept character art. Vertices and edges are distributed and located to allow for elements to animate: eyes, ears, necks, and tails.



Later I split the 3D model into 3 separate elements so that they can layer and animate independandtly without effect each other. Because the concept art was done as a group shot, it too had to be split into separate images. The previously overlapping parts had to be drawn again.


In addition to developing the dialogue avatar, their in-game sprite had to be created to reflect their likeness. The cage isn't finished here and will be replaced with a modern looking inclosure. The animation of the sprite basically mirrors their avatar.



And here's our furry friends animated. Not too happy with it, but it was more work that had to be spread thinly. I couldn't have gotten this result had they not been separated.




In general improvement tasks, a car sprite located at the very start of the game received a much needed resolution boost. Bask in its high definition glory!



Then the underground passage area of the game, which has always felt very flat no matter how animated it is, got some more love. Rock columns were added in, and out of the scene adding much needed depth with some nice parallax scrolling. The rock columns dealt with and provided a visual solution to "floating platforms", a hallmark of 2D platform games. It also added an opportunity for some visual tarting-up! The rock columns are black until approached with a lantern, then it lights up ever so lightly to reveal its beautiful rock formations. This offers a glimpse or tease into the inner workings of the game world and a "supposed" story behind them. A little touch of realism does that, also adds a lot to the ambiance.



And finally, one last trick to make the area pop out: Surface illumination, which is a fancy term for high lighting the edges of platforms. This is actually a dreadfully simple visual trick done by layering the same level sprite twice, one slightly further away from the camera and set with a diffuse material to react to a light source. Because of the perspective camera used the lit up surface will always be slightly "closer" to the player due to the depth change, and being overlapped by a black clone of it you will only see the lit up edges. It's cheap, but it works!

[oahda]

Ooh, I was wondering how you did the lit edges when I saw it on Twitter. I want a similar effect in my game, so I'm getting some ideas, even tho I can probably just do it with the normal maps I already have.

Poor kitties. I hope I get to rescue them!

[Jalapenosbud]

And finally, one last trick to make the area pop out: Surface illumination, which is a fancy term for high lighting the edges of platforms. This is actually a dreadfully simple visual trick done by layering the same level sprite twice, one slightly further away from the camera and set with a diffuse material to react to a light source. Because of the perspective camera used the lit up surface will always be slightly "closer" to the player due to the depth change, and being overlapped by a black clone of it you will only see the lit up edges. It's cheap, but it works!

i need to try this :D

[leblackdragon]

i need to try this :D

Yeah! It's a pretty neat effect!
Here it is in another area. You can see it on the edges of the mannequin.

[leblackdragon]

Been playing around with 2D shadows again. Came across a method involving rendering to texture. Basically this is what I've done:

• Create a secondary camera that sees only objects you want to cast fake shadows.
• Create a "Render Texture".
• In the new camera specify that it renders to the new "Render Texture.
• I create a plane placed behind my game character.
• I applied the "Render Texture" as a material to the plane.
• Set the plane's material to transparent.
• Do some transform adjustment to make the shadow "fit".

And the result:



Now this is good for a stationary shadow that's always behind a character, but I want more! I want the shadow to angle it self according to where the light is coming. So I wrote a little script that calculates where the light source is from the object casting the shadow, and mirrors the results and applies it to the shadow plane object. So that the plane is always in the opposite distance and angle from where the light source is from our character.

To add to the realism, I added a modifier to the plane shadow scale transform. The further the light source is from the character, the more stretched the shadow plane is. Very basic scripting, nothing fancy!
So here's a test with the light being stationary.



Notice only the cat is casting a fake shadow. I tried adding the area platforms and vegetation, but it became too cluttered and was best removed. I will only use this effect for certain areas in the game for added ambiance and realism. No need to use it every where. The way the shadow plays adds nice drama.

In other news, there's a very boring dinner party taking place... that I will talk about later.

[leblackdragon]

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!

[UnfoldGames]

It's always a joy to read your logs! Can you please explain what elements of the code caused FPS drop?

Many thanks to you!

[leblackdragon]

It's always a joy to read your logs! Can you please explain what elements of the code caused FPS drop?

Many thanks to you!

Quite a few things caused any unnecessary overhead:

• Using Gameobject.find in Update function.
• Certain If statements in Update function.
• Animator component for objects off screen.
• Unnecessary checks when object not even close.

That's what I can recall off the top of my head.

[UnfoldGames]

Using Gameobject.find in Update function.

I'm guilty of that. Thanks!

[oahda]

Ooh, an update.

And meh, the shadow from the cat looks cool. And surely one can imagine the tail being slightly offset and stuff, causing a shadow anyway.

Regarding proportions, I wonder if it isn't better just to make the maid bigger. I don't think it's just the one character that looks large compared to her, but also the table and the cat and all of them, really.

[leblackdragon]

Regarding proportions, I wonder if it isn't better just to make the maid bigger. I don't think it's just the one character that looks large compared to her, but also the table and the cat and all of them, really.

Yeah! The character scales are way off. It's caused by two problems:

• The dinning table is larger than life so it evenly divides the space into a 2nd and 3rd platform.
• All the characters have short midget legs which are impossible to seat on the dinning chairs.

I can't make the maid bigger cause she's to scale with the ceiling height. So if I enlarge her then the mom standing sprite will be short then! lol

I think I'll shrink the dinning chairs and make them taller. The character legs won't reach the floor then! lol

[leblackdragon]

With great pleasure I would love to announce to you that A Cat's Manor is now live on Steam Green Light.

Please help us get this game green lit. Please help us make this game a reality.

Steam Green Light: Steamcommunity.com

Facebook: Facebook A Cat's Manor

Twitter: hd_corner

[leblackdragon]

Thanks to the gamers communities continuous support and enthusiasm, A Cat's Manor managed to break into the top 100 Steam Green Light games in less than 3 days! That's quite an achievement considering we did not advertise nor promoted our game!



Perhaps the most captivating part of our presentation was the game's trailer. A labor of months to get the tone right, the trailer takes the form of a short captivating story to draw in the viewers. It depends heavily on the amazing voice acting of Mary Elizabeth Kennedy, and music specifically composed for it by Hollywood film composer Wlad Marhulets to create a creepy atmosphere. But don't take my word for it, watch for yourself:





The trailer was composed of video captures straight from the Unity3d Engine preview panes, and was put together and edited inside Movie Studio 13 Platinum. The initial target length was a minute and half. However, the amount of captured footage I wanted to put in it reached 5 minutes!!! It was trimmed down to 2 minutes, which even I consider too long for the trailer. It worked out quite nicely in the end.



We're still not done yet! The game  is slowly climbing up the top ranked 100 and is near to breaking in the top 50 green light games! As always, your support is needed. Please do pass by and cast us your vote. Thank you!

[Cranktrain]

Really enjoyed seeing all the lovely shadow/lighting effects. The trailer is really good too, some excellent voice acting there!