XNA로 구현하는 HelloWP7!

어제는 Silverlight를 통한 Hello Phone에 대한 내용을 다뤘었습니다.

하지만 WP7을 개발하는데 있어서 Silverlight만 쓸 수 있는 건 아닙니다. 2004년 microsoft에서 발표한 xna game studio를 이

용하면 WP7에서 구현되는 게임을 쉽게 만들 수 있다고 합니다. 현재 Windows Phone SDK를 설치하면 visual studio에 addon

형식을 xna game studio 4.0 버전이 설치되고 여기에는 게임관련 라이브러리들이 내재되어 있습니다.

이번 포스팅에서는 이 XNA를 활용해서 HelloWP7을 해볼까 합니다.

 
일단 SDK를 깔게 되면 Templete창에 다음과 같이 XNA관련 항목이 생깁니다. 여기서 Game을 만들기 위해 맨 위 프로젝트를 선택해주고 HelloWP7이라고 이름 짓습니다.

Silverlight를 통한 WP7 프로젝트 시와 다른점은 프로젝트 내에 xaml 파일이 없다는 것, library 관련 항목이 xna 위주로 들어가 있다는 것 등의 차이가 나타나고 있습니다.

아마 눈으로 볼수 있는 가장 큰 차이는 바로

 

디버깅시 하늘색으로 나타나는 화면이 아닐까 싶네요.

우선 Hello WP7이라는 문자를 출력하기 위해선 프로젝트 내에 spriteFont를 삽입해줘야 합니다. 다음과 같이 contents에 마우스를 클릭하시고 새 개체를 삽입해줍니다.

 
그럼 아마 기존에 보던 것과 다른 아이템들이 있을겁니다. 

정상적으로 설치된 경우라면 저 아이템들이 하나씩 뜰겁니다. 제꺼는 왜 그런지 모르겠네요.
아무튼 sprite라 함은 도깨비라고들 알고 있지요. 도깨비처럼 빠르게 이동할수 있는 작은 비트맵을 말합니다. 한마디로 그림이라는 거지요. xna로 구현되는 게임은 빠른 동작성을 위해서 폰트자체도 sprite라는 bitmap 형식을 따옵니다.

이걸 이제 아까 언급했던 걸 진행하면 다음과 같은 코드가 뜨게 됩니다.

뭔가 복잡해보이긴 하지만 실질적으로 font의 문체, 크기, 자간 간격등을 결정해주는 코드입니다.그래서 맨 마지막에 이 문자를 형성하는데 필요한 유니코드를 담고 있습니다. 결론적으로 특별히 ASCII 코드 범위 외로 문자를 삽입하지 않을거라면 이 부분은 터치 안하셔도 될듯합니다.

일단 한가지 팁이라면 지금 이런 폰트의 성질을 띄고 있지만 게임내에선 다양한 폰트를 사용할 수 있습니다. 게임내에서 폰트를 불러올 때는 함수를 불러오는데 지금처럼 default로 설정하면 나중에 어떤 폰트를 써야할 때 찾기가 쉽지 않을겁니다.
그래서 보통은 함수 이름에 사용한 폰트가 들어가 있게끔 합니다. 가령 지금 프로젝트에 쓰이는 폰트는 segoe14 이므로 이름도 segoe14.spritefont라고 지어주면 괜찮겠지요.

자 메인 프로젝트 내부에 보면 이제 game1.cs와 program.cs라는 코드가 생긴 것을 알 수 있습니다. 여기서 우리가 다뤄야 하는 것은 바로 main인 game1.cs입니다.
(책에 나와있는 바에 따르면 program.cs는 윈폰7 개발에는 필요없는 요소라고 합니다. 그냥 내비두세요.)

이제 코딩을 삽입하겠습니다.

기존 game1.cs를 열면 위의 두줄은 기본적으로 삽입되어 있습니다. 그래서 원하는 메세지를 삽입후 font는 segoe14, 그리고 vector 라는 필드를 사용했습니다. vector를 쳐보시면 아시겠지만 여러개가 나옵니다. 그중 vector2 구조체는 2차원의 위치 크기 벡터를 표현할 때 사용하는 거라고 합니다.

그런데 단순히 이렇게만 쓰면 실행이 안됩니다. 밑의 코드를 보신 분들은 아시겠지만 삽입한 변수를 정의한 것이 하나도 없습니다. 따라서 이 부분을 삽입해줘야 되겠지요. 그 걸 삽입하는 부분이 바로 LoadContent() 입니다.

또한 2차원상의 textsize를 결정하기 위해서 segoe14 문체를 적용하고 Measurestring 함수를 사용했습니다. Measurestring속에 픽셀에 따른 문자사이즈가 정의되어 있기 때문에 자동으로 계산해줍니다. 가령 지금 쓰고있는 segoe14는 포인트가 14인데 실제 함수를 적용함으로써 28포인트로 반환됩니다.

이 폰트가 쓰이는 화면의 크기를 알아내고자 할때는 viewport라는 속성을 사용합니다. 이는 graphicsDevice클래스에 속해있는데 화면의 폭과 길이에 대해 알 수 있습니다.

마지막으로 쓴 textPosition은 text의 위치를 잡아주는 겁니다. 우리는 화면의 정 가운데에 글을 삽입할 것이므로 위와 같이 정의해주면 되겠지요.

일단 전반적인 폰트나 화면에 관한 초기화과정을 마쳤습니다.
그럼 이제 어떻게 프로그램을 구동시키느냐를 결정지어야 되는데 보통 게임은 고속으로 화면을 변화시키기 때문에 upload와 draw라는 개념을 써서 화면을 호출합니다. 물론 좀더 부드럽게 표현이 되기 위해서는 가능한 위와 같은 매소드가 빠르게 전환되어야 되겠지요.
책에서 언급한 주의점은 다음과 같습니다.

- update나 Draw에서 정기적으로 메모리를 지역 힙에 할당하는 것을 삼가라.
- update 매소드 내에서 클래스와 연관된 new 구문을 쓰지마라.
(사실 저도 다루는 입장에서 어떤 알고리즘을 다루지 말라는 건지 잘 모르겠네요.) 

뭐 아무튼 update()는 놔두고 이제 마지막으로 수정해야 되는 부분이 Draw()입니다. 다음과 같이 수정해줍니다.

사실 맨처음으로 삽입된 코드에는 Color가 CornflowerBlue로 되어 잇었을 겁니다. 그래서
맨처음 디버깅을 실시했을때도 뭔가 희미한 하늘색이 떴었고요. 보기도 좋고요. 그런데 그게 폰의 OLED측면으로 봣을때는 평소보다 더 많은 전력을 소모하게 만듭니다. 물론 고려하는 측면에 따라서 달라지겠지만 사용자 입장에선 화려한 것보다는 재미있는 게임을 오래하는 게 목적이겠지요. 그래서 색상을 어두운 계열인 Navy로 바꿨습니다.

앞에서 선언한 spriteBatch를 써서 시작과 끝을 나눴습니다. 물론 그 사이에 문자를 표시하기 위해서 따로 DrawString 메소드를 사용했지요. 저렇게 하면 아마 저 문체에 흰 글자가 나타날겁니다.

결과는 다음과 같습니다.

이전 Expression Blend로 프로젝트를 실시했을 때는 특별히 Portrait에 옵션을 주지 않고서는 거의 세로로 동작하였습니다. 그런데 xna를 활용한 프로젝트에서는 default가 가로보기 모드로 되어 있습니다. 이또한 결말에서 알 수 있었던 silverlight와 xna로 만든것 간의 차이겠네요.

여기까지 XNA로 구현한 Hello Phone 7 이었습니다. 이 내용은 Chales Petzold의 windows phone 7 programming에도 수록되어 있는 내용입니다. 더 자세한 내용은 http://msdn.microsoft.com/ko-kr/gg415576 에서 다운받아보셔도 좋을 것 같습니다. 물론 영어입니다^^
앞으로도 책을 위주로 진행해보자 합니다.