R3vo/Sandbox – User

From Bohemia Interactive Community
Jump to navigation Jump to search
m (cleared)
m (merged pags)
Line 1: Line 1:
[[File:A3_KeyFrameAnimation_Overview.gif|right|800px]] __ToC__
== Overview ==
It's all about '''Key Frame Animation''' with real time preview with '''3DEN''' integration.
A '''Key Frame''' is a location on a timeline which marks the beginning or end of a transition. It holds special information that defines where a transition should start or stop. The intermediate frames are interpolated over time between those definitions to create the illusion of motion. This interpolation is performed mathematically by the '''CPU'''.


'''Keyframing''' is the simplest form of animating an object (be it 2D or 3D). Based on the notion that an object has a beginning state or condition and will be changing over time, in position, form, color, luminosity, or any other property, to some different final form. '''Keyframing''' takes the stance that we only need to show the "key" frames, or conditions, that desribe the transformation of this object, and that all other intermediate positions can be figured out from these.
This system is all about interpolation and can be used for the following:
* '''Camera Scene / Cut-Scene''': Camera path and timing
* '''2D animations''': Ability to animate UI controls on screen
* '''3D animations''': Ability to animate objects in the 3D world
* '''Numeric animation''': Ability to animate any number transition
''The low level system also includes a library of '''Non-Linear Interpolation''' methods that can be used independently from the rest.''
== Interpolation Algorithm ==
* '''Linear''' - Linear interpolation is a method of curve fitting using linear polynomials to construct new data points within the range of a discrete set of known data points
* '''Bezier Cubic''' - Non linear interpolation that uses 4 control points, Cubic Bezier interpolation
* '''Ease In''' - Non linear interpolation that starts slow and ends at desired speed
* '''Ease Out''' - Non linear interpolation that starts at desired speed and slows down the closer it is from the end
* '''Ease In Out''' - Non linear interpolation that starts slow and speeds up to desired speed reaching the half way through, slowing down the closer it is from the end
* '''Hermite''' - Non linear interpolation and only different a variation of Ease In Out
* '''Bounce In''' - Non linear interpolation that bounces at start
* '''Bounce Out''' - Non linear interpolation that bounces at the end
* '''Bounce In Out''' - Non linear interpolation that bounces at start and end
* '''Quintic In''' - Quintic version of ease in
* '''Quintic Out''' - Quintic version of ease out
* '''Quintic In Out''' - Quintic version of ease in out
* '''Berp''' - Boing interpolation that overshoots target and comes to a rest after
* '''Interpolate''' - Non linear interpolation from current value to target value based on speed, scaled by distance
* '''Interpolate Constant''' - Linear interpolation from current value to target value based on speed
''There's both Float and Vector versions for each of the above methods''
== Math ==
* '''Bezier Length''' - Computes the length of a bezier spline
* '''Clamp''' - Clamps a float between min and max (inclusive)
* '''Clamp Vector''' - Clamps all axis of a vector between min and max (inclusive)
* '''Delta Time''' - Helper function to get and manage DeltaTime
* '''Find Look At''' - Calculates Forward and Up vectors to orientate an objects looking at position from another position
* '''Nearest Point''' - Computes the nearest point in a line
* '''Pow''' - Helper function for Expoent Power
* '''Pulsate''' - Pulsates a value between 0 and 1 with desired frequency and offsets
* '''Vector Divide''' - Divides a vector by a float
== [[Eden Editor]] Tutorial ==
For the 3DEN Keyframe Animation tutorial we will animate a UAV on a spline.
===1. 3DEN Object Setup===
* Open 3DEN and place a player unit
* On the asset list, select Modules (F5) and select category Modules
* Search for '''Keyframe Animation''' category, here you'll find all related modules used to make up animations in 3DEN
[[File:A3_KeyFrameAnimation_tutorial3den_setupObjects.jpg|240px]]
===2. Placing the Timeline===
* When in '''Modules > Keyframe Animation''' place a '''Timeline''' module
* Enable '''Play From Start''' - Will make the timeline start to be simulated when the scenario starts
* Set the '''Length''' to 15 seconds - This is the length of the timeline
* Enable '''Loop''' - Timeline will restart once it's simulation reaches the end
* In '''Event Looped''' put the following: <br/> <syntaxhighlight lang="cpp">hint "Timeline finished and is now looping";</syntaxhighlight>
[[File:A3_KeyFrameAnimation_tutorial3den_timeline1.jpg|240px]][[File:A3_KeyFrameAnimation_tutorial3den_timeline2.jpg|240px]]
===3. Placing the Curve===
* Place a '''Rich Curve''' module
* Right click on the newly created '''Rich Curve''' and synchronize it with the '''Timeline'''
* Set the '''Orientation Mode''' to Animation - This will make the orientation of the animated objects orientation follow the animation
[[File:A3_KeyFrameAnimation_tutorial3den_curveSync.jpg|240px]][[File:A3_KeyFrameAnimation_tutorial3den_curve1.jpg|240px]][[File:A3_KeyFrameAnimation_tutorial3den_curve2.jpg|240px]]
===4. Placing the start and end keys===
* Place two '''Rich Curve Key'''s
* Select and then right click on the newly created '''Rich Curve Key'''s and synchronize them with the '''Rich Curve'''
[[File:A3_KeyFrameAnimation_tutorial3den_KeysSync.jpg|240px]]
===5. First Key Setup===
* Open the attributes of one of the placed keys, we will consider this one the first and so it is the start of our animation
* You can leave all the settings as default for now
[[File:A3_KeyFrameAnimation_tutorial3den_FirstKey.jpg|240px]]
===6. Last Key Setup===
* Open the attributes of the other key, this will be the final point in our animation
* Set the '''Time''' property to '''10''', this means our animation will be in total 10 seconds long, since our first key starts at 0 and our last key is at 10
[[File:A3_KeyFrameAnimation_tutorial3den_LastKey.jpg|240px]]
===7. First Animation===
* Congratulations, while not much so far, you have now created your first Animation in 3DEN
* Move the '''Key''' objects around and notice how the path of the animation is being drawn in red and how you are affecting the animation in real-time
* The red line defines the animation path or spline
* The red dot's define the animation density
''Note: In order for things to be drawn at least one object part of the animation needs to be selected in 3DEN''
[[File:A3_KeyFrameAnimation_tutorial3den_anim1.gif]]
===8. Adding an Animated Object===
* The next step is to add our '''Animated Object''', basically, an object that will follow your animation with real-time 3DEN preview
* In the '''Asset Browser''' select ''Units (F1) > NATO > Drones > MQ-4A Greyhawk'' and place it into the level
* Right click on the newly created UAV and synchronize it with the '''Curve''' object
* If you select an object which is part of the animation, you should start seeing the UAV being animated along your first animation
* Feel free to move the keys around and get a sense of the real-time editing features
[[File:A3_KeyFrameAnimation_tutorial3den_anim2.gif]][[File:A3_KeyFrameAnimation_tutorial3den_anim3.gif]][[File:A3_KeyFrameAnimation_tutorial3den_anim4.gif]]
===9. Turning your animation into a spline (Bezier Cubic)===
* Select both keys in 3DEN and right click one of them, select '''Attributes'''
* Set the '''Interpolation Mode''' to ''Cubic''
* So now, your animation will have non linear (Bezier Cubic in this case) interpolation and we can now start adding control points to control the Bezier Cubic tangents
[[File:A3_KeyFrameAnimation_tutorial3den_anim5.gif]]
===10. Adding Control Points to manipulate Tangents===
* There are two kinds of Control Points, Arrive and Leave (see [[HelloWorld]] for more info)
* Go back to ''Modules > Keyframe Animation'' and place two '''Rich Curve Key Control Points''', these will be used to control the spline tangents
* One of the '''Control Points''' synchronize with the first '''Key''', open its '''Attributes''' and set the '''Tangent Type''' to '''Leave'''
* The other '''Control Point''' you synchronize with the second '''Key''', open its '''Attributes''' and set the '''Tangent Type''' to '''Arrive''' (which should be set by default)
* At this point you should notice your spline tangents being afected, try to move the control points around and modify the spline
[[File:A3_KeyFrameAnimation_tutorial3den_anim6.gif]][[File:A3_KeyFrameAnimation_tutorial3den_anim7.gif]][[File:A3_KeyFrameAnimation_tutorial3den_anim8.gif]]
===11. Understanding 3DEN controls===
When working on your Animation in 3DEN there are a few specific controls:
* '''LCtrl''' - Displays the index of all the keys of the highlighted animation starting at 0 for the first key, note that non selected keys (and it's control points) will be rendered in white while selected ones will render in green
* '''LShift''' - If the mouse position is near the animation spline, a line will be drawn between mouse and spline that defines a point where a new key can easily be placed if LShift + Space key combination is used
* '''LShift + Space''' - If the above is valid, a new Key will be created at the exact place where the mouse is pointing to, the key will be registered with the given curve, will have control points and be set as Cubic
''Note: For Keyframe Animation controls to work you must have one or more animation highlighted in 3DEN, you can do that by selecting an object part of the animation (Timeline, Curve, Key or Control Point)''
[[File:A3_KeyFrameAnimation_tutorial3den_anim9.gif]][[File:A3_KeyFrameAnimation_tutorial3den_anim10.gif]]
===12. Adding a Key onto the Animation===
'''Keys''' can be directly placed onto the animation by using the keyboard combination '''LShift (Highlight) + Space (Spawn Key)''', this is a fast and straight forward way to add keys to your animation, since even properties like '''Time''' will be computed automatically for you, same with the registration done with the '''Curve'''. The created '''Keys''' using this method are set to '''Cubic''' and '''Control Points''' are created with them and registered. In future this could be a 3DEN setting.
* ''Press and hold'' '''LShift''' and move your mouse pointer near the highlighted spline / curve
* Once there is a connection between mouse and your curve, while still holding '''LShift''' also press '''Space''' once, this will create the key
''Note: For Keyframe Animation controls to work you must have one or more animation highlighted in 3DEN, you can do that by selecting an object part of the animation (Timeline, Curve, Key or Control Point)''
[[File:A3_KeyFrameAnimation_tutorial3den_anim11.gif]]
===13. Lockable Control Points (Bezier Cubic)===
When control points are locked you are able to have matematically accurate and smooth transition between key frames. You can set the lock mode in each key.
* To set the '''Control Points Lock State''' just open your '''Key''' attributes (to which control points are synchronized) and toggle the option '''Lock Control Points'''
[[File:A3_KeyFrameAnimation_tutorial3den_anim12.gif]][[File:A3_KeyFrameAnimation_tutorial3den_anim13.gif]]
''Note: Always make sure your Control Points are configured correctly, a key can have one Arrive and one Leave control point''
===14. Play===
Now that everything is ready, you can preview the mission and observe the UAV moving.
[[Category:Arma 3: Editing]]
[[Category:Arma 3 Key Frame Animation|Tutorial 3den]]

Revision as of 09:32, 22 June 2018

A3 KeyFrameAnimation Overview.gif

Overview

It's all about Key Frame Animation with real time preview with 3DEN integration. A Key Frame is a location on a timeline which marks the beginning or end of a transition. It holds special information that defines where a transition should start or stop. The intermediate frames are interpolated over time between those definitions to create the illusion of motion. This interpolation is performed mathematically by the CPU.

Keyframing is the simplest form of animating an object (be it 2D or 3D). Based on the notion that an object has a beginning state or condition and will be changing over time, in position, form, color, luminosity, or any other property, to some different final form. Keyframing takes the stance that we only need to show the "key" frames, or conditions, that desribe the transformation of this object, and that all other intermediate positions can be figured out from these.


This system is all about interpolation and can be used for the following:

  • Camera Scene / Cut-Scene: Camera path and timing
  • 2D animations: Ability to animate UI controls on screen
  • 3D animations: Ability to animate objects in the 3D world
  • Numeric animation: Ability to animate any number transition

The low level system also includes a library of Non-Linear Interpolation methods that can be used independently from the rest.

Interpolation Algorithm

  • Linear - Linear interpolation is a method of curve fitting using linear polynomials to construct new data points within the range of a discrete set of known data points
  • Bezier Cubic - Non linear interpolation that uses 4 control points, Cubic Bezier interpolation
  • Ease In - Non linear interpolation that starts slow and ends at desired speed
  • Ease Out - Non linear interpolation that starts at desired speed and slows down the closer it is from the end
  • Ease In Out - Non linear interpolation that starts slow and speeds up to desired speed reaching the half way through, slowing down the closer it is from the end
  • Hermite - Non linear interpolation and only different a variation of Ease In Out
  • Bounce In - Non linear interpolation that bounces at start
  • Bounce Out - Non linear interpolation that bounces at the end
  • Bounce In Out - Non linear interpolation that bounces at start and end
  • Quintic In - Quintic version of ease in
  • Quintic Out - Quintic version of ease out
  • Quintic In Out - Quintic version of ease in out
  • Berp - Boing interpolation that overshoots target and comes to a rest after
  • Interpolate - Non linear interpolation from current value to target value based on speed, scaled by distance
  • Interpolate Constant - Linear interpolation from current value to target value based on speed

There's both Float and Vector versions for each of the above methods

Math

  • Bezier Length - Computes the length of a bezier spline
  • Clamp - Clamps a float between min and max (inclusive)
  • Clamp Vector - Clamps all axis of a vector between min and max (inclusive)
  • Delta Time - Helper function to get and manage DeltaTime
  • Find Look At - Calculates Forward and Up vectors to orientate an objects looking at position from another position
  • Nearest Point - Computes the nearest point in a line
  • Pow - Helper function for Expoent Power
  • Pulsate - Pulsates a value between 0 and 1 with desired frequency and offsets
  • Vector Divide - Divides a vector by a float

Eden Editor Tutorial

For the 3DEN Keyframe Animation tutorial we will animate a UAV on a spline.

1. 3DEN Object Setup

  • Open 3DEN and place a player unit
  • On the asset list, select Modules (F5) and select category Modules
  • Search for Keyframe Animation category, here you'll find all related modules used to make up animations in 3DEN

A3 KeyFrameAnimation tutorial3den setupObjects.jpg

2. Placing the Timeline

  • When in Modules > Keyframe Animation place a Timeline module
  • Enable Play From Start - Will make the timeline start to be simulated when the scenario starts
  • Set the Length to 15 seconds - This is the length of the timeline
  • Enable Loop - Timeline will restart once it's simulation reaches the end
  • In Event Looped put the following:
    hint "Timeline finished and is now looping";
    

A3 KeyFrameAnimation tutorial3den timeline1.jpgA3 KeyFrameAnimation tutorial3den timeline2.jpg

3. Placing the Curve

  • Place a Rich Curve module
  • Right click on the newly created Rich Curve and synchronize it with the Timeline
  • Set the Orientation Mode to Animation - This will make the orientation of the animated objects orientation follow the animation

A3 KeyFrameAnimation tutorial3den curveSync.jpgA3 KeyFrameAnimation tutorial3den curve1.jpgA3 KeyFrameAnimation tutorial3den curve2.jpg

4. Placing the start and end keys

  • Place two Rich Curve Keys
  • Select and then right click on the newly created Rich Curve Keys and synchronize them with the Rich Curve

A3 KeyFrameAnimation tutorial3den KeysSync.jpg

5. First Key Setup

  • Open the attributes of one of the placed keys, we will consider this one the first and so it is the start of our animation
  • You can leave all the settings as default for now

A3 KeyFrameAnimation tutorial3den FirstKey.jpg

6. Last Key Setup

  • Open the attributes of the other key, this will be the final point in our animation
  • Set the Time property to 10, this means our animation will be in total 10 seconds long, since our first key starts at 0 and our last key is at 10

A3 KeyFrameAnimation tutorial3den LastKey.jpg

7. First Animation

  • Congratulations, while not much so far, you have now created your first Animation in 3DEN
  • Move the Key objects around and notice how the path of the animation is being drawn in red and how you are affecting the animation in real-time
  • The red line defines the animation path or spline
  • The red dot's define the animation density

Note: In order for things to be drawn at least one object part of the animation needs to be selected in 3DEN

A3 KeyFrameAnimation tutorial3den anim1.gif


8. Adding an Animated Object

  • The next step is to add our Animated Object, basically, an object that will follow your animation with real-time 3DEN preview
  • In the Asset Browser select Units (F1) > NATO > Drones > MQ-4A Greyhawk and place it into the level
  • Right click on the newly created UAV and synchronize it with the Curve object
  • If you select an object which is part of the animation, you should start seeing the UAV being animated along your first animation
  • Feel free to move the keys around and get a sense of the real-time editing features

A3 KeyFrameAnimation tutorial3den anim2.gifA3 KeyFrameAnimation tutorial3den anim3.gifA3 KeyFrameAnimation tutorial3den anim4.gif

9. Turning your animation into a spline (Bezier Cubic)

  • Select both keys in 3DEN and right click one of them, select Attributes
  • Set the Interpolation Mode to Cubic
  • So now, your animation will have non linear (Bezier Cubic in this case) interpolation and we can now start adding control points to control the Bezier Cubic tangents

A3 KeyFrameAnimation tutorial3den anim5.gif

10. Adding Control Points to manipulate Tangents

  • There are two kinds of Control Points, Arrive and Leave (see HelloWorld for more info)
  • Go back to Modules > Keyframe Animation and place two Rich Curve Key Control Points, these will be used to control the spline tangents
  • One of the Control Points synchronize with the first Key, open its Attributes and set the Tangent Type to Leave
  • The other Control Point you synchronize with the second Key, open its Attributes and set the Tangent Type to Arrive (which should be set by default)
  • At this point you should notice your spline tangents being afected, try to move the control points around and modify the spline

A3 KeyFrameAnimation tutorial3den anim6.gifA3 KeyFrameAnimation tutorial3den anim7.gifA3 KeyFrameAnimation tutorial3den anim8.gif

11. Understanding 3DEN controls

When working on your Animation in 3DEN there are a few specific controls:

  • LCtrl - Displays the index of all the keys of the highlighted animation starting at 0 for the first key, note that non selected keys (and it's control points) will be rendered in white while selected ones will render in green
  • LShift - If the mouse position is near the animation spline, a line will be drawn between mouse and spline that defines a point where a new key can easily be placed if LShift + Space key combination is used
  • LShift + Space - If the above is valid, a new Key will be created at the exact place where the mouse is pointing to, the key will be registered with the given curve, will have control points and be set as Cubic

Note: For Keyframe Animation controls to work you must have one or more animation highlighted in 3DEN, you can do that by selecting an object part of the animation (Timeline, Curve, Key or Control Point)

A3 KeyFrameAnimation tutorial3den anim9.gifA3 KeyFrameAnimation tutorial3den anim10.gif

12. Adding a Key onto the Animation

Keys can be directly placed onto the animation by using the keyboard combination LShift (Highlight) + Space (Spawn Key), this is a fast and straight forward way to add keys to your animation, since even properties like Time will be computed automatically for you, same with the registration done with the Curve. The created Keys using this method are set to Cubic and Control Points are created with them and registered. In future this could be a 3DEN setting.

  • Press and hold LShift and move your mouse pointer near the highlighted spline / curve
  • Once there is a connection between mouse and your curve, while still holding LShift also press Space once, this will create the key

Note: For Keyframe Animation controls to work you must have one or more animation highlighted in 3DEN, you can do that by selecting an object part of the animation (Timeline, Curve, Key or Control Point)

A3 KeyFrameAnimation tutorial3den anim11.gif

13. Lockable Control Points (Bezier Cubic)

When control points are locked you are able to have matematically accurate and smooth transition between key frames. You can set the lock mode in each key.

  • To set the Control Points Lock State just open your Key attributes (to which control points are synchronized) and toggle the option Lock Control Points

A3 KeyFrameAnimation tutorial3den anim12.gifA3 KeyFrameAnimation tutorial3den anim13.gif

Note: Always make sure your Control Points are configured correctly, a key can have one Arrive and one Leave control point

14. Play

Now that everything is ready, you can preview the mission and observe the UAV moving.