Timeline Editor Manual

Hello World

In this manual, we'll talk about the new timeline editor introduced in v1.9.0.

Before Skele v1.9.0, we had been using the Unity AnimationView as the Cutscene editor. AnimationView is a very useful and versatile editor, but there're a few inconvenience with it:

  • For one clip, all animated objects must be descendants of the same root GameObjects. This requirement puts extra pressure on the hierarchy planning, and might result in many helper GameObjects to work around.
  • AnimationView has a fixed target, hence it doesn't expose much interface for extension, we could only utilize "animation event" to implement extra features. However, all "animation events" share the same track on the AnimationView editor, which makes the editing work hard to scale and manage when things get complex.

Although we had received quite a lot of suggestions to upgrade for the Cutscene editor part, but writing a new timeline editor, well, that's just quite a lot of work.

Thanks to the Abdulla Ameen, the Author of the "Animator: Timeline Editor", who permits us to integrate this great tool into Skele package. Now we've a new & better solution for making Cutscenes.

AnimatorSP 

In the next pages, we'll see how to use the AnimatorSP Timeline editor to make cutscenes.

Okay, now let's get started! ლ(╹◡╹ლ)


Get Started

As AnimatorSP(alternative name for Skele's Timeline-Editor) is a fork project from the original "Animator: Timeline editor", most of the original document content still apply on AnimatorSP.

The original PDF document is well-written and complete, so I'm not going to copy the whole document onto the html pages. Instead, I'll add the links to the original document here, then in the next pages focus on our modifications and other important points worth noting.

Original Document PDF:Link1,Link2

If you have any questions regarding AnimatorSP, just tell me in the Forum. :)

(We strongly suggested users read the original document to get a grasp of the editor first before proceeding)


Overview

In this page, we will focus on the big picture of AnimatorSP (alternative name for "Skele's Timeline Editor"). You'd best have already browse through the original document, as we'll not make detailed explanation if the concept is already covered in original document and no change is made in our implementation either.

timelineEditor1 

(The main UI look)

If you've already browsed through the original document, now you might wonder what've been changed in the AnimatorSP? Well, let me make a brief list here:

  • We've changed how animation data is stored and used to make things work like the Animator<->AnimationClip forms.
  • Some new types of tracks: "Animator" track to let you handle Animator component; "Scale" track to scale object bigger/smaller;
  • Fixed some compatibility issues on Unity5, and some interface issues;
  • Changed some workflow, added a bunch of hotkeys to work with the editor;
  • CodeView & MegaMorph & JsonExport are scheduled to be removed.

Data storage

In the original implmentation, Takes are exported/imported with all the related GameObjects as individual scenes. This ensures that the reference of objects are always valid, and takes are easier to manage. However this might also complicates reusing takes between different scenes.

AnimatorSP modifies the animation data storage and usage by storing each take in the form like animation clip, which means we store the animation related data into the Asset files and we could use it in any scene later. And instead of storing the object reference, we store the transform path, when we're going to use it, we try to rebind the string of transform path to the actual object in the current scene, like the standard Unity animation clip does.

New tracks

The original implementation already has many different tracks to handle different objects.

In AnimatorSP we complement it by adding Animator & Scale tracks;

Animator track allows users to manipulate Animator component, i.e.: handle Mecanim-related animation;

Scale track allows users to scale GameObjects, e.g.: Mesh, UI, etc.

Misc

AnimatorSP also fixed some compatibility & UI issues, like shaders for Iris, jitter when drag window. etc. 

Some basic workflow has been changed too, we will cover them in next page.

Removal

Some original features are not fit anymore, and are scheduled to be removed from AnimatorSP:

  • CodeView;
  • Megamorph;
  • Json Import/Export of takes;

In the next page, we'll cover the new workflow of managing takes.

 


Takes Management

The workflow of takes management has changed a lot with the change of storage method;

In this page, we'll show these aspects of takes management in AnimatorSP:

  • Initialize AnimatorData component;
  • Create & Save take;
  • Import take;
  • Remove take;
  • Delete take;

As mentioned in the original document, AnimatorData component contains information of the takes. In another word, the relation between AnimatorData & Takes, is quite like the relation between Animator component & animation clips.

In AnimatorSP, the takes are not bound to the AnimatorData, AnimatorData component can import specific takes when needed.

AnimatorSPUInames

 


Initialize AnimatorData

To initialize AnimatorData, the first step is to bring up the AnimatorSP editor window.

We could invoke it via MenuItem "Window/Skele/Animator SP: Timeline Editor" or just simply press Hotkeys "Alt+Shift+W".

AnimatorSP1

AnimatorSP EditorWindow would automatically open previous AnimatorData instance if we had opened one in this scene before. If there's not, we'll see the StartUp UI below instead.

AnimatorSP2

There're three options:

  • "Add New Instance": Create a new GameObject with AnimatorData component and open it;
  • "AutoFind Component": Try finding an existing AnimatorData component in current scene, do nothing if cannot find one;
  • "Select From Scene": Manually specify an AnimatorData instance from the scene, it fits the situation when there're multiple AnimatorData instance in one scene.

Create & Save Take

There're two circumstances that you create new take.

New AnimatorData

The first one happens when you click the "Add New Instance" in the startup UI;

AnimatorSP3

If in this UI, you choose the "Create New Take", then a file dialog will pop up and let you choose a location to save the new take asset file. After that, you will be able to edit the empty new take.

AnimatorSPEmpty

Import Take

The steps to import an existing take:

  • Click the button with a circle and plus mark;
  • Click the button of object field on the popup window;
  • Select an existing take from the "Assets" tab;

AnimatorSP4

Remove Take

Click the button to the right of the "Import Take" button to remove current in-edit take from this AnimatorData;

Be noted that, Remove =/= Delete, the take asset is still in the project, you could import it later;

Delete Take

To delete a take completely, just delete the take asset file from project window;

Reset AnimatorData

If developer needs to switch to another AnimatorData, click the "Reset" button, it will return to the StartUp UI. Developer then could select another AnimatorData like described in "Initialize AnimatorData" section;

 


Tracks 

In this page, we'll cover the newly added tracks in details;

Be noted that the original tracks are also explained in original document;

Tracks can indicate the start and end of specific actions, and be edited individually.

The original design for tracks allows users to extend new tracks, it's a little more complex than implement an interface, but nothing too complex for an experienced programmer.

am icon scale Scale Track

ScaleTrack allows users to manipulate the scale of transform from timeline.

Just drag a transform into the main UI panel and select to add a scale track will do.

You could manipulate keyframes like on other tracks.

The inspector for one keyframe of scale track looks like the image below:

AnimatorSPScaleTrack 

  • "Scale": the scale value stored in this keyframe.
  • "Ease": How to interpolate the scale value between this keyframe and the next keyframe;

am icon animator Animator Track

AnimatorTrack allows users to access the Animator component from timeline.

To add a Animator Track, just drag a GameObject with Animator component onto the UI panel of AnimatorSP;

You could control the keyframes like on other tracks;

Inspector for Animator Track looks like this image:

AnimatorSPAnimatorTrack

For each keyframe on AnimatorTrack, user could specify multiple actions to execute;

There're two kinds of actions:

1. Jump State: directly switch state or cross fade to target state in Animator state-machine.

  • Target State: This is a list of all available states of all layers, user could select one as the target state;
  • Fade Time: If it's 0, then we switch state immediately; or it will use cross fade to switch state;

2. Set Param: set Animator parameters to affect the animation playing;

  • Param: This is a list of all available parameters, user could select one as target;
  • (value): This is the field user fills the desired value for the selected parameter;

Misc.

In this page, we'll cover some other miscellaneous stuff.


Enable/Disable track

AnimatorSP added a feature to temporarily enable/disable selected track. This could help when we need to isolate some tracks or want to preview how things look like without some tracks.

AnimatorSPTrackEnable

You could see the small check-mark toggle beside each track's name, if it's toggled on, then this track is enabled, else this track is disabled and it will not drive the corresponding object since then.


Hotkeys

AnimatorSP added a bunch of hotkeys to help boost efficiency.

(1) Keyframe-related:

I: Insert/update keyframe(s) at current timeline position for selected tracks(where the head is);

Del: Delete keyframe(s) at current timeline position for selected tracks;

Ctrl+C/V/X/A: Copy/Paste/Cut/SelectAll keyframes;

(2) Track-related:

Del: Delete selected track / track-group;

Up/Down arrow: select the track above / below current one;

(3) Navigation-related:

Left/right arrow: Move the head on the timeline;

Ctrl+Left/right arrow: Move to prev/next keyframe on timeline;

Alt+Left/Right arrow: Move the head on timeline with 5x speed;

Home/End: Move the head to the head/tail of the timeline;

Drag with MMB held: Pan the timeline view;

(4) Playback-related:

Alt+A: play/stop current take;