Animation editor UI

[Jeff]

Hey guys, here is the animation editor prototype I made! The box at the top is animated with the UI on the bottom. Just drag the box around to create a new keyframe.

We are targeting WebKit and I used many WebKit-only features, so be sure to use the latest version of Chrome or Safari (or better yet, a WebKit nightly) to test it out!

http://www.wolfire.com/ui/animationeditor/editor.html

[Lord_of_Sausage]

Woaw! thats really awesome! Gotta make some dance-animations for Turner when it is ready ingame!

[Nimai]

This is awesome. johns beard's time is running out.. fast
nice work with the editor!

[dethfalcin]

AWESOME, THATS ALL I CAN SAY.
seriously prototype?
man that s*** is smooth
it works nice
and is easy to use
you don't know how much i appreciate your guys' effort
its soooooooo cool that you guys have this whole SPF set up for us, its fun and we get kept up to date with all the prototypes.
Thanks,
dethfalcin

[Zhukov]

Cute.

[tomascokis]

You guys need to allow option+click to copy diamonds, when you think about animations in the actual game this will actually be quite an important feature

[Skofo]

Whoa, nice!

Makes me wonder of the feasibility of making a web-based Flash replacement with SVGs controllable like this...

[Healey]

i wanna eat that editor up... nom nom nom

[Endoperez]

It's currently difficult to select timeline-objects that are near each other. You can try this out by creating two keyframes near each other, and leaving the time marker over them for good measure. You won't be able to easily select any specific one. '

Newly created keyframes aren't selected by default. I'm not sure if they should be. It should, however, be possible to select the new keyframe by clicking it, but ATM you have to click near it's edge instead of near its center, because the time marker is in the center. More spesifically, the symbol to MOVE the time marker appears in the center. Moving the symbol would fix this, see attachment.

It's possible to make a keyframe un-choseable by putting several keyframes almost next to it. The new keyframes will always be "over" it. Perhaps the keyframe closest to the current mouse position should jump to the top of the stack? The Jump To Previous/Next Keyframe buttons still let you select the "hidden" keyframe, but if you try to drag it you move one of the other keyframes instead.

Which keyboard shortcuts will you implement? Will WASD or arrow keys be used for camera, or will one be available for moving things in the timeline? It would be good to have buttons for moving the selected keyframe one frame left/right (necessary for fine-tuning animations, and moving the timeline marker a preset length to the left or right (e.g. 1 frame, 10 frames, 1 second's worth of frames).

[a_bloke_101]

wow Jeff i had no idea you were that pro i knew you were like epic genius but that insane i know its just a box but doing all of that in html is wicked maybe that webgl plus your epic skills could make for some pretty interesting game play =D cant wait to see this in the game btw i agree with nimai john cherish it while you can

[Jeff]

Thanks for all the suggestions.

You guys need to allow option+click to copy diamonds, when you think about animations in the actual game this will actually be quite an important feature

Option-click duplication might be very useful, and take a couple minutes to implement.

Which keyboard shortcuts will you implement? Will WASD or arrow keys be used for camera, or will one be available for moving things in the timeline? It would be good to have buttons for moving the selected keyframe one frame left/right (necessary for fine-tuning animations, and moving the timeline marker a preset length to the left or right (e.g. 1 frame, 10 frames, 1 second's worth of frames).

Using the arrow keys should already moves the currently selected item (keyframe, the markers, or the zoom scrollbar)

Also, I'm not sure if you're aware, but you can zoom in on the timeline by zooming in, which might help with the fine tuning. I'll see if I can make it easier to select stuff.

[Ozymandias]

Alright, I've never actually used an animator or anything but I've seen the timeline for one and fiddled with it a bit. I forget what program it was.

Anyways, shouldn't each square (diamond) have a number in it showing which frame it's on? Or, any numbers show up in general? I.E a number at the 25 frame mark, or summat like that. Also, I'm not sure if things are measured strictly in frames or not, but if they are the keyframes and scrubber should 'snap' to the frame positions right? Like, not being able to go to frame 1.28 or some crap?

ADD = lost interest to type a response >_<

[Endoperez]

Using the arrow keys should already moves the currently selected item (keyframe, the markers, or the zoom scrollbar)

Also, I'm not sure if you're aware, but you can zoom in on the timeline by zooming in, which might help with the fine tuning. I'll see if I can make it easier to select stuff.

I didn't remember these UI demos need webkit-browser, so it looks like there's lots of things that don't work properly. I guess I should install Chrome to be able to test these properly.

[Jeff]

Wow, I'm surprised it worked at all outside of WebKit

[TheBigCheese]

It didn't work here on Firefox. You could add new keyframes, but that was about it.