How to Tell a Joke With Unity Timeline

Games are full of dialog, and how that dialog is delivered is often more important than the writing. After all, writing jokes is easy, telling jokes is hard. That’s why stand-up comedians spend night after night trying the same material in different ways to get the biggest laugh.

In this tutorial, you’ll learn how to use Unity’s Timeline to create and deliver your very own punchlines with perfect comedic timing. Timeline will take your dialog system to the next level, helping you retain user attention and get even bigger laughs.

In this tutorial, you’ll learn:

1. What Timeline is.
2. How to trigger custom events with Timeline.
3. How to implement a custom dialog system from scratch.

For this tutorial, you’ll need Unity 2020.1.6f1 or later.

Getting Started

Download the project by clicking the Download Materials button at the top or bottom of the tutorial.

Open the starter project, which was created using the 2D template, and look at the folder structure in the Project window.

In Assets ▸ RW, you’ll find everything you need for the project:

1. Scenes: Contains the JokeMachine scene.
2. Scripts: An empty folder for the scripts you’ll create.
3. Sprites: Contains sample art for you to use.
4. Timeline: Anmpty folder for the Timeline Asset you’ll create.

Now, you’re ready to start cracking… jokes! :]

Setting the Scene

For your first step, you’ll set up a simple scene containing a comedian telling a joke. Later, you’ll use Timeline to make the joke appear with perfect comedic timing.

Adding the Text Bubble

Open the JokeMachine scene inside the Scenes folder. Inside, you’ll find a very basic scene with a camera.

Start by creating a bubble for the dialog. Add a UI ▸ Image GameObject and call it JokeWindow. This automatically adds some other components, including a Canvas and an EventSystem.

For the Source Image, select ChatBubble from the Sprites folder. Set the Color to something funny, like purple. Next, set the Width to 1000 and the Height to 600. Finally, set Pos X to 90 and Pos Y to 160. This should make the bubble fill the top right of the screen.

Add a UI ▸ Text – TextMeshPro GameObject as a child of the JokeWindow and call it JokeText.

You might see a pop-up to install the TextMeshPro package; if so, do it. Open Package Manager to confirm that you’ve installed TextMeshPro.

Next, set the JokeText‘s Width to 600 and the Height to 200, with the default centered anchor. In the Scene View, the outline of the box should fit nicely within the bubble.

Set Font Size in the TextMeshPro component to 50, then center the text vertically and make sure the Vertex Color is different from the bubble color you selected. The default white color is fine.

In the text field, insert the following joke across three lines:

• There’s 10 types of people in the world.
• Those who know binary,
• and those who don’t.

Funny, right?

Adding the Comedian

Now that you’ve set up your text bubble, you need someone to tell the joke.

Add another UI ▸ Image GameObject as a child of Canvas for the main character. Call it Comedian.

A suitable character is waiting for you in the downloaded materials. Make it appear by going to the Source Image and selecting Comedian from the Sprites folder.

To position the Comedian, set the Width to 400 and the Height to 400. Then, adjust the RectTransform to place the character to the lower left of the bubble by setting Pos X to -390 and Pos Y to -160.

In the Canvas GameObject, change the default Canvas Scalar component to Scale with Screen Size and the Reference Resolution to 1280 x 720. Finally, set Screen Match Mode to Expand. This will ensure that your friendly comedian makes full use of the stage — regardless of screen size or aspect ratio — without being clipped.

The UI is now complete. Click Play and you’ll see a joke onscreen… but you’re probably not laughing. Seeing the text all at once is a great way to ruin the punchline. Instead, it would be better for the text to appear gradually.

Revealing Text Over Time

Ever since the invention of the typewriter, words have appeared one letter at a time. To do that in Unity, you need a script to modify the TextMeshPro component.

Inside Scripts, create a new C# script named Typewriter. Attach that script to the JokeText GameObject.

Now, you’re ready to set your bubble text to gradually reveal itself.

To start, open the Typewriter script in your favorite code editor and add this declaration to the script, above the class declaration:

using TMPro;    //for TextMeshPro

This will let you access TextMeshPro features.

Next, just inside the class declaration, add these variables:

//1
private TMP_Text textBox;
//2
private float timePerCharacter = 0.05f;

Here’s what this code does:

1. Creates a private reference to TMP_Text that you can use throughout the script.
2. Declares the variable, timePerCharacter, and set it to 0.05f.

Next, you’ll use Awake to set up the TMP_Text component:

void Awake()
{
    //1
    textBox = GetComponent<TMP_Text>();
    //2
    textBox.enableWordWrapping = true;
    //3
    textBox.maxVisibleCharacters = 0;
}

In this code, you:

1. Cache the reference to the attached GameObject.
2. Configure enableWordWrapping to true to have multiple lines in the text box.
3. Initialize the variable maxVisibleCharacters to 0 so the bubble looks empty to start.

To reveal one character at a time, add the following code:

public IEnumerator Reveal(int startLetterIndex)
{
    //1
    textBox.ForceMeshUpdate();

    //2
    int totalVisibleCharacters = textBox.textInfo.characterCount;

    //3
    for (int i = startLetterIndex; i < totalVisibleCharacters; i++)
    {
        textBox.maxVisibleCharacters = i + 1;

        yield return new WaitForSeconds(timePerCharacter);
    }

    //4
    textBox.maxVisibleCharacters = totalVisibleCharacters;
    yield break;
}

And here's what this does:

1. Forces an update of the mesh to get up-to-date information about the text component.
2. Gets the number of visible characters in the text object.
3. Reveals one letter at a time with a pause after each letter.
4. For insurance, shows all the possible characters at the end of the coroutine.

Now, you need something that will start the Typewriter. So, for testing purposes, add the following code:

private void OnEnable()
{
    StartCoroutine(Reveal(0));
}

OnEnable is called when the GameObject becomes enabled in the scene. So, when the text box appears on screen, it will start the coroutine Reveal.

Save the script and return to the editor. Click Play and watch the joke reveal one character at a time.

But... well, it's still not very funny. Before implementing an even better way to deliver the joke, take a moment to consider why jokes are funny.