Key and Note graphics

Archived development update discussion from past versions
Archived development updates.
Nicholas
Posts: 13135

Post by Nicholas »

The key and note graphics are now the oldest art in Synthesia. They were never built to be so zoomed in, so they look awful on the iPad. It's time for a revamp.

This is an early mockup for the keys. This still has a long way to go before it will be a "real" screenshot, and some things will be infeasible to do in the time I've got. For example, the white key reflection on the black keys won't actually match the blue/green/etc. colors like it does in this mockup. Also, the wood above and below probably won't be as pronounced (or there at all) in the final result.

Still, this is sort of what I've got in mind. I'll post more mockups of the "active" black keys, notes, and revamped particle effect as I work on them.

I took a realistic approach to get this far: measuring all of my test keyboards with a tiny steel ruler down to half-millimeters and then modeling the result in 3D. It's different than the more iconic approach other apps take (e.g., GarageBand's extra-rounded corners on the white keys). I'm curious to hear what you think.
Spoiler:
Image
(You might have to make your browser wider to see the green keys.)
User avatar
jimhenry
Posts: 1899

Post by jimhenry »

The new key graphics are an exciting development! Knowing a thing or three about realistic keyboard graphics there are few subtle details that I would suggest:
The space between the keys should be reduced 2-3 px. The outside corners should be rounded. The keys should be ivory rather than white. The red felt at the back of the keys should be shown. See the low C to E.
Spoiler:
keyboard.png
keyboard.png (302 KiB) Viewed 22860 times
Jim Henry
Author of the Miditzer, a free virtual theatre pipe organ
http://www.Miditzer.org/
Nicholas
Posts: 13135

Post by Nicholas »

Those are all nice suggestions. I should be able to incorporate all of that.

I just checked against my P70 and you're right: the spacing is a little closer than I'm showing there; I had measured that from a lower-end keyboard initially. Though I'm a little sad I don't have an actual piano to do this kind of research on. I looked at a ton of reference on the Internet, but that isn't really the same thing.

My original mockup was supposed to be more off-white, but the lighting in my 3D workspace is still a little wonky. The ivory you mocked up looks really nice though, so I'm going to shoot for that.
kiwi
Synthesia Donor
Posts: 1180

Post by kiwi »

Really good suggestions rounded white keys i love.
i love colours reflextions on the black keys too :p
User avatar
jimhenry
Posts: 1899

Post by jimhenry »

Here's a nice image of a piano keyboard for reference:
Spoiler:
Image
I like the reflection of the keys on the fallboard (hint hint).
Jim Henry
Author of the Miditzer, a free virtual theatre pipe organ
http://www.Miditzer.org/
Lemo
Posts: 313

Post by Lemo »

nice work guys
Stuff & experiments for Synthesia: Gramp v0.2SkinboxFireSynthVideoWebradio
QuantumPiano
Posts: 2

Post by QuantumPiano »

jimhenry wrote:Here's a nice image of a piano keyboard for reference:
Spoiler:
Image
I like the reflection of the keys on the fallboard (hint hint).
This. The reflection of the keys faded to the top of the display would be awesome!
Nicholas
Posts: 13135

Post by Nicholas »

I was having some trouble turning the 3D model into useful game assets that were ready to handle variable color and size drawing. So before I burnt much more time going down that path, I decided to back-pedal a little and try using the same set of measurements in 2D instead. It loses a little of that realistic quality, but I think it reads a little cleaner this way. It's also nearly ready to go directly into the game in this form, too!

Still a work-in-progress and I haven't done the depressed-key version for white or black yet, but I was hoping to get your impressions before I went too much further:
Spoiler:
Image
That's all vector, too, so it can scale as large or small as I need it in the future. :D
TonE
Synthesia Donor
Posts: 1180

Post by TonE »

Wowi mowi, I love it, thanks Nicholas and friends, it looks really great. Maybe tiny thicker red felt? What do others think? But great looking with all those details!
User avatar
jimhenry
Posts: 1899

Post by jimhenry »

Two thumbs and a bunch of other digits up! :D
Jim Henry
Author of the Miditzer, a free virtual theatre pipe organ
http://www.Miditzer.org/
Nicholas
Posts: 13135

Post by Nicholas »

Hmm, looking at a real keyboard, the black keys don't actually look very different when they're held down. Add to that how awkward it is to change their color from black and it's hard to get a good result.

At any rate, I'm pretty happy with this. The shadows add some nice visual cues (and detail) and shouldn't be hard to integrate too.

Image

Now it's time for falling notes and sparks!
Nicholas
Posts: 13135

Post by Nicholas »

After playing around with 60 or 70 ideas last night, I think I'm just going to "remaster" the current note and spark* graphics for higher resolution. I still have the old (also vector) files from 2007.

While I didn't like the "classic" key graphics that much (despite being a huge improvement over the precursor before that), I've always been fond of the notes. Playing around in Photoshop for four hours didn't yield anything immediately better so I'll stick with what works. This way there's at least something still familiar in 8.4 when otherwise every single thing has changed.

* The behavior of the sparks will change so the entire screen isn't filled with white flashing whenever you're zoomed in all the way. Instead of scaling with key width, they'll just form a little row of limited-size sparks. We'll see how that looks.
sirknight
Posts: 75

Post by sirknight »

I only have a slight complaint about the sparks. I recently turned them off because I felt they were obstructing my view of the timing of hitting the notes in certain conditions, mainly when things started getting busy with holding the sustain pedal for scales/arpeggios, with so many effects stacked and the sparks being so opaque, my timing was thrown off. After I turned them off completely I found I was able to find a better rhythm while playing.

Maybe it would be nice to get a transparency slider so we can adjust the opacity of the effects. I like seeing the positive feedback from the glowy bits so I would like them on.
martin
Posts: 45

Post by martin »

Hi!
I can understand that playing faster songs!
I have on the other hand have a different experience teaching children slower songs. Intense sparks helps them get the rhythm right!
Being able to adjust the opacity might be a good idea....
Cheers Martin
Nicholas
Posts: 13135

Post by Nicholas »



I am pretty happy with the new art. On a retina iPad it's kind of ridiculous how nice those keys look. Be sure to bump the video quality as high as the little gear icon will allow.

Just one more task before beta 3: I think I have a lead on the super rare crash bug. Shouldn't take more than a day or so to suss it out.

Regarding particle opacity, I toned it down a tiny bit when things are fully zoomed-out, and you'll notice in the video the effect is much smaller relative to the notes whenever you're zoomed in at all. Is that enough to help the problem? I try to resist adding too many knobs on the settings screen, to keep things from getting cluttered or overwhelming there.
User avatar
jimhenry
Posts: 1899

Post by jimhenry »

Is the key range shift shown at the beginning of the video automatic or manual?

P.S. Hope we'll have the new beta before Wednesday. I'll be traveling and it will be a good chance to test the playability of the on-screen keys.
Jim Henry
Author of the Miditzer, a free virtual theatre pipe organ
http://www.Miditzer.org/
User avatar
stephenhazel
Posts: 223

Post by stephenhazel »

Wow !! Those are incredible lookin' keys right there.
xaviescu
Posts: 5

Post by xaviescu »

Nicholas wrote:
I am pretty happy with the new art. On a retina iPad it's kind of ridiculous how nice those keys look. Be sure to bump the video quality as high as the little gear icon will allow.
They look superb! Congrats!
Nicholas
Posts: 13135

Post by Nicholas »

jimhenry wrote:Is the key range shift shown at the beginning of the video automatic or manual?
Right at the start it was the flat, manual "18 keys" zoom. You can see me drag over to the right to see more of the song. The 18, 25, and "My Keyboard" zooms are the only fixed settings that aren't smart about maximizing how many notes are shown.

The default zoom the first time you open the iPad version is My Notes. And on the desktop it's Song Only.

Also new in this build: "My Keyboard" isn't shown unless you actually have a keyboard connected and have set up its range. It seemed like extra noise now that there are so many other choices in the list (that behaved exactly like "All 88" most of the time), especially when the majority of iPad users will be using the touchscreen keyboard on the go.
jimhenry wrote:Hope we'll have the new beta before Wednesday.
I'm shooting for late tonight / Tuesday morning.
Locked