Galacean Logo
Documentation
API Reference
Examples
Playground
Guide and Examples

Text Animation

This example demonstrates how to create text animations in the Galacean editor. Through simple steps, you will learn how to create an animation clip for text. 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 TextRenderer component to the entity.

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 -> Animation Clip
  1. Click the add asset button + and select Animation Clip

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. Set Test Text and Switch to 2D View

  1. Enter Hello World in the Text property of the TextRenderer component on the entity and set the Font Size to 200. You can also set other properties as needed. For more information on text, please refer to the TextRenderer document.
  1. Switch to the 2D view

4. Edit AnimationClip

  1. Enable recording mode in the AnimationClip editor
  1. Move the timeline to 0:00, then set the Font Size property of the TextRenderer component to 0. In recording mode, the editor will automatically add the corresponding property and keyframe.
  1. Set the Font Size property of the TextRenderer component to 100 and 200 at 0:30 and 1:00, respectively. Click the play button to preview this AnimationClip.

2024-11-20 17.01.54.gif

This completes the creation of the text zoom AnimationClip. You can also try other properties of the TextRenderer, such as Color, Font, etc. For more operations on the animation editor, please refer to the AnimationClip document.

To learn how to use this AnimationClip in your project, refer to the two documents listed at the top of the article.

Was this page helpful?