Unity UIElements: premières impressions en production

Aujourd'hui, nous partagerons nos impressions sur le travail avec le framework acclamé d'Unity - UIToolkit, également connu sous le nom de UIElements. Nous allons couvrir ses principales caractéristiques sans plonger profondément dans le code. Il convient de préciser que l'équipe n'avait aucune expérience préalable de travail avec la mise en page Web et que les choses qui sont évidentes pour les professionnels dans ce domaine peuvent ne pas l'être pour nous.

Note du partenaire du centre informatique MAI et de l'organisateur du master « VR / AR & AI » - PHYGITALISME .

Contexte

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.