개발블로그

🤷‍♀️ Sprite는 2D고 Image는 UI? ... Panel은 또 뭐지? UI를 세세하게 뜯어보면서 내가 그냥 당연하게 사용했던 것들이 헷갈리기 시작했다. 그 중에서도 Sprite와 Image. 그리고 Panel도. 평소에 프로젝트를 만들 때, Image는 게임의 UI를 담당하는 부분에 많이 사용했었고 Sprite는 게임의 2D요소. 즉, 블럭이나 단순한 게임 캐릭터 등을 배치해야할 때 사용했었다. 둘의 차이점과 왜 다르게 사용해야 하는지 명확히 모르지만 늘 당연하게 그렇게 사용 해왔는데, 확실히 알고 사용하는 것과 모르고 사용하는 것은 천지차이니.. 이번 기회에 정리를 해둬야겠다. 작성기준 버전 :: 2020.3.14f1 🔶 Image (UI) 사용자에게 상호작용하지 않는 이미지를 표시한다. *..

🤷‍♀️ 스크롤 뷰의 컨텐츠 밖으로 이미지가 안보이는데 어떻게 UI를 배치하지? 퍼즐 게임에서 많이 찾아볼 수 있는 스테이지 구조인데, 스테이지가 스크롤 형식으로 길을 따라 나열되어있고 플레이어가 스크롤 해서 스테이지 정보들을 확인할 수 있는 UI 구조를 많이 본 적이 있다. 이전에 퍼즐 게임 모작을 만들 때 그런 형식의 스테이지 맵을 따라 만들어보려고 했었는데, 스크롤 뷰 > 컨텐츠 에 배치한 이미지(배경)의 사이즈가 크면 밖으로 튀어 나간 부분의 이미지가 어떻게 되어있는지 알 수가 없으니 스테이지 버튼들을 배치하는데 어려움이 있었다. 예를 들면 이런 구조다. 그림 1 길을 따라가며 스테이지가 배치되어 있고, 스크롤 하면 길을 따라서 스테이지들을 보여주는 구조다. ✔ 구조를 베껴 UI를 만들어보자 작성..

🤷‍♀️ 게임을 개발할 때 UI는 거의 필수적인 요소로 들어가게 된다. 유니티에서 UI를 배치할 때 모든 UI 요소는 Canvas 안에 위치해야 하므로 모든 UI의 부모인 Canvas를 뜯어보고, Canvas를 여러 개로 분할하여 사용하며 UI의 depth 관리를 용이하게 하는 방법과 불필요한 낭비를 줄이는 최적화 방법 또한 정리를 해 보려고 한다. 🔶 Canvas 캔버스는 Canvas 컴포넌트가 있는 UI의 기본 컴포넌트이며, 모든 UI 요소는 캔버스 안에 위치해야 한다. 하이어라키 뷰에서 UI 요소를 생성할 때, 캔버스가 없는 경우에는 Create > UI > Image로 이미지를 생성하면 자동으로 캔버스를 생성하며 Image는 캔버스의 자식으로 생성된다. 캔버스가 없는 상태에서 Image 컴포넌트를..

🔶RectTransform RectTransform은 Transform 구성 요소의 2D 레이아웃에 해당한다 그러므로 RectTransform은 UI 요소를 안에 배치할 수 있는 직사각형을 나타낸다. Transform 컴포넌트와는 다르게 RectTransform 은 Anchors라고 하는 기준점을 가지는데, 이 기준점은 부모 UI 오브젝트를 영역 대상으로 한다. 그림-1은 캔버스의 하위에 종속된 Image컴포넌트를 가진 UI의 Background라는 GameObject인데, 이 오브젝트는 캔버스에 꽉차게 검정색 배경에 채워넣기 위해 Anchor Preset을 Stretch로 설정했다. 공식 도큐먼트 : https://docs.unity3d.com/kr/530/ScriptReference/RectTrans..

🤷‍♀️ UI와 UX, 둘의 차이점은 뭘까? 유니티에서 프로젝트를 제작하다보면 UI를 상당히 많이 작업하게 된다. UI와 UX는 많이 들어보았다. 하지만 그 둘의 차이점을 명확히 설명하려니 헷갈린다. 용어 개념을 확실히 정리하고 넘어가도록 하자. 내가 현재 플레이하고 있는 쿠키런: 킹덤의 왕국이다. 그림-1 게임을 시작하면 로딩 화면을 지나서 왕국에 입성하게 된다. 왕국에 들어오니 돌아다니는 쿠키들도 보이고, 랜드마크도 보이고, 버튼들 등 많은 것들이 눈에 들어온다. 여기서 UI는 눈에 보이는 모든 디자인이나 레이아웃 등을 말한다. 그림-1 화면에 나오는 모든 것중 내가 터치하거나 상호작용 할 수 있는 모든 것이 UI라고 할 수 있겠다. 그렇다면 의문점이 생긴다. UI는 눈에 보이는 모든 디자인이나 레이..