Guide [Guide] Creating a new window UI (Unity l2)

[Gawric]

Hello everyone, people often ask me how to help me.

Here I will describe the general principle of how to create a simple window for ui (unity l2)

 

Here I am looking at an already created ActionWindows window

 

1. Assets\Resources\Data\UI\_Elements\Game

2. 

 

Let's call it ActionWindows

3. Let's go to the newly created window

4.as you can see it is empty. But we already have a ready-made window template so that we don’t have to assemble it again every time. We will connect a ready-made design for a new window

5. open the window code

6.

7. Add new code 

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xmlns="UnityEngine.UIElements" editor-extension-mode="False">
    <ui:Template name="DefaultWindowsAction" src="project://database/Assets/Resources/Data/UI/_Elements/Template/DefaultWindowsAction.uxml?fileID=9197481963319205126&amp;guid=2fdd4636702f00a4e98644cfa7468b14&amp;type=3#DefaultWindowsAction" />
    <ui:Instance name="defaultWindowsAction" template="DefaultWindowsAction" style="width: 317px; height: 575px; position: absolute;">
        <AttributeOverrides element-name="windows-name-label" text="Actions" />
        <ui:VisualElement name="Background" class="background_over" style="flex-grow: 1; min-width: auto; min-height: auto; justify-content: flex-start; align-items: flex-start; position: absolute; background-image: resource(&apos;Data/UI/Window/Frame_DF_Large_Bg_Darker_Center_Alpha&apos;); height: 91%; top: 38px; width: 95%; left: 8px; display: flex; visibility: visible; overflow: visible; opacity: 1;" />
        <ui:GroupBox name="BoxHeader" class="drag-area" style="margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; position: absolute; top: 15px; align-self: stretch; height: 4%; width: 88%;" />
     
    </ui:Instance>
</ui:UXML>

 

8.We take a template 
project://database/Assets/Resources/Data/UI/_Elements/Template/DefaultWindowsAction.uxml

9. This piece of code can be taken from other windows so as not to write every time

10. Save

11.Drag the GroupBox node

 

12.

Changing its position settings

 

I can change all the settings from the editor. But if you knew, then a very similar technology to CSS is better

 

if you open the window code you can notice everything is the same as in css
you can create settings in the window code or use a file with all the styles

 

Assets\Resources\Data\UI\_Elements\L2StyleSheet.uss

In the next issue we will write code to connect it to the game logic. Unless of course you delete the article.

 

Edited February 5, 2025 by Gawric