IMImeamangryang
VelogGitHub
← Blog

ENGINEERING NOTE

[Unreal Engine] Texture Atlas 기반 UI 구성

Texture Atlas는 여러 개의 작은 텍스처 이미지를 하나의 큰 텍스처(Texture)에 모아서 사용하는 방식이다.예시를 들면, UI 아이콘, 버튼 이미지, 스프라이트 등을 하나의 이미지 파일 안에 구성해두는 형식이다.게임에서는 UI 요소나 2D 그래픽 리소스가

6 min read
Unreal Engine

Texture Atlas란?

Texture Atlas는 여러 개의 작은 텍스처 이미지를 하나의 큰 텍스처(Texture)에 모아서 사용하는 방식이다. 예시를 들면, UI 아이콘, 버튼 이미지, 스프라이트 등을 하나의 이미지 파일 안에 구성해두는 형식이다.

게임에서는 UI 요소나 2D 그래픽 리소스가 매우 많이 사용된다. 이러한 이미지를 각각 개별 텍스처로 관리하면 렌더링 비용이 증가하게 된다.

이때 Texture Atlas를 사용하면 여러 이미지를 하나의 텍스처로 묶어 GPU가 한 번에 처리할 수 있게 되며, 이를 통해 렌더링 성능을 최적화할 수 있다.

Texture Atlas의 필요성

게임 엔진에서 텍스처를 사용할 때 중요한 개념 중 하나가 Draw Call이다.

Draw Call은 CPU가 GPU에게 렌더링 명령을 보내는 호출 단위

예를 들어 UI 아이콘 20개를 각각 다른 텍스처로 사용한다면 다음과 같은 문제가 발생한다.

  • 아이콘마다 텍스처 바인딩(Texture Binding) 이 발생한다.
  • Draw Call이 증가한다.
  • CPU에서 GPU로 전달되는 렌더링 호출 비용이 증가한다.

반면 Texture Atlas를 사용하면 이를 다음과 같은 방식으로 처리할 수 있다.

  • 여러 UI 이미지를 하나의 텍스처로 통합한다.
  • 텍스처 바인딩 횟수가 감소한다.
  • Draw Call이 감소한다.
  • 결과적으로 렌더링 성능이 향상된다.

따라서 리소스를 효율적으로 관리하고 렌더링 성능을 개선하기 위해 대규모 프로젝트 에서 Texture Atlas는 자주 사용되는 방식이다.


Texture Atlas 사용 방법

Texture Atlas를 사용하는 방식은 크게 두 가지로 나눌 수 있다.

  • Material에서 UV를 직접 제어하는 방식
  • Sprite를 생성하여 사용하는 방식

두 방식 모두 하나의 Atlas 텍스처에서 특정 영역을 선택하여 출력한다는 점은 동일하지만, UV를 직접 계산하여 사용할 것인지, 엔진에서 제공하는 Sprite Asset을 활용할 것인지에 따라 사용 방식과 관리 방법이 달라진다.

일반적으로 동적인 영역 제어가 필요한 경우에는 Material UV 방식을 사용하며, UI 아이콘이나 버튼과 같이 정적인 리소스를 사용할 경우에는 Sprite 기반 방식이 더 많이 사용된다.

Material UV 제어 방식

먼저 Texture Atlas를 기반으로 UI에서 사용할 Material을 생성한다. UI에서 사용할 Material이기 때문에 다음과 같이 설정한다.

  • Material Domain : User Interface
  • Blend Mode : Masked

이후 Atlas 텍스처에서 원하는 영역만 출력할 수 있도록 UV 좌표를 조절하는 구조를 만든다.

이를 위해 UV의 Scale과 Offset 값을 파라미터로 구성한다. Scale 값은 표시할 영역의 크기, Offset 값은 Atlas 내에서의 위치를 의미한다.

최종적으로 Material은 다음과 같은 구조로 구성된다.

이제 해당 Material을 기반으로 Material Instance를 생성하여 각 UI 요소에 맞는 설정을 적용한다.

각 인스턴스에서는 Scale과 Offset 값을 조정하여 Atlas 내에서 사용할 영역을 지정할 수 있다.

이렇게 생성한 Material Instance를 UI 위젯에서 사용하면 Atlas의 특정 영역을 원하는 UI 요소로 출력할 수 있다.

이 방식은 Material Parameter를 통해 UV를 동적으로 제어할 수 있다는 장점이 있지만, 각 UI마다 Scale과 Offset 값을 직접 관리해야 하기 때문에 관리 측면에서는 다소 번거로울 수 있다.

Sprite 기반 방식

Sprite 기반 방식은 Texture Atlas를 기반으로 Sprite를 생성하여 사용하는 방식이다.

위와 같이 Texture Atlas에서 영역을 나누면, Atlas를 기반으로 여러 개의 Sprite가 생성된다.

생성된 Sprite는 일반적인 이미지 에셋과 동일하게 UI(Image, Button 등)에서 바로 사용할 수 있다.

Texture Atlas를 다시 Sprite로 나누는 것이 의미가 있을까?

Texture Atlas를 다시 Sprite로 분리하면 Atlas의 의미가 사라지는 것처럼 보일 수 있다. 하지만 대부분의 게임 엔진에서 Sprite는 Texture 데이터를 복사하지 않는다.

대신 기존 Texture의 특정 영역(UV 영역)을 참조하는 방식으로 동작한다.

즉, 내부 구조는 다음과 같은 형태가 된다.

cpp
Atlas Texture
 ├ Sprite A
 ├ Sprite B
 └ Sprite C

여기서 각 Sprite는 새로운 Texture를 생성하는 것이 아니라 동일한 Atlas Texture를 공유하고 각기 다른 UV 영역을 참조한다.

따라서 여러 Sprite를 사용하더라도 같은 Texture Atlas를 기반으로 렌더링되기 때문에 렌더링 배치(Rendering Batch)는 유지된다.