In this tutorial we’ll go through the initial setup for using the Unity UI system.
Change the UI System #
First, you need to change the used UI system of your ORK project. Learn more about UI systems in this documentation.
Open the ORK editor and navigate to UI > UI Settings.
UI System Settings #
- UI System Type
Select: Unity UI - Default Screen Size
Set up the screen size you want to use, or rather, you design your UI for.
This is e.g. used when creating a canvas for setting up UI prefabs or in-game (when the UI layers don’t use their own custom canvas prefabs).
The default is: X=1920, Y=1080
Save the changes using the Save Settings button at the bottom of the editor. Please note that changing the UI system will also impact other settings that use UI settings.
TextMesh Pro Setup #
If you haven’t done so, import the TMP Essential Assets into your Unity project.
You can import them via the Unity menu: Window > TextMeshPro > Import TMP Essential Resources
Depending on your Unity/TMP version this might also be located somewhere else.
TMP Settings #
If you want to change the default font or icon sprites used by TMP, you can find the TMP settings in Assets/TextMesh Pro/Resources/.
Creating Own Fonts and Icons #
TMP uses special font and icon assets – you can create them easily from regular fonts and sprites (usually using spritesheets) via the context menu in the project hierarchy tab.
TMP Font Asset #
To create a TMP font asset from a font in your project, right-click on the font and select: Create > TextMeshPro > Font Asset
TMP Sprite Asset #
Similar, to create a TMP sprite asset from a sprite in your project, right click on the sprite and select: Create > TextMeshPro > Sprite Asset
You might need to adjust the positioning of your sprites, this is best handled via the Sprite Glyph Table settings of the TMP sprite asset. Adjusting the OX and OY settings will change all included sprites.
Location #
When not used as default font/icons, the TMP font/sprite assets need to be placed in defined sub-folders of a Resources folder.
Those folders are defined in the TMP Settings asset and default to Fonts & Materials (for fonts) and Sprite Assets (for sprites).
UI Enviroment Scene #
When editing UI prefabs, Unity will use a canvas that is most likely not matching the canvas used in your game. This can lead to your prefab’s position and size not matching the in-game’s position and size.
To solve this issue, set up a UI Environment scene with a correctly set up canvas matching your Default Screen Size set up in ORK’s UI settings.
Creating the scene #
After setting your Default Screen Size (or after changing it), create a new scene using the Unity menu (File > New Scene) and create an empty scene.
Use the scene hierarchy’s context menu to create a canvas with the correct setup: ORK Framework > UI > Canvas
Or use the ORK toolbar, search for Canvas.
This’ll create a Canvas with the same set up as it’d be in the running game (when not using a canvas prefab), i.e. it’ll use a Canvas Scaler to scale content to different resolutions and aspect ratios.
Save the scene somewhere in your project, e.g. as UI Environment Scene.
Setting up the UI Environment scene #
Use the Unity menu to open the project settings: Edit > Project Settings…
Select the Editor tab and change the following setting.
- UI Environment
Select: UI Environment Scene
Close the project settings.
Now, when editing a UI prefab, e.g. a UI box or an input prefab, they’ll use this scene and it’s canvas, making sure that their placement and size remains correct.
Default Input Prefabs #
Next, we’ll create the default input prefabs (i.e. buttons, toggles, etc.).
The default input prefabs are used as fallbacks, in case no other UI prefab is defined for an input (e.g. by a UI box or the content definition of a dialogue or menu). When inputs are displayed in a UI box, they’re created from prefabs to define how they look or interact – the content is coming from whatever is displaying the UI box.
Creating the Prefabs #
With the UI Environment Scene open, use the scene hierarchy’s context menu (ORK Framework > UI Box > Create Default Inputs) or ORK toolbar (search for: Create Default Inputs).
This’ll create one of each input and parent them to the canvas. All that’s left to do is create the prefabs out of them by dragging them into a folder in Unity’s project hierarchy.
E.g. I’ll save my input prefabs here: Assets/UI/Inputs/
You can select all inputs in the scene hierarchy and drag them into the folder, this’ll create individual prefabs for each input.
Using the Prefabs #
Open the ORK editor and navigate to UI > UI Settings in the editor and change the following settings.
UI System Settings > Default UI Prefabs #
- Button Prefab
Select: Choice Info Button
For ORK, it’s recommended to use a Choice Info Button variant, as you often want to display additional content (e.g. item quantity, use costs, etc.).
If no additional content is displayed, it’ll simply not be displayed in the button. - Tab Button Prefab
Select: Tab Button - Bool Input Prefab
Select: Toggle - String Input Prefab
Select: Text Input - Int Input Prefab
Select: Int Slider - Float Input Prefab
Select: Float Slider - Dropdown Input Prefab
Select: Dropdown Input
Save the changes using the Save Settings button at the bottom of the editor.