[Kinect 프로젝트] XNA와 Kinect의 결합! ColorStream편

키넥트와 관련해서 유용한 문서가 공개되었습니다.

 
제가 알기론 Rob Miles 씨는 2월말에 출간한 Beginning of the Kinect for windows programming 책의 저자였던 것 같았는데 이 분이 이런 자료를 공개해주시네요. 그래서 제가 하고 있는 것도 해서 당분간은 XNA로 한번 해보고자 합니다.

 기존에는 WPF나 WinForm으로 열었던 것과 다르게 이번 프로젝트는 XNA GameStudio으로 여셔야 합니다. 아시는 분은 아시겠지만 XNA는 C#을 기반으로 하는 게임 전용 라이브러리입니다. 그래서 이미지의 변형이나 이동에 관한 동작이 기존의 C# 코드보다 수월하게 작업할 수 있습니다. 물론 플렛폼 또한 PC, Xbox360, 심지어는 Windows Phone 7의 개발에도 쓰일만큼 멀티 플렛폼화되어 있습니다. 약간씩은 차이가 있긴 하지만 그래도 하나의 플렛폼에서 만들어 놓으면 다른데서도 거의 비슷하게 나온다고 보시면 될 것 같습니다.

우선 Windows Game형식의 XNA 프로젝트를 여시고 KinectCam이라고 이름을 짓습니다.
(참고로 XNA GameStudio가 설치되지 않으신 분이라면 링크 로 가셔서 Windows Phone SDK를 설치하시면 됩니다. 왠 키넥트 개발에 윈도폰 SDK가 필요하냐 하시는 분도 있으실 듯한데.. 그냥 포함되어 있습니다..)

 익숙하지 않게 딱 가운데에 코드화면만 뜹니다. 이제 여기에 코드를 입혀야 합니다. 물론 키넥트 전용 프로젝트가 아니기 때문에 당연히 reference로 Microsoft.Kinect를 삽입하고 using 지시자로 포함시켜줘야 하겠지요.

어차피 거의 전반적인 구성은 WPF를 할때와 비슷합니다. 다만 XNA에서는 이미지를 불러오고 타겟에 호출하는데 과정이 구역별로 나눠져 있습니다. 

 조금 복잡해보이기는 하지만 Game1이라는 클래스안에 다양한 메서드가 포함되어 있습니다. 그래서 이미지에 관련된 항목은 Draw,초기상태에 대한 설정은 Initialize, 게임 내용이나 인터페이스에 관한 내용은 보통 LoadContent에 포함되고 모든 작업을 완료했을 때는 Update 과정을 통해서 타겟에 내보내주는 것이 주요 맥락입니다.

가장 맨 처음에 역시 정의가 되어야 하겠지요. 다음과 같이 정해줍니다.

기존에 있었던 GraphicDeviceManager나 SpriteBatch는 게임상에 쓰이는 이미지를 호출할 때 이용되는 변수들입니다. 
우리는 앞 프로젝트에서 했던 것처럼 KinectSensor 에 관한 변수를 선언해주면 됩니다.

다음으로 넘어가야 하는 부분은 키넥트로 인터페이스를 형성하기 위해서 LoadContent에 관한 항목을 지정해줘야 합니다. 여기에는 앞프로젝트에서 우리가 InitializeNui란 메서드로 채웠던 내용을 넣어주시면 됩니다. 다음과 같이 합니다.

지금까지의 포스팅을 잘 따라오셨다면 이 내용은 완전 똑같습니다. 심지어는 탭탭하는 과정까지 말입니다. 차이점은 단순히 메서드를 지정한게 아니라 LoadContent라는 사전에 만들어진 메서드에 들어가 있다는 겁니다.

자 이 부분은 냅두고 다시 처음으로 KinectSensor를 정의했던 부분으로 돌아가서 새로운 변수들을 선언해줍니다.

지금 추가가 된 부분은 밑에 있는 Texture2D와 Rectangle 인데 그냥 말그대로 2차원 이미지와 사각형을 부르는 겁니다. 이걸 Initialize라는 메서드에서 써먹어야 합니다.

 사각형에 대한 정의를 해주면 이제 동작은 이렇게 되는 겁니다. Initialize를 통해서 사각형이 생성된 후 LoadContent를 통해서 Kinect 동작이 활성화되는 겁니다.
이제는 게임상에서 호출할 이미지에 대한 정의를 해줘야 합니다. 이부분은 앞에서도 잠깐 이야기 했었지만 Draw 메서드에서 처리해줘야 합니다.
 

맨 처음에는 CornflowerBlue라는 색깔로 스크린을 초기화 한후 KinectVideoTexture로 받은 값을 하얗게 처리해주는 것이 목적입니다. 단순하게 보면 spriteBatch라는 건 그리기 도구라고 보시면 됩니다. Begin이 이뤄진 상태에서 손을 이용해서 자신이 원하는 도형을 그리고 손을 때면서 End가 나오면 비로소 그림 그리는게 끝이 나겠지요. 일단 실행해봅니다.
 

지금 보이는 색깔이 바로 CornflowerBlue라는 색상입니다. 지금은 ColorFrameReady 이벤트를 처리하지 않아서 흰색이 처리되지 않지만 어떤 식으로 구성이 될건지는 감이 잡히실 겁니다. 이제 이벤트를 처리해야 합니다.

이 부분은 기존의 WPF 방식과 똑같습니다만... 문서에서는 조금 다른 문법으로 정의를 했네요. 따라해보겠습니다.

 

기존엔 이런 구문이 없었지요. using이 사용된 것...
이건 Garbage Collection에 관련된 내용입니다. 컴퓨터의 구조상 모든 프로그램은 램에서 불러오고 끝나면 파괴되어야 합니다. 기존의 내용은 이런게 없어서 하고 데이터가 남게 됩니다. 물론 그게 쌓인다고 성능에 지장을 주는 건 아니지만 올바르게 쓰려면 위와 같이 정의해줘야 하겠지요. 이는 Frame을 처리하는 이벤트 자체가 메모리를 많이 쓰기 때문이라고 문서에서는 정의하고 있습니다.
 물론 ImageParam가 없을 때는 그냥 넘어가야하겠지요?( 이부분에 대한 정의가 안되면 아시겠지만 NullReferenceException 에러가 발생합니다.)

byte형 배열은 생성시켜줘야 하겠지요?

거의 똑같습니다만 다만 ColorData를 사전에 초기화 시키고 다시 복사해서 넣는 과정은 조금 다른 거지요. 기존에는 ImageBits이란 이름으로 했었지요.

그다음 앞에서 정의했던 변수중 KinectVideoTexture를 여기서 씁니다.

그다음 다음과 같이 정의해줍니다.

WPF로 할때는 이런 과정이 필요없었는데 원하는 색상을 이렇게 결정해주어야 합니다. 참고로 Color의 구성요소가 4개로 되어 있는데 순서대로 RGBA(Alpha) 입니다.

이런 식으로 진행됩니다. 4바이트씩 이동하면 ColorData에 관한 정보를 빼오는 겁니다. 문서에 좋은 예시가 있네요.

이렇게 순차적으로 0~3 / 4~7을 순차적으로 읽어오는 겁니다.

전체적인 블락은 다음과 같습니다.

여기까지 하면 결과는 다음과 같이 나옵니다.

앞에서 CornflowerBlue로 나오던게 아니라 실제로 이미지가 이렇게 뜹니다. 이게 XNA에서 ColorStream을 뽑아오는 방법입니다.