http://blog.wolfire.com/2009/05/overgrowth-animation-editor-ui/
May 31st, 2009 by Jeff
The animation editor in Overgrowth is one of the last pieces of the puzzle that will let us transform the Phoenix Engine from cool tech into a sweet ninja rabbit fighting game. This (combined with the upcoming physics editor) will let us rig character models to a physics based skeleton and start creating all of the running animations, combat moves, etc.
When I’m making a UI, the first thing I do is make a quick functional prototype in WebKit. It’s not pretty, and you probably don’t really know what the following mess does, but it works!
Once I know what features I need according to my prototype, it’s time to start making it pretty and usable. My buddy Iiro Jäppinen is my go to guy for pretty Photoshop work, so I send him a rough sketch of what I’m thinking and he whips up a hot looking PSD. It seriously takes him a matter of minutes sometimes.
It should be pretty easy for people to add new keyframe based animations. Basically, the way it works is that you hit the diamond button to add a new keyframe. You can drag the keyframes around like you would expect, or you can hit the info button to attach a script to them if necessary. The scrubber on the bottom lets you scroll around or resize the viewing pane. The speed slider controls the playback speed. When you mouse over the start line, blue line, or end line, a grabber fades in, and you can drag those lines around.
The final step to making the UI is to cut up the Photoshop document into each component piece, and save out a ton of little images. Then I use these images to restyle my original WebKit prototype to be identical to the Photoshop mockup.
What would you guys like to see in an animator? If you’ve made keyframe animations before, what features did you find useful? If you’re new to animation, does this mockup make sense?