[Kinect with XNA] XNA에서 GIF 애니메이션 구현

간만에 XNA 글을 좀 써보려고 합니다. 그래서 사실 키넥트랑은 상관이 없는데 그냥 이거랑 같이 진행하는 프로젝트가 키넥트랑 연관이 있어서 소개해드립니다.

사실 요즘 하고 있는 일 중 하나가 창조 캠퍼스라는 창업 프로젝트를 진행하는 겁니다. 목적이 키넥트가 제공하는 Skeleton Tracking 기능을 활용해서 재활에 도움을 줄 수 있는 어플리케이션을 구현하는 겁니다. 저는 그 중에서도 XNA Framework을 사용해서 하나의 게임을 구현하려고 했습니다. 

 그런데 그냥 정적인 아이콘을 사용하기에는 화면이 너무 딱딱한 거 같습니다. 그래서 이동하는 순간에도 움직이는 애니메이션을 보여주려고 노력했고 그 것을 위해서 gif 파일을 사용하기로 했습니다. 

다들 아시겠지만 gif는 Graphics Interchange Format의 약자로 여러장의 이미지를 하나의 파일로 압축한 형태를 의미합니다. 이걸 XNA에서 불러오고 그 개체의 position만 Time에 따라 움직이게 하면 진짜 캐릭터가 움직이는 것처럼 보이겠지요. 하지만 실제로 Content폴더에 이 파일을 넣으려고 하면 Content Pipeline에 포함되어 있지 않는다는 오류가 발생합니다. 실제로 Add file을 통해서 추가할 수 있는 파일은 다음과 같습니다.

이것들 중에 그림 파일은 딱 TextureFiles로 되어 있는 것들이고 이 개체들은 맨 위의 content Pipeline으로 정의되어 있습니다. 

사실 XNA Framework에서 content는 다음과 같은 형태로 불러들여집니다.

<출처 : http://blogs.msdn.com/b/shawnhar/archive/2008/11/24/content-pipeline-assemblies.aspx >

간단히 이야기 하면 중간에 Content Importer라는 게 있어서 게임에 쓸 수 있는 하나의 xnb 파일로 변환시켜주는 형태를 취합니다. 그러면 즉 Content Importer가 지원하는 포멧만 이렇게 바꿔줄 수 있다는 거지요. 그게 위에 나와있는 Content Pipeline이 될것이고요. 안타깝게도 gif는 이 Content Importer가 지원하는 포멧에 속하지 않습니다.

하지만 역시 필요는 가능성을 부른다는 말이 있지요. 역시 이에 대한 수요가 있었고 누군가가 임의로 gif를 추가시킬 수 있는 library 파일을 만들었습니다. 이른바 XnaGifAnimation Library입니다.

<http://xnagif.codeplex.com/>

그런데 재미있는 건 이 라이브러리에 대한 사용법을 언급하지 않았더군요. 그래서 저도 열심히 찾아봤고 그 방법을 소개해드리고자 합니다.

우선 압축을 풀면 다음과 같이 세 개의 폴더가 있습니다.

이중에서 맨위의 gifAnimation과 pipeline 폴더를 현재 만들고 있는 프로젝트에 삽입해야 합니다. 프로젝트를 선택한 후 위 두개 폴더에 들어있는 프로젝트를 추가하게 되면 다음과 같이 프로젝트 4개가 들어있는 솔루션이 됩니다. 

물론 이중에서 수정하는 건 기존에 있었던 프로젝트들이겠지요. 

C#프로젝트의 공통적인 특징이지만 해당 프로젝트를 사용하기 위해서는 reference를 추가시켜야 하겠지요? 맨처음 메인 프로젝트에는 gifAnimation의 레퍼런스를 삽입합니다.

그리고 두번째 Pipeline reference는 밑에 있는 Content 폴더에 참조시켜줍니다. 정상적으로 되었으면 다음과 같이 reference가 삽입될겁니다.

그리고 이제 using 지시자로 해당 library를 추가시켜줍니다.

자 제꺼는 class에다가 표현해줬는데 대략적인 형태는 일반적인 프로젝트와 유사하니까 적당히 수정하시기 바랍니다. 우선 변수 선언은 다음과 같이 해줍니다.

사실 이게 왜 이렇게 되었냐면 프로젝트 이름이랑 변수명이랑 똑같습니다. 그래서 구분시켜주는 차원에서 위와 같이 앞에 라이브러리 이름을 붙여줘야 정확히 인식합니다. 이게 gif 파일을 담을 수 있는 변수입니다. 즉 일종의 Texture2D와 같은 자료형이라고 보시면 됩니다. 

이제 여기다가 LoadContent를 통해서 파일을 Load하는 과정이 필요합니다. 그 과정은 다음과 같이 됩니다.

위에 있는 것들은 일반적인 Content.Load의 과정이고 gifAnimation도 거의 비슷합니다. 저는 Assets폴더안에 1.gif 라는 파일로 갖고 있으므로 path를 위와 같이 지정해줬습니다. 물론 gif 파일은 Content 폴더에 삽입하면 경고 메세지로 importer로 Autodetect되지 않는다는 메세지가 출력되지만 빌드하면 이 경고는 사라집니다. 

자 여기까지 하셨으면 이제 출력하는 과정이 필요하겠습니다. 그러면 이 거는 draw()에서 이뤄질텐데 gifAnimation의 draw는 다음과 같이 이뤄집니다.

spriteBatch.Draw()를 보시면 아시겠지만 첫번째 변수는 Texture2D 가 들어갑니다. 그렇기 때문에 gifAnimation을 Texture로 바꿔주는게 필요한데 library에서는 따로 GetTexture라는 메서드를 제공해서 임의로 바꿔줍니다. 위와 같이 해주면 정상적으로 인식하게 되는거지요. 앞에서도 언급했지만 지금 class 안에 들어있기 때문에 조금 다르게 보이는 겁니다만 일반 프로젝트와 동일하게 생각하시면 됩니다.

자 마지막으로 gif는 일종의 애니메이션 효과처럼 여러장의 이미지가 쌓여있는 형태를 취합니다. 그런데 그게 xna의 특성상 매 frame별로 출력되는 순서를 바꿔주는 게 필요합니다. xna 구조를 아시는 분도 계시겠지만 그런 역할을 하는게 바로 Update()라는 메서드였지요. 거기에 다음과 같이 삽입해줍니다.

역시 이것도 Library에서 제공하는 메서드고 따로 gif내에서 update가 이뤄지게끔 하는데 그에 재생 시간을 gameTime으로 적용하는 거지요. 이게 다입니다. 한번 결과를 보겠습니다.

보시는 것처럼 꼬치 모양에 애니메이션이 더해져서 움직이는 것처럼 보입니다. 문제가 있다면 원래의 캐릭터 색이 변한다는 건데 뭐 이거는 색상을 지정해서 충분히 바꿀 수 있는 여지가 있습니다. 아무튼 간단하게 XNA에서 gif 애니메이션을 적용시키는 방법에 대해서 다뤄봤습니다.