Galacean Logo
Documentation
API Reference
Examples
Playground
Guide and Examples

Material Animation

This example demonstrates how to create material animations in the Galacean editor. Through simple steps, you will learn how to create an AnimationClip for material. If this is your first time using the animation editor, it is recommended to read the previous documents:

1. Play Animation in Model

2. Reuse Animation

0. Preparation

Before starting, we need to add a MeshRenderer component to the entity. The default project created already has a cube, which contains the MeshRenderer component.

In addition, because the default material is read-only, we also need to create a material.

There are two ways to create a material:

  1. Right-click on the blank space in the Asset Panel and select Create -> Material
  1. Click the add asset button + and select Material

Replace the material property of the MeshRenderer with the material we just created.

1. Create AnimationClip

After adding the component, we need to create an AnimationClip (for an introduction to AnimationClip, please refer to the AnimationClip document). There are two ways to create an AnimationClip:

  1. Right-click on the blank space in the Asset Panel and select Create -> AnimationClip
  1. Click the add asset button + and select AnimationClip

2. Open AnimationClip Editor

  1. Double-click the newly created AnimationClip asset
  1. Select an entity. According to the prompt, we need to select an entity in the Hierarchy Panel as the target for editing the animation.

Select the default entity created by the editor (you can also click the + button in the hierarchy panel to create a new one)

  1. Click the Create button in the AnimationClip editor. The editor will prepare some work for you. In this example, you can ignore the understanding of these concepts for now.

The preparation work includes:

  1. Creating an Animator component (detailed introduction) for the selected entity and creating an AnimatorController (detailed introduction) asset.
  2. The AnimatorController will contain an AnimatorState, and the AnimatorState will automatically bind the selected AnimationClip and connect to the entry node (for a detailed introduction to the entry node, please refer to the AnimatorStateMachine document).
  3. The Animator component will automatically bind the AnimatorController.

After creation, you will open the AnimationClip editor as shown below:

3. Edit AnimationClip

  1. Enable recording mode in the AnimationClip editor
  1. Move the timeline to 0:00, then set the color property of the material in the MeshRenderer component to red. In recording mode, the editor will automatically add the corresponding property and keyframe.
  1. Set the color property of the material in the MeshRenderer component to green and blue at 0:20 and 0:40, respectively. At 1:00, set it back to red. The first and last keyframes are the same, so the animation can loop naturally. Click the play button to preview this AnimationClip.

2024-11-20 17.43.50.gif

Now our material color change AnimationClip is complete. For more operations about the animation editor, please refer to the AnimationClip document.

For information on how to use this AnimationClip in your project, please refer to the two documents listed at the top of the article.

Was this page helpful?