# 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:

<figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2FbpNr7fnkeq7xXFL16OiQ%2Fimage.png?alt=media&#x26;token=8b3e1451-624b-4e9a-91d0-c429257d0750" alt=""><figcaption><p>A new UI Document component</p></figcaption></figure>

4. Open UI Builder and create a new document (or edit your existing one)
5. Add a AnimatedLabel element in UI Builder:

<figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2FZvMOkmxXbjDfamg0tQzF%2FAnimated%20Visual%20Elements.png?alt=media&#x26;token=ab3f0f80-5491-462f-92e4-0671a9556485" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2FtesTlFAphZmFyW6rILhu%2Fimage.png?alt=media&#x26;token=882cd74b-3f78-4468-a527-8c0c57b1a242" alt=""><figcaption></figcaption></figure>

7. Save the `uxml` file and add it to the UI Document component you've created before:<br>

   <figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2FmBFnWkAqeZHhR9JFCNRQ%2Fimage.png?alt=media&#x26;token=185a362e-d38f-4012-826a-49235e387591" alt=""><figcaption></figcaption></figure>
8. 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:

<figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2FGYXQDdF6muEOV7eql8CM%2Fimage.png?alt=media&#x26;token=718a25d7-8adf-49a5-b3b9-1dca47652647" alt=""><figcaption></figcaption></figure>

3. 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](https://docs.stixgames.com/text-animations/text-animation-settings "mention").

## 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:

<figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2Fa68YiaPpnReM0zHUGkRy%2Fimage.png?alt=media&#x26;token=302f4164-082b-463b-afe0-55c1c886f728" alt=""><figcaption></figcaption></figure>

2. Create a new GameObject with an `Audio Source` component.
3. Add a `Animated Text Audio Emitter` component.
4. Drag the `Audio Source` into the field `Source` in the emitter.
5. Drag the `UI Document` into the field `Ui Document` in the emitter.
6. Add one or more audio files to the List `Sounds` on the emitter.

<figure><img src="https://101455922-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsXRHzPpSiweEUfocjZwl%2Fuploads%2FVebMwa3YUq7wFQND4cPc%2Fimage.png?alt=media&#x26;token=294d40f0-b29b-4a17-a04e-7c1c72001196" alt=""><figcaption><p>The fully set up audio emitter</p></figcaption></figure>

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](https://docs.stixgames.com/text-animations/animations/built-in-animations "mention") 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](https://stixgames.com/contact/), or join my [Discord](https://discord.gg/jvBFhQA). Of course, you're also welcome to show off your creations or start discussions!
