리듬게임을 만들어보자 9. 그림 글자를 그려보자.

MidiGalaxy-09.zip

글자 출력은 D3D에서 제공하는 ID3DXFont 인터페이스를 이용해서 쉽게 할 수 있다. 그런데 그렇게 해서 그린 글자는 별로 멋지지가 않다. 그렇다면 아예 스프라이트로 글자 모양을 준비해 놓고선, 이것을 이용해서 문자열을 출력한다면 어떨까?

이렇게 0~9까지 10개의 문자를 준비해놓으면 정말 멋지게 숫자를 출력할 수 있다.
자, 스프라이트를 이용해서 문자열을 출력하는 클래스 GFont를 만들어보자.

struct CharDat { UINT sprindex; //문자가 담긴 스프라이트 번호 UINT width; //문자의 가로 길이 UINT height; //문자의 세로 길이 }; class GFont { protected: GSprites m_sprs; CharDat m_cd[96]; public: enum{ align_left=1, align_center=2, align_right=3, align_horizon_flags=3, align_top=1<<2, align_vcenter=2<<2, align_bottom=3<<2, align_vertical_flags=3<<2, };//문자열 정렬 방법 GFont(); GSprites* GetSprites(); GRET Draw(LPCWSTR str, RECT* pr, DWORD align, float s=1.f, D3DCOLOR color=0xFFFFFFFF) const; GRET Draw(int i, RECT* pr, DWORD align, float s=1.f, D3DCOLOR color=0xFFFFFFFF) const; GRET SetCharDat(wchar_t c, UINT sprindex, UINT width, UINT height); RECT CalcSize(LPCWSTR str, float s=1.f) const; };
CharDat는 문자에 대한 정보를 저장하고, 이런 CharDat 96개 (ASCII코드 32번부터 127번까지. 즉, 숫자와 알파벳, 기본적인 특수문자들만 포함된다. 불행히도 한글 출력에 관해서는 다루지 않을 것이니, 한글 출력을 생각하고 있는 사람은 다른 방법을 찾아보도록.) 하고, 스프라이트 객체를 GFont가 처리한다.
GFont가 한글 출력을 다루지 않는 이유는 다음과 같다.
1. 문자가 너무 많다.
2. 초성, 중성, 종성으로 분리한다고 해도 문자가 많다.
3. 초성, 중성, 종성 모양이 다른 자음, 모음에 의해서 그때그때 달라진다.
4. 이런 걸 전부 따지려면 글꼴 디자이너 한 명을 고용해야 할텐데 나는 돈이 없다.
5. 한글을 출력할 일이 거의 없다.

RECT GFont::CalcSize(LPCWSTR str, float s) const { vector<int> xs; xs.push_back(0); int y=0; vector<int> ys; ys.push_back((int)(m_cd[0].height*s)); while(*str) { if(*str==L'\n') { xs.push_back(0); y+=*max_element(ys.begin(), ys.end()); ys.clear(); } else if(*str==L' ') { xs.back()+=(UINT)(m_cd[0].width*s); ys.push_back((int)(m_cd[0].height*s)); } else if(*str<128) { xs.back()+=(UINT)(m_cd[*str-32].width*s); ys.push_back((int)(m_cd[*str-32].height*s)); } str++; } y+=*max_element(ys.begin(), ys.end()); RECT r={0, 0, *max_element(xs.begin(), xs.end()), y}; return r; }
CalcSize함수는 출력할 문자열의 사각 크기를 구해준다. 크기를 구하는 방법은 간단하다.
(단, 문자는 왼쪽에서 오른쪽으로 쓴다. 아랍문자 같은거는 생각하지 말자^^)
1. 문자 하나를 읽고, 그 문자 가로길이만큼 오른쪽으로 이동한다.
2. 만약 줄바꿈 문자가 나왔다면, 지금까지 오른쪽으로 얼만큼 이동해왔는지 저장해두고, 다시 제일 왼쪽으로 간다. 그리고 문자의 높이만큼 아래로 이동한다.
3. 만약 한 줄 안에 있는 문자들의 높이가 서로 다르면 가장 높이가 큰 문자의 높이를 기준으로 삼는다.
4. 널문자를 읽으면 (문자를 전부 다 읽으면) 현재까지 오른쪽으로 이동한 것들중 가장 많이 이동한 것을 가로길이로 정하고, 현재까지 아래로 이동한 양을 세로 높이로 정한다.

CalcSize함수는 이 방법을 따라, 문자열의 크기를 구해준다.

GRET GFont::Draw(LPCWSTR str, RECT* pr, DWORD align, float s, D3DCOLOR color) const { RECT size=CalcSize(str, s); int x, y; switch(align & align_horizon_flags) { case align_center: x=pr->left+(rect_width(*pr)-size.right)/2; break; case align_right: x=pr->right-size.right; break; default: x=pr->left; break; } switch(align & align_vertical_flags) { case align_vcenter: y=pr->top+(rect_height(*pr)-size.bottom)/2; break; case align_bottom: y=pr->bottom-size.bottom; break; default: y=pr->top; break; } vector<int> ys; ys.push_back((int)(m_cd[0].height*s)); while(*str) { if(*str==L'\n') { y+=*max_element(ys.begin(), ys.end()); ys.clear(); } else if(*str==L' ') { x+=(UINT)(m_cd[0].width*s); ys.push_back((int)(m_cd[0].height*s)); } else if(*str<128) { GRET r=m_sprs.DrawSprite(m_cd[*str-32].sprindex, x, y, s, s, color); if(r!=GRET_OK)return r; x+=(UINT)(m_cd[*str-32].width*s); ys.push_back((int)(m_cd[*str-32].height*s)); } str++; } return GRET_OK; }
Draw함수는 문자열을 출력한다.
이 함수는 크게 세 부분으로 나눌수 있는데
1. 먼저, 문자열의 크기를 구하고,
2. 그 크기와 정렬 방법에 따라 출력위치를 조절하고,
3. 출력한다.

문자열 출력은 문자열의 크기를 구할 때랑 비슷하게,
한 문자를 찍고, 오른쪽으로 이동하고, 또 찍고 이동하고 ...
줄바꿈 문자가 나오면 제일 왼쪽으로 이동하고, 아래로 이동.
참 쉽죠?


그렇다면 이제 리듬게임을 위한 화면 구성에 본격적으로 들어가보자.
어떤 구성요소들이 필요할까? 잘게 잘게 쪼개보자.

1. 기본틀
2. 체력 막대
3. 떨어지는 노트들
4. 버튼을 눌렀을때 나오는 이펙트
5. 잘 누르거나 놓쳤을 때 나오는 메세지들
6. 콤보시 나오는 콤보 숫자
(또 있나???)

자, 이 여섯 가지 요소에 각각의 그리기 객체를 대응시키고, 상황에 따라 적절한 처리만 해주면 된다.
다음 강에서는 이 여섯 가지 요소를 직접 구현해봅시다.

숫자 출력 및 기본틀과 체력 막대기 테스트.