Unity UIElements: first impressions in production

Today we will share our impressions of working with the acclaimed framework from Unity - UIToolkit, also known as UIElements. We will cover its main features without diving deep into the code. It is worth clarifying that the team had no previous experience of working with web layout and things that are obvious to professionals in this area may not be obvious to us.

A note from the partner of the MAI IT center and the organizer of the “ VR / AR & AI ” master's program - PHYGITALISM .

Background

Unity IMGUI , . , , : , . IMGUI UGUI , . UI (Canvas, Image, Button .). IMGUI, : ( ), , , ..

, UGUI, Unity Asset Store. , DoozyUI , , — Procedural UI Image.

Unity 2019.1 — UIElements ( UIToolkit, ) — Unity. , Editor, Runtime roadmap.

Building UI for games with the new UI Builder — Unite Copenhagen.

HTML/XAML/XML CSS . UIElements : UXML , USS , .. , , . , , , USS ( ).

Building UI for games with the new UI Builder — Unite Copenhagen.

UIElements

: preview . , ?

, , 3D 2D , . , GUI . Unity UGUI Canvas, CanvasGroup, LayoutGroup. , . .

, UIElements.

-, runtime. . runtime Unite 2018 .

-, UI. , UGUI .

-, 2D GUI . UI ? .

-, UI . , , . UGUI , .

, Unity , — , Unity . — UGUI.

UIElements . 2019.4, 2020.1 .

runtime , , . - , , runtime. .

. UIElements UGUI. Unity , , UI , . . , UIElements .

Flexbox , , Unity , . , USS CSS , UIElements. , , , , UIBuilder — . UIElements , UGUI, .. UGUI . . , — . .

best practices . , ? . ? , . ? , , , . : - . , -- best practices , , — . .

UIElements UI, IMGUI , , . , , , UIElements , — UIElements . , , .

, , . UGUI, . . Figma, Unity, . , Figma flexbox, CSS , . USS CSS , , . Unity UIBuilder. UIElements inlined styles, UXML. , . . . , , . , , , UGUI.

, . DOTween Pro , , 2D , DOTween.

2020.1 , DOTween’, c . UIToolkitUnityRoyaleRuntimeDemo:

public void AnimatedScale(float endScale, float tweenDuration)
        {
            experimental.animation
               .Scale(endScale, Mathf.RoundToInt(tweenDuration * 1000))  
               .Ease(Easing.OutQuad);
        }

       public void MoveTo(Vector2 screenPosition)
        {
            transform.position = 
              new Vector3(
                 screenPosition.x, 
                 screenPosition.y, 
                 transform.position.z);
        }

       public void AnimatedMoveTo(Vector2 endPosition, float tweenDuration)
        {
            experimental.animation
                .Position(
                    new Vector3(
                        endPosition.x, 
                        endPosition.y, 
                        transform.position.z),
            Mathf.RoundToInt(tweenDuration * 1000)).Ease(Easing.OutQuad);
        }

Listview UIElements — , . UGUI “ ” , EnhancedScroller, . , .

. , . , EventSystem Event Generation: Read Input ( ) IMGUI Events.

Read Input Listview , .. ProcessMouseEvents() UIElementsEventSystem . IMGUI Events . , . , Unity Technologies.

. -. , CSS , . . VisualElement , UIBuilder. , , inlined , , — . , . , . . UIElements , .

, — , . , , Unity UIElements.

, , Unity. , . Windows WebGL, , . - UIElements . , . , , .

, UIElements , .. , Google, , Unity .

, , ?

Unity Forum.

, UIElements PC , , UIElements. “” , , UGUI.