In this tutorial we’ll set up the UI system and some UI prefabs for our inputs (buttons, etc.).
The UI setup will be split into multiple tutorials to keep them short and focused on certain topics. We’ll start with the initial UI system setup in this tutorial, afterwards set up UI boxes and finally set up flying texts. At a later time we’ll also add a battle HUD to show information of our player.
For now we’ll set up:
- UI system in the editor
- TextMesh Pro in Unity
- UI environment scene (for prefab editing)
- some input prefabs
- UI layers
- UI animation schematics
For more details on the initial UI system setup, check out this tutorial.
Let’s get to it!
Initial UI System Setup #
This is usually one of the first things you do in a new project – please follow the initial setup tutoral for Unity UI.
TextMesh Pro Default Font/Sprite #
The tutorial assets include a font and sprites to use, but we’ll need to let TMP know about it and set it up as our default font and sprites.
Select the TMP Settings asset, which should be located in Assets/TextMesh Pro/Resources/. You can change TMP’s settings in the inspector.
- Defaul Font Asset
Select: FFFFORWA SDF
The default font will be used by newly created TMP components as their font. - Defaul Sprite Asset
Select: icons
UI Layers #
UI layers are used to order your UI content (e.g. UI boxes and HUDs), a higher layer (in the list) will display it’s content above a lower layer.
A new project comes with 3 layers set up:
- Flying Texts
- Layer 1
- Screen Fader
The Flying Texts layer is set up to display flying texts (e.g. for damage numbers, etc., we’ll set them up later). The Screen Fader layer is set up to handle fading the screen (e.g. fading to black on scene changes).
Navigate to UI > UI Layers, we’ll add 2 new layers, one to display menu backgrounds and one to display HUDs.
Background Layer #
Move the new layer between Flying Texts and Layer 1 (i.e. it should have the ID/index 1).
- Name
Set to: Background
HUD Layer #
Move the new layer between Layer 1 and Screen Fader (i.e. it should have the ID/index 3).
- Name
Set to: HUD
Save Changes #
And that’s it for the settings.
Save the changes using the Save Settings button at the bottom of the editor.
UI Animation Schematics #
We’ll use schematics to animate opening and closing our UI boxes and HUDs.
Follow the UI animation schematics tutorial and set up at least the fade in and fade out schematics.
Next, we’ll set up the UI boxes.