Thoughts for animation editor 2.0

Not too long ago there was a thread suggesting a change in the design of the animation editor (or rather, a throwback to TGF). That thread and the recent threads about what should or shouldn't be in Construct 2 made me think about the animation editor a bit, and I came up with some ideas that I think could improve the animation editor. But before we get to that let's take a look at the current one.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_now.png">

First things first. I like this editor, it's reasonably compact and does what it needs to quite well. The TGF radial... thing, was good, but it took up quite a lot of space for, let's face it, relatively low functionality.

The animation list in Constructs current editor is better in my opinion. The tree-structural approach to listing the animations allows for a better overview while not using up too much space.

The frames list is also good, but not great. It, again, does what it needs to. But not much more than that, and if you have a very long animation, things get unruly fast.

Which brings me to the properties view. This is, in my opinion, the weak link in the animation editor. Most importantly, it's all the way over on the other side of the screen (which admittedly can be changed, but I think most people keep it as it is by default because of convenience. At least I do) while not really showing that much infromation.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_props_now.png">

And last, something everyone wants, animation preview. As it is now we have to preview the entire layout to see if the animation looks right. Add to that that we have to jump from one side of the screen to the other to make changes. I think it's clear that it could be improved.

So here's my suggestion.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_idea.png">

First, we have an Animation Preview at the top, with a convenient progress bar and a box showing the current frame, as well as some buttons which we'll get to later.

Second is the Frames List. Here is where changes to the old start (I'd call the preview an 'addition' rather than a change).

Instead of showing our frames as icons we have a list, with three columns. The first columns is "Frame", which I think is fairly self-explanatory. Next we have "Speed", this is in fact speed from the properties view. So instead of going to the propertes view to change the speed of a frame, we can do it here.

Last is something new. This idea I got from Unitys Animation View. "Function" would allow us to call a function from a frame in an animation. In my example the function is to play a sound, this could be used to play sounds of different footsteps (left/right, stone ground/wooden floor, etc) when a character walks, but it could be virtually anything.

Below the Frames List we have the Animations List. This, too, incorporates the functionalities from the property view into the animation editor instead. So we could now set the speed of animation and if it loops from here instead. (Note that the names themselves of the animations in the Animation List does not represent how I think it should look. I think the way it looks now is great, I'm merely suggesting added functionality.)

In my example the "Tags" functionality is not present, but I'd imagine it could be included in a similar fashion.

And last, here's a short legend of the different buttons/icons.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_previewanimation.png">

Play animation - Plays the animation in the Animation Preview window (animation is resized to fit if it's bigger than the preview window)

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_previewinwindow.png">

Preview in window - Opens a window showing the animation in 1:1. Usefull for larger animations/characters.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_pausepreview.png">

Pause animation - Pauses the animation in the preview. The frame in the preveiw will be the one that is selected either via the progress bar or the Frames List.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_loop.png">

Loop? - When ticked, the animation loops.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_repeatnumber.png">

Repeat # - The number of times to repeat (if not looping).

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_repeatto.png">

Repeat to - The frame number to go back to when the animation ends.

<img src="http://i79.photobucket.com/albums/j135/mr_norris/animation_editor_pingpong.png">

Ping-Pong? - When ticked, reverses the animation on end.

So, there are my ideas for the animation editor, I'm interested to see what you guys think. I started a new thread instead of posting in the "Most Wanted" thread because I think it could be discussed in detail of how to improve the editor for 2.0 instead of just saying that we want it improved.

Not too sure about the call function from frame, but the rest looks nice.

Noticed it looks like you have a keyframe/timeline bar under the animation preview... would be sweet if one could actually drag it with the mouse.

A couple things...

Are we keeping sub animations? If we do it would be nice to see some expressions targeted at those.

[quote:8881k7tb]The frames list is also good, but not great. It, again, does what it needs to. But not much more than that, and if you have a very long animation, things get unruly fast.

Yeap, a bigger preview would be nice, and the ability to change the background color... ya know suppose your sprite is white.

Not too sure about the call function from frame, but the rest looks nice.

I think it could be immensely useful. What about it are you unsure about?

Noticed it looks like you have a keyframe/timeline bar under the animation preview... would be sweet if one could actually drag it with the mouse.

That was the general idea. Sorry if it didn't really get conveyed properly.

A couple things...

Are we keeping sub animations? If we do it would be nice to see some expressions targeted at those.

I see no reason to get rid of sub-animations. Even though I don't use them much myself.

I really like all the ideas presented here. Especially the function one.

[quote:i3fayxcw]I think it could be immensely useful. What about it are you unsure about?

Its just kinda non sequitur, does not follow... its the animator not the preview. Then again I have no idea how hard it would be to put it in there, so if the devs do it... more power to em.

This looks great. I really hope the devs consider this or something similar.

I actually loved the "radial thing" TGF/MMF had for animation directions; It was quick and easy to use. It's only drawback was it's 32 direction limit. Having multiple animation directions in Construct's current editor is a serious hassle.

Being able to preview/play a single animation would be nice. Right now, layouts load and save slow on my CPU even though my CPU is way beyond the technical requirements. If I could preview just one animation, I could get fly back and forth between testing and working much faster.

Here is another thing; I like the animation listing style you have better than what's in Construct now. And, I wish I could drag and drop an animation that was listed as, say '160', move it to where it says '5', and still have it read '160' unless I edit the number manually... AND, the animation will run in the order they are listed rather than just based on the assigned number. I've found that when you're using a ton of animations per character like I do, you need to move frames around a lot. But by the time you finish and time passes, you're not going to remember that frame '125' got moved to frame '7', and '9' got moved to '13', and so on. If the number never changes unless I change it, I'll always know where I've put each frame.

I like this proposal, despite of it's overwhelming redness >_<

The original animation editor shows frames as tiny thumbnails that aren't really useful at all (I can't even tell frames apart in it).

One thing I don't really like is calling functions. Mainly because that's putting logic IN the animation, which could be confusing and I could see it becoming the source of frustration(why is this being called? I can't see it in any event sheet! ARGH!). INSTEAD I would suggest something that looks almost the same but it's not: being able to fire an event, which can be used in the event sheets to do the good stuff you can doo in event sheets. This would allow complex interaction with animations right off the bat!

I'm definately in favour of these suggestions! (even though I can't see any of those images )

I do like the function thing but I think it might be separating things from the event sheet a little too much.

I also like the radial animation angle viewer, if it wasn't limited to 32 directions but rather had more of a vector type layout, I think it would be really powerful.

Creating many animations directions in Construct at the moment really IS a hassle (especially importing them, see my thread here http://www.scirra.com/forum/viewtopic.php?f=17&t=5477 and take note of the importing animations suggestion)

I'm glad people are liking the suggestions so far =)

I like this proposal, despite of it's overwhelming redness >_<

Hmmm, you're right. There needs to be more red! =P

... I would suggest something that looks almost the same but it's not: being able to fire an event, which can be used in the event sheets to do the good stuff you can doo in event sheets. This would allow complex interaction with animations right off the bat!

It seems opinions are split on the call functions feature, which I was expecting. What I mainly wanted to suggest with the call function feature was added functionality, rather than a specific set in stone feature. Figuring out what that funcitonality would be is the point of this thread, among other things.

I'm definately in favour of these suggestions! (even though I can't see any of those images )

Strange, I've never heard of anyone having problems seeing images from Photobucket before. Are you viewing from school or some other form of public computer? Those often block imagehosts on their systems.

I also like the radial animation angle viewer, if it wasn't limited to 32 directions but rather had more of a vector type layout, I think it would be really powerful.

I understand advocating the radial selector for reasons pertaining beginner frienliness, but if we're talking power and efficiency, the radial selector loses. Every time. What we have now gives us access to 360 degrees worth of angles, with shortcuts to the eight main directions when you create a new angle. You can not have any more angles than that. Though I admit, it would make more sense to me if the 0 degree angle was up and not right, then you could imagine the angles like a clock. The radial selector also took up a lot of unnecessary space.

Creating many animations directions in Construct at the moment really IS a hassle (especially importing them, see my thread here http://www.scirra.com/forum/viewtopic.php?f=17&t=5477 and take note of the importing animations suggestion)

I looked at it before and looked agagin at it now. It's an interesting idea, but I'm not sure of how practical it would be.

What you're doing is essentially cutting away one part of the process (creating angles for your animations) and replacing it with another one (prepping your animations to be imported in this manner), and I don't think you would really save any time or work with it.

If the idea is to limit the time spent on creating animation angles, there exist features aimed towards that in Construct. The mirror/flip animation toggleboxes in the property view. Of course, if you have different animations altogether for left/right, then it's a different thing. But, I think the time you would spend on prepping your animations in this manner would be fairly similar to the time spent creating new angles.

It depends how you do it

I generally use 3D animation software, which means I make the animaion ONCE then just rotate the camera around and loop the animation so I now have the one animation in all the directions i need (for an isometric angles etc I'm talkin)

It takes me just about the same amount of time to make one animation

Being able to import them this way certainly would save me a buttload of animation fiddling in construct and I'm sure there are others that make their animations this way too

Yes im using a 3d program to do all my animations.And it's got motion capture tech for animations as well.It sounds like a great idea though.If i could see how the animation would behave in Construct then that would be sweet.Please dev's create an animation preview window.

I would love for the animation editor paste/copy function to be fix. When you copy and flip a frame, the hotspot nor action spot flips.

> ... I would suggest something that looks almost the same but it's not: being able to fire an event, which can be used in the event sheets to do the good stuff you can doo in event sheets. This would allow complex interaction with animations right off the bat!

>

It seems opinions are split on the call functions feature, which I was expecting. What I mainly wanted to suggest with the call function feature was added functionality, rather than a specific set in stone feature. Figuring out what that funcitonality would be is the point of this thread, among other things.

I like where you're going with the function idea. I think it needs to be a little simpler though. Instead of specifically defining "play sound x" for the frame, you could do something akin to Unity's message listening type deal. In the box where you have "play sound blah blah" you could simply type in a message that will get broadcast every time the frame plays. So you could type in something (anything you want) like for instance "footstep."

Now in the conditions for Sprite, there could be an "On Message" trigger. Now you can craft an event that says +On Message 'footstep' -> XAudio2 play 'step.wav'. The On Message trigger could be used for all kinds of events. +On Message 'fire' -> Spawn bullet, for instance.

Now, if you have an animation with several frames of footseps hitting the ground, you just need to copypasta your 'footstep' message into all the frames necessary. And if for some reason you need to reorder your frames later, the step sounds will still play at the proper time. Likewise, having just one action for playing the sound would make it easier to change the audio source or volume or whatever if you need to, rather than having several "On frame 3," "On frame 8," "On frame 12" events each with their own duplicate actions.

I suppose there could also be a "During Message" condition that would activate every tick that animation frame is showing too.

That sounds pretty good. =)