<맨 위로>

OnGUI, NGUI, UGUI

OnGUI

  • UGUI가 나오기 전인 Unity 4.5 버전까지 사용했던 Unity Built-In UI
  • 시각적 개발을 지원하지 않음 (UI배치, 스타일 설정등 100% 코드기반으로 작동)
  • 표면 레이어를 기반으로 하기 때문에 실행 효율이 매우 낮음

NGUI

  • UGUI가 나오기 이전에 많이 사요왼 타사 유료 플러그인(2020.10.25 기준 95달러)
  • 레퍼런스가 다양하며, 다양한 크기의 화면에 최적화 시키기 쉽다
  • 정적인 화면에 최적화가 잘 되어있다
  • 동적 할당을 할때 Sprite를 다시 그리기 때문에 비효율적이다

UGUI

  • Unity에서 제공하는 Unity Built-In UI (4.6이후)
  • 추가 구매 없이 바로 사용가능
  • 직관적인 UI 구성요소 간의 Depth 조절 가능
  • Sprite Atlas 관리 (폴더 단위로도 가능)
  • Particle Rendering 문제가 존재한다
  • Tweening을 기본으로 지운하지 않는다
  • 동적 할당이 쉽고 편하며, 효율이 NGUI보다 좋다
  • UI 확장 에셋을 쉽게 구할 수 있으며, Unity에서도 지속적으로 관리해 준다.

각종 사항

Anchors

  • 그냥클릭 : 앵커 위치만 설정
  • 알트클릭 : 앵커 위치 및 객체 위치 동시설정
  • 쉬프트클리 : 앵커 위치 및 피봇 동시설정
  • 알트쉬프트클릭 : 앵커, 객체 위치, 피봇 동시 설정

Render Mode

  • Screen Space - Overlay : 카메라의 위치와 관계 없이 모든 월드 오브젝트보다 앞에 그려짐
  • Screen Space - Camera : UI위치가 카메라의 위치와 연관되게 (위치 관계에 따라 UI가 가려질 수 있음)
  • World Space : 실제 공간에 UI를 배치

Canvas Scaler

  • Canvas 크기조절하는 컴퍼넌트 옵션값 중요
  • Constant Pixel Size : 화면 크기에 관계없이 UI의 위치나 크기가 픽셀에 대한 단순한 배율로 지적됨
    • Scale Factor : 모든 요소의 화면내 비율
    • Reference Pixels Per Unit : 이미지 컴퍼넌트를 가지는 UI의경우 Sprite에 ‘Pixels Per Unit’ 설정이 있으면 Sprite 1px = UI 1unit
  • Scale With Screen Size : 화면에 따라 UI의 위치나 크기가 함께 수정됨 (모바일은 화면비율이 제각각이라 Scale Width Screen Size 가 가장 많이 쓰임)
    • Reference Resolution : UI의 적정 해상도 크기를 설정
    • Screen Match Mode : 현재 해상도의 종횡비가 Reference Resolution과 같지 않을때 Cavas 영역 크기를 설정할때 사용되는 모드
    • Match Width Or Height :
      • Expand: Canvas가 reference resolution 보다 작아지지 않도록 수평 또는 수직으로 확장
      • Shirink: Canvas가 reference resolution 보다 커지지 않도록 수평 또는 수직을 자름
  • Constant Physical Size : 화면의 크기에 관계없이 UI 요소가 동일한 물리적인 크기로 유지된다

Graphic Raycaster

  • Screen Space - Overlay 일경우 카메라를 사용하지 않고 렌더링 과정에서 그려진 오브젝트 위에 UI를 덧그림
  • 이때 canvas 안을 검색하는 raycaster

OnGUI를 이용한 동적생성

    private void OnGUI()
    {
        if (!isGuiShowing) return;
        // Make a background box
        GUI.Box(new Rect(10, 10, 100, 90), "Loader Menu");
 
        // Make the first button. If it is pressed, Application.Loadlevel (1) will be executed
        if (GUI.Button(new Rect(20, 40, 80, 20), "Level 1"))
        {
            Debug.Log("level1 clicked");
        }
 
        // Make the second button.
        if (GUI.Button(new Rect(20, 70, 80, 20), "Level 2"))
        {
            Debug.Log("level2 clicked");
        }
 
        GUI.Box(new Rect(0, 0, 200, 100), "Top-left");
        GUI.Box(new Rect(Screen.width - 200, 0, 200, 100), "Top-right");
        GUI.Box(new Rect(0, Screen.height - 100, 200, 100), "Bottom-left");
        GUI.Box(new Rect(Screen.width - 200, Screen.height - 100, 200, 100), "Bottom-right");
    }

참고 링크

  • https://wergia.tistory.com/184
  • https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UICreateFromScripting.html
  • https://docs.unity3d.com/ScriptReference/MonoBehaviour.OnGUI.html
  • https://docs.unity3d.com/kr/530/Manual/gui-Basics.html