[Unity] 11. UGUI 만들어보기 (1) - Canvas, Text, Image

안녕하세요,

감성과 기계쟁이입니다.

 

오늘은 UI에 대해 공부했습니다.

 

UI는 User Interface 의 약자로,

 

'사용자 인터페이스 또는 유저 인터페이스는 사람과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템이다.' - 위키피디아

 

라고 하는데,,, 그냥 화면에 항상 떠있는 버튼이나 이미지 같은 것 생각하시면 편합니다.

 

아무튼, 시작할게요?

 

* 해당 영상을 참고하였습니다.

 

1. Canvas 생성과 Screen

---

 

1. Hierarachy - 우클릭 - UI - Canvas 후 2D 전환

2. 스크롤 다운으로 축소

 

Canvas 는 UI가 나타나는 부분을 말합니다. 도화지 같은 역할이죠.

이것은 동시에 Screen 으로써, 게임이 나타나는 화면이 됩니다.

 

게임화면은 변해도, UI가 변하지 않는 것처럼

Screen은 카메라의 영향을 받지 않습니다. 좌표계도 따로 사용하구요.

 

그럼 Screen 좌표계의 반대는?

World입니다. 게임의 좌표죠.

 

2. Text UI

---

* Hierarachy - 우클릭 - UI - Text

 

 

사용법이나 컴포넌트의 설정이

매우 직관적이므로, 설명은 생략하겠습니다.

 

 

3. Image UI

---

 

 

생성 방법은 다른 UI들과 동일합니다.

 

 

처음에 Image UI에 이미지 파일을 넣으려하면 안되실겁니다.

이미지 파일 - Texture Type - Sprite (2D and UI) 로 바꿔주셔야 import가 가능해요.

 

 

import 가 완료됐습니다.

쉽죠?

 

이제 Image 컴포넌트의 설정을 한번 알아보겠습니다.

 

 

우리가 주목할 것은 Preserve Aspect와 Set Native Size, Image Type 입니다.

 

1) Preserve Aspect

   - 원본 비율을 유지하는 기능입니다. 간단하죠?

 

2) Set Native Size

   - 원본 크기를 유지하는 기능입니다. 핵폭탄 사진은 크기가 커서, 저는 사용하지 않았어요.

 

3) Image Type

   - 4가지가 있습니다. Simple, Sliced, Tiled, Filled

 

     a) Simple : 이미지 그 자체입니다. 늘리는 대로늘어나고, 줄이는대로 줄어듭니다.

     b) Sliced : 다양한 기능을 할 수 있습니다. 자세한 것은 아래 사이트 참고 부탁드립니다.

9슬라이싱 스프라이트 - Unity 매뉴얼

     c) Tiled : 바둑판 배열입니다. XP시절 바탕화면 설정 생각하시면 쉽습니다.

     d) Filled : 늘이기입니다. 이것도 XP 시절 바탕화면 설정과 비슷합니다.

 

예를 들어, 이 기능들을 잘 활용하면 

 

 

요런식의 쿨타임 효과를 표현할 수도 있습니다.

같은 이미지 두 장을 겹쳐놓고, 한 장은 Color로 흐리게 만든 뒤, Fill Amount를 변경한거에요!

 

---

 

올림픽이 한창입니다.

공부는 내일도 할 수 있지만, 올림픽은 4년마다 볼 수 있으니

 

하던 공부는 집어 치우고 올림픽에 집중하는 것으로 합시다.

그것이,,, 올림픽이니까,,,