User interface design and implementation in unity

Contents
Introduction 6
Contributors 8
UI and game design 9
Crafting immersive experiences 10
The fourth wall 12
UI design patterns 14
UI development and implementation 16
Wireframing 18
UI art creation 20
Moodboard 20
UI mockups and fonts 21
UI style guide 24
UI asset preparation 25
UI implementation work 26
Functional grey-boxing 26
Placeholder assets 27
Asset import 27
Setting up the UI in-engine 28
UI and input controls 29
Playtesting the UI 29
Marketing and live content UI 30
Asset preparation 31
Target screen resolution 32
Sprite resolution in Unity 33

Unity units 33
2D camera and sprite sizes 34
Exporting graphics from DCC tools 36
Exporting from Adobe Photoshop 37
Exporting from Adobe Illustrator 40
Exporting from Affinity Photo or Affinity Designer 40
Exporting from Krita 43
Sprite Editor and settings 44
Sprite settings 45
Sprite Renderer vs Canvas Renderer 47
Faster workflows with PSD Importer 48
Sprite Atlas 50
Variant Sprite Atlas 52
Unity UI 53
Designing with Unity UI 54
The building block: Canvas 54
Layout and prebuilt UI elements 57
Auto Layout system 59
Canvas Scaler 59
Constant Pixel Size 60
Constant Physical Size 60
Scale with Screen Size 61
Customizing visuals with the Image component 62
Text with TextMesh Pro 64
Reusable UI elements: Prefabs 65
Creating and editing Prefabs 65
Nested Prefabs 67
Prefab Variants 67

Animation integration 67
Grey-boxing with Unity UI 68
Unity Events 68
UI Toolkit: Introduction and Flexbox Layout 72
UI Toolkit workflow 74
Flexbox basics 75
Visual elements 76
Positioning visual elements 78
Size settings 80
Flex settings 80
Align settings 83
Margin and Padding settings 83
Background and images 84
Variable or fixed measuring units 85
More resources 86
UI Toolkit: Styling 87
UI Builder 88
Canvas background 89
Viewport settings 90
USS Selectors 90
Overriding styles 94
Naming conventions 96
Animation and effects 98
Transition Animations 98
Camera Render Texture 100
Themes 102
More resources 103

Fonts in Unity 104
Source font file 105
Font asset settings 107
Rich Text 109
Text Style Sheets 110
Font Asset Variant 111
Sprite Asset 111
Color gradient 113
Exploring the UI Toolkit sample project 114
The menu bar 118
The home screen 119
The character screen 119
The inventory 120
The shop screen 121
The mail screen 122
The settings screen 123
The main menu 123
The game screen 125
Reference 126
Custom UI elements 128
USS transitions 129
What’s next for UI Toolkit 132
Game consulting services 132
More resources 132
Timberborn: Made with UI Toolkit 133
Migrating from Unity UI to UI Toolkit 135
Coding and using UI Builder together 136