[유니티 UGUI] Image와 Sprite의 차이점. 그리고 Panel

🤷‍♀️ Sprite는 2D고 Image는 UI? ... Panel은 또 뭐지?

UI를 세세하게 뜯어보면서 내가 그냥 당연하게 사용했던 것들이 헷갈리기 시작했다. 그 중에서도 Sprite와 Image. 그리고 Panel도.

평소에 프로젝트를 만들 때, Image는 게임의 UI를 담당하는 부분에 많이 사용했었고

Sprite는 게임의 2D요소. 즉, 블럭이나 단순한 게임 캐릭터 등을 배치해야할 때 사용했었다.

 

둘의 차이점과 왜 다르게 사용해야 하는지 명확히 모르지만 늘 당연하게 그렇게 사용 해왔는데,

확실히 알고 사용하는 것과 모르고 사용하는 것은 천지차이니.. 이번 기회에 정리를 해둬야겠다.

 

 

---

작성기준 버전 :: 2020.3.14f1

🔶 Image (UI)

그림 1 UI-Image

 

그림 2 Canvas의 자식인 Image

 

사용자에게 상호작용하지 않는 이미지를 표시한다. *(Raycast Target을 설정해 클릭 이벤트 받는 것 제외)

화면을 꾸미는 용도로 장식이나 아이콘 등에 사용할 수 있다.

Image는 반드시 Canvas 밑으로 들어가야하고, 텍스쳐가 스프라이트여야 한다. 그림 2

 

그림 3 Image 의 프로퍼티들

 

✅Image의 프로퍼티

 

✔ Source Image

표시할 이미지를 나타내는 텍스쳐. 텍스쳐는 스프라이트(Sprite) 형식으로 가져와야한다.

Source Image가 None 상태일 때는 RectTransform의 Width, Height의 크기에 맞춰 Color 값의 색상으로 빈 Image가 보여진다. 

 

✔ Color

이미지의 색상을 변경할 때 적용할 컬러 값을 설정할 수 있다.

 

✔ Material

이미지 렌더링에 사용되는 머티리얼.

머티리얼은 재질 이란 뜻으로 객체의 피부와 같다.

이미지에 머티리얼을 넣어서 흐려보이게 하거나, 왜곡되어 보이는 효과를 넣고자 할 때 사용한다.

 

✔ Raycast Target

해당 이미지를 Raycast의 타겟으로 삼을 것인지 설정할 수 있다.

Raycast Target을 체크하면 이미지가 클릭을 받아들이게 할수 있다.

하지만 체크를 해제하면 이미지는 클릭 체크(Raycast)를 받을 수 없다.

 

✔ Raycast Padding

레이캐스트의 범위 간격을 조정할 수 있다.

 

✔ Maskable

마스커블은 이전에 포스팅한 것이 있기 때문에 이를 확인하면 이해하기 쉽다.

https://devheehee.tistory.com/14

 

 

🔶 Sprite (2D)

그림 4 스프라이트 생성기액세스

 

스프라이트는 텍스쳐이며, 2D 그래픽 오브젝트이다. 

Assets > Create > 2D > Sprites 를 통해서 *플레이스홀더 스프라이트를 생성할 수 있다. 그림 4

 

 

---

*) 플레이스홀더 스프라이트는 알고리즘에 따라 생성되는 완벽한 기본 폴리곤. (ex. 삼각형, 육각형, n면체)

 

스프라이트 생성기는 4x4 흰색 PNG 아웃라인 텍스처를 만든다.

플레이스 홀더 스프라이트는 3D프리미티브와 다르다. 스프라이트는 에셋이며 다면체이기 때문에 여러 다른 모양을 나타낼 수 있다.

따라서 플레이스홀더 스프라이트는 3D 프리미티브와는 다르게 만들어짐.

 

---

 

 

그림 4-1 

새 플레이스홀더 스프라이트는 현재 열린 에셋 폴더 내에 흰색 모양으로 나타난다. 그림 4-1

스프라이트의 이름은 디폴트로 해당 모양의 이름을 가져오지만 처음 생성했을 때 스프라이트의 이름을 변경할 수 있다.

 

GIF 1

 

프로젝트에서 플레이스 홀더 스프라이트를 사용하려면 스프라이트를 씬뷰나 하이라키뷰로 드래그 해야 사용할 수 있다. GIF 1

 

 

✅ Sprite Renderer 의 프로퍼티

그림 5 스프라이트 프로퍼티

 

✔ Sprite

렌더링 할 스프라이트 텍스처를 정의함. 

Object Picker창을 열어서 이용 가능한 스프라이트 에셋 리스트를 선택해서 텍스쳐를 변경하거나,

프로젝트뷰의 스프라이트 텍스쳐를 드래그해서 변경할 수 있다.

 

✔ Color

스프라이트의 이미지에 색조를 더하거나 다른 컬러로 변경한다.

 

✔ Flip

선택한 축에 있는 텍스처를 X나 Y방향으로 뒤집는다. 

   Flip을 체크해도 Transform의 포지션은 플립되지 않는다.

✔ Draw Mode

- Simple

- Sliced

- Tiled

 

✔ Sorting Layer

렌더링 중에서 스프라이트의 우선 순위를 제어한 정렬 레이어를 설정한다.

 

✔ Order in Layer

정렬 레이어 내에서 스프라이트의 렌더 우선 순위를 설정한다.

 

---

정리하자면 Image는 유니티에서 사용하는 UI요소이고, Image의 텍스쳐인 Source Image는 Sprite로 2D 그래픽 요소이다.

Image는 게임 화면에서 UI/UX 디자인(버튼, 백그라운드, 장식, 아이콘, 등…)에 사용되고,

Sprite는 Image의 텍스쳐로도 사용되며, 2D 게임에서의 그래픽 오브젝트로도 사용된다.

 

Sprite Renderer 나 Image로 화면에 표시하면 보이는 화면은 비슷하기 때문에 구별이 가지 않으나

Image는 Canvas에 들어있어서 RectTransform, Sprite는 2D오브젝트로 Transform으로 위치가 변경되기 때문에

위치 좌표값을 변경할 때는 완전 다르다고 볼 수 있다. 

 

---

🔶 Panel (UI)

 

그림 6 Panel 생성

Panel은 유니티 공식 문서에 따로 페이지가 없다.

판넬은 Create > UI > Panel 에서 생성하는 UI 요소이다.

 

그림 6 Panel의 Inspector 

생성된 판넬을 확인해보면 Image 와 같이 똑같이 Image 컴포넌트를 가지고 있는데,

RectTransform 과 Source Image 부분만 약간 다르다.

 

Panel의 Anchor는 stretch-stretch 로 맞춰져있어서 캔버스의 화면에 Background이미지가 꽉 차게 들어간다.

Panel은 UI의 Layout을 구성하는 UI요소들의 부모로 설정하기 위한 부분인 것 같다.

Stretch로 배경이 캔버스에 꽉 차게 들어오기 때문에 UI요소를 배치하기 용이하다.

 

 

 

 

 

* 공부하는 단계입니다. 잘못된 부분이 있다면 피드백 부탁드립니다😊

* e-mail : heehee970@naver.com