티스토리 뷰
NGUI
유니티에서 많이 사용되어지고 있는 UI 제작 플러그인으로 NGUI가 있다. 유니티 4.6버전에서 자체적으로 UGUI가 추가되었지만, 그래도 NGUI는 아직까지 많은 사용자가있다. 사용법이 편리하고 익히기 쉽게 만들어졌기 때문에 NGUI에 익숙한 사용자에게는 UGUI 로 갈아타는 것에 큰 이유를 못 느낀다. 게임에 사용되는 이미지 뿐아니라 사운드, 로컬라이징, UI트위닝까지 지원한다. 가격은 조금 비싼편이지만 그만큼의 역할을 충분히 한다고 생각한다.
아틀라스(Atlas)
게임에서 사용하는 이미지들의 집합이다. 여러 이미지 파일을 하나의 이미지로 묶은 것이다. 사용할 때에는 필요한 영역만 사용한다. 이것을 스프라이트라고 부른다. 하나의 아틀라스에 여러 이미지가 있고 이것들을 서로 다른 오브젝트에 적용한다. 여러 오브젝트에 각자의 스프라이트를 적용하지 않고 한군데 모아서 사용할까? 여러 오브젝트가 하나의 텍스처를 사용한다면 그만큼 드로우 콜을 줄일 수 있기 때문이다. 텍스처를 그냥 사용하지 말고 되도록 아틀라스를 만들어 사용하길 권장한다.
패널(Panel)
UI를 많이 사용하게 되면서 서로 겹치는 영역에 대한 구분이 필요하게 된다. 기존 UI위에 대화상자 UI를 띄울 때 사용하면 좋다. 패널이 다른 오브젝트는 영역이 다르기 때문에 겹처 보일뿐 서로 섞이지는 않는다. 하지만 패널이 추가될 때마다 추가적인 드로우 콜이 발생하기 때문에 되도록 적게 사용하는 것이 좋다.
뎁스(Depth)
UI가 서로 겹쳐 보일 때, 서로간의 Z방향 깊이를 말한다. 예를들어 배경과 캐릭터 스프라이트가 있다면 캐릭터의 뎁스는 배경 스프라이트의 뎁스보다 높아야 둘이 자연스럽게 겹쳐 보이게 된다. 스프라이트간 뎁스로 서로의 위치를 결정하듯이 패널도 뎁스로 서로간의 위치를 결정할 수있다. 뎁스가 높은 패널이 위에 얹혀보이게 된다.
NGUI 폰트
여러 이미지를 묶어서 하나의 아틀라스를 만들었듯이 폰트 아틀라스에는 수많은 글자들이 존재한다.
※여기서부터 중요함
드로우콜 줄이기
드로우 콜을 줄이려고 여러 이미지를 하나로 묶어 아틀라스로 만들었다. 하지만 이 아틀라스를 잘못 사용한다면 드로우콜을 효과적으로 줄일 수없다. 효과적으로 드로우 콜을 줄이려면 스프라이트간 뎁스, 폰트 뎁스, 패널 뎁스를 모두 신경써서 작업해야한다.
위 그림은, 프로젝트를 생성하고 아무것도 없는 빈 상태에서 NGUI를 추가하고 하이라키에 UI Root 를 생성한 장면이다. 아무 스트라이트가 없을 때 드로우 콜은 1로 표시된다. 아무것도 그릴게 없는데 왜 1일까? UI Root 를 생성할 때 기본적으로 UI Camera가 따라 붙기 때문이다.
이상태에서 스프라이트를 추가한다면 1이 증가할 것이다. 그리고 스프라이트를 아무리 추가하더라도 드로우 콜 수치는 변하지 않는다. 오브젝트는 늘어나지만 드로우 콜 수치가 늘어나지 않는 이유는 하나의 아틀라스를 쓰기 때문이다. 스프라이트간 뎁스를 겹치는 순서는 스프라이트의 뎁스를 지정하여 조절 할 수 있다. 여러 스프라이트가 같은 뎁스를 사용하더라도 문제는 없지만 겹치는 UI에 대해서는 뎁스를 지정하는 것이 좋다.
여러 스프라이트들로만 존재하는 상황에서 텍스트 라벨을 추가한다면 드로우 콜은 1 증가한다. UI아틀라스 이외에 폰트 아틀라스를 추가로 사용했기 때문이다. 하지만 방금 추가한 라벨이 모든 스프라이트 보다 제일 높은 뎁스에 존재하지 않는다면 드로우 콜은 2 증가한다. 이유는 UI 아틀라스와 폰트 아틀라스를 번갈아 사용하기 때문이다.
더 심한 경우, 최악의 드로우콜이 발생한다. 위 그림은 스프라이트와 라벨을 1뎁스 씩 번갈아가며 사용한 경우이다. 드로우 콜이 15나 발생했다. 게임 오브젝트의 개수 만큼 드로우 콜이 발생하여 아틀라스를 만든 의미가 없어진다.
패널을 추가하는 것
패널을 추가하게 되면 많은 스프라이트들이 하나의 아틀라스를 사용하더라도 드로우 콜은 증가한다. 아틀라스를 번갈아가며 사용하면 위 상황처럼 안좋듯이 패널도 번갈아 사용하면 안 좋다. 패널 사용을 최소화 하자.
최악의 드로우 콜 상황을 피하기 위해
1. 한 화면에서 사용되는 UI는 최대한 하나의 아틀라스로 묶는 것이 중요하다.
아틀라스를 개념별로 묶는 것이 아니고 씬단위로 묶어서 사용하라는 얘기. 예를 들어, 게임에서 사용하는 버튼 스프라이트가 20개 그리고 아이콘 스프라이트가 20개 있다고 하자. A씬에서는 10개의 버튼 스프라이트와 10개의 아이콘 스프라이트를 사용하고 B씬에서는 나머지 10개의 버튼 스프라이트와 10개의 아이콘 스프라이트를 사용한다. 이 때 버튼 스프라이트 20개를 모은 아틀라스를 만들고 아이콘 스프라이트 20개를 모은 아틀라스를 만들지말고, A씬에서 사용하는 버튼 스르라이트 10개와 아이콘 스프라이트10개를 하나의 아틀라스로 묶고 나머지 B씬에서 사용하는 버튼 스프라이트10개와 아이콘 스프라이트10개를 하나의 아틀라스로 묶어사용해야 한다.
2. 뎁스를 오브젝트 이름에 붙이는 습관을 들이자.
작업중에 UI를 추가하다보면 뎁스를 지정하는 것을 가끔 까먹는다. 스프라이트나 라벨을 생성할 때 지전의 뎁스보다 높여서 자동으로 생성되기 때문이다. 이런식으로 하나씩 뎁스를 잘못 맞춰나가면 나중에는 위 그림처럼 아틀라스를 만드나마다한 최악의 드로우 콜이 발생하게 된다. 나중에 한꺼번에 정리하자는 생각을 버리고 생성 후 바로바로 뎁스를 지정하자.
3. 문서를 작성한다.
UI 작업을 하기 전, 사용할 리소스에 관한 문서를 작성하는 것이다. 어떤 이미지들을 하나의 아틀라스로 만들지. 어떤 영역에서 패널을 사용할지 스프라이트간 뎁스를 몇으로 지정할지 등에관한 문서이다. 이 문서는 작업을 하면서 얼마든지 수정될 수있고, 새로운 작업자가 보더라도 쉽게 이해하고 작업을 진행할 수 있게된다.