The Keyframe patch outputs values (Vec3) that can animate an object’s property. For example, an object’s position, scale or rotation, a light’s intensity or a material’s color.
To add the Keyframe patch to your project, right-click in the Patch Editor and select it from the menu.
Because it outputs up to 3 values, this patch is useful for creating more advanced animations without using external tools. The Keyframe patch can be connected to any yellow consumer patch to animate that property.
The final patch in a graph will represent the property of the object in your scene that you want the graph to affect.
These patches are known as 'consumer' patches, because they consume signals created by other patches in the graph, changing the property as a result.
To create this type of patch, select the object in the Scene panel and click the arrow next to the property in the Inspector.
A yellow patch will be created:
The animation's progress. 0 is the start, 1 is complete.
The X, Y and Z values as the animation progresses. Connect to a yellow consumer patch representing a scene object's property to animate it.
To create an animation you’ll edit the settings inside the Keyframe patch. To do this, expand the patch by clicking the symbol in the right corner:
This will show a number of settings:
Dragging the scrubber to the right will add more frames to the animation:
Editing the animation
In the Keyframe patch, you'll see 3 horizontal lines, or ‘curves’. Editing the horizontal curves will edit the animation. To do this, click and drag a curve:
Each curve represents a different channel. The output will depend on the consumer patch they’re connected to. For example, if you’re changing the color of a material, they’ll represent the RGB color values - X representing Red, Y representing Green and Z representing Blue.
In the example below we’ve selected the blue curve, Z. Because the Keyframe patch is connected to a patch representing the color of a material, Z represents the blue channel. Moving the Z curve at a set keyframe changes the colour of the animation in the later frames:
Adding a keyframe
To add keyframes along these curves:
You can then click and drag frames to adjust where they are.
When you expand a Keyframe patch, any animation it drives will pause in the Simulator. It will play again when you close the patch.
X, Y and Z values
These values show the real-time value of each curve. Edit them to add or update keyframes. Keep in mind that:
X, Y and Z buttons
Select an option to highlight which of the three curves you want to manipulate, to avoid editing the wrong one.
Add, Play, Duration and Frame
Returning to the Patch Editor
To go back to the Patch Editor, click Back to Main in the top of left of the screen.
In this example, the Keyframe patch animates the color of a material:
Let’s take a look at the patch graph that creates this animation:
A Loop Animation patch is connected to the Keyframe patch through its Progress output port.
The animation is created by editing values in the Keyframe patch, which we’ll take a closer look at in a moment.
Because the Keyframe patch outputs a Vec3 data type and the Base Color Texture consumer patch can only receive a Vec4, we’ve added a Pack patch set to Vector 2 between them - allowing us to add a fourth channel.
The Base Color Texture patch represents a property in a physically-based material. It sets the color of the material applied to the sphere shaped object in the scene - in this case creating a metallic effect. You could use any material with a Texture property to add color.
Now let’s take a closer look at the Keyframe patch itself:
Here we’ve created 3 keyframes and moved each of the 3 curves to a position that controls the color shown in the animation at any given frame.
In the Loop Animation patch, we set the duration of the animation in seconds and checked the box next to Mirrored to mirror the motion. In the Keyframe patch we set the number of frames.
With the Keyframe patch expanded, we can see the color of the sphere change as the animation plays through the frames we’ve set.
Below, we’ve used the Keyframe patch to animate objects in a more complex way than the Loop Animation and Transform patches allow.
With the Loop Animation patch, we can animate an object from one position to the next. In this example we’ve used the Keyframe patch to add a third position.
Let’s take a look at the patch graph that achieves this:
Loop Animation drives the animation in the scene. This patch is where we can set the duration, and mirror the animation if we want to.
The Keyframe patch is connected to 3 yellow consumer patches representing the 3D position of the 3 spheres. Between the Keyframe patch and two of these consumer patches we’ve added 2 Delay patches. The value we’ve added next to Duration in each Delay patch causes the animation of each sphere to start 0.25 seconds later than the one before it.
Inside the Keyframe patch, we’ve used the 3 curves to set the 3 positions the spheres animate between: