[Window]애니메이션 스프라이트 시트 생성 GlueIT

프로젝트를 진행하며, Mp4, Mov의 영상 확장자를 성능, 용량의 이슈로 사용할 수 없고,

WebP, WebM이 지원되지 않아 사용할 수 없다면,

 

2D 이미지를 애니메이션 할 수 있는 방법은 다음과 같다.

(1) 3D object + Bone + Key Animation

(2) Key Animation

(3) Gif

 

물론 각각의 장단점이 있지만,

모션그래픽영상을 사용하는 경우는 사용할 수 있는 선택지는 다음과 같다.

(1) Lottie

(2) Sprite Sheet

 

*개발자님들,,, 지원해주시면 안되요? 라고 했다가 전날 야근으로 지처있는 개발자의 아득한 눈망울을 보고 말았다...

 

당연히 모션그래픽일 경우 Lottie로 나가는 것이 가장 좋지만,,,
최적화로 보았을때 벡터 형태의 모션그래픽이라는 한계가 존재한다.

 

시간도 없고 원본 퀄리티를 지키기 위해서는 Animation Sprtie 가 최선의 선택지이다.

 

출처 : https://learnandcreate.tistory.com/941

 

 

스프라이트 시트는 여러개의 작은 그래픽을 그리드에 정렬하여 구성한 비트맵 이미지 파일이다.

Code를 통해 연속적으로 재생하는 형태로 사용되며,

Looping 되는 짧은 이미지 파일 혹은 짧은 모션 그래픽에서 리소스 최적화를 위해 사용하기 매우 좋다.

*단 1:1 비율로 가로세로가 존재해야되며, 빈공간이 존재해서는 안된다.

 

포토샵, 일러스트와 같은 어도비 계열 툴부터 PPT, Game Engine 등 여러 방법으로 리소스를 생성할 수 있으나,
우리는 빠른 퇴근을 위해

 

빛과 소금인 Gluelt를 사용하는 법에 대해 알아가고자 한다.

 

https://github.com/Kavex/GlueIT

GitHub - Kavex/GlueIT: :art: Simple SpriteSheet Tool

출처 : https://github.com/Kavex/GlueIT

 

단순하게 생긴 UI는 니가 퇴근을 빠르게 할 수 있을 것이다 라고 말해주고 있다.

 

테스트를 위해 사용했던 데이터를 참고하고자 한다.

청주박물관 Thㅏ랑해요~~

 

Add 를 통해 이미지를 받게 되면 다음과 같은 화면으로 되게 되며,

순서는 다음과 같다.

 

1. Number Of Colums

# X #으로 이미지 시트를 제작해주는 영역이며, 빈공간이 없이 만들어 주는 것이 핵심이다.
ex)
16장의 이미지 -> 4 X 4
9장의 이미지 -> 3 X 3

** 이미지는 2진수로 커지는 것이 올바르기 때문에 1:1 비율로 이미지를 생성해주는 것이 바람직 하다.
https://m.blog.naver.com/dohjang/221898954780

Texture 매핑의 이해

 

2. GlueIt

 

리소스는 6장의 이미지 이기 때문에 Number Of Columns에 3을 입력하고 GlueIT 버튼을 눌러 Sheet를 제작한다.

*GlueIT 버튼을 클릭해야 저장을 할 수 있다.

*Alpha가 있는 영역의 경우 Black으로 표현한다.

 

다음과 같이 이미지가 생성되게 된다면 Save를 통해 이미지를 저장하면 된다.
*필요에 따라서는 Pngyu를 통해 Indexed Color Space 로 변환하여 최적화를 진행 할 수 있다.

 

 

Q&A

Q. Sheet에 빈공간이 발생되게 되면 어떻게 되는가.
A. 빈 이미지가 출력되게 되며, Code를 통해 막을 수 있으나 불필요하게 Code가 길어지고 리소스를 잡아먹게 되기때문에 빈영역이 발생되지 않는 것이 좋다.

 

Q. 이미지 크기가 너무 커져서 리소스가 오히려 더 커졌다 이 경우 어떻게 진행해야되나?
A. 원본 이미지 크기를 일정부분(75~90%) 줄여서 이미지를 생성하는 것이 좋다.
* 생성시 이미지가 깨질 수 있으니 이점은 눈으로 확인하며 퀄리티 체크를 진행하는 것이 좋다.

 

Q. 데이터가 출력이 안되는데 어떠한 이유인지 알수 있을까?
A. 이미지가 너무 큰 경우 (Png에서 지원하지 않는 경우) 제작이 안될 수 있다.
*이럴 경우에는 개발자와 상의해서 영상확장자를 지원하는 쪽으로 가닥을 잡는 것이 정신건강에 이롭다.