Getting Started

This guide will help you get started with Text Animations for UI Toolkit and how to get started with some of the most important features. If you already have a scene or existing UI Toolkit UI where you want to integrate text animations, you can skip the step(s) for settings up a new scene and a UXML file.

Setting up your scene and adding an Animated Label

1. Import the Text Animations for UI Toolkit asset using the Unity package manager.

2. Create a new scene.

3. Create a new GameObject and add a UI Document component:

A new UI Document component

1. Open UI Builder and create a new document (or edit your existing one)

2. Add a AnimatedLabel element in UI Builder:

1. Add the following text to the text field of the AnimatedLabel: Hi, welcome to <wave>Text Animations</wave> for UI Toolkit

1. Save the uxml file and add it to the UI Document component you've created before:

   
2. Press play and you'll see your text being animated

You can change the text like any other Label in UI Toolkit, by setting a value to the text property. The text will start animating immediately.

Don't stop here, or you'll miss most settings and customizations! The next section will explain how to create a Text Animation Settings asset and how to add it to your animated text.

Creating a Text Animation Settings and adding it to the Animated Label

1. Open the context menu of your Project Panel and create a Text Animation Settings object with Create > Stix Game > Text Animations for UI Toolkit > Text Animation Settings

2. Add your newly created settings file to the Animated Label in UI Builder, then save the document:

1. The settings are now applied to the element and can be used to set up typewriting, default and fallback animations, performance settings, and more. For more detailed information, read the documentation page Text Animation Settings.

Adding event handlers

Now that we have text animations set up, the text step is to let other systems react to the animations.

1. Let's assign a name (id) to our Animated Label in UI Builder. It can be whatever name you want, but you'll need to use the same name in the event handler components later:

1. Create a new GameObject with an Audio Source component.

2. Add a Animated Text Audio Emitter component.

3. Drag the Audio Source into the field Source in the emitter.

4. Drag the UI Document into the field Ui Document in the emitter.

5. Add one or more audio files to the List Sounds on the emitter.

The fully set up audio emitter

Press Play and you'll hear sounds whenever text is written on the screen.

Next, you could check out the AnimatedTextEvents component. It is similar to the audio emitter, but can be used to integrate animation events with your own scripts.

---

Have fun creating animated text! Check out the rest of the documentation. You could start with Built-in Animations and add different animations to your text.

If you're still confused or if you have any requests for this guide or the asset in general, contact me via the contact form, or join my Discord. Of course, you're also welcome to show off your creations or start discussions!