Animation Clip Record Pipeline

[Lastryo]

Problem

In this realization we can use Procedural Animation for record Animation Clips in runtime, but this case is requires hard coding skills, and offers decide visual things in code.

Idea

Create pipeline for bake procedural animations in editor to Animation Clip file.
Also, create a component that will process such files.
In Unity using that variant and it's really convenient.

This will allow you to create various animations more accurately, as well as save the developer from writing code for visualization.

1. More precise setting of objects.
2. No need to write code to directly animate objects.
3. Ability to easily record many objects and even create complex cutscenes.

[manio143]

From the user perspective how do you see the experience in the editor?
The straightforward approach to demo this would be making a component with a list of curves, each of which is a list of key frames. But this doesn't sound very nice to use.
We would probably need to implement a more complex editor for a custom asset such that time of the animation is shown as a timeline with the user being able to place visually key frames and adjust they're values - similarly to how animations are done in professional software.
Some idea for inspiration:
https://www.codeproject.com/Articles/240411/WPF-Timeline-Control-Part-I

[manio143]

I think a good UX would be something along the lines of:

• Right click on timeline, Insert keyframe
  • Capture current state of the entity/components
• Move forward on the timeline, insert another keyframe, modify entity
• Moving along the timeline with mouse play the animation

Things to consider:

• Isolated keyframes per each component/property
  • Maybe we could just have multiple tracks on the timeline forming a dictionary indexed with the accessor path string. When you want to animate another property you press a button to add it, then have a picker UX similarly to how you can drop references on component properties to select the path in the UI instead of typing it in manually.
• Grouped keyframes per component holding a snapshot of all it's properties
  • Or at least allow selecting multiple keyframes to move around the timeline as a group

[Lastryo]

From the user perspective how do you see the experience in the editor? The straightforward approach to demo this would be making a component with a list of curves, each of which is a list of key frames. But this doesn't sound very nice to use. We would probably need to implement a more complex editor for a custom asset such that time of the animation is shown as a timeline with the user being able to place visually key frames and adjust they're values - similarly to how animations are done in professional software. Some idea for inspiration: https://www.codeproject.com/Articles/240411/WPF-Timeline-Control-Part-I

Yes, that's exactly what I was thinking, thanks! I complete the idea with a picture of how it could be.

[Lastryo]

Recording animation

How I see the process of working with the animation recording tool

Select Entity in the Scene Hierarchy or open a prefab.
There can be 2 ways

1st way, if the component (AnimationClipHolder) is not on the entity
Go to the Timeline window and click create clip.
Next, select the location where we want to save the file with the clip extension.
Further, a component is automatically added to the Entity (if the component is not on the Entity) which will contain a dictionary of clips and a clip is added to it.
Next comes the full Timeline interface, and now we can record our animation.

2nd way, if the component (AnimationClipHolder) is on the entity
A full-fledged Timeline interface appears in which we can create a new clip and record animation into it

Recording process:
If we want to add a key frame, we must press the Rec button, from now on, any change to the object or its children will be added to the hierarchy, and the change is instantly recorded and reflected as a key frame on the Graph

[Lastryo]

While searching, I saw that Microsoft Blend has the necessary tool that can record animation clips.

[Lastryo]

I think a good UX would be something along the lines of:

* Right click on timeline, Insert keyframe
  
  * Capture current state of the entity/components

* Move forward on the timeline, insert another keyframe, modify entity

* Moving along the timeline with mouse play the animation

Things to consider:

* Isolated keyframes per each component/property
  
  * Maybe we could just have multiple tracks on the timeline forming a dictionary indexed with the accessor path string. When you want to animate another property you press a button to add it, then have a picker UX similarly to how you can drop references on component properties to select the path in the UI instead of typing it in manually.

* Grouped keyframes per component holding a snapshot of all it's properties
  
  * Or at least allow selecting multiple keyframes to move around the timeline as a group

@manio143 Microsoft Blend uses similar pipeline about what you said above.

[Eideren]

Just a small note on this subject, we already have a keyframe / curve editor but it's really bare-bones right now.

The above screengrab shows a Stride.Animations.ComputeAnimationCurveQuaternion defined on a component.
Source files are under sources/editor/Stride.Assets.Presentation/CurveEditor/ViewModels