Pages

quinta-feira, 11 de dezembro de 2014

Using Timelines in Blueprints

Timeline is a type of Latent Action that allows the creation of simple time-based animations inside the Blueprints. In order to understand the use of Timelines, let's create a sample Blueprint consisting of a platform that moves between two positions, allowing the player access to different areas of the level. The image below shows the platform that moves between two areas.


Create a new blueprint based on Actor, add a StaticMesh Component and put the name "Platform". Choose as StaticMesh the "Floor_400x400". In the StaticMesh Material I chose the "M_Wood_Floor_Walnut_Polished". My platform was looking like this:


In EventGraph, click the right button and choose "Add Timeline":


A Timeline has several input pins and some output pins:


Put the name "Timeline_Platform" for this Timeline and double-click it to open the Timeline Editor:

Click to enlarge

This is the timeline that I created for this example. To set this timeline, first click the button on the left with the "f+" symbol and label "Add Float Track". Give the name of "Position" and set the value 6 in the "Length". This timeline will modify the value of a variable of float type for 6 seconds.

Now we need to add the keyframes of the animation. Right click in the center of the timeline and choose "Add Key" or press Shift and the left mouse button:


After you add a "key", you can move it in the timeline using the left mouse button or you can type the time and the value for this "key":


The transition between the keys of a timeline is called "Interpolation". To define the type of Interpolation right click on a key. In this example we will use a Linear interpolation:


For this Timeline we will need 4 keys with the following values:

Time Value
0.0 0.0
1.0 0.0
5.0 1.0
6.0 1.0


In Timelines is very common to use a float value ranging between 0.0 and 1.0. Think of it as the equivalent of 0% and 100%. Soon in the EventGraph we will see how this value is used.

This completes the changes in the Timeline editor. The platform pauses when arriving at both ends so that the player can enter or leave the platform.

Back to the EventGraph, we will need two variables of type "Float" with the names "X_Initial" and "X_Final". These variables should be "Editable". Their values should be informed on the Level and represent the initial and final position of the Platform on X Axis. To keep the example simple, this platform moves only on X Axis.

The image below shows the variables used by the Blueprint:


Place the platform Blueprint in the starting position on the level and see the value of X from the Location variable of the Blueprint. Then place in the final position and see the value of X. Put these values in the variables "X_Initial" and "X_Final". My example has these values:


The last missing part to conclude this Blueprint is the EventGraph. We need actions to change the Blueprint position according to the values of the Timeline. The EventGraph looked like this:

Click to enlarge

To help understand this EventGraph we will analyze each element separately:
  • Lerp Function: This function takes three input parameters (A, B and Alpha). The "Alpha" must be a value of type float between 0.0 and 1.0. In this example this parameter is assigned the value of the "Position" variable which is modified by the Timeline. The result of this function is an interpolation between the parameters A and B that have the values of the "X_Initial" and "X_Final" variables. For example, if "Alpha" is 0.5 then the result is the value that is in the middle between the "X_Initial" and "X_Final" variables.
  • Break Vector / Make Vector: Are used to separate the variables X, Y, Z of a vector and to make a vector based on these variables. They are used in this example because we're just changing the X value of the platform position.
  • Set Actor Location: Sets the new position of an Actor.
  • Flip FlopIt has two execution lines as output (A and B). Each time it is activated it will switch the output between A and B. In this example the Flip Flop is used to switch the execution of the Timeline between the normal direction and the reverse. 
  • Timeline_Platform: When the Timeline completes the time of 6 seconds it executes the "Finished" which is connected to the Flip Flop making the timeline to run in the reverse direction. That is, this Timeline will never stop its execution during the game.