Style a View
Code and workflows to style the Project title screen with UI Builder

What you'll develop on this page

Functional TitleScreenUI in NavigationScene
How to style the title screen from this Project using UI Builder and have it be mobile-friendly.

Styling Title Screen

This section covers a bit of css (web development). If you are familiar with front-end web development then this probably isn't going to be very helpful. If you are not familiar with css, then there are far better resources online to teach good css styling approaches than this gitbook. We highly recommend that you check out Traversy Media's CSS Crash Course For Absolute Beginners if you are just getting started. We include a bit of styling in this gitbook for completeness, but there are far superior resources.
We will style the TitleScreen in this section by creating and adding selectors to our TitleScreenUI USS, and at the end of this page we will provide code for the final TitleScreenManager, TitleScreen, HostGameScreen, JoinGameScreen, ManualConnectScreen uxmls/cVEs as well as the final TitleScreenUI USS.
We won't show instructions for all the views but after seeing how styling works on 1 screen it should not be difficult to put the pieces together If you have questions on any of the other views reach out on Moetsi Discord.
    Open up the UI Builder and open up the TitleScreenManager uxml
    Currently we have .screen as a selector applied to most parent views
    We want our backgrounds to be white, so we are going to update that selector to be white as well
    Select the .screen selector from StyleSheets and set the background equal to #FFFFFF (white)
Setting .screen background to white and still seeing colored backgrounds
    What gives, why isn't the backgrounds white?!
      We initially set the .screen selector, but then the specific inline backgrounds we gave each of our views overrides the initial selector assignment
    Let's remove all the inline backgrounds for all the views
      TitleScreen
      HostGameScreen
      JoinGameScreen
      ManualConnectScreen
    To do this, for each of the views select the uxml from Project in Library, then select the cVE in Hierarchy, then navigate to Background in Inspector and right-click on the "Color" property and click "unset"
    Make sure to save each screen, then return to TitleScreenManager
Unsetting background color values for all views
    Click "preview" and navigate the screens to make sure all the colors have been updated
Hitting preview and ensuring our colors have been fixed
    Now we are ready to style TitleScreen, open up the uxml
    Delete the 3 buttons
      We will reimplement them later but currently they are in the way
Deleting the 3 buttons from TitleScreen
    The way we are going to separate this view is by "header" and "main content"
    We want the "header" to always be at the top of the view and always be a certain height
    "main content" will be right below the header and be a max width (550 px) and shrink if the resolution is more narrow
      This way we can accommodate narrow views but also not make our buttons and content super wide if we are on desktop
We will be extracting most of our styles to TitleScreenUI USS. This is because a lot of our styles are shared amount screens. Take a look at the flow diagram below to better understand this.
Going through and styling our first view will feel a bit tedious, but once we have our style sheet and components set up it is much simpler to set up other screens. We literally copy and paste Hierarchy components into other views.
Flow of UI to get a feel of how we will be styling components
    Let's get started
    Drag two VisualElements (VEs) into "screen" in the Hierarchy
    Name the top one "header" and the bottom one "main-content"
Adding header and main-content

Styling the header

    First we will style header
      Position
        Position = Absolute
        Top = 0
      Flex
        Grow = 1
        Direction = row
      Align
        Align Items = center
        Justify Content = space between
      Size
        Width = 100%
        Height = 108px
Adding styling to our header
    Now let's extract these styles and make it a new selector called ".header"
      To do this type in ".header" under Style Class List under StyleSheet in Inspector and then click "Extract Inlined Styles to New Class"
Extracting styles into ".header"
    You might have noticed that we did "space between" for the Justify Content
      That will allows us to keep both our logo and Quit button "hugged" to the sides of the screen regardless of its size
    Now within header let's add 2 standard elements
      button
      VisualElement
    Place the VisualElement above the button in the Hierarchy
      The order doesn't really matter, but this order is the format we like to use at Moetsi
Adding VisualElement and button to header
    Name the VisualElement "#moetsi-logo"
      You could name this Visual Element whatever you want, of course. We do not refer to it anywhere by name so the name doesn't matter (we are just describing what we put there)
    Now let's style the moetsi-logo in the Inspector
      Flex
        Grow = 1
      Size
        Width
          Max = 200px
        Height = 68px
      Margin
        Left = 10px
      Scale Mode (in Background) = scale-to-fit
Styling moetsi-logo
    Now import an image you would like to use, in our case we imported our logo
    Drag the image into the Assets/UI folder
moetsi-logo-hq.png
23KB
Image
Moetsi Logo
    In UI Builder go to Background and select the image to set it as the Background
We can also add an SVG
We chose not to include the SVG in the main gitbook flow because the SVG package currently causes some visual artifacts and we think that png is for now still the way to go.
vector
vs.
png
But just in case you'd like to know, these the steps to use a vector file as a Background image:
    Import your SVG into Assets/UI
    Select the SVG and checkout the top of the Inspector
    In the bottom dropdown "Generated Asset Type" select "UI Toolkit Vector Image"
    Click "apply"
    Now in UI Builder you can change the background dropdown from "Texture" to "Vector"
    Select your SVG and you're all set!
Adding the image to moetsi-logo
    Great, now let's extract the selector (by typing .logo into the "Style Class List" field under StyleSheet in the Inspector)
Extracting the inline styles to a new selector ".logo"
    Now let's move onto our quit button
    Select the Button under #header within TitleScreen.uxml in Hierarchy
    Name the button "#quit-button"
    In the Inspector update the styling
      Button
        Text = Quit
      Size
        Width = 120px
        Height = 68px
Naming quit-button, changing text, and styling
    Styling continued
      Margin
        All = 0px (to set to 0)
        Right = 10px
      Padding
        All = 0px
      Text
        Size = 24
        Color = #00000
      Background
        Color = Alpha = 0 (make it see through)
      Border
        Color = #000000
        Width = 3px
        Radius = 10px
Styling quit-button
Finishing styling quit-button
    Not necessary but we will be creating a folder UI/Fonts for Moetsi typography and assigning our button the font
HV.ttf
51KB
Binary
Moetsi text font
Adding fonts and assigning the quit-button text to the added font
    Now let's select quit-button and extract our inline selector
    and name it ".quit-button"
      To do this: select quit-button in Hierarchy, then type ".quit-button" into the Style Class List field under StyleSheet then click "Extract Inlined Styles to New Class"
Extracting our .quit-button inline selector
    Next, in StyleSheets, click into the input field that reads "Add new selector..."
    Type in ".quit-button:hover" and press enter
    Next, type in ".quit-button:active" and press enter
Adding :hover and :active states
    These selectors will change the styling of our button when the user "hovers" or clicks ("active") on the button
    Select .quit-button:hover and configure in the Inspector
      Border
        Color = #000000
        Width = 5px
        Radius = 9px
Updating quit-button hover stylings
    Select .quit-button:active and configure in the Inspector
      Text
        Color = #FFFFFF
      Background
        Color = #000000 (put the alpha to 100%)
    Save and go to the editor, hit play, and interact with the button
Updating quit-button active stylings
    Great we have our header fully styled

Styling main content

    Open UI Builder back up
    Let's first start by adding the items we will be styling in main-content
    Go to Library > Standard tab and drag these into main-content as children:
      Label (name = "title")
      VisualElement (name = "join-local-title")
      VisualElement (name = "joining-local-game-view")
      Button (name = "manual-connect")
      Label (name = "or")
      Button (name = "host-local-game")
Adding our children elements to main-content
    Currently main-content is overlapping the header because the header is positioned absolute, so let's style main-content:
      Position
        Position = Absolute
        Top = 108
      Align
        Align Items = center
      Size
        Width = 100% (find the % by clicking the button to the right of the text field)
          Width Max = 550px
      Margin & Padding
        Padding
          Left = 20
          Right = 20
main-content styled
    Extract the inline styles to make a new selector .main-content
    Next, let's style #title (within #main-content)
      Label
        Text = 3D XR Asteroids
      Margin & Padding
        Top = 100px
      Font
        Font = (change if you like)
        Size = 64
Cervo.otf
133KB
Binary
Moetsi title font
Styled title
    Extract the inline styles and make selector ".title"
    Next, let's style #join-local-title
      Size
        Width = 100% (find the % by clicking the button to the right of the text field)
      Margin & Padding
        Top = 100px
join-local-title styled
    Extract the inline styles to make a new selector .section-title-container
    Drag a label into join-local-title and name it "#join-a-local-game"
      Label
        Text = Join A Local Game
      Margin & Padding
        Padding = 0px (all)
      Font
        Size = 36
join-a-local-game styled
    Extract the inline styles to make a new selector .section-title
    If you run into issues with the canvas (like in the image above) expand the size of the canvas in the TitleScreen uxml
    Next, let's style the joining-local-game-view
      Change the name to "local-games-list-container" in the Name field in Inspector
      Align
        Align Items = center
        Justify Content = center
      Size
        Width = 100%
        Height = 200px
      Border
        Color = #000000
        Width = 5px
        Radius = 10px
local-games-list-container styled
    Drag a standard ListView element into local-games-list-container (we will make this functional in the next section "Creating a List")
      ListView
        Name = local-games-list
        Item Height = 100
        Size
          Width = 100%
          Height = 100%
local-games-list styled
    Now let's style manual-connect
      First, add a Button
        Text = Connect to a Local Game
      Now back to manual-connect:
      Flex
        Wrap = wrap
      Size
        Width = 100%
        Height = 68px
      Margin & Padding
        Margin
          All = 0px (to clear out)
          Top = 21px
        Padding = 0px (all)
      Font
        Size =24
        Color = #96BFD0
        Wrap = normal
      Background
        Color = 0 Alpha (see through)
      Border
        Color = #96BFD0
        Width = 5px
        Radius = 10px
manual-connect styled
    Extract the inline styling and make a new selector named ".blue-button"
    Now go back to StyleSheets and add 2 new selectors by typing in the below into the "Add new selector..." field (press enter between each selector):
      .blue-button:hover
      .blue-button:active
    Click on .blue-button:hover to style it:
      Border
        Width = 7px (all)
        Radius = 9px (all)
blue-button:hover styled
    Now style .blue-button:active like so:
      Text
        Color = #FFFFFF
      Background
        Color = #96BFD0
blue-button:active styled
    Next, let's style "or" (within #manual-connect in Hierarchy)
      Label
        Text = Or
      Margin & Padding
        Margin
          Top = 20px
        Padding = 0px (all)
      Text
        Size = 36
    Next, let's style #host-local-game:
      Button
        Text = Host A Local Game
      Flex
        Wrap = wrap
      Size
        Width = 100%
        Height = 120px
      Margin & Padding
        Margin
          All = 0 px (to reset)
          Top = 36px
        Padding = 0px (all)
      Text
        Size = 36
        Color = #A0C272
      Background
        Color = 0 alpha (see through)
      Border
        Color = #A0C272
        Width = 5px
        Radius = 10px
host-local-game styled
    Extract the inline styles into a new selector .green-button
    Go to StyleSheets and add 2 new selectors (by typing in the name below into "Add new selector..." and hitting enter)
      .green-button:hover
      .green-button:active
    .green-button:hover
      Border
        Width = 7px
        Radius = 9px
.green-button:hover styled
    .green-button:active
      Font
        Color = #FFFFFF
      Background
        Color = #A0C272
.green-button-active styled
    Now update the #screen Visual Element (not the selector)
      Align
        Align Items = center
        No pic here, we believe in you 💪
    Play around with the size of the canvas to see how the different elements resize for different screen sizes
    Navigate to the editor, hit play, and hover and click on the buttons
Hitting Play in Editor and reviewing TitleScreen
We now have our styled TitleScreen uxml
    We added Visual Elements
    We styled the Visual Elements and made selectors from the inline styles
    For the buttons we made additional selectors for hover and active states

All the code you need for the uxml and USS in this project

In terms of learning new things, there isn't much to gain by styling even more screens together here in this section. Instead, we provide you with the code snippets to paste into your uxml and cVE files and the TitleScreenUI USS below.
You will notice that the first child in the updated uxmls for TitleScreen, HostGameScreen, JoinGameScreen, and ManualConnectScreen is a "ScrollView" Visual Element. This Visual Element exists because Unity does not currently support "overflow" (where the view automatically becomes scrollable if the contents of the UI are too big for a display). The implication of not supporting overflow is that small screen sizes "cut off" UI. So to account for all screen sizes and avoid this, we wrap all of our views in a ScrollView so that if your resolution is too small to fit all UI content, we will be able to scroll to navigate it all.
Why add ScrollView now, so late in the section? That's because having ScrollView in the Hierarchy makes it a little harder to navigate the Hierarchy in UI Builder, so that's why we do the ScrollView wrap step last.
    Paste the code snippet below into your TitleScreenUI.uss file:
1
.screen {
2
flex-grow: 1;
3
font-size: 20px;
4
align-items: stretch;
5
background-color: rgb(255, 255, 255);
6
}
7
8
.quit-button {
9
margin-right: 10px;
10
margin-left: 0;
11
width: 120px;
12
height: 68px;
13
font-size: 24px;
14
color: rgb(0, 0, 0);
15
background-color: rgba(0, 0, 0, 0);
16
border-left-color: rgb(0, 0, 0);
17
border-right-color: rgb(0, 0, 0);
18
border-top-color: rgb(0, 0, 0);
19
border-bottom-color: rgb(0, 0, 0);
20
border-top-left-radius: 10px;
21
border-bottom-left-radius: 10px;
22
border-top-right-radius: 10px;
23
border-bottom-right-radius: 10px;
24
border-left-width: 3px;
25
border-right-width: 3px;
26
border-top-width: 3px;
27
border-bottom-width: 3px;
28
}
29
30
.quit-button:hover {
31
background-color: rgba(0, 0, 0, 0);
32
border-top-left-radius: 9px;
33
border-bottom-left-radius: 9px;
34
border-top-right-radius: 9px;
35
border-bottom-right-radius: 9px;
36
border-left-width: 5px;
37
border-right-width: 5px;
38
border-top-width: 5px;
39
border-bottom-width: 5px;
40
}
41
42
.quit-button:active {
43
background-color: rgb(0, 0, 0);
44
color: rgb(255, 255, 255);
45
}
46
47
.main-menu-button {
48
width: 219px;
49
margin-left: 10px;
50
margin-right: 0;
51
margin-top: 0;
52
margin-bottom: 0;
53
}
54
55
.header {
56
height: 108px;
57
position: absolute;
58
flex-direction: row;
59
justify-content: space-between;
60
flex-grow: 1;
61
top: 0;
62
width: 100%;
63
align-items: center;
64
}
65
66
.main-content {
67
position: absolute;
68
top: 108px;
69
left: auto;
70
right: auto;
71
bottom: auto;
72
max-width: 550px;
73
width: 100%;
74
height: auto;
75
align-items: center;
76
padding-left: 20px;
77
padding-right: 20px;
78
-unity-font: url('/Assets/UI/Fonts/HV.ttf');
79
color: rgb(0, 0, 0);
80
}
81
82
.title {
83
font-size: 64px;
84
margin-top: 100px;
85
-unity-font: url('/Assets/UI/Fonts/Cervo.otf');
86
color: rgb(0, 0, 0);
87
}
88
89
.section-title-container {
90
width: 100%;
91
margin-top: 100px;
92
}
93
94
.section-title {
95
padding-left: 0;
96
padding-right: 0;
97
padding-top: 0;
98
padding-bottom: 0;
99
font-size: 36px;
100
color: rgb(0, 0, 0);
101
}
102
103
.blue-button {
104
width: 100%;
105
padding-left: 0;
106
padding-right: 0;
107
padding-top: 0;
108
padding-bottom: 0;
109
margin-left: 0;
110
margin-right: 0;
111
margin-top: 21px;
112
margin-bottom: 0;
113
border-left-width: 5px;
114
border-right-width: 5px;
115
border-top-width: 5px;
116
border-bottom-width: 5px;
117
border-top-left-radius: 10px;
118
border-bottom-left-radius: 10px;
119
border-top-right-radius: 10px;
120
border-bottom-right-radius: 10px;
121
height: 68px;
122
border-left-color: rgb(150, 191, 208);
123
border-right-color: rgb(150, 191, 208);
124
border-top-color: rgb(150, 191, 208);
125
border-bottom-color: rgb(150, 191, 208);
126
background-color: rgba(0, 0, 0, 0);
127
font-size: 24px;
128
color: rgb(150, 191, 208);
129
flex-wrap: wrap;
130
white-space: normal;
131
}
132
133
.blue-button:hover {
134
border-left-width: 7px;
135
border-right-width: 7px;
136
border-top-width: 7px;
137
border-bottom-width: 7px;
138
background-color: rgba(0, 0, 0, 0);
139
border-top-left-radius: 9px;
140
border-bottom-left-radius: 9px;
141
border-top-right-radius: 9px;
142
border-bottom-right-radius: 9px;
143
}
144
145
.blue-button:active {
146
background-color: rgb(150, 191, 208);
147
color: rgb(255, 255, 255);
148
}
149
150
.green-button {
151
left: auto;
152
right: auto;
153
margin-left: 0;
154
margin-right: 0;
155
margin-top: 36px;
156
margin-bottom: 0;
157
padding-left: 0;
158
padding-right: 0;
159
padding-top: 0;
160
padding-bottom: 0;
161
width: 100%;
162
height: 120px;
163
color: rgb(160, 194, 114);
164
font-size: 36px;
165
background-color: rgba(0, 0, 0, 0);
166
border-left-color: rgb(160, 194, 114);
167
border-right-color: rgb(160, 194, 114);
168
border-top-color: rgb(160, 194, 114);
169
border-bottom-color: rgb(160, 194, 114);
170
border-left-width: 5px;
171
border-right-width: 5px;
172
border-top-width: 5px;
173
border-bottom-width: 5px;
174
border-top-left-radius: 10px;
175
border-bottom-left-radius: 10px;
176
border-top-right-radius: 10px;
177
border-bottom-right-radius: 10px;
178
flex-wrap: wrap;
179
white-space: normal;
180
}
181
182
.green-button:hover {
183
border-top-left-radius: 9px;
184
border-bottom-left-radius: 9px;
185
border-top-right-radius: 9px;
186
border-bottom-right-radius: 9px;
187
border-left-width: 7px;
188
border-right-width: 7px;
189
border-top-width: 7px;
190
border-bottom-width: 7px;
191
background-color: rgba(0, 0, 0, 0);
192
}
193
194
.green-button:active {
195
background-color: rgb(160, 194, 114);
196
color: rgb(255, 255, 255);
197
}
198
199
.data-section {
200
width: 100%;
201
background-color: rgb(255, 255, 255);
202
}
203
204
.data-section-input {
205
flex-direction: column-reverse;
206
height: 49px;
207
margin-left: 0;
208
margin-right: 0;
209
margin-top: 36px;
210
margin-bottom: 0;
211
font-size: 36px;
212
color: rgb(160, 194, 114);
213
border-bottom-width: 4px;
214
border-bottom-color: rgb(160, 194, 114);
215
border-top-color: rgb(160, 194, 114);
216
border-left-color: rgb(160, 194, 114);
217
border-right-color: rgb(160, 194, 114);
218
width: auto;
219
background-color: rgba(0, 0, 0, 0);
220
}
221
222
.data-section-label {
223
padding-left: 0;
224
padding-right: 0;
225
padding-top: 0;
226
padding-bottom: 0;
227
color: rgb(160, 194, 114);
228
}
229
230
.unity-base-field {
231
}
232
233
.screen-scroll-container {
234
flex-grow: 1;
235
background-color: rgb(255, 255, 255);
236
}
237
238
.quit-game-button {
239
flex-direction: column-reverse;
240
padding-left: 0;
241
padding-right: 0;
242
padding-top: 0;
243
padding-bottom: 0;
244
margin-left: 10px;
245
margin-right: 0;
246
margin-top: 0;
247
margin-bottom: 0;
248
background-color: rgba(0, 0, 0, 0);
249
border-left-width: 3px;
250
border-right-width: 3px;
251
border-top-width: 3px;
252
border-bottom-width: 3px;
253
border-top-left-radius: 10px;
254
border-bottom-left-radius: 10px;
255
border-top-right-radius: 10px;
256
border-bottom-right-radius: 10px;
257
width: 219px;
258
height: 68px;
259
border-left-color: rgb(255, 255, 255);
260
border-right-color: rgb(255, 255, 255);
261
border-top-color: rgb(255, 255, 255);
262
border-bottom-color: rgb(255, 255, 255);
263
font-size: 24px;
264
color: rgb(255, 255, 255);
265
white-space: normal;
266
}
267
268
.quit-game-button:hover {
269
border-top-left-radius: 9px;
270
border-bottom-left-radius: 9px;
271
border-top-right-radius: 9px;
272
border-bottom-right-radius: 9px;
273
border-left-width: 5px;
274
border-right-width: 5px;
275
border-top-width: 5px;
276
border-bottom-width: 5px;
277
}
278
279
.quit-game-button:active {
280
background-color: rgb(255, 255, 255);
281
color: rgb(0, 0, 0);
282
}
283
284
.logo {
285
flex-grow: 1;
286
max-width: 200px;
287
height: 68px;
288
margin-left: 10px;
289
background-image: url('/Assets/UI/Moetsi-logo-hq.png');
290
-unity-background-scale-mode: scale-to-fit;
291
}
292
293
.local-games-list-container {
294
align-items: center;
295
justify-content: center;
296
width: 100%;
297
height: 200px;
298
border-left-width: 5px;
299
border-right-width: 5px;
300
border-top-width: 5px;
301
border-bottom-width: 5px;
302
border-top-left-radius: 10px;
303
border-bottom-left-radius: 10px;
304
border-top-right-radius: 10px;
305
border-bottom-right-radius: 10px;
306
border-left-color: rgb(0, 0, 0);
307
border-right-color: rgb(0, 0, 0);
308
border-top-color: rgb(0, 0, 0);
309
border-bottom-color: rgb(0, 0, 0);
310
}
311
312
.local-games-list {
313
width: 100%;
314
height: 100%;
315
}
316
317
.or {
318
color: rgb(0, 0, 0);
319
margin-top: 20px;
320
padding-left: 0;
321
padding-right: 0;
322
padding-top: 0;
323
padding-bottom: 0;
324
font-size: 36px;
325
}
326
327
.HostGameScreen {
328
align-items: center;
329
}
330
331
.JoinGameScreen {
332
align-items: center;
333
}
334
335
.ManualConnectScreen {
336
align-items: center;
337
}
Copied!
    Paste the code snippet below into your TitleScreenManager.uxml file:
1
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
2
<ui:Template name="TitleScreen" src="TitleScreen.uxml" />
3
<ui:Template name="HostGameScreen" src="HostGameScreen.uxml" />
4
<ui:Template name="JoinGameScreen" src="JoinGameScreen.uxml" />
5
<ui:Template name="ManualConnectScreen" src="ManualConnectScreen.uxml" />
6
<Style src="TitleScreenUI.uss" />
7
<TitleScreenManager name="TitleScreenManager" class="screen" style="left: auto; top: auto; position: relative; right: auto; bottom: auto;">
8
<ui:Instance template="TitleScreen" name="TitleScreen" class="screen" />
9
<ui:Instance template="HostGameScreen" name="HostGameScreen" class="screen" style="display: none;" />
10
<ui:Instance template="JoinGameScreen" name="JoinGameScreen" class="screen" style="display: none;" />
11
<ui:Instance template="ManualConnectScreen" name="ManualConnectScreen" class="screen" style="display: none;" />
12
</TitleScreenManager>
13
</ui:UXML>
14
Copied!
    Paste the code snippet below into your TitleScreenManager.cs (cVE) file:
1
using System.Collections;
2
using System.Collections.Generic;
3
using UnityEngine;
4
using UnityEngine.UIElements;
5
6
public class TitleScreenManager : VisualElement
7
{
8
VisualElement m_TitleScreen;
9
VisualElement m_HostScreen;
10
VisualElement m_JoinScreen;
11
VisualElement m_ManualConnectScreen;
12
13
public new class UxmlFactory : UxmlFactory<TitleScreenManager, UxmlTraits> { }
14
15
public TitleScreenManager()
16
{
17
this.RegisterCallback<GeometryChangedEvent>(OnGeometryChange);
18
}
19
20
void OnGeometryChange(GeometryChangedEvent evt)
21
{
22
m_TitleScreen = this.Q("TitleScreen");
23
m_HostScreen = this.Q("HostGameScreen");
24
m_JoinScreen = this.Q("JoinGameScreen");
25
m_ManualConnectScreen = this.Q("ManualConnectScreen");
26
27
m_TitleScreen?.Q("host-local-game")?.RegisterCallback<ClickEvent>(ev => EnableHostScreen());
28
m_TitleScreen?.Q("join-local-game")?.RegisterCallback<ClickEvent>(ev => EnableJoinScreen());
29
m_TitleScreen?.Q("manual-connect")?.RegisterCallback<ClickEvent>(ev => EnableManualScreen());
30
31
m_HostScreen?.Q("back-button")?.RegisterCallback<ClickEvent>(ev => EnableTitleScreen());
32
m_JoinScreen?.Q("back-button")?.RegisterCallback<ClickEvent>(ev => EnableTitleScreen());
33
m_ManualConnectScreen?.Q("back-button")?.RegisterCallback<ClickEvent>(ev => EnableTitleScreen());
34
35
this.UnregisterCallback<GeometryChangedEvent>(OnGeometryChange);
36
}
37
38
public void EnableHostScreen()
39
{
40
m_TitleScreen.style.display = DisplayStyle.None;
41
m_HostScreen.style.display = DisplayStyle.Flex;
42
m_JoinScreen.style.display = DisplayStyle.None;
43
m_ManualConnectScreen.style.display = DisplayStyle.None;
44
45
}
46
47
public void EnableJoinScreen()
48
{
49
Debug.Log("Enable join screen trigger");
50
m_TitleScreen.style.display = DisplayStyle.None;
51
m_HostScreen.style.display = DisplayStyle.None;
52