Implementing the animation editor

The animation editor is a pretty complicated UI element that will let us make keyframe animations in Overgrowth. I covered the evolution of its UI design in an earlier blog post and now I'd like to talk about what happens next.

Click for full version

The first step to creating the UI is cutting up the finalized Photoshop document into its core elements, for example, the various buttons (and depressed states). Once I have all the graphical assets in a neat folder, I can rapidly stitch it together using HTML5.

Next, comes the harder part, which is making everything actually do stuff, instead of just looking pretty. For example, when you click the "add keyframe" button, a keyframe diamond needs to appear in the correct place on the timeline, and you need to be able to drag it around. The animation editor may look pretty simple, but there is a lot more to it than meets the eye.

Furthermore, in addition to the diamond being added to the UI, the game engine needs to be aware that a new keyframe has been added to the current animation. This requires a solid API, which provides standardized functions for the UI and engine to communicate with. For example, I need to call a function that David and I agree upon when that the seek marker has been dragged around and David needs to tell me when the engine wants to add a keyframe.

Typically, in order to save David's time, I like to make my own prototype that I can use to rapidly test the UI and its API. In this case, I made a little black square that can move around the window. It's pretty much the most basic thing you can animate.

With this test environment I can figure out what functions are actually needed in order to implement the keyframe editor and pass it off to David. For the sake of example, here's all of the functions that you need to implement my animation editor UI, in its current state:

// Animation API, UI -> engine
Client.speedChanged = function(speed) {};
Client.addedKeyframe = function(uid,ms) {};
Client.removedKeyframe = function(uid) {};
Client.movedKeyframe = function(uid,ms) {};
Client.play = function() {};
Client.pause = function() {};
Client.seek = function(ms) {};
Client.startChange = function(ms) {};
Client.endChange = function(ms) {};
Client.setSelect = function(uid) {};
Client.deselect = function() {};

// Animation API, engine -> UI
function addKeyframe(uid) {}
function seek(ms) {}
function pause() {}

Like the auto-updater, I've posted the source to my UI in the secret preorder forum. Please feel free to check it out and try out the animation UI and box prototype!