Page 1


시작하며

2005년에 유니티의 첫 번째 버전이 공개되고 나서 벌써 10년이 흘렀습니다. 유니티는 점 점 진화하고 있습니다. 최신판인 유니티 5에 포함된 새로운 기능으로는 리얼타임 글로벌 일루미네이션을 비롯한 물리 기반 셰이더와 리플랙션 프로브, 오디오 믹서 등이 있고 모 두 열거하려면 끝도 없습니다. 그 중 유니티 4.6에서 이제 막 탑재된 UI 시스템이라는 새 로운 기능도 개발자들이 애타게 기다리던 것 중의 하나일 것입니다. 이 새로운 UI 시스템은 개발 단계에서 uGUI(유구이/유지유아이)라고 불렀던 내장형 UI 프 레임워크입니다. 이 UI 시스템은 직관적으로 조작할 수 있으며 컴포넌트 기반이므로 확장 성이 좋다는 특징이 있습니다. uGUI 시스템이 탑재된 후에 게임에서 사용되는 UI는 물론 이며 툴이나 유틸리티와 같은 일반적인 응용프로그램에서 사용되는 UI도 쉽게 구현할 수 있게 됐습니다. 유니티의 특징이라면 간편하고 빠르게 프로그램을 만들 수 있다는 점과 윈도나 맥과 같 은 데스크톱 플랫폼을 비롯해 iOS와 안드로이드로 대표되는 모바일 플랫폼까지 다양한 환경에서 동작하는 프로그램을 만들 수 있다는 점을 꼽을 수 있습니다. 그리고 새로운 UI 시스템이 탑재됐으므로 매력적인 UI를 간단하게 구현할 수 있다는 특징도 있습니다. 이 책은 새로운 UI 시스템인 uGUI에 초점을 맞춥니다. 1장에서는 유니티를 아직 경험해 보지 못한 독자를 위해 간단한 튜토리얼과 함께 유니티의 개념을 소개합니다. CHAPTER 02부터 CHAPTER 05에서는 새로운 UI 시스템에 관한 모든 것을 설명합니다. 그리고 CHAPTER 06과 CHAPTER 07에서는 모바일 앱에서 자주 이용되는 UI와 네이티브 플러 그인을 제작하는 방법을 설명하고 CHAPTER 08에서는 UI를 제작할 때 편리하게 사용할 수 있는 에셋과 도구를 소개합니다. 이 책에서 제공하는 예제 코드는 실전에서도 그대로 사용할 수 있게 만들었습니다. 게임 제작이나 응용프로그램 개발 중 난관에 부딪혔을 때 이 책이 좋은 지침이 되어 도 움이 되기를 기원합니다.

2015년 초가을에 이와이 마사유키

5


6

목차

CHAPTER

01 유니티 개요

CHAPTER 1-1 유니티란

14

1-1-1 다양한 플랫폼 지원

15

1-1-2 유니티 제품 구성

17

CHAPTER 1-2 유니티 시작하기

18

CHAPTER 1-3 유니티 에디터

20

1-3-1 씬 뷰(Scene View)

22

1-3-2 게임 뷰(Game View)

24

1-3-3 하이어라키 뷰(Hierarchy View)

25

1-3-4 프로젝트 뷰(Project View)

25

1-3-5 인스펙터 뷰(Inspector View)

26

1-3-6 그 외의 뷰

27

1-3-7 유니티 에디터의 메뉴

28

CHAPTER 1-4 튜토리얼 1: 씬 작성하기

33

1-4-1 새 프로젝트 생성

33

1-4-2 지면 작성

34

1-4-3 머티리얼

35

1-4-4 물리 운동

38

1-4-5 프리팹

41

CHAPTER 1-5 튜토리얼2: 스크립트

44

1-5-1 스크립트

44

1-5-2 스크립트 컴포넌트

45

1-5-3 스크립트 작성

47

1-5-4 필드와 인스펙터 뷰

49

1-5-5 인터랙션 구현

50

1-5-6 모바일 장치용 빌드

54

CHAPTER 1-6 UI 시스템

58

1-6-1 새로운 UI 시스템의 특징

59

1-6-2 레거시 GUI 시스템

60

CHAPTER 1-7 에셋 스토어

62

CHAPTER 1-8 그 밖의 서비스

64


7

목차

CHAPTER 2-1 UI 요소의 생성과 캔버스

70

02

2-1-1 UI 요소 생성하기

70

2-1-2 캔버스란

71

UI 구성

2-1-3 UI 요소를 렌더링하는 순서

72

2-1-4 캔버스의 렌더링 모드와 속성

73

2-1-5 Canvas Scaler 컴포넌트

77

2-1-6 Graphic Raycaster 컴포넌트

82

2-1-7 Canvas Renderer 컴포넌트

83

2-1-8 캔버스 그룹

83

CHAPTER 2-2 Rect Transform 컴포넌트

86

2-2-1 렉트 툴

86

2-2-2 Rect Transform 컴포넌트의 속성

93

2-2-3 앵커

94

CHAPTER

2-2-4 게임 오브젝트와 Rect Transform 컴포넌트

102

CHAPTER 2-3 이벤트 시스템

104

2-3-1 이벤트 시스템

104

2-3-2 Event System 컴포넌트의 동작

105

2-3-3 Event System 컴포넌트에 포함된 속성들

106

2-3-4 인풋 모듈

106

2-3-5 레이캐스터

109

CHAPTER 3-1 이미지

113

03

3-1-1 이미지 생성

113

3-1-2 2D 스프라이트와 다른 점

115

기본적인 UI 요소

3-1-3 Image 컴포넌트의 속성

116

CHAPTER

3-1-4 이미지의 종류

117

3-1-5 스프라이트 애니메이션

128

CHAPTER 3-2 스프라이트 에디터

135

3-2-1 Sprite Mode

136

3-2-2 스프라이트 편집

136

3-2-3 스프라이트 생성

138

3-2-4 스프라이트 에디터의 그 밖의 기능

141

CHAPTER 3-3 스프라이트 패커

143

3-3-1 텍스처 생성

143

3-3-2 스프라이트 패커 창

145

3-3-3 독자적인 패킹 정책

148


8

목차

CHAPTER 3-4 로우 이미지

149

3-4-1 로우 이미지 생성

149

3-4-2 Raw Image 컴포넌트에 포함된 속성

150

CHAPTER 3-5 텍스트

151

3-5-1 텍스트 생성

151

3-5-2 Text 컴포넌트에 포함된 속성

152

3-5-3 리치 텍스트

156

3-5-4 폰트

158

CHAPTER 3-6 마스크

167

3-6-1 마스크 생성

167

CHAPTER 3-7 이펙트

169

3-7-1 Shadow 컴포넌트

170

3-7-2 Outline 컴포넌트

171

3-7-3 Position As UV1 컴포넌트

171

CHAPTER 3-8 UI 요소 렌더링과 성능

CHAPTER

04 인터랙티브 UI 요소

174

3-8-1 배치

174

3-8-2 렌더링 최적화

176

3-8-3 최적화를 위한 툴

176

CHAPTER 4-1 인터랙티브 UI 요소의 상태

181

CHAPTER 4-2 이벤트

183

4-2-1 이벤트 리스너 설정

183

4-2-2 사용자 지정 컴포넌트의 이벤트 리스너

186

4-2-3 이벤트 리스너 정의

187

4-2-4 스크립트로 이벤트 리스너 설정

188

4-2-5 Event Trigger 컴포넌트

190

CHAPTER 4-3 버튼

194

4-3-1 버튼

194

4-3-2 Button 컴포넌트의 이벤트

195

CHAPTER 4-4 토글

196

4-4-1 토글의 구조

196

4-4-2 Toggle 컴포넌트의 속성

197

4-4-3 Toggle 컴포넌트의 이벤트

198

4-4-4 토글 그룹

200


9

목차

CHAPTER 4-5 슬라이더

203

4-5-1 슬라이더 구조

203

4-5-2 Slider 컴포넌트의 속성

204

4-5-3 Slider 컴포넌트의 이벤트

206

CHAPTER 4-6 스크롤 바

208

4-6-1 스크롤 바의 구조

208

4-6-2 Scrollbar 컴포넌트의 속성

209

4-6-3 Scrollbar 컴포넌트의 이벤트

CHAPTER

05 자동 레이아웃

211

CHAPTER 4-7 스크롤 뷰

213

4-7-1 스크롤 뷰 작성

213

4-7-2 스크롤 바 설정

218

4-7-3 Scroll Rect 컴포넌트의 속성

220

4-7-4 Scroll Rect 컴포넌트의 이벤트

221

CHAPTER 4-8 입력 필드

226

4-8-1 입력 필드의 구조

226

4-8-2 Input Field 컴포넌트의 속성

228

4-8-3 Input Field 컴포넌트 이벤트

238

CHAPTER 4-9 인터랙션 컴포넌트의 기본 클래스

242

4-9-1 Interactable 속성

242

4-9-2 트랜지션

243

4-9-3 내비게이션

248

CHAPTER 5-1 레이아웃 요소

251

5-1-1 레이아웃 요소란

251

5-1-2 Layout Element 컴포넌트

253

CHAPTER 5-2 레이아웃 컨트롤러

254

5-2-1 Content Size Fitter 컴포넌트

254

5-2-2 Aspect Ratio Fitter 컴포넌트

255

CHAPTER 5-3 레이아웃 그룹

259

5-3-1 Horizontal, Vertical Layout Group

259

5-3-2 Grid Layout Group

261

5-3-3 Grid Layout Group과 Content Size Fitter

265

CHAPTER 5-4 드리븐 속성

266


10

목차

CHAPTER 5-5 사용자 지정 레이아웃

267

5-5-1 레이아웃 인터페이스

267

5-5-2 레이아웃 계산

267

5-5-3 레이아웃 재구축

268

CHAPTER

CHAPTER 6-1 탭 바

271

06

6-1-1 탭 바 생성

271

6-1-2 탭 생성

272

실전 UI 제작

6-1-3 토글 그룹 설정

273

6-1-4 각 탭에 대응하는 화면 생성

274

6-1-5 이벤트 리스너 설정

274

CHAPTER 6-2 애니메이션으로 표현하는 탭 바

276

6-2-1 탭과 탭에 대응하는 화면 생성

276

6-2-2 애니메이션 생성

277

6-2-3 Event Trigger 컴포넌트 설정

287

CHAPTER 6-3 페이징 스크롤 뷰

289

6-3-1 스크롤 뷰 추가

289

6-3-2 스크롤 할 내용 생성

290

6-3-3 페이징 처리 구현

293

6-3-4 페이지 컨트롤 생성

299

CHAPTER 6-4 드래그 앤드 드롭

304

6-4-1 드래그할 수 있는 아이콘 생성

304

6-4-2 드롭 영역 작성

305

6-4-3 드래그할 수 있는 아이콘을 위한 스크립트 구현

305

6-4-4 드롭 영역을 위한 스크립트 구현

309

CHAPTER 6-5 셀을 재활용하는 테이블 뷰

312

6-5-1 스크롤 뷰 생성

313

6-5-2 스크롤 할 내용 생성

313

6-5-3 셀 작성

315

6-5-4 셀을 위한 스크립트 구현

315

6-5-5 스크립트에서 이름을 지정해 스프라이트를 변경한다

318

6-5-6 테이블 뷰를 위한 스크립트 구현

320

CHAPTER 6-6 내비게이션 뷰

332

6-6-1 내비게이션 뷰와 내비게이션 바 생성

333

6-6-2 뷰 생성

333

6-6-3 Rect Transform의 트윈 애니메이션

335


11

목차

6-6-4 내비게이션 뷰를 위한 스크립트 구현

338

6-6-5 각 뷰를 위한 스크립트 구현

341

CHAPTER 6-7 알림 뷰

349

6-7-1 캔버스와 오버레이 생성

349

6-7-2 창과 각 요소 생성

350

6-7-3 스크립트 구현

352

CHAPTER 7-1 플러그인이란

361

07

7-1-1 매니지드 플러그인

361

7-1-2 네이티브 플러그인

362

네이티브 플러그인

CHAPTER 7-2 iOS를 위한 네이티브 플러그인

363

7-2-1 iOS를 위한 네이티브 플러그인 구현

363

7-2-2 유니티 쪽 인터페이스 구현(iOS)

370

7-2-3 네이티브 플러그인 이용하기(iOS)

371

CHAPTER 7-3 안드로이드를 위한 네이티브 플러그인

375

CHAPTER

CHAPTER

7-3-1 안드로이드를 위한 네이티브 플러그인 구현

375

7-3-2 유니티 쪽 인터페이스 구현(안드로이드)

385

7-3-3 네이티브 플러그인을 이용하기(안드로이드)

387

CHAPTER 8-1 NGUI: Next-Gen UI

391

08

8-1-1 NGUI vs. 새로운 UI 시스템

392

8-1-2 NGUI의 독자적인 기능

393

UI 제작에 사용할 수 있는 에셋, 툴

CHAPTER 8-2 iTween & iTween Native Extension

396

8-2-1 iTween이란

396

8-2-2 iTween에 포함된 애니메이션 메서드

398

8-2-3 이징

400

8-2-4 iTween Native Extension

401

CHAPTER 8-3 텍스처 패커와 스프라이트 일루미네이터

402

8-3-1 텍스처 패커(TexturePacker)란

402

8-3-2 스프라이트 일루미네이터(SpriteIlluminator)

404

CHAPTER 8-4 UniRx & LINQ to GameObject

408

8-4-1 리액티브 프로그래밍이란

408

8-4-2 Reactive Extensions란

409

8-4-3 UniRx의 기능

411

8-4-4 LINQ to GameObject

416


12

목차

APPENDIX

Canvas 421

01

CanvasScaler 422

UI 클래스 레퍼런스

CanvasGroup 424

CanvasRenderer 423

RectTransform 424 RectTransformUtility 425 EventSystem 427 StandaloneInputModule 428 TouchInputModule 429 GraphicRaycaster 429 PhysicsRaycaster 430 Physics2DRaycaster 430 Image 431 RawImage 432 Text 432 Selectable 433 Button 435 Toggle 435 ToggleGroup 436 Slider 436 Scrollbar 437 ScrollRect 437 InputField 438


C H A P T E R

1-6

UI 시스템

이 장의 요점 ■■

개발 도중에 uGUI라는 이름을 가졌던 새로운 UI 시스템이 유니티 4.6 이후 버전에 탑재돼 있다.

■■

새로운 UI 시스템은 직관적으로 조작할 수 있으며, 컴포넌트 기반이므로 확장성이 좋다.

■■

레거시 GUI 시스템은 에디터의 확장 기능인 UI에 사용된다.

유니티 4.5 이전 버전에서는 화면에 정보를 표시하는 텍스트 레이블과 사용자가 조작한 내용을 받아들 이는 버튼이나 슬라이더와 같은 사용자 인터페이스( UI)를 작성하려면 스크립트에 해당 처리를 입력해 야 했습니다. 그러나 유니티 4.6 이후 버전에는 직관적으로 조작해서 UI를 쉽게 작성할 수 있는 새로운

UI 시스템( UI system)이 탑재됐습니다. 이 새로운 UI 시스템은 새로운 UI 시스템이 개발 중이었을 때 에 uGUI라는 이름으로 불렸습니다. 이전에 탑재돼 있던 GUI 시스템( Legacy GUI system)인 유니티 GUI는 필요한 기능을 갖추고는 있었 지만, 확장성도 좋지 않았고 변경하기도 어려워서 대규모 프로젝트에서 체계적으로 UI를 제작하기에는 적합하지 않았습니다.

그림 1-64 새로운 UI 시스템(uGUI)으로 UI를 작성하는 모습


CHAPTER 1-6 UI 시스템

그래서 많은 개발 현장에서는 NGUI( CHAPTER 8-1)와 같이 서드 파티에서 제작한 유료 UI 시스템을 이용했습니다. 직관적으로 조작할 수 있고 다양한 UI 컴포넌트를 갖추고 있어 큰 인기를 얻은 NGUI는 사실상 기본 프레임워크가 됐습니다. 그러나 서드 파티에서 만들었기 때문에 유니티와 소프트웨어의 로 우 레벨에서는 통합되지 않아서 렌더링 순서가 뒤바뀌는 등의 문제가 발생했었습니다. 새로운 UI 시스템은 레거시 GUI 시스템에서 나타났던 결점을 보완했고, 이 시스템을 사용하면 NGUI 처럼 직관적으로 조작하여 UI를 금방 작성할 수 있습니다. 그리고 빌트인 프레임워크 형태로 유니티에 통합돼 있어서 이벤트 시스템이나 애니메이션과 같은 유니티의 다른 기능과도 잘 융합됩니다.

1-6-1 새로운 UI 시스템의 특징 직관적으로 조작할 수 있다 스크립트를 작성할 필요 없이 UI 요소를 화면에 배치할 수 있습니다. 렉트 툴(2-3-1절)을 사용해 씬 뷰에서 직관적으로 조작할 수 있으므로 UI 요소를 자유롭게 이동, 회전시키거나 스케일 조정을 할 수 있습니다.

컴포넌트 기반 확장성 새로운 UI 시스템의 UI 요소는 모두 게임 오브젝트로 구성돼 있으므로 Image, Text, Button, Slider 와 같은 빌트인 컴포넌트를 조합해 게임 오브젝트에 추가하면 버튼이나 슬라이더와 같은 UI 요소의 기 능을 갖추게 됩니다. 물론 스크립트를 작성해서 자신이 직접 컴포넌트를 만들어 기능을 확장할 수도 있 습니다.

그림 1-65 빌트인 컴포넌트의 예

59


60

CHAPTER 01 _ 유니티 개요

자유로운 자동 레이아웃 기능 데스크톱뿐만 아니라 스마트폰이나 태블릿 등 다양한 장치에서 작동하는 게임과 응용프로그램은 각 장 치에서 다양한 화면 해상도를 지원해야 합니다. 새로운 UI 시스템에는 앵커(2-3-3절)라고 불리는 레 이아웃 기능과 UI를 자동으로 배치하는 컴포넌트가 마련돼 있으므로 UI 레이아웃을 화면 해상도에 맞 춰 자동으로 조정할 수 있습니다.

스크린 공간과 월드 공간 레거시 GUI 시스템에서는 UI를 3D 씬 앞면에만 표시할 수 있었지만, 새로운 UI 시스템에서는 앞면에 는 물론 3D 공간의 다른 오브젝트와 동등하게 표시할 수 있어서 표현하기가 매우 자유롭습니다.

머티리얼과 라이팅 UI 요소에 머티리얼을 설정할 수 있어서 조명을 받는 것과 같은 효과를 낼 수 있습니다.

오픈 소스 새로운 UI 시스템의 소스 코드는 MIT/X11의 라이선스 관리하에 오픈 소스 프로젝트로 공개돼 있습니 다. 누구라도 오류를 수정하는 데 기여할 수 있고 새로운 기능을 제안할 수도 있습니다. https://bitbucket.org/unity-Technologies/ui

1-6-2 레거시 GUI 시스템 아직 새로운 UI 시스템이 레거시 GUI 시스템을 완전히 대체할 수 없는 관계로 레거시 GUI 시스템도 사용할 수 있습니다. 그러나 게임이나 응용프로그램의 UI를 작성하는 용도로 레거시 GUI 시스템을 이 용하는 것은 좋지 않다고 알려졌고, 단지 에디터의 기능을 확장한 형태의 UI를 작성하기 위해 사용되고 있습니다. 레거시 GUI 시스템에도 텍스트 레이블, 버튼, 슬라이더와 같은 일반적으로 많이 이용되는 UI 요소가 마련돼 있습니다. 이들은 모두 스크립트에서 OnGUI라는 특별한 메서드에 프로그램을 작성해 배치합 니다.


CHAPTER 1-6 UI 시스템

소스 코드 1-9 레거시 GUI 시스템(Unity GUI)으로 UI 구현

using UnityEngine; public class LegacyGUI : MonoBehaviour { [SerializeField] private Texture2D homeIcon; /* 생략 */ void OnGUI() { GUI.Box(new Rect(0.0f, 0.0f, Screen.width, 88.0f), ""); GUIStyle style = GUI.skin.GetStyle("Label"); style.fontSize = 36; style.alignment = TextAnchor.MiddleCenter; GUI.Label(new Rect(0.0f, 0.0f, Screen.width, 88.0f), "This is Legacy GUI"); GUI.Box(new Rect(0.0f, Screen.height - 112.0f, Screen.width, 112.0f), ""); GUILayout.BeginArea( new Rect(2.0f, Screen.height - 110.0f, Screen.width - 4.0f, 108.0f)); GUILayout.BeginHorizontal(); if (GUILayout.Button(homeIcon, GUILayout.Height(108.0f))) { Debug.Log("HOME button is clicked."); } /* 생략 */ GUILayout.EndHorizontal(); GUILayout.EndArea(); } }

그림 1-66 레거시 GUI 시스템(Unity GUI)으로 UI를 구현한 예

61


CHAPTER

02

UI 구성


C H A P T E R

2-1

UI 요소의 생성과 캔버스

이 장의 요점 ■■

UI 요소도 게임 오브젝트 형태로 구성되므로 씬 내부에 구축해야 한다.

■■

씬 내부에 있는 UI는 UI 요소를 렌더링하는 캔버스와 이벤트 시스템에 의해 제어된다.

■■

UI 요소의 위치와 크기는 Rect Transform 컴포넌트로 제어한다.

유니티의 새로운 UI 시스템은 UI 요소도 게임 오브젝트로 취급하므로 다른 게임 오브젝트와 마찬가 지로 UI를 씬 안에 구축합니다. 그리고 씬 안에 있는 UI는 UI 요소를 렌더링하는 역할을 맡은 캔버스 ( Canvas)와 UI 요소에 대한 이벤트를 다루는 이벤트 시스템( Event System)에 의해 제어됩니다. 그리 고 모든 UI 요소는 Rect Transform 컴포넌트에 의해 위치와 크기가 제어됩니다. 이 장에서는 이들 컴 포넌트에 관한 자세한 내용과 UI의 기본적인 레이아웃, 이벤트 시스템에 관해 설명하겠습니다.

2-1-1 UI 요소 생성하기 UI 요소를 생성하려면 GameObject 메뉴에 있는 UI에서 요소를 선택합니다. 하이어라키 뷰에 있는 Create 메뉴나 마우스 오른쪽 버튼을 클릭했을 때 나오는 컨텍스트 메뉴에서도 동일하게 UI 요소를 생 성할 수 있습니다. 예를 들어 아무것도 없는 씬에서 GameObject 메뉴 를 클릭하고 UI → Button을 선택하면 Button 오브 젝트가 생성됩니다. 이때 Canvas 오브젝트는 자동으 로 생성되고, Button 오브젝트의 부모 요소가 됩니 다. 그리고 이와 동시에 EventSystem 오브젝트도 생 성됩니다.

그림 2-1 GameObject 메뉴


CHAPTER 2-1 UI 요소 생성과 캔버스

그림 2-2 Button 오브젝트 생성

2-1-2 캔버스란 캔버스( Canvas)는 Canvas 컴포넌트가 추가된 게임 오브젝트를 말합니다. 모든 UI 요소의 부모가 되 는 요소이며 이름 그대로 그림을 그리는 캔버스처럼 UI 요소를 화면에 렌더링하는 기능을 제어합니다. 씬 내부에 캔버스가 존재하지 않을 때는 어떤 UI 요소를 생성하더라도 자동으로 함께 생성되고,

GameObject 메뉴에서 UI → Canvas를 선택해 빈 캔버스를 생성할 수도 있습니다.

그림 2-3 캔버스

71


72

CHAPTER 02 _ UI 구성

어떤 UI 요소를 렌더링하기 위한 캔버스는 보통 한 개만 있으면 충분합니다. 그러나 다른 UI에 오버레 이해서 표시하는 UI처럼 여러 개의 캔버스를 배치할 수도 있습니다. 그리고 캔버스의 자식 요소에 다시 캔버스를 넣어서 종속시킬 수도 있습니다.

2-1-3 UI 요소를 렌더링하는 순서 캔버스 위에 있는 UI 요소가 렌더링되는 순서는 매우 명확합니다. 하이어라키 뷰에 나열된 순서대로 렌 더링됩니다. 즉 하이어라키 뷰에서 위쪽에 있는 요소가 먼저(안쪽에) 렌더링되고 하이어라키 뷰에서 아 래쪽에 있는 요소가 나중에(앞쪽에) 렌더링됩니다. 이러한 렌더링 순서는 UI가 부모 자식의 계층 형태 를 이루고 있을 때도 동일하게 적용되며, 자식 요소는 부모 요소보다 나중에 렌더링됩니다. 그림 2-4에서 ① 배경을 그러 데이션으로 표현한 Backgro

und 오브젝트, ② 배경 위에 겹쳐서 표시하며 빗금무늬가 있는 Slant 오브젝트, ③ 창 테 두리 이미지인 Window 오브 젝트, ④ 아이콘 이미지인 Face 오브젝트, ⑤ 문자열을 표시하 는 Text 오브젝트의 순서로 렌 더링된 모습을 확인할 수 있습

그림 2-4 UI 요소가 렌더링되는 순서

니다. 물론 렌더링 순서는 마우스를 사용해 쉽게 변경할 수 있습니다. 렌더링 순서를 변경하려면 하이어라키 뷰에서 UI 요소를 드래그해 옮기기만 하면 됩니다.

그림 2-5 렌더링 순서 변경


CHAPTER 2-1 UI 요소 생성과 캔버스

마우스뿐만 아니라 스크립트로도 렌더링 순서를 변경할 수 있습니다. 스크립트로 렌더링 순서를 변 경하려면 소스 코드 2-1에 나온 것처럼 Transform 클래스(또는 이 클래스를 상속한 클래스인

RectTransform 클래스)에 포함된 SetAsFirstSibling 메서드, SetAsLastSibling 메서드, SetSibling Index 메서드를 사용합니다. 소스 코드 2-1 렌더링 순서 변경

// obj가 현재 위치한 계층에서 가장 먼저 렌더링되도록 한다(가장 안쪽에 렌더링된다) obj.transform.SetAsFitstSibling(); // obj가 현재 위치한 계층에서 가장 나중에 렌더링되도록 한다(가장 바깥쪽에 렌더링된다) obj.transform.SetAsLastSibling(); // obj를 현재 위치한 계층에서 3번째 요소가 되는 위치에 놓는다(안쪽에서부터 3번째로 렌더링된다) obj.transform.SetSiblingIndex(2);

그리고 UI 요소를 렌더링하는 순서가 성능과 어떤 관련이 있는지는 CHAPTER 3-8 UI 요소의 퍼포먼 스에서 설명하겠습니다.

2-1-4 캔버스의 렌더링 모드와 속성 캔버스에는 Screen Space - Overlay, Screen Space - Camera , World Space 세 종류의 렌더링 모드 ( Render Mode)가 있습니다. 캔버스가 어떻게 렌더링

그림 2-6 캔버스의 렌더링 모드

되는지는 렌더링 모드에 따라 정해집니다. 캔버스를 부모 자식 관계로 계층화한 상태에서 자식 캔버스의 렌더링 모드는 부모 캔버스의 모드를 동 일하게 따릅니다.

Screen Space - Overlay 모드 Screen Space - Overlay 모드에서는 캔버스가 씬 내부의 어느 곳에 있더라도 화면 전체를 덮는 모습 으로 렌더링됩니다. 이는 지금까지 사용해왔던 UI 시스템인 유니티 GUI가 렌더링한 UI 화면과 닮았습 니다. 화면(게임 뷰)의 크기나 해상도가 변경되면 그에 맞춰서 캔버스의 크기도 자동으로 변경됩니다.

73


74

CHAPTER 02 _ UI 구성

그림 2-7 Screen Space - Overlay 캔버스

Screen Space - Overlay 모드에서는 다음과 같은 속 성을 설정할 수 있습니다.

그림 2-8 Screen Space - Overlay 모드의 속성

Pixel Perfect Pixel Perfect 속성을 ON으로 지정하 면 캔버스에 있는 UI 요소를 픽셀의 색 그대로 표현하도록 렌더링합니다. 이 속성을 ON으로 지정하면 픽셀에 맞지 않는 위치에 배치하더라도 희미하지 않 고 명확하게 표현할 수 있습니다.

그림 2-9 Pixel Perfect 속성(X=0.5, Y=0.5 좌표에 배치한 예)

대부분의 UI 요소가 스케일, 회전, 애 니메이션 등에서 미세한 위치나 배율을 사용할 가능성이 큰데, 여기서 기기의 퍼포먼스를 높여야 할 때 는 Pixel Perfect 속성을 OFF로 지정해두는 것도 좋을 것입니다.

Sort Order 캔버스가 렌더링되는 순서를 수치로 설정할 수 있습니다. 값이 작을수록 먼저(안쪽에) 렌더링되고, 값 이 클수록 나중에(바깥쪽에) 렌더링됩니다.


CHAPTER 2-1 UI 요소 생성과 캔버스

Screen Space - Camera 모드 Screen Space - Camera 모드에서 캔버스 는 지정된 카메라와 일정한 거리만큼 떨어진 앞쪽 위치에 배치되고 카메라에 의해 렌더링 됩니다. 따라서 UI 요소가 어떻게 표현될지는 카메 라가 어떻게 설정돼 있는지에 따라 달라집 니다. 카메라의 Projection 속성이 Perspec

tive로 지정돼 있다면 UI 요소는 원근감이 느 껴지게 렌더링됩니다(원근감의 정도는 Field

of View 속성값에 따라 달라집니다).

그림 2-10 Screen Space - Camera 모드로 지정된 캔버스

화면(게임 뷰)의 크기나 해상도가 변경되거 나 카메라의 뷰 포트가 달라지면 이에 맞춰 캔버스도 카메라를 정면으로 바라보도록 크기와 위치, 방향 이 자동으로 변경됩니다.

Screen Space - Camera 모드에서는 다음과 같 은 속성을 설정할 수 있습니다.

그림 2-11 Screen Space - Camera 모드 속성

Pixel Perfect Screen Space - Overlay 모드의 Pixel Perfect 속성과 마찬가지로 이 속성을 ON으로 지정하면 캔버 스에 있는 UI 요소는 픽셀에 맞춰 렌더링됩니다.

Render Camera 캔버스를 렌더링할 카메라를 지정합니다.

Plane Distance 카메라에서 캔버스까지의 거리를 설정합니다.

75


76

CHAPTER 02 _ UI 구성

Sorting Layer 캔버스의 소팅 레이어를 지정합니다. 소팅 레이어( Sorting Layer)란 2D 스프라이트를 포함한 2D 그 래픽을 렌더링하는 순서를 제어하는 기능을 말합니다. 소팅 레이어를 사용하면 카메라로부터 그래픽 요 소까지의 거리( Z 좌표)와 상관없이 렌더링 순서를 제어할 수 있습니다. 소팅 레이어를 추가하거나 렌더링 순서를 변경하려면 Sorting Layer 속성을 클릭하고, 펼쳐지는 드롭 다운 메뉴에서 Add Sorting Layer를 선택합니다.

그림 2-12 소팅 레이어 편집

Order in Layer 캔버스의 소팅 레이어 순서 안에서 다시 렌더링 순서를 설정합니다. 값이 작을수록 먼저(안쪽에) 렌더 링되고 값이 클수록 나중에(바깥쪽에) 렌더링됩니다.

World Space 모드 World Space 모드로 지정한 캔버스는 씬에 있는 다른 게임 오브젝트와 동일한 자격으로 취급됩니다. 캔버스의 크기는 화면(게임 뷰) 의 크기에 상관없이 Rect Transform 컴포넌 트에 따라 정의됩니다. 캔버스에 있는 UI 요소는 씬에 있는 다른 게 임 오브젝트와 함께 3D 공간에서의 위치 관 계대로 렌더링됩니다. 이 모드는 UI 요소를 씬의 일부로 다룰 때 이용하면 좋습니다. 그림 2-13 World Space 모드로 지정된 캔버스


CHAPTER 2-1 UI 요소 생성과 캔버스

World Space 모드에서는 다음과 같은 속성을 설 정할 수 있습니다.

그림 2-14 World Space 모드 속성

Event Camera 이벤트를 처리하기 위한 카메라를 지정합니다. 이벤트에 관해서는 CHAPTER 2-3 이벤트 시스템과

CHAPTER 4-2 이벤트에서 자세하게 설명하겠습니다.

Sorting Layer Order in Layer Screen Space - Camera 모드의 Sorting Layer 속성, Order in Layer 속성과 마찬가지로 캔버스 에 지정한 소팅 레이어대로 렌더링 순서를 설정하고 소팅 레이어 안에서 다시 렌더링 순서를 Order in

Layer에 설정합니다.

2-1-5 Canvas Scaler 컴포넌트 Canvas Scaler 컴포넌트는 캔버스에 추가된 컴포넌트입니다. 캔버스 안에 있는 UI 요소 전체의 스케일 과 픽셀 밀도를 제어합니다. 폰트 크기나 이미지에 포함된 선의 너비 등 캔버스에서 렌더링되는 모든 요 소에 영향을 줍니다. 캔버스의 렌더링 모드가 Screen Space - Overlay 또는 Screen Space - Camera일 때 Canvas

Scaler 컴포넌트의 Ui Scale Mode 속성에서 Constant Pixel Size, Scale With Screen Size,

그림 2-15 Canvas Scaler 컴포넌트에 포함된 Ui Scale Mode 속성

ConstantPhysical Size 세 종류의 모드 중 하나를 선택할 수 있습니다. 그리고 렌더링 모드가 World Space일 때는 Ui Scale Mode 속성이 World로 고정됩니다. 다음 절에서 각 모드를 소개하겠습니다.

77


78

CHAPTER 02 _ UI 구성

Constant Pixel Size 모드 Constant Pixel Size 모드에서는 UI 요소의 위치나 크기가 화면상의 픽셀 단위에 의해 설정됩니다. 이 동작은 Canvas Scaler 컴포넌트가 추가돼 있지 않을 때 기본으로 지정되는 동작입니다. UI를 픽셀 크 기에 맞춰 표시할 때는 이 모드를 선택합니다.

Constant Pixel Size 모드에서는 다음과 같은 속 성을 설정할 수 있습니다. 그림 2-16 Constant Pixel Size 모드 속성

Scale Factor 캔버스에 있는 모든 UI 요소에 대해 각각 스케일링하는 배율을 설정합니다.

Reference Pixels Per Unit 캔버스에서 기준이 되는 1단위당 픽셀 수를 설정합니다. Texture Type이 Sprite(2D and UI)인 텍스 쳐라면 Import Settings의 Pixels Per Unit로 씬에서 1단위당 픽셀 수를 설정합니다. Pixels Per Unit 과 Reference Pixels Per Unit 속성값이 같을 때 UI 상의 1단위는 스프라이트의 1픽셀과 일치합니다.

Scale With Screen Size 모드 Scale With Screen Size 모드에서 UI 요소의 위치나 크기는 지정된 참조 해상도( Reference Resolution) 에 따라 설정이 달라집니다. 먼저 참조 해상도로 UI를 생성한 다음에 해상도가 다른 장치에서 UI를 확 대하거나 축소해 표시하려면 이 모드를 선택합니다.

Scale With Screen Size 모드에서는 다음과 같은 속성을 설정할 수 있습니다.

그림 2-17 Scale With Screen Size 모드 속성


CHAPTER 2-1 UI 요소 생성과 캔버스

Reference Resolution 생성할 UI의 기준이 되는 참조 해상도를 Reference Resolution에 설정 합니다.

UI를 생성할 때 게임 뷰의 해상도를 참조 해상도와 동일하게 지정해두면 참조 해상도로 UI를 레이아웃할 수 있어 편리합니다.

그림 2-18 게임 뷰 해상도 설정

Screen Match Mode 화면(게임 뷰) 해상도와 참조 해상도의 가 로세로 비율이 다를 때 캔버스를 스케일하 는 방법을 설정합니다. 그림 2-19 Screen Match Mode 속성

■■

Match Width Or Height 참조 해상도의 너비나 높이에 맞춰 캔버 스를 스케일합니다. 참조 해상도의 너비와 높이 중 어느 쪽 에 맞출지는 나중에 설명할 Match 속성 에 설정합니다.

그림 2-20 Match Width Or Height(640 X 960인 UI를 768 X 1024 화면 해상도에 표시한 예)

79


80

CHAPTER 02 _ UI 구성

■■

Expand 캔버스의 영역을 넓혀서 캔버스의 너비 와 높이 모두 참조 해상도보다 작아지지 않게 합니다.

그림 2-21 Expand(640 X 960인 UI를 768 X 1024 화면 해상도에 표시한 예)

■■

Shrink 캔버스의 영역을 오려 캔버스의 너비와 높이 모두 참조 해상도를 넘지 않게 합 니다.

그림 2-22 Shrink(640 X 960인 UI를 768 X 1024 화면 해상도에 표시한 예)

Match Screen Match Mode 속성이 Match Width Or Height일 때 참조 해상도의 너비와 높이 중 어느 쪽에 맞출지 설정합니다. 값의 범위는 0.0~1.0입니다. 값이 0.0일 때에는 참조 해상도의 너비에 맞추고 값이 1.0일 때에는 참조 해상도의 높이에 맞춰 캔버스 의 스케일을 설정합니다. 값이 0.0~1.0 사이일 때는 그 값으로 참조 해상도의 너비에 맞춘 스케일과 참 조 해상도의 높이에 맞춘 스케일 사이에 있는 스케일 값을 사용합니다.


CHAPTER 2-1 UI 요소 생성과 캔버스

Reference Pixels Per Unit 캔버스에서 기준이 되는 1단위당 픽셀 수를 설정합니다.

Constant Physical Size 모드 Constant Physical Size 모드에서 UI 요소의 위치나 크기는 센티미터, 밀리미터, 인치, 포인트, 파이카 등의 물리적인 단위로 설정됩니다.

Constant Physical Size 모드에서는 다음과 같은 속 성을 설정할 수 있습니다.

그림 2-23 Constant Physical Size 모드 속성

Physical Unit UI 요소의 위치나 크기를 설정할 물리 단위를 지정합니다. 물리 단위는 다음과 같은 다섯 가지 종류로 지정할 수 있습니다. ■■ Centimeters(센티미터) ■■ Millimeters(밀리미터) ■■ Inches(인치) ■■ Points(포인트) ■■ Picas(파이카)

Fallback Screen DPI Constant Physical Size 모드는 화면의 DPI( Dots Per Inch: 1인치당 도트 수) 값을 장치로부터 제대 로 얻어올 수 있다는 것을 전제로 하는데 DPI 값을 얻어올 수 없을 때는 Fallback Screen DPI라는 속 성값이 사용됩니다.

Default Sprite DPI Pixels Per Unit이 Reference Pixels Per Unit 속성값과 동일한 스프라이트의 1인치당 픽셀 수를 설정 합니다.

81


82

CHAPTER 02 _ UI 구성

Reference Pixels Per Unit 캔버스 상에서 기준이 되는 1단위 당 픽셀 수를 설정합니다.

World 모드 캔버스의 렌더링 모드가 World Space일 때 Ui Scale Mode 속성은 World로 고정됩니다.

World 모드에서는 다음과 같은 속성을 설정할 수 있습니다.

그림 2-24 World 모드 속성

Dynamic Pixels Per Unit 텍스트와 같이 UI에서 동적으로 생성되는 그래픽 1단위당 픽셀 수를 설정합니다.

Reference Pixels Per Unit 캔버스에서 기준이 되는 1단위당 픽셀 수를 설정합니다.

2-1-6 Graphic Raycaster 컴포넌트 유니티에 포함된 이벤트 시스템의 핵심이라고도 할 수 있는 레이캐스트( Raycasting)라는 기능이 있습 니다. 레이캐스트란 어떤 좌표로부터 다른 좌표를 향해 레이( Ray)라는 가상의 직선을 쏴서 씬에 있는 오브젝트와 충돌하는지 검출하는 기능입니다.

그림 2-25 Graphic Raycaster 컴포넌트

유니티의 새로운 UI 시스템에서는 캔버스에 추가된 Graphic Raycaster 컴포넌트를 통해 현재 사용자 가 조작하고 있는 UI 요소가 캔버스에서 어느 UI 요소인지 판정합니다.

Graphic Raycaster 컴포넌트에는 다음과 같은 속성이 있습니다.


CHAPTER 2-1 UI 요소 생성과 캔버스

Ignore Reversed Graphics 이 속성을 ON으로 지정하면 뒤집혀서 뒷면을 보이는 요소는 무시합니다.

Blocking Objects 레이캐스트를 블록하는(막는) 오브젝트의 타입을 지정합니다. 다음 네 종류의 오브젝트 타입 중 하나를 지정할 수 있습니다. ■■ None(없음) ■■ Two

D(2D 오브젝트)

■■ Three

D(3D 오브젝트)

■■ All(모든

오브젝트)

Blocking Mask 레이캐스트를 블록하는 오브젝트의 레이어를 지정합니다. Blocking Objects 속성에 지정한 오브젝트 타입이면서 Blocking Mask 속성에 지정한 레이어에 속한 오브젝트가 레이캐스트를 블록합니다.

2-1-7 Canvas Renderer 컴포넌트 캔버스에서 렌더링되는 모든 그래픽 요소에는 Canvas Renderer 컴포넌트가 추가돼 있습니다.

Canvas Renderer 컴포넌트는 Canvas Renderer 컴포넌트를 추가한 그래픽 요소를 캔버스에 렌더링 하는 역할을 맡고 있습니다. 따라서 그래픽 요소의 비주얼 컴포넌트를 삭제하지 않은 상태에서 Canvas

Renderer 컴포넌트를 삭제할 수는 없습니다.

그림 2-26 Canvas Renderer 컴포넌트

2-1-8 캔버스 그룹 캔버스 그룹( Canvas Group)을 사용하면 여러 개의 UI 요소를 그룹화해서 특정 속성을 한꺼번에 변경 할 수 있습니다.

83


84

CHAPTER 02 _ UI 구성

캔버스 그룹을 생성하려면 빈 게임 오 브젝트를 생성하고 인스펙터 뷰 아래쪽 에 있는 Add Component 버튼을 누른 뒤 Layout → Canvas Group을 선택해

Canvas Group 컴포넌트를 추가합니다.

그림 2-27 캔버스 그룹 생성

여러 개의 UI 요소를 캔버스 그룹의 자식 요소로 지정 하면 CanvasGroup 컴포넌트의 속성을 이용해 자식이 된 UI 요소들의 특정 속성을 한꺼번에 변경할 수 있습 니다.

그림 2-28 Canvas Group 컴포넌트에 포함된 속성

Canvas Group 컴포넌트에서는 다음과 같은 속성을 설정할 수 있습니다.

Alpha 캔버스 그룹에 포함된 모든 UI 요소의 알파값(불투명도)을 설정합니다. 여기에는 0.0(투명)~1.0(불투 명) 범위에 있는 값을 설정합니다. 각 UI 요소에 알파값이 설정돼 있다면 Alpha 속성값과 각 UI 요소의 알파값을 곱한 값이 적용됩니다. 예를 들어 여러 개의 버튼을 포함하고 있는 윈도 형태의 UI를 페이드인/페이드아웃시킬 때 유용하게 사 용됩니다.

Interactable 캔버스 그룹에 포함된 모든 UI 요소의 유효/무효 상태를 설정합니다.

ON으로 지정하면 모든 UI 요소를 조정할 수 있게 되고 OFF로 지정하면 모든 UI 요소를 조정할 수 없 게 됩니다.


CHAPTER 2-1 UI 요소 생성과 캔버스

Blocks Raycasts 캔버스 그룹에 포함된 모든 UI 요소가 레이캐스트를 블록할지(충돌 판정을 허가할지) 설정합니다. ON 으로 지정하면 캔버스 그룹에 속한 UI 요소는 레이캐스트를 블록하지 않으므로 UI 요소를 조작할 수 없 게 됩니다. HUD( Head-Up Display/화면에 겹쳐지는 형태로 정보를 표시하는 UI)에 정보를 표시하 거나 인디케이터처럼 표시만 하고 사용자가 UI를 조작할 수는 없게 만들고 싶을 때 유용합니다.

Ignore Parent Groups 캔버스 그룹이 계층화돼 있을 때 이 속성을 ON으로 지정하면 부모 캔버스 그룹에 설정된 속성값을 무 시합니다.

85


C H A P T E R

2-2

Rect Transform 컴포넌트

이 장의 요점 ■■

캔버스에 있는 UI 요소는 렉트 툴로 조정한다.

■■

크기와 스케일 조정은 모두 UI 요소의 크기를 변경하지만 각 동작은 다르다.

■■

앵커를 사용하면 다양한 화면 해상도를 지원하는 UI를 생성할 수 있다.

일반적으로 게임 오브젝트에는 Transform 컴포 넌트가 추가돼 있어서 이를 이용해 위치나 크기 를 정의합니다. 하지만 캔버스에 있는 UI 요소 에는 Transform 컴포넌트 대신 2D 전용 Rect

Transform 컴포넌트가 추가돼 있어서 이를 이용 해 위치나 크기를 정의합니다. 그림 2-29 Rect Transform 컴포넌트

Rect Transform 컴포넌트에도 Transform 컴포넌트처럼 Position, Rotation, Scale 속성이 있으며, Width 속성과 Height 속성을 이용해 UI 요소의 크기를 스케일로부터 독립된 형식으로 제어할 수 있습 니다. 그 밖에 Anchors나 Pivot과 같은 레이아웃과 관련된 속성이 있습니다.

2-2-1 렉트 툴 UI 요소를 조정할 때에는 툴바에 있는 렉트 툴을 사용합니다.

그림 2-30 렉트 툴


CHAPTER 2-2 Rect Transform 컴포넌트

렉트 툴을 선택하면 씬 뷰에서 UI 요소를 직접 선 택할 수 있습니다. 선택된 UI 요소 주위에는 사각형과 파란 점 모양 의 핸들이 표시되는데 이들을 조정해서 UI 요소 를 이동시키거나 크기를 변경하거나 회전시킬 수 있습니다.

그림 2-31 렉트 툴로 선택한 UI 요소

렉트 툴을 사용할 때 씬 뷰의 컨트롤 바에 있는 2D 모드 버튼을 눌러서 2D 모드로 변경시켜 놓으면 XY 평면을 정면으로 보는 방향으로 시점이 고정되므로 UI 요소의 레이아웃을 조정하기 쉬워집니다.

그림 2-32 2D 모드

버전 4.5 이전의 유니티에서도 2D 모드에서 스프라이트를 선택하면 렉트 툴과 동일한 동작을 할 수 있 지만, 렉트 툴로는 UI 요소나 스프라이트와 같은 2D 오브젝트 뿐만 아니라 어떤 게임 오브젝트든지

XY 평면에서 조정할 수 있다는 점이 다릅니다.

피봇 선택한 사각형의 한가운데에 표시되는 파란색 마커가 피봇( Pivot)입니 다. 피봇이란 현재 선택된 UI 요소의 크기를 바꾸거나 회전시킬 때 기준 을 잡고 있는 점을 말합니다. 그리고 Rect Transform 컴포넌트 아래에 있는 Pos X, Pos Y 속성은 피봇의 좌표를 나타냅니다.

Rect Transform 컴포넌트의 피봇은 스프라이트의 피봇(3-2-2절)과 다릅니다. RectTransform 컴포넌트의 피봇을 변경하더라도 스프라이 트의 피봇에는 영향을 주지 않습니다. 또한, 그 반대로도 영향을 주지 않습니다.

그림 2-33 피봇

87


88

CHAPTER 02 _ UI 구성

이동 선택한 사각형의 안쪽을 드래그하면 UI 요소를 이동시킬 수 있습니다. 드래그하는 도중에 앵커(2-3-3 절)로부터의 거리가 표시됩니다.

그림 2-34 이동

드래그하는 도중에는 다른 UI 요소의 테두리나 중앙에 스냅됩니다. 윈도에서는 Ctrl 키, 맥에서는

Command 키를 누르면서 드래그하면 스냅되지 않습니다. 그리고 Shift 키를 누르면서 드래그하면 가 로 방향이나 세로 방향으로의 이동이 제한됩니다.

리사이즈 선택한 사각형의 테두리나 모서리에 있는 핸들에 커서를 놓으면 커서가 양방향의 화살표 모양으로 바뀝 니다. 이 상태에서 드래그하면 UI 요소의 크기를 조정할 수 있습니다. 드래그하는 도중에는 UI의 너비 와 높이가 표시됩니다.

그림 2-35 크기


CHAPTER 2-2 Rect Transform 컴포넌트

드래그하는 도중에는 다른 UI 요소의 테두리나 중앙에 스냅됩니다. 윈도에서는 Ctrl 키, 맥에서는

Command 키를 누르면서 드래그하면 스냅되지 않습니다. Shift 키를 누르면서 드래그하면 가로세로 비율을 유지하면서 크기를 조정할 수 있습니다. Alt 키를 누 르면서 드래그하면 피봇을 중심으로 하여 크기를 조정할 수 있습니다. 그리고 선택한 사각형의 테두리 를 윈도에서는 Ctrl 키, 맥에서는 Command 키를 누르면서 드래그하면 선택한 사각형의 면적을 유지 하는 형태로 크기를 조정할 수 있습니다.

그림 2-36 윈도우에서는 Ctrl 키, 맥에서는 Command를 누르면서 테두리를 드래그하면 면적을 유지하는 형태로 크기를 조정할 수 있다

렉트 툴로 리사이즈하는 방법과 Width, Height 속성을 설정해 리사이즈하는 방법, 그리고 스케일 툴로 스케일을 조정하는 방법과 Scale 속성값을 설정해 스케일을 조정하는 방법 모두 UI 요소의 크기를 변경 하는 작업입니다. 그러나 각각의 조정 결과는 다릅니다. 리사이즈는 UI 요소의 너비나 높이는 달라지지만, Scale 속성값은 변하지 않고 UI 요소에서 폰트 크기 나 슬라이스가 설정된 스프라이트의 경계 부분의 너비 등에는 영향을 주지 않습니다. 스케일은 UI 요소의 크기를 변경하는 것이 아니라 확대와 축소를 하는 것이므로 UI 요소에 있는 폰트나 경계의 크기가 변합니다.

89


90

CHAPTER 02 _ UI 구성

그림 2-37 리사이즈의 예(위)와 스케일을 변경한 예(아래)

보통 UI 요소의 레이아웃을 조정할 때에는 리사이즈 기능을 이용해 크기를 조정하는데, UI 요소를 애니 메이션에서 확대·축소했을 때는 스케일 값을 1.0으로 설정해 본래의 크기로 되돌릴 수 있으므로 스케 일 기능을 사용하는 것이 편리합니다. 같은 작업을 리사이즈 기능으로 하면 본래의 크기를 기억해둬야 하고, 스프라이트 자체의 크기가 변경됐을 때의 크기를 수정해야 합니다. 그리고 UI 요소를 좌우 또는 상하로 반전시키기 위해 너비나 높이가 음 의 값이 되게 리사이즈하면 UI 요소가 뒤쪽을 향하도록 뒤집혀서 화 면에 렌더링되지 않습니다. 이럴 때는 리사이즈 기능을 사용하지 말고

Scale 속성의 X나 Y가 음의 값을 갖게 조정합니다.

그림 2-38 뒤집힌 UI 요소


uGUI로 시작하는 유니티 UI 디자인 교과서  

이와이 마사유키 지음 | 김범준 옮김 | 게임 개발 시리즈 _ 018 | ISBN: 9791158390402 | 35,000원 | 2016년 07월 29일 발행 | 448쪽 | uGUI, UI 디자인, 유니티

Read more
Read more
Similar to
Popular now
Just for you