back to piano

Visual Design Breakdown (from original design/ pitch document)

Keys of Piano (range of keys for song)

Each song will use a different area of the keyboard that will change per song difficulty and current player level difficulty. To help guide the user it is important that we identify where those keys are.

Always Visible "C"

Middle C actually gets its name because of its location exactly in the middle between the treble and bass clefs in music notation. As an aspiring piano player, knowing where middle C is helps to get you oriented properly to the instrument. Because there is a disconnect with the physical keyboard the player is using and the digital one in game we should take this concept even further and subtly highlight where "C" is in all octaves in use for the song.

Upcoming Notes

As a note approaches the corresponding key its state will change to highlight where you should press which will also display the note name providing important information to the user

Success

When the user strikes the key/ upcoming note successfully, the key will light up and glow providing visual feedback to help show they are playing the song and notes correctly.

Missed Notes

When a user misses the note the key will be shaded a mutated version of upcoming note color to help show it was missed.

Onscreen Feedback and User Orientation

No matter where a user presses a key down on a physical keyboard, the on screen keyboard should animate the corresponding keys in all areas helping a player with orientation .

Notes on the Noteway - "What Finger Goes Where?!?"

Some applications use numbers to identify which finger to use for upcoming notes such as Synthesia, while others use assigned colors like Yousician. For ibex I believe that fingers will be best assigned with colors for a few reasons. Studies have shown colors are more easily memorized when paired with an action such as which finger to use and it will reduce the visual clutter (symbols such as numbers add more lines to an already busy screen).

There will need to be tunable accessibility options (color blindness... etc) built in from the ground up.

NOTE: To keep a visual consistency with Ibex an idea is to use a similar layout as the guitar uses in how the colors are assigned to the strings (this idea came up after concepting/ rendering was finished of ibex piano)

Notes on the Noteway - "Which Hand Do I Use?!?"

To stay in line with using color rather than symbol for finger assignment I chose to do the same with handedness. The center of the "notehead" will depict which hand to use, in this case I am using white and black to differentiate between the 2.

Notes Shapes

Natural notes (white keys) vs. flat or sharp notes (black keys) have a different volumetric shape to differentiate from one another.

Note "Highway"

Active and Inactive Areas

Just like in Rocksmith (guitar) there is an area of focus that the user's eye should be directed toward and this is very similar for the piano .

The keys that are not in use for the song are greyed out and the unused area of the note highway is faded out (this space could be used for VFX or other visuals as needed) to help draw the eyes to the the center of the screen which is the main focal point.

"C" Markers

As with the visible "C" indicator on the keyboard we will do the same for the note highway. The dots on the noteway that are in line with the C keys on the keyboard will help to orient the user as to where "everything is going". It is important that we look at how we can provide the most efficient and easily digestible attributes for the user as the mix of using an analog instrument with this type of digital interfacing can become overwhelming at times.

Lanes

As with the guitar version of Rocksmith, lanes are an important element of the noteway (note highway). For piano they will aid in helping the user understand where the notes are headed. White keys (natural notes) will move down the noteway between the lane lines, while black keys (sharp or flat notes) will traverse the noteway ON the "lane lines" helping the user to be more accurate.

As represented in the image to the left, placing the notes as shown reinforces the separation of White keys and Black keys, not only is there a difference in shape but there is a discernable difference in placement on the noteway as well

Timing

The pulsing line at the back of the keys (where there is typically a red piece of velvet in the real world) represents the tempo of the song and will act as a visual metronome helping the user to stay in time while not being overly distracting

Key Visual Breakdown (Sheet Music)

Similar to the tab feature in ibex (ibex tab is based on these piano concepts) the sheet music for the piano feature will help with attracting more traditional users who want a more musically authentic and classic experience. helping us to attract a wider range of players.

*The notation in the sheet music feature will correspond (colors and timing) to what is represented on the noteway, allowing for a unified experience for all users, accessibility and customization options will need consideration.

Upcoming Notes

The note displayed in the sheet music will be the designated color, in a steady state at it approaches the playfield.

Success

Once the player strikes the key successfully the note heads will glow as the move horizontally across the playfield and off screen

There are two distinct areas of the piano, first the noteway and then secondly the sheet music feature which will utilize many of the same features. Here I will be going over all elements that make up the noteway play space.

***It should be noted that the images below look polished however, they were my initial designs, I was able to utilize my skills in maya, photoshop, and after effects to quickly create images that helped sell the design while allowing myself enough room to iterate on as needed. I believe designing in this way (in this specific case) helped to build confidence in the stake holders showing that the team could execute an amazing experience with limited time and budget, which we did...

Missed Notes

When a Player misses the note the notehead will remain the designated "finger color" but will become muted as it moves across the playfield.

Incorrect Presses

This attribute should not only be used for incorrect notes struck during song play but also a way for the user to to know where they are positioned on the keyboard.

Camera Transition

The camera transition from noteway view to sheet music view is a little different than the Rocksmith tab view transition, this is intentional. The original idea that was used for tab view came from this concept and though there were some technical complication in that version, more investigation will be done to see if we can accomplish this more accurate iteration.

Measure Lines

These horizontal lines on the noteway represent the notes played in a measure of music and should correspond with the notation in "sheet music view".