Making an animation timeline user interface

Hello,

I’m wondering how best to approach making an animation timeline UI. A good example of what I want to make is the Adobe Flash Timeline:

My initial thought was to use a canvas element to draw the key-frame cells. But seeing how much time it took me just to write my own custom canvas component (and it’s still not finished), I’m wondering if I could just use a mixture of certain components all mashed together. But I’m at a loss of what components to use.

Custom canvas

I used to have issues with WinForms and C# when using too many form elements. Each row might have close to a hundred if not more cells always in view, and there will be an n amount of rows depending on how the timeline is resized.

When I think about using so many components for the timeline, my thought process always ends up with writing my own canvas element like I did before. But the thought alone of having to implement my own collision detection again and implement certain behaviours like right-click context menu per key-frame cell sounds tedious, especially if there’s some other - smarter - way to go about it.

I’m not against going the canvas way, but maybe someone smart could suggest a simpler and smarter solution to this.

I’m not asking for code or a working example. I’m just fishing for ideas :slight_smile:

1 Like

Howdy!

So my initial thought here is “try it with discrete components” - it maybe be fine with 1000s of components, but it also depends on a few factors (like which backend / framework for example).

Another, maybe smarter option, would be to “virtualize” your timeline component: so you would have a fixed set of components, and the “data” would be the thing that scrolls, this way you could have millions of items with no problems. Some components in haxeui do this (ListView and TableView) but the dont do it horizontally, meaning they would be of no use directly - so you would have to roll out your own - which would make more sense anyway since your use is quite specific.

Canvas is an option, but i personally have the same reservations as you, drawing would be no issue, but interaction layout, just general “ui stuff” would be a pain.

Dunno if that helps at all? Lemme know, and maybe i can throw some (crappy) code together to illustrate my virtualization thoughts

Cheers,
Ian

PS: the app (in the gif) looks interesting, what is it, what backend, etc? :slight_smile:

So a very basic test with haxeui-html5, makes me think you might be able to get away with discrete components: http://haxeui.org/builder/?6641d783

It seems alright (under haxeui-html5), but YMMV - especially with different backends / frameworks, more complicated “frames”, different computers, etc, etc - lots of factors. I think the “virtualization” route will certainly “future proof” you, but will require more initial work

I guess I am needlessly overcomplicating things inside my head. Your simple example might just be good enough if not excellent.

I hadn’t even though about virtualisation outside of a custom canvas component. I guess it just shows my inexperience in GUI stuff :smiley:

I don’t know if I’ll finish it, but I’m doing a very simple program for pixel-perfect pixel art animation. Really basic stuff - you cut out a smaller sprite from a larger texture atlas and animate it’s position and possibly it’s rotation (in 90 degree turns). I’m also thinking of possibly adding special events/triggers that then could be read by a runtime to play a sound, spawn a bullet, etc.

For the backend I’m using HTML5 for development. Later, I’d like it run natively on Windows and Linux.

Quite a decline in features compared to that one time I tried making a simple 2d rig animation tool with GameMaker. Obviously, GML is not a language you’d ever want to use for writing programs. But it’s one of the reasons why I decided to transition to - and stick with - Haxe :slight_smile:

Not a very good demo of my past endeavour, but I don’t have any other demo at the moment lol
Old GameMaker animation tool

1 Like

Well, i suppose it could fall under “premature optimization”, but in this specific case, i get it. It is potentially 1000s of discrete components. The browser seems to perform well, i cant say for other backends / frameworks - i guess its a case of trying each one.

I guess if you did go that route then you are fine, for all backends regardless as then number of actual components is completely static (regardless of data size). But yeah, it can be additional work (possibly for no reason… … possibly)

Looks good, i dont know much about animation / game dev in general but looks fun / cool / useful :slight_smile:

You mean native UI as in hxwidgets? Because that i think drastically changes (reduces) your options - wxWidgets almost certainly isnt going to be happy with 1000s of windows

Looks cool though - let me know of your progress (and what route you decided to go!)… good luck!

Cheers,
Ian

1 Like