🤡UI - USS

Almost every Interface shown in the DemoScene is made with Unity UI Toolkit Package

UI Toolkit Version 1.0.0-preview.18 - October 07, 2021

Due to certain limitations for UI design we scripted our way through, but you can use the default ones if you do not require complex UI designs.

Current Default Containers and Controls for UI from UI Builder

The used UI workflow is represented as follow to create custom Controls

(But you can use the structure you want)

• Create a UI Document as it will create a UXML document where you can test your windows.

• Create a C# Script (as LoginPanelWindow) that should inherit from VisualElement this script will hold all the UIElements that you require, Images, Buttons, TextFields, etc.

• Create a C# Script (as LoginPanelSetup) that contains the reference to the UIDocument as well as the C# Script you created before and Initialize everything, this is the script where you define behaviours and is attached to a GameObject that will be inside the Canvas hierarchy.

• You can instantiate or use OnEnable OnDisable functions to control UI flow.

• You can make use of Actions to asign functions to buttons or OnChange events to default Controls such as Dropdowns or InputFields.

USS files

Uss files define the style of our previous made Custom Windows (or default ones).

Here we created a different uss file for each custom VisualElement to separate contexts but you can have all in one.

• You can use the VisualElement name as Label, Button, Textfield to add styles.

• You can create custom element names added previously on your C# Window Script as .back_to_login_container.

• You can use inner Unity UI Elements name system as .unity-toggle__checkmark.

• Also you can concatenate styles with a coma ' , '.

• If your .uss is already referenced every change you make it will be automatically displayed in your UI, so there is no need to stop playing the game that means all you UI can be dynamic.

.uss Example

Label{
	font-size: 26px;
}
.back_to_login_container{
	flex-direction: column;
	margin-top: 40px;
	margin-left: 80px;
}
.header_container{
	background-color: rgba(71, 16, 106,0.90);
	border-radius: 16px;
	margin: 30px, 0px, 40px, 40px;
	width: 1600px;
	flex-direction: row;
	padding: 40px;
}
.avatar_scroll_container, .unity-scroll-view__content-viewport{
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: space-between;
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
}
.pagination_container{
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
	margin-top: 20px;
}

ScrollView{
	background-color: rgba(59, 38, 93,0.35);
	flex-direction: row;
	display: flex;
	flex-wrap: wrap;
}
.unity-toggle__checkmark{
	width: 20px;
	height: 20px;
}

Check all the properties that supports USS here: https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html

Last notes:

Make sure you use UI Toolkit Debugger as it is a good tool to Debug your UI styles, hierarchy and behaviour, the best way to use it is by picking the element manually just clicking your UI.

You can access it through Window -> UI Toolkit -> Debugger

UI Toolkit Debugger