Game Over UI with Unity and TextMesh Pro

We needed a “Game Over UI” for our game Erwin’s Timewarp made with Unity 5.1. It should have a nice text layout, a glow-effect and a dead Erwin centered on an appearing Game Over panel like this:

Sketch of the game over screen

We decided to use TextMesh PRO, a really powerful text asset for the Unity game engine to realize the Game Over panel in combination with the new Unity UI.

Adding the text

First of all in order to use the new Unity UI framework we added a Canvas object to our screen – well, for our game it already existed and is called the HUD gameobject. To this we added a UI panel which will be used as the Game Over panel that will appear when the player (Erwin) dies.

To create the Text gameobject select the added panel in the Unity hierarchy and add the TextMesh Pro gameobject for Unity UI like this:

Create Text Mesh PRO for Unity 5 UI

Set the text style

Now we can add nice styled text to the panel. Select the created TextMesh object and set the font to Bangers. To let the text scale with the panel choose Autosize for the text:

Bangers font and autosize

After that we add two effects for the text: Outline and Glow. You can find these in the shader (TMPro/Distance Field) of the gameobject:

Set outline and glow for TextMesh

For our panel we used a red color with an alpha of 100.

Add the Erwin image

The TextMesh Pro offers the possibility to include sprites into the text with a simple markup. For our Game Over text it would be defined like that:

Text for TextMesh with inline sprite

But how can the text mesh find a sprite with a special index? Very simple: We have to create a Sprite asset.

This is our sprite, just an image with transparent background that we defined as sprite in Unity:

Erwin image as sprite

Select this sprite in the Project Inspector and create a Sprite Asset for it by opening the contextmenu (Create->TextMeshPro – Sprite Asset):

Create TextMesh Pro Sprite Asset

Now we assign this Sprite asset to the Inline Graphic Manager of the Text Mesh:

Assigned sprite asset

That’s it, now our Panel looks like this in the scene view:

TextMesh PRO in Unity 5 Scene

Show Game Over

The last thing we have to do is to show the Game Over screen when the player is dead. Set the Game Over Panel gameobject to inactive as default in the Inspector so that it does not appear when the Player is alive. To let it fade in I wrote a simple method that is called on Player’s death:

private void Death()
{
    _isDead = true;

    // Disable all HUD items like Healthbar...
    CurrentItemPanel.SetActive(false);

    TMPartsPanel.SetActive(false);

    OptionsPanel.SetActive(false);

    HealthPanel.gameObject.SetActive(false);

    // Let Game over appear
    GameOverPanel.gameObject.SetActive(true);

    // But we want to fade it in which is done by a simple animation
    GameOverPanel.GetComponent<Animator>().Play("GameOverShow");
}

As you can see I use an animation to fadein the panel. Normally I use iTween for fading-effects like this, but iTween does not work for Unity UI objects (Would be a nice enhancement BTW). To solve it I play an animation that increases the alpha-value of the panel:

Fade in panel UI

That’s it for this tutorial, if you have any questions feel free to ask me on facebook or G+.