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.

Very nice and detailed log! I am impressed. Lots of useful info, and I love the concept. It resembles something I'm working on too. Definitely watching you.

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.

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!

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?

I think it's brilliant you are writing in such detail the process and coding involved. It de-mystifies things a lot for us who have very little know knowledge of GPU's and shaders. It's really satisfying watching you game develop. It's come a really long way since I've first seen it, and I just love how you explain your little tricks here, and in your the PUSE cat game.

Do continue!

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?

[hand painted]

I didn't realise you were this big time, with booths and professional musicians and voice actors and stuff!

... ok... I laughed at "big time". hehe

Had no idea your lighting worked this way, with all these maps. Especially the colour map for the light is a cool concept.

I had to turn to custom light maps because of the limitations of mobile platforms, and because I was using flat sprites. I actually use 2 light maps, and both of them are hand painted:

1- This one I use to read from it the color of the position you are in. Very straight forward stuff. If the room is green because of the color of the walls or because there's a strong green lamp in it, I will color the light map of the correspond pixels green. Transitions between rooms I smudge:



2- The second light map is actually more interesting than it looks. It's actually 3 layered maps in one. Each color channel (Red, Green, Blue) is read separately. I hand paint each color layer separately. Here's the break down of what each does:
Red Channel: This controls how high or low the light is to the center of a character.
Green Channel: This controls to which side the light is to the center of the character.
Blue Channel: This controls how strong is the light shining on the character.



So to explain, in very red areas it looks like the light source is above the player. In areas where the green color is very weak it looks like the light source is towards the left. Very blue areas mean the light shines very strong. Couple that with the color map from the first light map and you can make some pretty interesting light effects without the need to populate the game map with dozens of light. It's very effective and highly customizable!

One more important thing to note: I actually have two unused channels that I am keeping just in case a need arises. Color is (R,G,B,A). So I still have left the Alpha channel of both map images. But as of writing, I have no use for them.

I began upgrading one of the older rooms, the morgue/lab. I usually start out with a block model to get a feel of the space, where the elements will go, and the sense of depth to the room by Z offset and color values. No details or textures whatsoever:


Here you can see just how deep the room is and how the elements layer. The game art style or aesthetics dictates that the further the object is in the scene the brighter it gets. Objects at the cat's level and closer and black:


Since this is supposed to be a place where corpses are stored, handled, and animated, I added to the side storing refrigerators, and on the other side a re-animation vat:


Added some textures to it, and increased the contrast by making elements darker, and strengthening lights. Added some washed out colors. The vat is now transparent with its own set of layers to look like it is containing some liquid. Added some soft shadow in the wall inlet shelves:


I opened the door to one of the storing fridges. It's door now is direct out of the screen for added 3D effect. So any how, you can see here two layers of the light maps. The hue map gives the room a gray sheen as characters move about it, with the exception of the area around the chemical liquid vat. It has a soft green glow. The wall shelves has a slight brown tint. The colors gets bright and less saturated as the light in the area gets stronger. Like just under the neon fixtures. The blue layer below controls the intensity of the light cast on the characters.


Here you can see the soft brown color on the cat. As well as the open fridge depth to the side:


And here's the final product compared to the original version. The room is much bigger, brighter, with more interesting elements to create functional events around it, or places to hide things in:

The giant web that covers the room, I want it to be dynamic. I want it to interact with the player. Not for gameplay reasons, but just to look cool. That's why I created it as a mesh. It being a spider web, I wanted it to stick on the player as he moved. So that it appears like he's tugging on it.

The first step was to detect which vertices are closest to the player. The distance of influence was chosen as to allow the screen to contain undisturbed web and tugging on threads. So the first tests were to see how well an vertices detecting algorithm worked:


Next step was to pull vertices effected towards the players. This is an early successful test. It has since changed to accommodate horizontal and vertical tensions, with two point of influence on the cat. One in front of it to simulate it pushing into the web, and another behind it to make it look as if its brushing its body along it:


I later added some small movement to simulate a wind draft. Satisfied with the results, I moved on to try and recreate baby spiders walking along the web in a random manor. I needed to figure out a way for them to find a path to travel downwards.




I came up with a simple method to randomly decide what path to take:


It has been proving quite difficult, but it's finally semi-working. This test proves that an object can moved along the web threads. Although there are some strange jumps in there that I suspect has more to do with the vertices order:


Now let's see if I can get small critters to walk on the web at a convincing pace!

One of the pivotal locations in the game is the pump room. It basically is the key to opening half of the map. While it started out as a puzzle, I wanted to expand on it somehow. Enter the Giant Spider! The spider needed a location to act as its nest. Instead of creating a new room/location, it seemed like a natural choice for the spider to inhabit the pump room. It helps in several ways:

• It implies the importance of the pump room to the player.
• It serves to raise the tension as you solve the puzzle.
• It'll act as a boss encounter impeding progress.

But to accommodate a giant spider, the small pump room needed some serious upgrading. The room went through a couple of overhauls, each expanding the room further, and each losing more of its organic elements. Instead of a single pump, it is now three. Instead of a single floor, the room is now 4 floors high. Enough space to allow a giant spider to maneuver about. The dark bottom floor would act as space for a breather, safe from the dangers above. As well as a setup for when the player first enter the room. The player would not get a sense of what lies above.


Once I'm happy with the general lay out, it's time to fiddle with the room's depth. Or more accurately, the depth of its various elements. This room would be extra special since it would have elements further in and further out of the camera. I love exaggerated parallax elements and this large room presented great opportunity for just that!

Now this being a pivotal boss room, you'd want to play a little with the player's sense of insecurity and increase the tension. But not only that, you'd want the player to appreciate the sheer size and majesty of the cavern housing it. A few elements I play with here to give that feeling of majestic dread:

• The soft back light gives it a church like ambiance of reverence and awe.
• The size of those gears help make you feel insignificant.
• The slow moving gears and deep sound they make feel like you're in the belly of the beast.
• The giant web that slowly sways from a soft draft.

Since the giant web will not be a static object, but dynamic, and ever moving a sprite would not cut it. I constructed a mesh, and began to cut it's edges to follow the weaving of the web. That way, any deformations would more or less preserve the lines of tension and make it look that more convincing.


The bottom floor features a very dark corridor of layering pipes. Since the small area looked like a cage, and piping was set at various levels of depth, I really wanted to illuminate it only by a rotating red emergency light. This would create a beautiful play of light and shadows as the light source traversed the room. Problem is, the room is constructed of flat sprite elements. To achieve the effect of back light on those pipes, and give the illusion of cylindrical depth to them, I created to copies of the all piping. One slightly wider and reacted to light, the other dead black in front. So when the light passes through, only the edges of the slighter widened pipe illuminates as they are masked by the black one.


This created a problem. Our cat hero being quite black meant as the light moves between illuminating the foreground and background, the cat would match the brightness value of the background. It would go dark when the background walls go dark, and light when it lights up. There's no nice silhouette to contrast the cat out. I had to create another light that activated in opposite to that of the light illuminating the room, and that light would only effect the cat, while the main light would not. You can see from the picture how nicely contrasting our cat is.

Been long since I last updated?


And thus ends a season of events and conventions where A Cat's Manor has shown it. Starting last October, a playable demo of the game has been displayed at various shows, and entered in two international competitions. Where it won an award at one, and was a finalist at another. I'm extremely pleased to say that in all events, A Cat's Manner was continuously played, and managed to pull in the crowds and form queues, as well as grabbing the attention of industry notables.

A Cat's Manor succeeded in captivating, and engaging players for long play periods. Immersing them in it's creepy world. This is due, in no small way, to the awesome audio soundscape featured in the game. Thanks to the massively talented Wlad Marhulets who wrote multiple tracks in very short notice, of such high quality just in time for its public showing. Please indulge your ears with his wonderful compositions:
https://soundcloud.com/wladmarhulets/whats-behind-the-door
https://soundcloud.com/wladmarhulets/a-cats-manor-main-menu
https://soundcloud.com/wladmarhulets/a-cats-manor-mysteries-hiding-in-the-corner
https://soundcloud.com/wladmarhulets/a-cats-manor-a-giant-hairy-eight-legged-friend
https://soundcloud.com/wladmarhulets/a-cats-manor-beware-of-mommy
https://soundcloud.com/wladmarhulets/a-cats-manor-exploring-the-manor

Still firmly in the audio department, A Cat's Manor demo featured 10 characters that you could interact with. Lending their voices to project Kai Kennedy and his wonderful wife Mary Elizabeth Kennedy breath life into a varied assortment of eccentric characters. Humans to animals, adults to children.

The stellar combination music and voice greatly helped elevate A Cat's Manor profile and value at events, and provided ample atmosphere and engagement to those who played. I couldn't be happier with the result. Thank you Wlad, Kai, Mary Elizabeth!  

This looks truly amazing!
The aesthetics are spot on, and the sound design is gorgeous! (duh)
The lucid, floating through the air is done masterfully, and is the game-mechanic I'm most looking forward to seeing more of it. The way the bass kicks in as orientation shifts is awesome.

I don't want to crash the party but here are things I felt I need now from your game:
1- A clear motivation, and real sense of purpose. (looks who's talking!) So he's trapped in his dream. Why? Is he alone in there? Does he suffer from sort of mental disorder? What is waiting for him when he wakes up?
2- Some identity, or back story for the villains. It's like generic dangerous animals living in a forest vs. a methodical, thinking, entity with evil intentions.
3- The game looks like a deeply personal, and intimate experience. Some way to express emotions would help. I like the "paper theater" style, so expecting his face to move would break the art style, so more eye movement would be really nice.

But seriously, truly great work you have there! Good luck and keep it up. Genuinely interested in this!

I love the cat design and animations. Especially the tail hand is pure genius! :D

It would be cool if the cat could use it to grab things sometimes (slowly swinging lantern). In my eyes, the default tail idle animation speed is too fast. It would be more creepy slowed down.

Edit: Do you plan to animate the hairs on the head? It could be a cool tool to emphasize emotions.

Having the tail grab things presents its own set of issues. I really want it to do so. There's even an animation for it showing it lunge hands open and grabbing off the ground. It shares an issue with mouth carrying in that, do I remove controls from the user while I play an animation showing the cat grab an item, or I make it instant as not to break the controls. And if I go for having an animation play, what happens when an item needs to be grabbed out of the air in a jump?

Unfortunately I can't slow the tail any further without increasing its frame count. I played with various speeds and this seems to be a reasonable median. Although I'm thinking of increasing its speed at certain instances as a fussy tail means the cat is annoyed.

I'm adding frames to the head on a need to have bases. I left its sprite sheet with a lot of space so I can add to it. But the instance you've done in the picture I'd shift the animation to the monologue interface. There the cat's (when engaged in monologue with an NPC) large avatar is on screen and I can have more detailed animation on it. Currently I'm debating increasing the monologue array to a 2 dimensional array so that each line of monologue is coupled with an emotion. So I can use that later to derive avatar animation. But it all depends on time and priority really. I'd hire someone to do it if I had the cash! lol

Cheer mate!

Big update!

The biggest news is a composer has graciously joined the team, and not just any composer: The extremely talented and capable Wlad Marhulets (https://twitter.com/WladMarhulets). Seriously, check this guys portfolio on IMDB!!! 

He's already supplied a few amazing tracks, and has been a massive boost to the project. So currently an in-game music management script is being worked on to handle smooth transitions between tracks as location and events change.

Also big news, voice acting is full speed ahead. Voice acting will be provided by the talented Kai Kennedy (https://twitter.com/KillAllInstinct) of Skullgirls fame. And local voice talent Malik (https://twitter.com/Malik_Zubailah) and his team. So expect an explosion of voice personalities!

So as a major development in game, I've written a script that reads the voice files, and automatically controls the mouth animation of the characters concerned. Here's a sample on Vine:
https://vine.co/v/e0mgVuUq7eE
This freed me from what would've been a huge task animating each character mouth avatar by hand. The voice management script has been written and dynamically checks for appropriate voice files. Only thing left now is coming up with a solution that recognizes vowel sounds.

Recently, the game has been shown to the public in two of the biggest convention in the region, and the feedback has been nothing but positive. It has qualified for an indie game dev contest and will be featured in Dubai Game Expo in November. I'm working on new posters for the event. I'll be using an existing one as well.



In game development news, I've added the ability to combine objects now to further diversify puzzles and add an element of creative thinking:


The initial system called for getting two objects to touch for it to combine. This has proved rather wonky as it was very hard to predict where in the map will a player join them. This opened up all sorts of issues as it can be exploited to break the perimeter of the game world. As a control solution, a workbench has been introduced. It is the only place now that you will be able to join item. Simply drop them on top of it for the magic to happen. It also presented a sweet opportunity to create an animated, fold-able table that turned out really cool!


The house part has been receiving quite a lot of detailed touches lately to really flesh it out and give it more life. If you disturb certain areas of the map now you will startle the spiders hiding around it (spiders are pivotal to the story):


House hanging pot plants are now hinge connect to allow you to play around with them:


More elements are interactable now allowing for the creation of more puzzles... and punishment  :


Sound is getting a strong boost with more distinct soundscapes and sfx:


A two item inventory system is now introduced to help with item combining and generally reduce fetch time. No need to take two trips now:



Anyways, hope you enjoyed this update. More to come soon! 

I swear the chores of game development never end! lol
Got around to finally begin working on Dogboy's in-game sprite. Started by using the old placeholder as reference, refining it. Giving it more character and personality. Then identifying its movable parts, and then segmenting it as a sprite sheet.


Added some touch up shading, built the sprite hierarchy, and animated:


Ain't he cute?


In other parts Psycho Sis has gained the ability to blink and express more facial emotions. All of them varying degress of psycho! lol


Lastly a new section of the house has been added to the playable portion of the game. Featuring yet more locked doors, and more spiders! Currently planning on writing a script that mimics a horde of baby spiders when you disturb something.

Been revamping the code that controls movement on the Spiral stair case. I don't want to disengage the player controls into Forward <-> Backward scheme whilst stuck on an invisible spiral rail. I want the player to remain in full control while on it, which can get quite awkward in a 2D game. So now the player only needs to hold one direction until the edge and then reverse back to navigate upwards. When going down you need to hold diagonal down. I added a script that scales the cat as it moves in and out of the spiral, but it kept screwing up the spiral column layering so I abandoned it... for now.


Building upon the light map I have created for the game, I linked the vignette layer to it now. I use the vignette to slow fade to black the edges of the screen. Now edges of the blackness is dynamic. Creeping in in dark areas and expanding out in well lit areas. It's a nice, smooth, touch. Here hiding under the table reduces ranged visibility.


Since Dogboy is now active in the latest demo build, I had to start working on his avatar animation. The usual rough defining of elements with polygons.


Followed by refined divisions to mimic skin and clothes creases. That way when the vertices and moved around the stretches look natural.


Since Dogboy is basically comprised of two characters, it needed more animation morph targets to animate than usual. I've also decided with more realistic mouth animation. The usual avatar dialogue only has two mouth states, closed and open. But since introducing the maid, I added mouth states that represent vowels. For Dogboy boy it is "AAA", "EEE", and "OOO". Mix and match, they give a good palette of mouth movement.


Now imported into Unity3D, and Animator Controller is assigned for the Skinned Mesh:


And here's the final disappointing results! I should've added more polygons to isolate the paws from the pants. Lousy job...

Got around today to flushing out one of the latest characters to be added to the game, The Maid. I've had a placeholder image of her since ever, and today got to create her multi-part sprite. I used the placeholder image to roughly draw out her body parts.


Did some changes to her attire and added some color. Then took her apart so that Unity3D's automatic multi-sprite slicing would have an easy job.


Imported her into Unity and built the object hierarchy. Assigned her a local lighting script. She's ready to get animated.


There was a traditional Mexican band playing in the background so I couldn't help myself animate her enjoying the beat. lol! I'm gonna keep this as her idle animation.


And here's her first order of business, dusting the house.


And finally, to make the guest feel more at home I added a neon sign to the house entrance. It flickers on and off with a nice electrical humming sound.


Cheers!

I have to say this is looking really awesome. I like the lighting scheme and movement.

Such a cool aesthetic! I love the stark palette and high contrast.

There is a ton of attention to detail, here.

Thank you! Glad you like it.