[Unity Manual] Basic Layout 알아보기

원문 링크

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html

Basic Layout | Unity UI | 1.0.0

본문은 위의 링크 내용을 학습 및 영어 공부를 하기 위해 작성된 글입니다.

내용의 순서는 무작정 해석 -> 해석 후에도 모르겠거나 알게된 내용 설명 -> 기타의 순으로 진행됩니다.

해석 도중에 * 표시는 저의 궁금증을 표기하기 위해 남겨둔 것입니다.

이외 기타 궁금한 사항, 틀린 내용 그리고 잡다한 내용까지 언제든 댓글을 통해 남겨주세요.

 

Basic Layout

이 섹션에서는 우리는 어떻게 너가 UI 엘리멘트를 Canvas와 각각 다른 것들에 상대적으로 배치할 수 있는지 알아볼 것이다. 너가 만약 이것을 읽는 동안에 시험해보고싶다면, GameObject -> UI -> Image를 사용하여 Image를 만들어라.

 

The Rect Tool

모든 UI 엘리멘트는 layout 목적을 위한 rectangle로 대표된다. 이 rectangle은 toolbar에 Rect Tool 을 사용함으로써 Scene 뷰에서 다뤄질 수 있다.

Rect Tool은 Unity의 2D features와 UI를 위해 사용된다. 그리고 심지어 3D Object에서도 사용된다.

 

Rect Tool은 UI 엘리멘트들을 움직이고, 크기 조정 그리고 회전하기 위해 사용될 수 있다.

너가 UI 엘리멘트를 선택했다면, 너는 그것을 rectangle 내부의 어디든 클릭하여 드래그함으로써 움직일 수 있다.

너는 꼭지점과 선분을 클릭하여 드래그함으로써 그것의 크기를 조정할 수 있다.

이 엘리멘트는 꼭지점으로부터 근처에 커서를 올려둠으로써 마우스 커서가 rotation 기호처럼 보이는 동안 회전할 수 있다.

*너는 회전하기 위하여 방향을 클릭하고 드래그할 수 있다.

 

다른 tool들 처럼, Rect Tool은 현재 pivot 모드와 Space를 사용한다. 툴바에서 설정한다.

UI와 함께 작동될 때 그것은 종종 Pivot과 Local로 설정을 유지하기 위한 좋은 아이디어이다.

 

Rect Transform

Rect Transform은 일반적인 Transform 컴포넌트 대신에 모든 UI 엘리멘트들이 사용하는 새로운 transform 컴포넌트이다.

Rect Transform은 일반적인 Transform과 같이 position과 rotation 그리고 scale을 가지고 있다. 하지만 그것은 또한 rectangle의 dimensions를 구체적으로 명시하기 위해서 사용하는 width와 height를 가지고 있다.

 

Resizing Versus Scaling

Rect Tool은 일반적으로 2D 시스템에 Sprite와 같은 그리고 3D object와 같은 object의 크기를 변경하기 위해 사용할 때, 그것은 object의 local scale을 변경할 것이다.

그러나 그것이 Rect Transform과 함께 object를 사용할 때는, 그것은 대신에 width와 height를 변경할 것이다. local scale을 변하지 않게 유지한 채로,

이 resizing은 font 크기, 잘린 이미지의 border 그리고 기타 것들에 영향을 주지 않는다.

 

Pivot

Rotations, size 그리고 scale modifications는 pivot 주위에서 발생한다. 그래서 pivot의 position은 rotation, resizing 혹은 scaling의 outcome에 영향을 받는다.

toolbar Pivot button이 Pivot 모드로 설정했을 때, Rect Transform의 pivot은 Scene 뷰에서 움직여질 수 있다.

 

Anchors

Rect Transform은 anchors라고 불리는 layout 컨셉을 포함한다.

Anchors는 Scene 뷰에서 조작할 수 있는 4개의 작은 triangular로 보여진다. 그리고 anchor 정보는 또한 Inspctor에서 보여진다.

 

만약, Rect Transform의 부모 또한 Rect Transform이면, 자식 Rect Transform은 다양한 방면의 부모 Rect Transform으로 anchored 될 수 있다.

예를 들어 자식은 부모의 중앙으로 anchored 될 수 있다. 혹은 코너 중의 하나로,

 

anchoring은 또한 자식을 부모의 width와 height와 함께 stretch하는 것을 허용한다.

rectangle의 각각 코너는 그것의 일치하는 anchor에 offset을 고정할 수 있다.

다시 말해서 rectangle의 좌측 상단 코너는 offset을 좌측 상단 anchor에 고정 할 수 있다.

이 방법은 rectangle의 다른 코너도 부모 rectangle내에 다른 포인트들에 anchored 할 수 있다.

 

anchors의 position은 부모 rectangle width와 height의 분율 ( 혹은 백분율로 ) 정의된다.

0.0 (0%) 는 left 혹은 bottom 쪽과 일치한다. 0.5 (50%)는 중앙과 그리고 1.0 (100%)는 오른쪽 혹은 위쪽과 일치한다.

하지만 anchors는 양쪽 그리고 중앙에 제한되지 않는다.

그들은 부모 rectangle 안에 어떤 점들로 anchored 될 수 있다.

 

너는 각각의 anchors들을 개별적으로 드래그 할 수 있다. 혹은 그들이 함께이더라도 너는 그것들 사이에 중앙을 클릭하고 드래그으로써 그들을 함께 드래그 할 수 있다.

만약 너가 anchor를 드래그하는 동안 shift 키를 누른다면, rectangle의 일치하는 코너는 anchor 함께 움직일 것이다.

 

Anchor presets

Inspector에서 Anchor Preset 버튼은 Rect Transform 컴포넌트 좌측 상단 코너 찾을 수 있다. 버튼을 클릭하는 것으로 Anchor Presets dropdown을 가져올 수 있다.

여기에서 너는 몇몇 가장 흔하게 사용하는 anchoring option들을 빠르게 선택할 수 있다.

너는 sides, 부모의 middle 혹은 부모 크기와 함께 stretch하기 위해 UI 엘리멘트들을 anchor할 수 있다.

수평과 수직 anchoring은 독립적이다.

 

Anchor Presets 버튼은 만약 그중에 하나라면 현재 선택된 preset 옵션을 보여준다.

만약 수평 혹은 수직 축 둘다 위에 anchors가 presets의 어떤 것과 다른 position으로 설정되어 있다면 custom 옵션이 보여질 것이다.

 

Anchor and position fields in the Inspector

만약 그들이 아직 보이지 않는다면 anchor number field를 reveal하기 위한 Anchors expansion arrow를 클릭 할 수 있다.

Anchor Min은 Scene View에서 좌측 하단 anchor handle로 일치한다. 그리고 Anchor Max는 우측 상단 handle로 일치한다.

 

rectangle의 position는 anchors가 함께( 고정된 width 와 height로 produce한 )인지 혹은 분리(부모 rectangle과 함께 stretch하기 위한 rectangle을 발생시키기 위한 )되어있는지에 따라 다르게 보여준다.

 

모든 anchor handle들이 함께일때, field는 Pos X, Pos Y, Width 그리고 Height로 보여진다. Pos X와 Pos Y 값은 pivot과 anchors의 상대적인 위치를 가리킨다.

 

anchors가 분리되어 있을 때, field는 부분적으로 혹은 완전히 Left, Right, Top 그리고 Bottom으로 변한다.

이 필드는 anchors에 의해 정의된 rectangle 내부 padding을 정의한다.

Left와 Right field는 anchors가 수평적으로 분리되었다면 그리고 Top과 Bottom 필드는 그들이 수직적으로 분리되었다면 사용된다.

 

anchor 값이 바뀌는 것 혹은 pivot field가 일반적으로 positioning 값들을 rectangle을 위치에 머무르게 만들기위해서 counter-adjust 한다는 것을 알아둬라. 이것이 desired하지 않는 상황엔, Inspector에 R 버튼을 클릭함으로써 Raw edit mode를 허용해라.

이것은 anchor와 pivot 값을 결과에 따라 변경되는 다른 값들과 다르게 변경될 수 있게 하기 위해서 발생시킨다.

이것은 마치 rectangle을 시각적으로 움직이게 만들기 위해서 혹은 크기를 조절하기 위해서 발생시킨다.

반면에 그것의 위치와 크기는 anchor와 pivot 값들에 의존적이다.