Unity UIElements：本番環境での第一印象

今日は、Unityの評価の高いフレームワークであるUIToolkit（UIElementsとも呼ばれます）を使用した感想を共有します。コードを深く掘り下げることなく、その主な機能について説明します。チームはこれまでWebレイアウトを使用した経験がなく、この分野の専門家には明らかなことは私たちには明らかではない可能性があることを明確にする価値があります。

MAIITセンターのパートナーおよびマスタープログラム「VR / AR＆AI」の主催者からのメモ-PHYGITALISM。

バックグラウンド

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.