목록

UGUI 기능 정리

Unity의 기본 내장 UI인 UGUI사용하고자 정리한 내용. 계속 사용해보면서 내용추가(?)

Index

CANVAS
Rect Transform
Button
Text
UI Events
UI Slider
Transitions
Animation
UI ScrollRect
UI Scrollbar
UI ScrollRect

CANVAS

Canvas는 모든 UI 요소를 배치하기 위한 영역.

최적화 Tip : 캔버스는 동적으로 바뀌는 부분이 있으면 분할에서 쓰도록.. ui갱신 시 그 캔버스 계층 전체가 리빌드 되므로 자주 바뀌는 부분은 따로 캔버스로 묶어서 분할하자!

  • Render Mode

    • Screen Space - Overlay 말그대로 맨 상단에 뿌리는 UI 그냥 덮어쓰는 느낌(?) 메인 카메라에 자동으로 맞춰서 UI가 fit된다. PixelPerfect 체크 시 언티엘리어싱 제거 되며 좀 더 선명해진다. (주로 아이콘이나 그런곳에 체크하자 남용하면 퍼포먼스 영향있으니)

    • Screen Space - Camera 특정 카메라에 대해 보여진다. RenderCamera None일 시 Overlay로 적용. Plane Distance는 카메라 world거리 표시인데 카메라Perspective 거리에 따라(프러스텀에 따라) 크기가 자동으로 맞춰진다.

    • World Space Canvas를 씬에서 다른 오브젝트처럼 작동시키는데. 크기는 Rect Transform을 사용하여 수동으로 설정할 수 있으며, UI 요소는 3D의 배치에 따라 다른 오브젝트의 앞면 또는 뒷면에 그려집니다. 이것은 월드의 게임 세계에 속하는 인터페이스 UI의 일부로써 유용 주로 NPC말풍선이나 HP바에 사용하는거 같다. Event Camera - UI이벤트를 처리하는 데 사용되는 카메라 이 이벤트 카메라가 씬을 렌더링하는 카메라가 된다.

  • Canvas Scaler

    • UI Scale Mode 해상도에 따라 캔버스 스케일 어떻게 할 지 설정. 보통 Scale with screen size로 참조해상도 설정 후 스크린사이즈에 맞춰 주자.

      • Constant Pixel Size Constant Pixel Size 모드를 사용하면 UI 요소의 위치와 크기가 화면의 픽셀 단위로 지정됩니다. 이것은 Canvas Scaler가 연결되어 있지 않을 때 Canvas의 기본 기능이기도합니다. 그러나 캔버스 스케일러의 배율 비율 설정을 사용하면 캔버스의 모든 UI 요소에 일정한 배율을 적용 할 수 있습니다.

        => 픽셀 단위로 늘어남

      • Scale With Screen Size Scale Using Screen Size 모드에서는 지정된 참조 해상도의 픽셀에 따라 위치와 크기를 지정할 수 있습니다. 현재 화면 해상도가 참조 해상도보다 큰 경우 Canvas는 참조 해상도의 해상도 만 계속 유지하지만 화면에 맞도록 크기가 조정됩니다. 현재 화면 해상도가 참조 해상도보다 작 으면 Canvas가 비슷하게 축소됩니다. 현재 화면 해상도가 기준 해상도와 다른 종횡비를 갖는 경우 각 축을 개별적으로 화면 크기에 맞게 조정하면 크기가 균일하지 않게되어 일반적으로 바람직하지 않습니다. 이 대신 ReferenceResolution 구성 요소는 화면의 종횡비를 유지하기 위해 Canvas 해상도를 참조 해상도에서 벗어나게합니다. 화면 일치 모드 설정을 사용하여이 편차가 어떻게 작용해야하는지 제어 할 수 있습니다.

        => 참조 스크린 기반으로 비율 맞춰 늘어남

      • Screen Match Mode 가로 세로 비율 인 경우 캔버스 영역의 크기를 조절하는 데 사용되는 모드 현재 해상도가 참조 해상도에 맞지 않을 떄 어느 비율로 조절할지 결정인거 같다(?)

      • Constant Physical Size Constant Physical Size 모드를 사용하면 UI 요소의 위치와 크기가 밀리미터, 포인트 또는 피카와 같은 실제 단위로 지정됩니다. 이 모드는 화면 DPI를 올바르게보고하는 장치에 의존합니다. DPI를보고하지 않는 장치에 사용할 폴백 DPI를 지정할 수 있습니다.

  • Graphic Raycaster 캔버스에 대해 레이캐스트하는데 사용된다. Raycaster는 캔버스에 있는 모든 그래픽을 보고 그 중 하나가 맞았는지 여부를 결정. 그래픽 레이 캐스터는 2D 또는 3D 오브젝트에 의해 차단 될뿐만 아니라 백스 페이스 그래픽을 무시하도록 구성 될 수 있습니다 앞부분에 요소의 처리를 Raycasting의앞이나 뒤에 강제하려는 경우 수동 우선 순위를 적용 할 수도 있습니다.

    • Ignore Reversed Graph 문서내용 해석하면 그랙픽 표면으로 부터 멀어진 레이캐스트를 고려해야하나?인데… 그래픽 뒷면 충돌처리 여부 인듯 그림이 뒤로 돌아갔을 떄 충돌 처리 할거냐는 의미(2D에서는 딱히 충돌처리 안해도될듯)
    • Blocking Objects UI 이외에 레이가 반응할 오브젝트 타입을 선택합니다
    • Blocking Mask 충돌 검출할 레이어 선택(?)

Rect Transform

모든 새로운 UI컴포넌트에 일반 변형 컴포넌트를 대체하는 새로운 컴포넌트이다. 일반 컴포넌트 위치,회전 및 스케일을 표시하지만, rect컴포넌트는 피봇, 폭 및 높이, 2D직사각형을 표시한다. 또한, 기존 컴포넌트와의 중요한 차이점은 앵커개념인 부모가 (rect transform)을 가지고 있으면 부모에 맞춰 고정시킬 수 있다. 공식문서

  • Anchors 앵커는 사각형의 왼쪽 아래 모서리와 오른쪽 위 모서리를 가리 킵니다.(부모 rectTransform과의 관계를 나타냄) 1. 앵커는 rectTransform과 고정관계이며, 부모rectTransform과도 고정 관계이다. 2. 따라서 부모 부모rectTransform에 영향을 받는, 부모와 현재 객체의 가로 세로 차이 비율 만큼(0 ~ 1) 영향을 받는다. 3. 즉, 행커 확장 비율에 따라 부모 크기 변환시 자식도 그에 따른 영향을 받는데, 4. 예 로 앵커 포인터가 (Min, Max4개) 현재 오브젝트 꼭지점과 동일 선상에 있다면, 부모 크기가 변해도 그비율을 유지하면서 현재 오브젝트도 동일한 비율로 줄거나 늘어난다. 5. 또 한가지 예로 앵커가 부모 꼭지점과 같다면 부모 크기 늘리거나 줄여도 고정경계상태로 자식오브젝트가 줄거나 늘어난다. 6. 중요한 점은 앵커가 모여있지않으면 단일앵커포인트로 정의하지 않는다는거. 즉 모여있어야 단일 앵커 포인트로 정의한다. 7. 직접 만들어서 부모 크기 조절하면서 파악하는게 금방 느낌이 올듯.!! 8. 인스펙터 창에 Anchors위 그림 눌러서 피벗 및 위치 설정가능(피벗만은 shift, 위치변경 하려면 alt)

  • Pivot 사각형 자체 크기의 분율로 정의됩니다. 0,0은 왼쪽 아래 모서리에 해당하고, 1,1은 오른쪽 위 모서리에 해당합니다.(기준점 생각하면 될듯?)

  • Width,Height와 Scale차이 Width,Height는 내부에있는 폰트 크기나 기타등에 영향을 안주지만(Scale은 그대로), Scale값 변경 시 내부 UI에 영향을 미친다. (레이아웃 배치라면 주로 width,height 쓰고 애니효과등은 scale이용)

  • blueprint, RawEdit 1. Blueprint 모드는 Rect의 UI엘리먼트를 회전시킬 수 없다.(?? 좀 더 조##) 2. RawEdit 모드는 피봇이나 앵커가 이동하지 않으면(조절해도) UI엘리먼트는 해당 고정 아이템에 비례하여 이동합니다.

Button

  • Interactable false이면 이 버튼의 전환상태가 disabled로 상태로 설정된다.
  • Transition color, image, animation을 버튼 이벤트 시 동작하도록 할 수 있다.
  • OnClikck 클릭시 이벤트 함수 적용할 수 있다. 해당 함수 자격을 얻으려면(보이려면) 함수는 public이여야 하고, 반환형식 void이고 매개변수가 1개이거나 없어야 한다.

Image

기본적으로 Source Image로 타겟을 지정해 랜더링하고 없다면 Color단일색 이미지를 그린다.

  • PreserveAspect 체크 시 크기 사이즈는 원래 비율그대로 적용되어 사이즈가 적용
  • SetNativeSize 기본 이지미 크기 사이즈로 돌려놓는다.
  • ImageType 1. Simple : 단일 원본 이미지. 2. Sliced : 원본 이지미를 9등분 나누어 경계의 왜곡없이 확장이 가능합니다. 9개 영역중 중앙 제외하고 경계면은 확장되지 않는다. 원본이지미 속성에서 sliced영역을 지정할 수 있을 것이다. Fill Center - false로 할 시 9영역중 중앙 랜더링할지 여부 사항 3. Tiled : 이미지 형태 고대록 연속해서 배치(원본 이미지 속성 tiled로 되어있어야) 4. Filled : 이미지 비율을 채울 지 여부 사용할 (주로 게이지 바 같은데에 쓰면 좋을듯)

Text

ngui로 따지면 라벨 기능..

1. 폰트는 [TrueType], [OpenType]과 [Dafont]를 기본적으로 지원한다. 2. rect영역 보다 폰트 크기가 크면 없어지는데, Horizontal Overflow, Vertical Overflow를 Overflow로 설정 시 없어지는 현상을지울 수 있다. Wrap은 rect영역에 맞춰 넘어가면 자동으로 줄간격을 조절한다. Truncate는 자동으로 넘어간 부분을 잘나낸다. 3. Line Spaceing으로 줄 간격 조절 가능다하. 4. best Fit 체크시 Overflow기능 무시하면 자동으로 현재 rect영역에 맞춰 사이즈를 자동으로 조절합니다. 5. Min, Max Size는 폰트 최대 최소 사이즈의 한계치를 미리 정해놓는다.

UI Events

EventSystem은 EventSystem모듈과 1개의 인풋모듈을 가진다. 씬이 시작되면 이벤트 시스템은 동일 게임 오브젝트의 입력모듈을 검색하고, 이를 이용해 각 UI엘리먼트의 입력에 대한 반응 방식을 정의합니다.

  • First Selected 해당 ui를 넣을 수 있는데, 씬 시작시 해당 UI가 선택된 상태를 말한다(색이 약간 변할 것 이다.) 게임패드 기반 비포인터 메인 메뉴 시스템에 사용하기 유용합니다.
  • Input Actions Per Second 등록되는 입력의 빈도를 나타내는데 기본적으로 초당 10회로 설정되어 있다. 따라서 0.1초의 딜레이가 발생합니다.
  • RepeatDelay 초당 입력 동작이 초 단위로 지연되어 초당 반복률을 적용할
  • Force Module Active 체크 시 독립 실행형 입력 모듈이 활성화 된다.

Button같은 ui는 버튼 컴포넌트 자제에 이벤트 트리거가 있지만, image같은 없는 것은 event trigger컴포넌트를 추가 할 수있습니다. 이를 통해 여러 ui적 상호작용을 대응 할 수 있다.

UI Slider

사용자가 슬라이더 핸들 컨트롤를 드래그해서 미리정한 숫자 값을 선택할 수 있게 해주는 UI 엘리먼트 입니다. 슬라이더를 생성 하면 기본적으로 slider스크립트를 포함한 부모에 배경 및,핸들등 자식 객체도 합께 생성된다.

  • Interactable 특정 슬라이더의 입력 수용 여부를 결정 false 시 슬라이더 고정
  • Transition 해당 슬라이더 핸들의 상태 변환을 지정 할 수 있다.
  • Navigation 여러 UI 엘리먼트가 공유하며 (나중에 쓰면서 알아보자..)
  • Whole Numbers 가까운 정수 값으로 값을 조정한다.(9.787이면 -> 10으로)
  • On Value Changed 기본적으로 클릭이나 드래그를 탐지하면 On Value Changed호출하는데 기본 외에도 사용자가 함수목록을 추가를 할 수가 있다. 슬라이더의 값을 분석하려면 함수 목록에 적합한 함수가 float매개변수를 취해야 한다. 이 함수는 Dynamic float목록에 들어가 있을텐데 여기서 선택해 주면 현재 슬라이더 값을 매개변수로 받을 수 있다.

Transitions

Transitions효과 중(버튼) Animation 이용 하려면 - auto generator Animation선택후 ctrl+6단축키 이용해 해당 animation편집 가능하게 할 수 있다.(Animator컴포넌트가 있어야 한다.) 녹화 버튼을 이용해 해당 속성값을 변환해 줄 수 있다.

Animation

속성값을 지정해 각 키프레임 마다 속성값 변화 줄 수 있다. 아래 curves를 통해 더 섬세히 조정 가능. 만약 loop끄고 싶다면, 해당 애니메이션 Inspector의 LoopTime체크를 해제하면 된다.

UI ScrollRect

기본적으로 사용하려면 오브젝트에 ScrollRect컴포넌트룰 추가해줘야한다. 또한, content가 scrollView의 RectTransform보다 커야지 스크롤링이 가능하다.(당연하다만)

  • content ScrollRect가 제어하 UI엘리먼트의 RectTransform의 참조입니다.(스크롤링당할 전체 이미지 배경으로 보면 될듯) ScrollRect는 일반적으로 마스크엘리먼트와 합께 사용됩니다. ScrollRect와 마스크 같이 사용하려면 첫번쨰로 image스크립트컴포넌트를 붙인 후, 마스크 스크립트 컴포넌트를 붙인다. 이제 마스크 처리는 될것이다. 하지만 원하는 모양으로 마스크 하려면 Image스크립트 컴포넌트의 SourceImage에 원하는 이미지 모양을 넣으면 된다.
  • Horizontal, Vertical 체크 시 수평, 수직 스크롤 가능여부 체크

  • MovementType 움직임의 범위(?) 타입 지정인데,

    • Unrestricted 이동의 제약을 업애주는거고, 따라서 마스킹한 이미지도 없앨수 있음.
    • Elastic Elasticity값에 따라 이동제약 후 돌아옴 정도(탄력값 - 바운스) 대신 뒷 배경이 보인다.
    • Clamped 이동제약제약이 강제적(배경안보이도록 딱 맞춰짐).
  • Inertia 체크 시 드래그 관성값? 느낌 즉, 드래그 하고 마우스 떄도 움직이고, 체크 풀면 드래그만 딱 했을떄만 움직인다.
  • Horizontal,Vertical Scrollbar 스크롤바 추가시 사용하는 부분인데 스크롤바 추가하려면 먼저, UI_Scrollbar추가 후 ScrollRect의 scrollbar부분에 넣어주면 끝.

UI Scrollbar

일반적으로 스크롤바를 이용해 또 다른 UI엘리먼트나 컴포넌트의 값의 설정을 바꿉니다. 보통 ScrollRect와 합께 사용합니다.

  • Interactable flase 시 스크롤바 기능이 비활성화 상태로 설정 됩니다.
  • Navigation 키보드나 컨트롤러 입력을 이용할 떄 UI 엘리먼트의 선택 방식을 설정합니다. 또한, EventSystem으로 인한 스크롤바의 값 변경을 주시하기 떄문에 클릭이나 드래그를 탐지하여 onValueChanged호출 한다. (필요시 함수 추가가능.)

UI Mask

UI 엘리먼트의 패밀리에 형태를 갖춘 마스크를 생성합니다. Mask는 종종 ScrollRect와 합께 사용됩니다. Mask컴폰너트는 마스크 형태 정의에 필요한 Image엘리먼트가 필요합니다.(imgae모양에 맞춰 마스크해야 하므로) 만약 Image엘리먼트 SourceImage가 없다면 RectTransform영역 크기에 맞춰 잘라냅니다.

Published 13 Aug 2018

지극히 나를 위한 문서정리postpiglet on Github