Unity-UI 시스템-IMGUI, UI Toolkit,Unity UI(UGUI)

유니티에서 제공하는 UI는 3가지 형태로 구현할 수 있다.

-IMGUI(Immediate Made GUI)

-UI Toolkit

-Unity UI(UGUI)

 

IMGU(Immediate Made GUI)

-코드를 이용해 UI를 표시. 개발과정에서 간단한 테스트용으로 사용.

-OnGUI 함수(event함수)에서 코드를 구현

이벤트 함수 OnGUI

UI Toolkit

-UI Toolkit 사용 예

https://www.youtube.com/watch?v=iqZ44OOIh3Q&list=PLTFRwWXfOIYC7oFoG2wbGjoumhwOsBgci&index=4 

https://docs.unity3d.com/kr/2021.2/Manual/UIE-HowTo-CreateCustomInspector.html

커스텀 인스펙터 생성 - Unity 매뉴얼

시각적 요소: UI 툴킷의 가장 기본적인 빌딩 블록(좌: 트리의 예/ 우: 랜더링 결과)

-VisualElement 클래스가 시각적 트리의 모든 노드에 대한 기반이다.(https://docs.unity3d.com/ScriptReference/UIElements.VisualElement.html)

VisualElement는 컨트롤과 같은 추가 동작 및 기능을 정의하는 서브 클래스로 파생된다.

 

패널은 시각적 트리의 부모 오브젝트인데, 에디터 창 혹은 런타임 UI Document를 말한다.

따라서 트리 내부의 요소가 랜더링 되려면 패널에 연결되어있어야 한다.

(UIDocument: 랜더링해줌https://docs.unity3d.com/ScriptReference/UIElements.UIDocument.html )

 

이 시각적 요소들은 트리에서 DFS 검색을 한다. 이 요소들의 드로잉 순서를 변경하려면 다음과 같은 함수들을 사용한다.

-BringToFront(), SendToBack(), PlaceBehind(),PlaceInFront()

 

UI Toolkit의 좌표 및 포지션 시스템

-Flexbox기반(HTML/CSS을 구현하는 Yoga의 레이아웃 원칙)의 레이아웃 시스템을 사용한다.

-상대(Relative) 좌표 : 요소에 계산된 포지션을 기준으로 하는 좌표 => 자식 요소가 부모 요소의 포지션에 영향을 준다.

-절대(Absolute) 좌표: 부모 요소를 기준으로 하는 좌표

-요소의 원점은 왼쪽 상단 코너이다.

 

Assets>Scripts>Editor라는 예약 폴더를 생성하고 PositioningTestWindow.cs를 작성해보았다.

MenuItem으로 메뉴바에 아이템 생성

-static으로 작성해야 한다.

-GUIContent는 생성자

GetWindow로 윈도우 생성

이벤트 함수 CreateGUI

-Element생성

메서드 수정

결과

코드 수정해 Relative Pos 확인

코드 수정 후 Absolute 확인

-null이면 relative다?

-relative.stype.position의 값이 StyleENum<T> 타입인데 struct이다. struct는 구조체니까 값형식인데 왜 null?

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEngine.UIElements;

public class PositioningTestWindow : EditorWindow
{
    [MenuItem("Window/UI Toolkit/Positioning Test Window")]
    public static void ShowExample()
    {
        var wnd = GetWindow<PositioningTestWindow>();
        wnd.titleContent = new GUIContent("Positioning Test Window");
    }

    public void CreateGUI()
    {
        Debug.LogFormat("rootVisualElemnt: {0}", rootVisualElement);
        for (int i = 0; i < 2; i++)//Element 생성
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            rootVisualElement.Add(temp);
        }


        // Relative positioning
        var relative = new Label("Relative\nPos\n25, 0");
        relative.style.width = 70;
        relative.style.height = 70;
        relative.style.left = 25;
        relative.style.marginBottom = 2;
        relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
        rootVisualElement.Add(relative);
        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            rootVisualElement.Add(temp);
        }

        // Absolute positioning
        var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
        absolutePositionElement.style.position = Position.Absolute;
        absolutePositionElement.style.top = 25;
        absolutePositionElement.style.left = 25;
        absolutePositionElement.style.width = 70;
        absolutePositionElement.style.height = 70;
        absolutePositionElement.style.backgroundColor = Color.black;
        rootVisualElement.Add(absolutePositionElement);
    
}
}

Unity UI(UGUI)

 

Canvas

-Canvas 객체는 Canvas 컴포넌트를 포함하는 게임오브젝트이다. 그러나 Transform 대신 Rect Transform 컴포넌트를 가진다. 캔버스 객체는 한 씬에서 여러개 생성, 다른 캔버스 객체의 하위로 차일드화도 할 수 있다.

-캔버스 객체를 생성하면 EventSystem 객체도 자동으로 생성된다

=> 이벤트 시스템 객체는 시스템에서 발생하는 키보드, 조이스틱, 스크린 터치 등의 입력정보를 UI항목에 전달하는 역할

-Canvas 컴포넌트는 UI 항목을 화면에 배치하고 랜더링 하는 역할을 한다.

-Render Mode 옵션은 다음과 같다.

Screen Space - Overlay: 화면의 해상도에 맞춰 자동으로 스케일이 조절된다.

Screen Space - Camera: 별도의 카메라를 사용해 UI를 랜더링한다. Render Camera에 카메라를 설정해주어야한다.

World Space - 캔버스의 물리적인 위치를 이동할 수 있다.

Screen Space - Camera 설정

-보통 UI Camera의 depth는 메인카메라보다 높게 설정한다.

 

앵커 프리셋

Panel의 앵커 프리셋

-Alt+Shift로 조절

-Device simulator로 확인

-Anchors의 Min,Max

Sprite Enditor

-Image컴포넌트는 Sprite타입으로 변환된 텍스처만 SourceImage에 넣을 수 있다.

 

Tiled

-Image Type을 Tiled로 몬스터 이미지를 넣어보았다. Tiled할때는 이미지의 WrapMode 옵션을 Repeat로 한다.

-Filled를 이용해 Hp나 게이지 등을 나타낼 수 있다.