[유니티] NGUI, UGUI, DOTween

NGUI

• UI Root라는 스크립트 아래 자식 오브젝트를 두고 화면에 그림
• Panel과 Widget(sprite, label 등)을 통해 정렬(순서를 정해서)하여 화면에 그림

- UI Root : 카메라 생성(Main Camera 삭제)

- Label : 폰트를 이용해서 글자 출력

- Button : 충돌 박스(Box Collider)가 있어야 터치 인식

- Scroll View

- Camera Scroll View : UIScrollView 컨텐츠 구현에 자주 사용, UIPanel을 이용해 클립핑(UIWidget을 상속받지 않으면 클립핑 불가)

 

NGUI 구성

• Anchor : 해상도가 바뀌어도 항상 고정
• Panel : Sprite, Label, Button 등 다양한 Widget들을 배치, 전부 패널 안에서 그려짐, 패널이 없으면 그려지지 않기 때문에 위젯은 패널의 자식 오브젝트로 존재
• Widget : 화면에 실질적으로 보이는 Contents
• Atlas : 사용할 그림들의 집합
• Font

Atlas

• 텍스처들을 모아 놓은 커다란 텍스쳐
• 하나의 메테리얼만을 사용할 수 있어 드로우콜을 줄이고 성능 향상에 도움
• 이미지 변경 : resource에 이미지 교체 -> project창에서 변경 된 이미지 선택 후 atlas maker 오픈 -> 해당 atlas 선택 -> add/update
• 아틀라스 메이커(Atlas Maker) : Project 우클릭 -> NGUI -> Open Atlas Maker, New, UI추가, Create, 저장, 메테리얼, 프리팹, 텍스쳐 생성
• 업데이트 : 이미지 교체 시 이미지 전부를 업데이트 해야함 그렇지 않으면 기존 이미지 계속 품질 저하

 

Camera

• UI는 고정되어 움직이지 않는 이유는 UI용 카메라가 따로 존재
• UI객체는 UI카메라에만 찍혀야 함. 별도의 레이어로 구분
• Clear Flag : 화면의 어떤 부분이 제거될 지 정함 - Depth Only(카메라가 볼 수 있는 영역에 있는 오브젝트만 Depth수준에 따라 렌더링), Skybox, Solid Color(빈 공간을 카메라의 배경색으로 표현), Don't Clear(색상, 깊이, 버퍼 등 아무것도 제거하지 않는다)
• Culling Mask : 레이어를 사용하여 선택적으로 화면에 그려낼 오브젝트들을 정함. 배경과 효과 나누는 등의 작업, 오브젝트가 보이지 않는 경우 해당 카메라의 해당 레이어가 선택되어 있는지 확인

 

---

UGUI

 

 Canvas와  UI 요소

• 유니티에서는 UI 를 만들때 사용하기 좋은 UI 요소들을 제공합니다. UI 요소는 대표적으로 Text, Image, Button 등이 있습니다. 이렇게 제공되는 모든 UI 요소는 반드시 Canvas 객체 하위에 위치해야 정상적으로 작동합니다.
• GameObject > UI > Text 를 선택해서 UI 요소를 추가할 때 만약 이미 만들어진 Canvas 객체가 없다면 자동으로 만들어줍니다. Canvas객체는 모든 UI 요소를 배치하기 위한 영역이라고 생각할 수 있는거죠. UI 요소를 만들면 하이어라키에 자동으로 EventSystem 객체가 만들어지는데 UI 의 이벤트를 관리해주는 객체이기 때문에 지우면 안됩니다.
• UI 요소가 스크린에 그려질때 하위노드로 배치된 순서대로 그려집니다. 때문에 그려지는 순서를 변경하고 싶다면 하이어라키상에서 배치된 순서를 바꾸면 되고 원한다면 코드레벨에서 UI 순서를 바꾸는 함수를 간략하게 제공합니다. Canvas 와 UI 요소의 경우 다른 게임오브젝트들과 다르게 Transform 대신 Rect Transform 컴포넌트를 가지고 있습니다. 

 

캔버스(Canvas) 의 크기

• 기본적으로 Canvas의 크기는 디스플레이 화면 기준으로 자동 설정되기 때문에 Scene 영역과 Game 영역에서 표시되는 크기가 다릅니다.
• Canvas Scaler 컴포넌트를 보면 캔버스의 사이즈가 결졍되는 기준과 비율, 화면 크기가 변동되었을 때 어떤 방식으로 크기를 조정할지 등을 설정할 수 있습니다.

 

Rect Transform 설정하기

- Rect Transform 컴포넌트의 좌측의 사각형 모양을 클릭하면 앵커 프리셋(Anchor Presets)이 나오게 됩니다. 조금은 복잡하게 보이는 이 화면에서는 UI 요소의 3가지 속성 값을 바꿀 수 있습니다.

• 앵커(Anchor)
• 포지션(Position)
• 피벗(Pivot)

-앵커 프리셋 화면에서 앵커를 변경할 수 있고 시프트를 누르면서 선택하면 피벗을 설정할 수 있고 알트를 누르면서 선택하면 포지션을 변경할 수 있습니다. 개발자가 의도하는 모습으로 UI 를 만들기 위해서 위 세가지를 정확히 이해하는게 중요합니다. 

 

앵커(Anchor)

• 네 개의 삼각형 흰색 모양이 중앙을 가르키고 있는게 앵커입니다. 앵커는 부모 오브젝트의 Rect Transform 에 고정하는데 사용됩니다. 위와 같이 부모 오브젝트 기준으로 중앙에 앵커를 설정하여 버튼이 만들어지는 경우 부모 오브젝트의 크기를 변경하더라도 버튼이 앵커 기준으로 고정되어 움직이게 됩니다.
• Rect Transform 의 Pos X, Pos Y, Pos Z 값은 앵커 기준으로 설정된다는게 중요합니다.

 

포지션(Position)

• 포지션은 말 그대로 UI 요소가 배치될 위치입니다. Rect Transform 컴포넌트를 가지고 있는 부모객체를 기준으로 배치됩니다. 
• 앵커 프리셋 창에서 알트(Alt)를 누른 상태에서 중앙을 선택하면 부모 객체의 중앙 위치로 이동시킬 수 있기 때문에 편리하게 원하는 가장자리 기준의 위치로 옮겨보면서 UI를 설계할 수 있습니다.

 

피벗(Pivot)

• 피벗은 보통 Pivot으로 체크되어 있지 않고 Center로 체크되어 있다면 UI 요소의 중앙에 피벗이 표시됩니다. 하지만 Pivot 으로 체크하면 Scene 뷰에서 원하는 위치로 조정할 수 있게됩니다. (인스펙터상에서도 옮길 수 있음)
• UI 요소를 회전시키거나 크기를 바꿀때 기준이 되는건 피벗입니다. 파란색 도너츠 모양 원 아이콘으로 표시되어 있는게 피벗의 위치입니다.
• Rect Transform 의 Pos X, Pos Y, Pos Z 값도 피벗을 기준으로 설정되기 때문에 피벗의 X값과 Pos X를 둘 다 0으로 설정하는 경우 위와같이 앵커 기준 중앙으로 배치되지 않고 버튼의 좌측 피벗기준으로 배치되는것을 확인할 수 있습니다.

---

DOTween

• 오브젝트의 애니메이션 혹은 부드러운 값 변경 시 기존의 유니티 내에서 제공하는 애니메이션 기능이나 번거로운 스크립트 작성 대신 함수 몇개로 쉽고 다양한 모션을 줄 수 있는 간편한 API
• DOTween은 특정 변수 값들을 일정 시간동안 원하는 값으로 부드럽게 변화 시켜 주는 역할을 한다. (float, double, int, uint, long, ulong, Vector2/3/4, Quaternion, Rect, RectOffset, Color, string등)

 

Tweener

• DOTween 관련 함수를 사용하기 위해 아래와 같이 네임스페이스를 추가

using DG.Tweening;

 

1. DOTween.To 이용

• static DOTween.To(getter, setter, to, float duration)
• getter - 초기값이 될 변수 혹은 값
• setter - 변환되는 값을 매개변수로 하는 함수 정의
• to - 목표 값
• duration - 변화 시간

DOTween.To(()=> myFloat, x=> myFloat = x, 100, 1);
DOTween.To(()=> myVector, x=> myVector = x, new Vector3(3,4,5), 10);

DOTween.To(() => "", str => myString = str, "hello, world!", 3);

 

2. 오브젝트 컴포넌트에 연결

• 1번째 방법보다 더 자주 사용하는 방식으로, 접근 방식이 직관적이기 때문에 관리가 편리하다.
• 보통 값 변환을 원하는 컴포넌트의 뒤에 .Do~를 연결하여 사용한다.
• 주로 사용하는 컴포넌트 : Transform(move/rotate/scale), Material(color/fade 등), Text, Camera, Light, Rigidbody

1) Trasnfrom : 오브젝트의 기본적인 이동, 회전 크기 변환을 일정 시간 동안 변환한다.

transform.DoMove(Vector3 목표값, float 변화시간, (bool 정수단위 이동여부));
transform.DoRotate(Vector3 목표값, float 변화시간, (RotateMode 회전방식));
transform.DoScale(Vector3 목표값, float 변화시간);

transform.DoLocalMove(...); //로컬 좌표 이동
transform.DoMoveX(...); //x축 이동

• .DoShakePosition을 사용하면 충돌 시 흔들리는 효과를 간편하게 낼 수 있다.

 

2) Material : 오브젝트의 컬러값, 알파값등을 일정 시간동안 부드럽게 변환한다.

.DoColor(Color 목표값, float 변화시간)
.DOFade(float 목표값, float 변화시간)

 

3) Text : 일정 시간 동안 텍스트가 타이핑되는 효과를 준다.

.DoText(string 전체텍스트, float 변화시간, (...))

 

Ease

• .SetEase(Ease easeType / AnimationCurve animCurve / EaseFunction customEase) 변환에 부드러움, 다양함을 주기 위해 사용하는 변화량 그래프로 Tweener뒤에 붙여 설정한다.

box.DOLocalMoveX(400, 1).SetEase(Ease.Linear);

 

LOOPS

• .SetLoops(int loops, LoopType loopType = LoopType.Restart) : 변환을 반복하는 기능

1. loops : 반복 회수 = -1이면 무한루프

2. loopType : 반복 형태

    - Incremental : 종료된 시점을 시작 지점으로 모션이 다시 시작 (연속)

    - Restart : 처음으로 되돌아가서 다시 시작

    - Yoyo : 실행 된 모션이 되감기 되며 다시 시작 (※ 반복횟수는 돌아가는 모션까지 포함해야함)

box.DOLocalMoveX(200, 1).SetLoops(-1, LoopType.Restart);

 

Callbacks

• 모션의 특정 상황에서 원하는 함수를 호출하는 기능 (모션 시작, 종료 등)

myTween.OnComplete(()=>{
   //ex) 트윈 종료 후 실행
});

 

기타 설정 / 제어 함수

myTween.SetDelay(float 시간) //딜레이

myTween.Play() //재생
myTween.Pause() //일시정지
myTween.Rewind() //초기화
myTween.Restart() //재시작

 

 

 

---

출처 및 참조 :

https://sanctacrux.tistory.com/657

https://mynameisdabin.tistory.com/31

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hana100494&logNo=221320177107