Unity Chapter 10-2. UGUI : 비주얼 컴포넌트

인프런에 있는 이제민님의 레트로의 유니티 C# 게임 프로그래밍 에센스 강의를 듣고 정리한 필기입니다. 😀
🌜 [레트로의 유니티 C# 게임 프로그래밍 에센스] 강의 들으러 가기!

Chapter 10. UGUI

• UI 편집할 땐 Scene을 2D로 하자.
• Hierarchy 창에서 가장 아래 있는 UI가 가장 위에 덮어 씌운다.
  • 
  • 위 사진에서 Text가 Image보다 위에 있었다면 묻혀서 보이지 않았을 것이다.

🔔 UI 비주얼 컴포넌트

모든 UI들은 아래 비주얼 컴포넌트들로 구현된다.

• 버튼, 슬라이더 같은 UI들도 다 이미지 컴포넌트, Text 컴포넌트가 붙어있다.

Text

• Rich Text
  • : 텍스트에 마크업 언어를 사용해 적용할 수 있다.
  • : 마크업 언어를 사용하지 않기 때문에
    • <color = red>Hello Text!</color> 이런식으로 날 것 그대로 나온다.
• Font Style
  • 폰트의 종류에 따라 Italic과 Bold를 지원하지 않는 폰트도 있을 수 있다. 이런 폰트들은 스타일 적용시 깨진다는 것 주의하기.
• Align By Geometry
  • : 텍스트를 정렬할 때 폰트의 모양을 기반으로 정렬 함
  • : 순전히 텍스트 정보만으로 정렬 함
• Horizontal Overflow
  • Wrap : 수평 방향으로 텍스트가 넘칠시 잘라버린다.
  • Overflow : 수평 방향으로 텍스트가 넘칠시 넘치도록 냅둔다.
    • 텍스트 상자 크기는 변하지 않고 그냥 텍스트만 넘친다.
• Vertical Overflow
  • Truncate : 수직 방향으로 텍스트가 넘칠시 잘라버린다.
  • Overflow : 수직 방향으로 텍스트가 넘칠시 넘치도록 냅둔다.
    • 텍스트 상자 크기는 변하지 않고 그냥 텍스트만 넘친다.
• Best Fit
  • : 바로 아래에 있는 Min, Max Size의 사이에서 적당한 크기로 들어가도록 한다.
  • 해당 Text 오브젝트 크기를 딱 채운 크기로 텍스트가 할당된다.
    • 따라서 Text UI 오브젝트 크기가 바뀌면 텍스트 크기가 함께 따라서 바뀐다.
• Material
  • Material을 입혀 텍스트 모양을 그려낼 수도 있다.
  • 특수효과 입힐 때
• Raycast TargetM
  • 모든 비주얼 컴포넌트들이 공통적으로 가지고 있다.
  • : 화면에 날아오는 광선(Ray)의 타겟이 된단 얘기. 즉, 터치를 감지한다.
  • : 광선(Ray)의 타겟이 되지 않으므로 터치 감지가 안된다. 그냥 뚫고 지나가서 이 텍스트 뒤에 있는 오브젝트가 대신 감지가 될 것.
• 📢 주의 사항!!
  • Text 컴포넌트에서 Text를 쓸 때 커서가 다음 줄에 가있으면.. 다음 줄에 아무것도 안 쓴 상태여도 2 줄로 인식이 된다.
    • 두번째 줄은 어쨋든 공백인거니까 게임을 플레이 하면 다시 한줄로 맞춰지는데, 그래서 게임 시작하면 왜 텍스트가 아래로 향하는지 이해할 수가 없었다. 사소한 이유였음.. Text 치고 다 엔터눌러서 커서가 다음 줄에 가있는 바람에 2 줄 처리 됐다가 게임 시작하면 1 줄로 바뀌어서 그런거였다.

Image

• Source Image
  • Sprite : 2D 에서 평면에 그려주기 위한 그림
    • Sprite로 쓸 이미지 파일들은 Texture Type에서 Sprite(2D and UI)로 반드시 바꿔 주어야 한다. 그리고 Apply 해주기.
      • 
  • Texture : 3D 에서 피부로서 입혀주는 그림
  • 이미지 파일을 Source Image 슬롯에 드래그 앤 드롭해주면 된다.
• Image Type
  • Simple
    • 아래 설명할 9슬라이싱 방법이 사용되지 않는다.
    • Preserve Aspect
      • : 크기를 변경하더라도 비율을 유지하며 변하도록 한다.
  • ⭐Sliced
    • 소스 이미지를 잘라서 쓰는 방식으로 사용한다.
    • 이미지 파일의 Inspector창에 들어가서 Sprite Editor를 누르면 편집할 수 있는데
      • 초록색 실선을 그래그 하여 9개의 영역으로 자를 수 있는데 아래 사진 중
        • 
        • 모서리인 A, C, G, I 영역은 이미지 크기가 줄어들어도 그 비율을 고정적으로 유지한다.
        • B, H 영역은 수평 비율은 변할 수 있지만 수직 비율은 고정적으로 유지된다.
        • D, F 영역은 수직 비율은 변할 수 있지만 수평 비율은 고정적으로 유지된다.
        • E 영역은 이미지 크기가 변할때 자유롭게 비율이 변하며 크기가 바뀌는 부분이다.
    • Sliced 타입으로 해둔 후 이미지의 크기를 변경하면 아래와같이 모서리들은 비율이 고정적으로 유지되는 것을 볼 수 있다.
      • 
  • ⭐Tiled
    • 스프라이트의 크기에 맞게 이미지를 반복 배치한다.
    • 마찬가지로 이미지 파일의 Inspector창에 들어가서 Sprite Editor를 누르면 편집할 수 있는데 (Apply 꼭 눌러주기)
      • 모서리인 A, C, G, I 영역은 이미지 크기가 줄어들어도 그 비율을 고정적으로 유지된 채로 타일을 반복한다.
      • B, H 영역은 수평 비율은 변할 수 있지만 수직 비율은 고정적으로 유지된 채로 타일을 반복한다.
      • D, F 영역은 수직 비율은 변할 수 있지만 수평 비율은 고정적으로 유지된 채로 타일을 반복한다.
      • E 영역은 이미지 크기가 변할때 자유롭게 비율이 변하며 크기가 바뀌는 부분이다.
    • Tiled 타입으로 해둔 후 이미지의 크기를 변경하면 타일이 반복되더라도 아래와같이 모서리들은 비율이 고정적으로 유지되는 것을 볼 수 있다.
      • 
  • ⭐Filled
    • 이미지가 채워지는 방식. 슬라이드 구현시에 많이 사용된다.
      • Fill Origin, Fill Method, CLockwise 로 이미지가 채워지는 시작점, 각도, 방향 등을 설정할 수 있다.
      • 

UI 이미지를 쓸 때는 이렇게 크기별로 이미지를 준비해주는 것이 아닌 프레임 이미지의 모서리 부분들만 고정시켜주어 왜곡되지 않고 크기가 변경될 수 있도록 한다.

Raw Image

우클 - UI - Raw Image

• Image와 다른 점
  • Sprite가 아닌 Texture 이미지를 받는다.
    • 따라서 사용할 소스 이미지의 Texture Type을 Sprite(2D and UI)가 아닌 Default로 바꾸어 주어야 한다. 그런 다음 Raw Image의 Texture 슬롯에 드래그 앤 드롭 해준다.
  • 테두리를 사용할 수 없다.
    • 그래서 Image와 다르게 잘 사용되지 않는 편이다.
  • UV Rect 란 것이 있어서 텍스처의 크기를 직접 지정해 줄 수 있다.

🔔 Mask 컴포넌트

• 텍스트UI를 이미지UI의 자식으로 넣는다면 이제 텍스트는 이미지를 따라다니며 함께 움직이게 된다.

이때, 텍스트가 부모인 이미지 영역을 튀어나온다면 Mask 컴포넌트를 이미지에 붙여주어 영역을 튀어나온만큼 텍스트를 잘라낼 수 있다.

• Mask 컴포넌트를 검색하여 이미지 UI에 붙여주자.
  • 이미지 자식 요소들 중 이미지로부터 튀어나온 부분은 잘라준다.
  • Mask 컴포넌트는 이미지 컴포넌트가 없으면 동작하지 않는다.
  • Show Mask Graphic
    • : 이미지는 보이게.
      • 
    • : 이미지는 보이지 않게 한다.
      • 

Rect 2D Mask 컴포넌트

• 이미지말고 그냥 이미지를 기반으로 한 사각형으로부터 튀어나온 자식 요소들을 잘라낸다.
• 그냥 Mask 컴포넌트와 다르게 이미지 컴포넌트가 없어도, 즉 그래픽이 없어도 동작한다.
  • 그래서 성능이 좋다.

🔔 효과 컴포넌트

Shadow 컴포넌트

• UI 요소에 붙여주면 해당 UI의 그림자 효과를 준다.
  • 그림자 색상과 그림자 길이를 설정할 수 있다.

Outline 컴포넌트

• UI 요소에 붙여주면 해당 UI의 테두리를 그려준다.

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Unity Lesson 1 카테고리 내 다른 글 보러가기