스프라이트(Sprite)란, 2D 그래픽에 사용되는 기술로서 한장씩 독립된 이미지의 단위입니다.
2D 게임에서는 스프라이트를 이용해서 게임 화면 전체를 만듭니다.
일반적인 액션 게임은 배경, 캐릭터, 블록, 아이템, 지면 등 같은 화면에서 각각 다른 동작을 하는
게임 오브젝트를 등장시켜 게임을 만듭니다.
게임 안에서 자주 등장하는 동일한 오브젝트의 예로 블록이나 구름, 아이템 등은 스프라이트를 이용하면
쉽게 재사용 할 수 있습니다.
블록을 예로 들어 설명하겠습니다.
다향한 형태로 나열된 블록을 게임상에 표현할 때, 다양한 형태의 이미지
소재를 일일이 만들려면 매우 번거롭습니다.
그러나 블록의 스프라이트를 하나 만들어 두면 그 블록을 다양한 장소에 배치하는 것만으로도 다양한
형태의 나열 방법으로 표현할 수 있습니다.
스프라이트를 잘 활용하면 게임 안에서 사용하는 에셋의 양을 줄일 수 있기 때문에
모바일 같은 소형 기기에서 흔히 문제가 되는 메모리의 사용을 절감할 수 있습니다.
2D가 주류였던 때의 게임을 실행해 보면 알 수 있듯이,
다양한 부분에 동일한 스프라이트가 사용되고 있습니다.
텍스처 아틀라스 (Texture Atlases)
스프라이트의 장점은 여러 개의 이미지를 한 장의 텍스처에 모아 놓을 수 있다는 점이며
이러한 것을 텍스처 아틀라스 (Texture Atlases)라고 합니다.
한 장에 모아 놓음으로써 메모리의 부하도 줄일 수 있고, 그리기 명령을 호출하는 횟수를 줄일 수 있습니다.
메모리의 부하를 줄일 수 있는 이유는 GPU (Graphical Processing Unit, 이미지를 처리하기 위한 프로세서)의
텍스처 저장 방법 때문입니다.
2의 n승 크기
GPU의 텍스처 저장 방식
텍스처는 GPU안에서 2의 n승 크기로 저장됩니다.
그렇기 때문에, 2의 n승이 아닌 스프라이트를
GPU에 전송했을 때 불필요한 영역이 생기게 됩니다.
위 사진을 보면 우리가 GPU에 전송한 이미지의 크기는 (300 x 260) 인데
GPU 에서 강제로 필요없는 2의 n승형으로 불필요한 공간을 더 만들었습니다.
텍스처 아틀라스 (1024 x 1024)
이럴때는 텍스처 아틀라스라는 방법을 사용합니다.
텍스처 아틀라스란 텍스처를 2의 n승 크기로 된 한 장의 이미지에 사용할 그림들을 몽땅 집어넣어
메모리를 절약하는 방법입니다.
텍스처 아틀라스를 만드는 방법은 간단합니다.
그림판이나 포토샵같은 그래픽 편집 프로그램을 사용해서 2의 n승 크기의 이미지를 직접 만들면 되지만
직접 자르고 붙이는 작업이 번거롭기 때문에
텍스처 아틀라스를 만들어주는 Sprite Editor 를 사용합니다.
그 덕분에 개발 속도에 저해를 받지 않고 이미지 에셋을 추가하거나 변경할 수 있어
성능 면에서도 어느 정도의 성과를 기대할 수 있는 이점이 있습니다.
이미 텍스처 아틀라스를 만든 후에 이미지를 새로 추가 (또는 변경)할 경우, 아틀라스를 다시 만들어야 합니다.
이는 개발 속도를 늦추는 결정적인 원인이라 할 수 있습니다.
특히 게임 개발의 초기 단계에서는 모든 요소나 사양이 완벽하게 정해져 있지 않은 경우가 대부분입니다.
이럴 때 텍스처 아틀라스를 다시 제작한다는 것은 개발 비용을 높이는 원인이 될 수도 있습니다.
게임 개발을 할 때 스프라이트와 텍스처가 일대일로 구성되어 있으면 작업을 하기 수월합니다.
스프라이트 패커는 개별적으로 추가한 이미지 파일에서 자동으로 텍스처 아틀라스를 생성해 주기 때문에
직접 수작업으로 만드는 것에 비해 개발 속도에 지장을 덜 받습니다.
어디까지나 자동 생성이기 떄문에 임의로 나열되어 곤란한 경우를 제외하면, 초보자가 가볍게 성능 개선을 할 목적이거나
개발 초기 단계에서 모의 테스트를 할 목적으로 사용하기에는 유용한 툴 입니다.
텍스처 아틀라스를 만들어주는 프로그램은 아주 다양하므로 여기서는
각종 프로그램의 사용방법을 설명하기 보다는
소개만 하도록 하겠습니다.
Texture Packer
Zwoptex
unity - sprite packer
등이 있습니다.
'나의 백과사전' 카테고리의 다른 글
문자열 접합 (string concatenation) (0) | 2014.09.18 |
---|---|
플로우 차트 (flow chart) (0) | 2014.09.13 |
디버거 (Debugger) (0) | 2014.09.13 |
Script (스크립트) (0) | 2014.09.13 |
레이어 (Layer) (0) | 2014.09.12 |