게임 UI 아틀라스 만들기 (feat.유니티 UI)
UI 이미지 리소스를 만드는 또 다른 방법 '아틀라스 (Atlas)'에 대해 살펴보겠습니다.
게임에 필요한 모든 리소스는 '절약'해서 만들고 관리하는 것이 원칙입니다. 게임이 가볍고 쾌적하게 실행될 수 있도록 리소스를 만드는 시점부터 관리합니다. UI 이미지 리소스를 만들 때에도 리소스 절약을 위한 여러 가지 방법을 사용합니다. 앞서 살펴보았던 9 그리드 (9 Grid)와 함께 여러 이미지를 한 장의 이미지에 모아서 관리하는 아틀라스 개념이 널리 활용됩니다.
모든 화면에서 공통적으로 쓰이는 UI 리소스와 특정 화면에서만 쓰이는 UI 리소스, 연출이나 효과를 위한 UI 리소스 등을 가장 정확히 구분하고 관리할 수 있는 작업자는 당연히 UI를 디자인하는 UI 디자이너입니다. UI 리소스(이미지, 애니메이션, 이펙트, 프리팹 등)는 UI 디자이너가 직접 관리하는 것이 가장 효과적이고 효율적입니다.
2의 승수
개별 UI 이미지의 크기
아틀라스 (Atlas)
유니티 UI 에서 아틀라스 만들기 (Unity UI Atlas)
1. 2의 승수
게임에서 사용하는 이미지 리소스의 크기는 기본적으로 2의 승수 크기여야 합니다.
2의 승수
2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, ...
2의 승수가 아닌 다른 크기 이미지를 사용하더라도 컴퓨터*는 자동으로 2의 승수 크기 만큼 자원(메모리)을 사용합니다. 이는 컴퓨터 메모리 구조와 관련이 있습니다. 여기서는 복잡한 내용은 다루지 않겠습니다. 2의 승수로 이미지 크기를 맞추면 컴퓨터의 자원을 낭비 없이 사용할 수 있다는 점만 기억하면 됩니다.
*컴퓨터 : PC, 모바일 기기, 콘솔 게임기 등 모든 게임기기를 의미합니다.
예) 200 x 200 px 크기의 아이콘 이미지를 사용한다면, 컴퓨터는 이 이미지를 256 x 256 px 크기로 인식합니다. 빈 공간이 생기고 낭비됩니다.
2. UI 이미지의 크기
UI 디자인을 구성하는 개별 이미지 크기를 전부 2의 승수로 맞추는 것은 불가능합니다. 이런 제약이 있다면 디자인 작업을 제대로 할 수 없을 것입니다. UI 디자인은 디자이너가 원하는 대로 자유롭게 합니다. UI를 구성하는 개별 이미지의 크기도 디자인에 따라서 달라지며 제약이 없습니다.
개별 이미지를 2의 승수로 만들 수는 없으니 낭비되는 이미지 영역을 최소화하기 위한 방법으로 아틀라스를 활용하는 것입니다.
3. 아틀라스 (Atlas)
UI 디자인을 구성하는 개별 이미지 리소스들은 낱장의 이미지로 사용하지 않고 아틀라스(Atlas)라고 부르는 한 장의 이미지에 모아서 사용합니다. 아틀라스 이미지의 크기가 2의 승수가 됩니다. (1024 x 1024, 2048 x 2048, 4096 x 4096 등)
과거에는 포토샵에서 2의 승수 크기의 빈 이미지를 만든 후, 일일이 UI 리소스들을 모으고, 각 리소스의 위치 좌표를 따로 적어두고 활용해야 했지만, 지금은 게임 엔진을 통해 매우 편리하게 아틀라스를 제작하고 관리할 수 있습니다.
<아틀라스 이미지>
4. 유니티 UI 에서 아틀라스 만들기 (Unity UI Atlas)
(1) 프로젝트 세팅
1 프로젝트 세팅 메뉴를 선택합니다. Edit > Project Settings
2 Edior 탭을 선택하고 Sprite Packer 설정을 Sprite Atlas V1 - Always Enabled로 설정합니다.
(2) 아틀라스 생성하기
1 아틀라스를 보관할 리소스 폴더를 생성합니다. (ex. \Resources\GUI\Atals)
2 리소스 폴더 빈 곳을 우 클릭하여 아틀라스를 생성하고 파일 이름을 적절히 수정합니다. Create > Sprite Atlas
(3) 텍스처 타입 변경하기
1 개별 UI 이미지 리소스를 모두 선택합니다.
2 인스펙터에서 Texture Type을 Sprite (2D and UI)로 변경합니다.
*이렇게 하면 이미지를 Atlas에 추가할 수 있고, 이미지에 pivot, border, Physics shape 등을 설정할 수 있습니다.
3 압축옵션(Compression)을 None으로 변경합니다.
*변경하지 않으면 압축된 상태의 이미지가 아틀라스에 묶입니다.
(4) 아틀라스에 이미지 리소스 추가하기
1 Tight Packing 체크를 풉니다.
*체크하면 팩킹된 이미지 사이에 간섭이 생길 수 있어 풀어주는 것이 안전합니다.
2 아틀라스 파일을 선택하고 우측 인스펙터의 Objects for Packing에서 + 를 누릅니다.
3 Sprite 리소스를 모아둔 폴더를 선택합니다.
*개별 파일을 선택하거나, 폴더를 선택할 수 있습니다.
4 하단에 Pack Preview를 누르면 아틀라스로 묶인 이미지를 확인할 수 있습니다.
(5) 아틀라스 리소스 압축 설정하기
아틀라스 - 인스펙터에서 Compression을 None으로 설정합니다.
*빈번하게 사용하는 UI 윈도우, 버튼 등의 컨트롤 요소 등 공통 UI 리소스를 압축해서 사용하면 UI 퀄리티가 눈에 띄게 떨어지기 때문에 압축률이 낮은 옵션을 사용하는 것이 좋습니다.
게임 UI 리소스를 제작하는데 있어 반드시 알고 있어야 하는 아틀라스(Atlas)의 개념과 함께 유니티 UI에서 아틀라스 이미지를 만드는 방법에 대해 알아보았습니다.
다음 시간에는 이미지 압축에 대해 살펴보겠습니다.
