• Register
Post news RSS Devlog: Playing the Piano as a Puzzle

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.

Posted by on

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?

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.