Unity UIElements: primeras impresiones en producción

Hoy compartiremos nuestras impresiones de trabajar con el aclamado framework de Unity - UIToolkit, también conocido como UIElements. Cubriremos sus características principales sin profundizar en el código. Cabe aclarar que el equipo no tenía experiencia previa en el trabajo con maquetación web y las cosas que son obvias para los profesionales en esta área pueden no serlo para nosotros.

Una nota del socio del centro de TI MAI y del organizador del programa de maestría “ VR / AR & AI ” - PHYGITALISM .

Antecedentes

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.