KeyFrameComponent
Key frames, like the name says, are used to determine the most important frames of an animation. The rest of the frames are filled with "inbetweens". These inbetween frames are there to create a smooth transition from one key frame to another. In computer animations they are interpolated using different interpolation methods. In the Frozenbyte Editor these methods are linear interpolation, spline interpolation and no interpolation.
Contents
Quick guide for using KeyFrameComponent
This quick guide assumes the user to have some proficiency with the editor and KeyFrameComponents, so it doesn't concentrate on details. The rest of this page concentrates on a bit deeper explanation of the component.
- Open Keyframe dialog/Keyframe time slider (View->Keyframe time slider)
- Add a TimerEntity to the scene
- Right click the timer and choose it as active timer:
- Right click the property of an entity you want to animate (e.g. intensity multiplier of a spotlight) and choose:
. This creates the correct KeyFrameComponent for the entity. - Add key frames by moving the blue slider in the Keyframe dialog to the point of time where you want to add a key frame, right click and press
. This creates one entry in KeyFrameArrayTimeMs, SplineParameterArray and KeyFrameArrayValue in the KeyFrameComponent of the entity in question. - Modify the values created in the KeyFrameArrayValue.
- You can further modify the key frame times by either choosing a key frame (the black lines) from the Keyframe dialog and moving it, or changing the numbers by hand in the KeyFrameArrayTimeMs.
- Test your animation by pressing play in the Keyframe dialog and fiddle with the values if needed.
- You can delete a key frame by first selecting one of the key frames (the black lines) and right clicking on it and choosing:
. Note, that pressing "Delete" on the keyboard won't delete the key frame, but does delete the entity. - If you leave the blue slider in the Keyframe dialog to any other place but 0.0 seconds, it will start the timer from a wrong place when in game.
- Sometimes the changes in the KeyFrameArrayValues of BooleanKeyFrameComponents don't register, so make sure your changes take place.
Interpolation methods
No interpolation
The simplest case, no interpolation, means just what it says. In other words, no interpolation is done and only the key frames are used for the animation. These can be used in situations, where a sudden change is desirable (like turning a light on and off). In mathematical terms, this can be described with a rectangular function (a special type of step-function), which has a discrete value from one point to another, until it abruptly changes to a different value.
In the example picture on the right, on the x-axis are the key frame times in milliseconds (1s = 1000ms). The key frame time is the moment in time (measured from the beginning of the animation), where the key frame is situated.
On the y-axis is the value of the key frame, which, in this case, is a float (more on that later). The value of the key frame is the thing we want to animate or change in the course of the animation. It can be position, orientation, intensity, height, distance etc.
The weird-sounding names on the axes coincide with the names in the KeyFrameComponent of the editor.
If this kind of KeyFrameComponent was used to animate the intensity of a spotlight, it would abruptly change from a value to another every 0.5 seconds.
Linear interpolation
Linear interpolation is the simplest method of interpolating between two points. Instead of the key frame values changing suddenly e.g. from 0 to 1, the value changes according to a straight line between the points. Depending on the steepness of the linear polynomial (the straight line), which depends on the temporal proximity of two adjacent key frames as well as on the difference in their value, this change can happen faster or slower. As the steepness of the line increases (i.e. as the line approaches a vertical line), the effect of linear interpolation approaches the abrupt change from one value to another as when no interpolation is used.
The picture on the right demonstrates the same key frames at same points of time as in the previous picture but this time interpolated with linear interpolation. Note, that even though the amount of change of the value of the inbetween frame is constant between a pair of key frames, it can still vary from one pair to another (the value of the inbetween frame changes more between 2.0 and 2.5 seconds than between 0 and 0.5 seconds in the picture on the right).
Continuing with the example of an animated spotlight, linear interpolation causes the intensity to vary in an even manner, where the increasing or decreasing of the intensity can be seen, but it doesn't happen in a blink of an eye, like when no interpolation is used.
Spline interpolation
Spline interpolation as a method is slightly more complicated than linear interpolation. A complete spline consists of piecewise polynomials, which might or might not be of the same degree. What this means is that between each key frame, a polynomial of a different degree might be used to calculate the inbetween frames. In contrast, linear interpolation uses always a polynomial of the first degree (a straight line) to calculate the inbetweens.
The picture on the right has again the same key frames at same points of time as in the two previous pictures, but this time demonstrating a spline interpolation. The most notable changes are between 2.0 and 3.5 seconds, when compared to linear interpolation. If using no interpolation changes the values themselves abruptly from one to another, the linear interpolation instead jumps between increasing and decreasing the values in a very sudden manner. The spline interpolation smoothens the peaks, making the transition much less harsh.
An interesting thing to notice is the difference between linear and spline interpolated values of the frames between 2.5 and 3.0 seconds. Since the linear interpolation method always uses straight lines to interpolate between values, the value of the frame stays constant, because the key frame values are same at the end points. Spline method uses polynomials of a higher degree, as mentioned, so even if the key frame values are the same at two adjacent frames, the calculated values of the inbetweens might still change a great deal, depending on the values of the key frames before and after this key frame pair. This can be either a good or a bad thing, depending on the situation.
Once again returning to the example of animating the intensity of a spotlight, the spline interpolation makes it much harder to notice the peaks of intensity when compared to linear interpolation and makes the transition from increasing to decreasing the intensity much smoother.
Types and properties of KeyFrameComponent
Types
Depending on the situation and purpose of animating an entity, a specific kind of KeyFrameComponent might be needed. The different types of KeyFrameComponents (with an example value following the name) are:
- BooleanKeyFrameComponent (True/False)
- ColorKeyFrameComponent (COL(0,0,0))
- FloatKeyFrameComponent (1.563)
- RotationKeyFrameComponent (Rotation(0,0,0))
- StringKeyFrameComponent ("this is an example string, i.e. a piece of text")
- VC3KeyFrameComponent (VC3(0,0,0))
Properties
- InTime
- The current input time in seconds. This property is connected to a TimerEntity with a PropertyConnectionComponent.
- InRepeat
- Should the animation repeat after it reaches the end or not.
- InterpolationOperation
- This is the property that is used to choose the #Interpolation methods
- KeyFrameArrayTimeMs
- These are the moments of time (in milliseconds) that the key frames are situated at. These are the x-values of the points in the three pictures of #Interpolation methods. Note, that KeyFrameArrayTimeMs, SplineParameterArray and KeyFrameArrayValue should have the same amount of values.
- SplineParameterArray
- These determine the behaviour of the polynomials used in spline interpolation. An informative picture here. Usually leaving these unchanged (0,0,0) is ok. Note, that KeyFrameArrayTimeMs, SplineParameterArray and KeyFrameArrayValue should have the same amount of values.
- KeyFrameArrayValue
- These are the values of the key frames. The y-values of the points in the three pictures of #Interpolation methods. Depending on the type of the KeyFrameComponent, these can be booleans, floats, vectors, etc. (see the different types above). Note, that KeyFrameArrayTimeMs, SplineParameterArray and KeyFrameArrayValue should have the same amount of values.
- ValueType
- NOTE: This is a VC3KeyFrameComponent specific value!
- Should the frame value be in relation to the origin of the editor space, or in relation to a specific position defined by the BasePosition property (see below). Note, that if BasePosition is (0,0,0), both methods yield the same result.
- BasePosition
- NOTE: This is a VC3KeyFrameComponent specific value!
- The specific position the frame values are in relation to, instead of the origin of the editor space.
- OutValue
- The value of the current frame. This property is the output property of the animation, and it's connected to the property of the entity that one wants to animate (e.g. the position or the intensity of a spotlight).
