Tip:
Highlight text to annotate it
X
Okay, so...
our animation
will consist of four main stages.
1. The light color begins red
2. Then the light fades out
3. Then the light will change to green
4. And then the light will fade out again.
and that sequence will be played repeatedly.
The duration of the animation, as we can see from the time line,
is six seconds,
and we want to move the time slider to the first
frame in the animation, at time zero.
And we want to insert a key frame for the light color
and brightness track
to lock in the starting values for the light color
and brightness of the animation.
Select the light color track
and press enter on the keyboard. And that will insert a key frame
into the light color track. You can see
the key frame here
marked by a triangle icon.
And whenever I click on that triangle icon
uh... to select the key frame
I will see
at the bottom left of the perspective viewport here
adjust key zero, and that tells me that key frame zero,
this first key frame, is selected.
I'm going to insert an additional key frame for the brightness track.
Select the brightness track, and press Enter on the keyboard
to insert a key frame for that track as well.
Now, from zero seconds to one second
I want the light to remain red
and at a constant brightness; the brightness of our light
is six
so at time one- that is, one second
I want the brightness of the light to remain
at 6
but between one second and two seconds I want the brightness of the light to fade
out to zero.
So let us select the first brightness key frame, at which the brightness is
six. Select that key frame
and press Edit
Duplicate selected keys from the menu
and here I have created a duplicate key
hold down the control key on the keyboard
and click and drag this key frame to the one second position.
This means that at one second the brightness of the light is still six.
Let's select this key frame
and duplicate it
again.
Hold down the control key and move it to the two-second position
We know that at two seconds the brightness of the light should be 0.
So, right click that key frame
and choose Set Value from the context menu
Let us change the value
to zero
and click
OK.
If I drag the time slider across the animation, between zero and 2 seconds
I will notice in
the perspective viewport that the light, or the brightness of the
light
changes.
It now animates, or rather the brightness of the light changes
between time one second and time two seconds.
At time three seconds I want the light to fade in again
but this time for the color of the light to be green.
So let's select the
uh... brightness value at one second
Where we know the brightness of the light is six.
Let's select Edit
and duplicate selected keys
from the context menu and control drag that key frame
to three seconds.
This means that the brightness of the light at three seconds will have
returned.
We can see that the light color at three seconds is still red, and we
will need to change this.
We're going to change it to green.
But we're going to do that afterwards - We're going to control brightness
for the animation first.
Between three to four seconds the brightness will remain constant.
It will remain constantly green.
So let's duplicate this frame again
and drag that to the four second mark.
Between four and five the light- the brightness of the light will fade out.
So again here,
at this key frame...
Let's just check the value. That should be 0, and it is.
Let's duplicate that key frame
and drag it to the five-second mark.
And finally between five seconds and six seconds
the brightness of the light will return to its default setting.
Let's select the first frame.
Duplicate that
and drag it to the final frame.
Like so.
The brightness of our animation has now been configured.
The next step is to configure the light color
for the animation.
Now we have created the key frames for the brightness of the animation
and we can see those key frames here
it is time to create the key frames for the light color track.
These key frames will animate the color of the light.
Now for an animating the color of the light. We need to insert
two additional key frames.
Let us the time sldier here. We going to scroll, keeping an eye on
the color of the light in the viewport here,
we're going to scroll to the two second mark of the animation
and at two seconds we will notice that the light extinguishes
completely.
Here is the point at which we want to change the color of the light
from red to green.
We want to do it here because we don't want the user to see
the color of the light change from red to green.
Rather, we want the light to remain red and to fade out
and change to green here, and then to fade back in as green.
So the change between red to green needs to happen here at two seconds.
So I'm going to select the light color track
and create a key frame here by pressing Enter on the keyboard.
Just to make sure that this key frame is exactly at 2 seconds into the
animation
I'll right-click on the key frame and choose Set Time from the context menu.
And it's almost two seconds, not quite. I'll enter a value of 2 here.
and click OK to se that key frame
to exactly two seconds.
Now, to change the color of the light of at the two second mark
we will click on the graph button in the light color track here,
to display the color values of the light in the curve editor
at the top here. These values
control how the color of the light
animates or interpolates between the key frames.
Right now, we have the first value for the first key frame and here we have the
value and color of the light at the second key frame.
And we have a straight line between them telling us that the color
doesn't change.
We want to set the color of this second key frame to green.
So, we'll click this node in the graph editor.
Right click on the node
and choose set color from the context menu
and from this color picker that appears here, we'll choose green.
And then click
OK.
You can see in the curve editor here that it produces a set of curves
that change from red to green
and we can see the effects of this if I scrub between the zero seconds to
the two second mark
you can see the light colore red changes to
green.
Now that is not in fact what we want. We don't want the gamer to see
the change in color. We want the animation to reach the 2 second mark
and to immediately change to the color of green.
To do this
select the color at the first key frame
and from the tool bar here, choose the Constant button.
When I do this
the
red color
will remain constant
until the next key frame.
So that will cause
the color green to be assigned to the light immediately
at the two second mark.
There will be no interpolate between the key frames.
So if I change from the zero second mark to the two second mark
I will see that the
light
never changes to green. It just fades out as we want.
Now the light
fades back in again at the three second mark and it is green
as it should be.
It fades out
at the four second mark.
It starts to fade out, and is completely extinquished at 5 seconds.
At this stage we want the light to change straight back to red
and we want no interpolation, here.
Let's select the first
key frame which is the red color.
We'll duplicate that key frame.
and control drag it to the five second mark.
Right click right on it to set time, to make sure it's exactly at 5 seconds
You can see already from the curve editor here that there's interpolation
between the key frames
Select the second key frame, the one that is green,
and from the toolbar select the Constant again
to ensure that there is no interpolation.
If I now reset the animation back to the beginning and I click the play
button from the toolbar here, and I watch the results in the viewport
You will see that the color changes
as we intend.
So now the light animation is completed.
What remains for us now is to set this animation going as soon as the
level starts
and to make sure that the animation keeps looping or repeating
for as long as the gamer is in the level.
Now that the animation has been defined in
Matinee, we can close the Matinee editor
and
the
process of playing the animation when the level starts and ensuring it
plays continously on a loop
is work that needs to be performed in Kismet.
I'm in the kismet editor here
I opened that editor by clicking the Kismet icon on the tool bar.
and I want this Matinee animation here to play when the level loads.
To do this I am going to add a Level Loaded event.
Right-click on the Kismet background and choose New Event > Level Loaded
from the context menu.
The event that I am interested in here is the Begining of Level
event, which will be fired when the level begins.
I am going to connect this 'Begining of Level' socket to the Matinee node.
Now, If was
to run the level as as it is now
the
Matinee animation will play only once and then stop.
I want to ensure that when the animation is completed
for the first time
it will then play the animation in reverse. So I'm going to connect the
completed socket into the reverse input here.
But once the animations has played backwards or in reverse
I'm going to want it to play
forwards again, so that effectively the animation loops by ping-ponging
backwards and forwards.
So I'm going to connect the Reversed output, which is fired
when the animation finishes playing in reverse. I'm going to connect that
back to the play socket up here.
I'm then going to close to the Kismet editor
and I'm going to play this level in the viewport.
Whoops! No, that's not what I want...
I mean this button here to play in the viewport.
and I can see already
That what we've
achieved here
is a light
that changes color
and notice that the animation is continually looping backwards and
forwards. It ping-pongs.
It plays forwards and then it plays in reverse, and then forwards again.
And that completes our tutorial. I hope you have found it helpful.
Thank you for watching.