안녕하세요! 2시간 쯤 전에 개발을 마치고 소드 아트 온라인 프로그레시브 2권을 읽고오니 공돌이가 싫어하는 태양은 사라지고 기분 좋은 밤 공기가 맞이해주는군요.
아 정말 좋은 밤입니다. 맥주 마시고 싶네요 ㅇㅅ;;

이 글은 이걸로 마지막입니다.

아직 개발해야 할게 몇 개 남았지만 제 실력에는 좀 무리일거 같고 여러분 실력이면 충분히 개발 가능하지 않을까 싶습니다.
이미 개발하시고 'ㅋㅋㅋ 이거 글 언제 올라오냐 ㅋㅋ 포기한건가 ㅋㅋㅋ' 라는 생각을 하고 계신 분들도 계시겠죠 ㅜ_ㅜ 제가 머리가 나빠서 그렇습니다 ㅜㅜ

뭐 기분 좋게 스크린샷으로 시작해보죠. 다운그레이드 됐다면 다운그레이드 됐지만 설치된 글꼴만 사용 가능합니다.

오오옹. 잘 되는 거십니다.

이 글은 http://youtil.wo.tc/113 <- 에서 설명하는 글을 마친 상태에서 진행됩니다.

먼저 EditBox를 띄우는 방법을 알아야겠죠.
이미 알고 계시겠지만 3D에서 흔히 사용하는 투영 행렬은 마지막 계산 결과가 -1, -1, 0 ~ 1, 1, 1 사이에 있게됩니다. 다시 말해서 프로젝션 행렬을 굳이 연산하지 않아도 괜찮다는 말이죠.

그래서 버텍스가 (-1, -1, 0.1), (1, 1, 0.1)인 사각형을 렌더링 하려면 그냥 identity 행렬을 곱해주고 그대로 렌더링하면 되고 그 결과는 Client Window의 0,0 부터 Width, Height까지 완벽하게 꽉 찬 사각형이 렌더링 되게 됩니다. 오호, 마침 저희에게 딱 필요하지 않나요? 이렇게 된거 아예 저 버텍스에다가 Scaling하고 Translation을 먹여서 크기를 바꿔서 클라이언트 좌표에 맵핑시켜서 렌더링 하는것도 괜찮은 방법인거 같습니다. 오오. 속도는 모르겠지만요.....

먼저 클라이언트 좌표계를 NDC공간으로 바꿔보죠. 으음. 일단 Client Window의 Width와 Height가 필요할것 같군요.

struct TransformNDC
{
	float scaleX, scaleY, scaleZ;
	float movX, movY, movZ;
};

TransformNDC ClientToNDC(const RECT& target, int windowWidth, int windowHeight)
{
	float width = target.right - target.left;
	float height = target.bottom - target.top;

	float scaleX = width / windowWidth;
	float scaleY = height / windowHeight;
	float scaleZ = 1;

	float ratioX = 2.0f / windowWidth;
	float ratioY = 2.0f / windowHeight;

	float movX = -(1 - scaleX) + (ratioX * target.left);
	float movY = (1 - scaleY) - (ratioY * target.top);
	float movZ = 0;

	return TransformNDC{ scaleX, scaleY, scaleZ, movX, movY, movZ };
}

굳이 클래스에 넣어야 하나 싶어서 그냥 만들어봤습니다.
대충 이렇게 씁니다.

auto translate = ClientToNDC(RECT{ 0, 0, 800, 600 }, mClientWidth, mClientHeight);

XMMATRIX scale = XMMatrixScaling(translate.scaleX, translate.scaleY, translate.scaleZ);
XMMATRIX world = XMMatrixTranslation(translate.movX, translate.movY, 0);

XMMATRIX를 블로그에서 쓰려니 갑자기 생각난건데 개발 할 때 DX초기화 하는걸 직접 하기가 좀 뭐시기 해서 제가 보는 책에 있는 프레임워크를 가져다 썼더니 쓰게됐네요. 전에 넥슨 다니시는(부럽) 학교 선배분께 'XNA라이브러리 쓰나요?' 라고 물었다가 '그게 망한지가 언젠데 아직도 쓰고있어?'라는 소리를 들어서(...) 저도 슬슬 버릴까 합니다만 책을 다 볼 때 까지는 쓰려고 합니다 ㅇㅅ.

뭐 이제
http://youtil.wo.tc/114 <- 이 글을 참고하셔서 IMM 컨텍스트를 적당한 메시지에 생성해 주시고...
http://youtil.wo.tc/115 <- 를 참고해서 적당히 insert와 erase '만' 쓰도록 하죠.
사실 115번 글에서 사용한걸 사용 가능할거라고 믿었는데 산산히 부숴졌습니다. 뭐 그래도 DirectWrite의 DrawText도 잘 만들어져 있어서요. 위 글에서 사용한 방법보단 좋을것같네요. 다소 귀찮지만.

적당히 첫번째 글을 마쳤다면 DWriteFactory(IDWriteFactory)객체가 하나 있을거라고 생각됩니다.(사실 저는 여기저기 짜집기한거라 DWriteFactroy가 첫번째 글에 있는 그 링크에 있는지 없는지 기억이 안나네요; 없으면 만들어주세요 ㅜ_ㅜ)

그래서 DWriteFactory를 잘 살펴보면 CreateTextLayout라는 맴버 함수가 있습니다. 이 녀석을 이용해 IDWriteTextLayout이라는 녀석을 만들어보죠.

IDWriteTextLayout* layout;
// DWriteFactory가 없다면 만들어주세요.
DWriteFactory->CreateTextLayout(printText.c_str(), cursorPos, TextFormat, mClientWidth, mClientHeight, &layout);

그러고 나서 layout 인터페이스에 짝대기를 하나 그어주니... GetMetrics 라는 맴버 함수가 하나 나오는군요!!! 우오오! 그리고 그 밑에 좀 더 찾아보니 무려 GetLineMetrics라는 녀석도 있습니다 우와아아! 이걸로 멀티 라인을 만들 수 있어요! 안에 무슨 변수가 들어가는지는 MSDN을 참고하시고! 여기 서중요한건 GetMetrics로 현재 몇 라인을 가지고 있냐와 폰트의 Height를 구할 수 있습니다. 그리고 GetLineMetrics라는 녀석을 사용하면 각 라인에 몇개의 글자가 들어가있는지 알 수 있죠.
자 그럼 아래 발로 짠 코드를 잠시 발로 볼까요?

IDWriteTextLayout* layout;
// 출력할 때는 모든 문자열이 필요하지만 길이를 계산할 때에는 현재 커서 위치만 알면 됩니다.
// 아래 두번째 인자를 봐주세요. 현재 커서 위치를 담고있는 변수입니다.
// mClient* 가 들어가는 곳은 에디트 박스의 크기를 넣으시면 됩니다. (만들어질 에디트 박스의 크기가 아닙니다. 보여지는 에디트 박스의 크기입니다!)
// 아래에서 사용되는 mClient*도 같은 의미입니다.
DWriteFactory->CreateTextLayout(printText.c_str(), cursorPos, TextFormat, mClientWidth, mClientHeight, &layout);

DWRITE_TEXT_METRICS metrics;
layout->GetMetrics(&metrics);

std::vector<DWRITE_LINE_METRICS> lineMetrics(metrics.lineCount);
UINT32 lineCount;

layout->GetLineMetrics(&lineMetrics[0], lineMetrics.capacity(), &lineCount);
ReleaseCOM(layout);

int length = lineMetrics[lineCount - 1].length;
// 전체 string에서 현재 라인의 string만 구하는 코드입니다.
// 현재 라인에서 커서를 움직이기 위해서는 현재 라인의 글자가 렌더링될 width를 알아야 하거든요.
const wchar_t* currentLineText = printText.c_str();
// 아래 배열이 음수가 될 일은 없냐구요? 없습니다. length의 최대 길이는 cursorPos와 같거든요.
currentLineText = ¤tLineText[cursorPos - length];
DWriteFactory->CreateTextLayout(currentLineText, length, TextFormat, mClientWidth, mClientHeight, &layout);

layout->GetMetrics(&metrics);
ReleaseCOM(layout);

자 이제RECT를 계산해서 위에서 만든 ClientToNDC 함수를 사용해서 사각형을 잘 변환 한 뒤 렌더링 하면 커서가 되겠죠?

// 블로그로 코드를 옮기다 보니 함수의 일부분만 올리게 되서
// 구조가 바뀌다보니 RECT변수를 급하게 하나 추가했습니다. 그래서 초기화 안했습니다.
// 실제 제가 사용하는 코드에서는 사용자 정의 구조체나 클래스는 제대로 참조자로 받아서 수정하지 return 따위도 하지 않습니다.
RECT rect;

rect.top = (lineCount - 1) * ceil(lineMetrics[0].height);
rect.bottom = rect->top + ceil(lineMetrics[0].height);
rect.left = ceil(metrics.widthIncludingTrailingWhitespace);
rect.right = rect->left + 1;

return rect;

드디어 제가 블로그를 시작한 이래로 가장 가장 길게 쓴 글이 막을 내렸군요.
너무 대충대충 설명하는 느낌이라 정말 죄송합니다. 이번 글은 1편 빼면나름 성실히 작성한다고 작성한건데 생각처럼 잘 되진 않았네요.

부디 제 글이 조금이나마 도움이 되길 바랍니다.
저는 이제 월광 1권을 읽어보러~~~ (저를 덕후로 만든게 제이노블인지라 제이노블을 좋아합니다.)

이전 글에서 글자를 출력 했으니 글자를 입력하는 방법을 알아야겠죠. EditBox를 만들어야 하는데 입력이 안되면 쓰나요.
누구나 Windows 프로그래밍을 처음 배울 때 키보드에서 입력하면 영어만 입력되는 아주 간단하지만 매우 의미있는 프로그램을 만들어 본 적이 있을거라 믿습니다.
허나 제가 원하는건 저번 시간에도 말했듯이 채팅이 되는 온라인 게임이란 말입니다. 근대 영어만 입력되면 쓰나요. 요즘 초등학생들이 영어 실력이 워낙 뛰어나다 보니 영어만 입력되도 상관 없을지도 모르겠지만 제가 영어를 못해서 한국어를 써야한다 이 말입니다. 그 뿐입니까? 해외 사용자도 배려해서(영어를 쓰면 되겠네요) 중국어라던가 일본어라던가도 입력 가능하게 해야한다 이말입니다!(그러니까 영어를 쓰면 된다고.)

그럼 어떻게 영어말고(어이) 다른 나라 언어를 입력 할 수 있을까요?
우리가 사용하는 EditBox는 IME라는걸 이용해서 글자를 입력받습니다.
좋습니다. 그럼 우리도 EditBox를 만드는 거니 이 녀석을 사용해보죠.

IME를 Windows에서 이용하기 위해서는 imm.h와 imm32.lib가 필요합니다. Windows.h를 인클루드 하시면 기본적으로 포함되어 있습니다.

자 그럼 잠시 살펴보죠.
일단 Win32 프로젝트를 하나 만듭니다. 귀찮으니 자동 생성 코드를 사용해서 만듭니다.(어차피 테스트하고 버릴거기 때문에 상관 없습니다.)

윈도우 프로시져 콜백 함수를 보시죠. 으음. IME를 언제 프로그램에 등록하면 좋을까요? 보통 EditBox는 창에 포커스 상태일 때 입력을 받습니다.
Focus 상태일 때 메시지를 MSDN에서 확인하는건 테스트 프로그램 만들 때 너무 귀찮으니 그냥 ACTIVATE 메시지를 이용해서 해보죠.(너무 대충이잖아 wwwwwww)

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
	int wmId, wmEvent;
	PAINTSTRUCT ps;
	HDC hdc;
	static HIMC imeID = nullptr;
	static std::wstring str;

	switch ( message )
	{
		case WM_ACTIVATE:
			if ( imeID == nullptr )
			{
				imeID = ImmCreateContext();
				ImmAssociateContext(hWnd, imeID);
			}
			break;
		case WM_IME_STARTCOMPOSITION:
			break;
		case WM_IME_CHAR:
			str.push_back((wchar_t)wParam);
			SetWindowText(hWnd, str.c_str());
			break;
		case WM_CHAR:
			if ( (wchar_t)wParam == '\b' )
			{
				str.pop_back();
			}
			else
			{
				str.push_back((wchar_t)wParam);
			}
			SetWindowText(hWnd, str.c_str());
			break;
		case WM_DESTROY:
			ImmDestroyContext(imeID);
			PostQuitMessage(0);
			break;
		// 나머지 메시지는 변경사항 없으므로 생략.
	}
	return 0;
}

발로 짜도 저것보단 잘 나오겠군요. 뭐 쓰고 버릴 코드니까 간단하게 테스트해보죠.

잘 되는군요. 중간에 일본어로 바꿔서 입력해도 잘 됩니다. 글자 변환도 잘 되구요.

이건 덤 입니다. 다음에 사용할 ScriptString 관련 함수들을 사용해서 간단히 테스트한거죠.
짤막하게 설명하자면 지금 Client 좌표계 기준으로 X=79 좌표에 '.'이 있는데 이 인덱스가 7이라는겁니다.
이게 왜 필요할까요?
마우스로 클릭하면 커서가 옮겨져야죠. 저희는 Client의 어떤 좌표에 어떤 글자가 써져있는지 알아야하니까요.

여기서 글을 끝내기로 하겠습니다 ㅇㅅㅇ.
다음에는 DirectX 프로그램에 실제로 적용해 보기 전에 GDI+로 커서를 구현해보도록 하겠습니다.

DirectX9와 10은  DXUT에 기본적으로 EditBox가 들어있습니다. 물론 아름답지 못하지만 나름 커스터마이징이 가능하더군요.
그 외에 약간의 버그같지 않은 버그라고 하면 한/영키로 한영 전환을 해도 여전히 인디게이터에 '가'라고 표시된다는 거랄까요 ㅋㅅㅋ.
이건 전에 고쳤었는데 굳이 소스를 보관할 가치를 못느껴서 포맷할때 같이 버렸던걸로 기억합니다. 조금 아쉽네요.

그래서 이번 주제는... DirectX11에도 EditBox를 만들어보자 입니다.
미리 말씀드리지만 이 글은 완결이 안날 수도 있습니다. 에 그러니까 갑자기 글이 뚝 끊기고 엉뚱한 XBMC 버그가 고쳐지는 글이 올라올지도 모르고 시작에서 멈출 수 있다는거죠. 또한 만약 막 DX에 입문하신 분이 희망찬 마음을 가지고 이 글을 읽기 시작하실까봐요... 사전에 일러두자면 저도 입문자라(...) 많은 도움은 드리지 못할거란 사실은 인지해 주셨으면합니다.

아니, DirectX에 왜 EditBox가 필요하죠? DX로 뭘 만들 작정이십니까?
EditBox를 DX에서 만든다고 하면 저런 질문이 먼저 들어오더군요. 뭐 보통 선배분들께 조언을 구한지라 저렇게 존댓말이 아니었지만요 ㅋㅅㅋ.
이유는 간단합니다. 채팅해야죠. 제가 원하는건 채팅이 되는 온라인게임이라 이말입니다.
그리고 한 가지 이유가 더 있는데 나중에 트위터랑 연동시켜서 귀여운 캐릭터가(...) 멘션을 알려주거나 작성한 트윗을 보내주는 등의 기능을 만들겁니다.
그 언제 만들어 질지 모르는 프로그램을 위해서(귀여운 캐릭터 모델이 있으면 완성될지도.) 한 번 노력해보죠.

왜 OpenGL이 아닌가요?
이유는 간단합니다. 제가 DirectX를 졸라 좋아하거든요. 뭐 미련맞은 짓이죠. 그래서 위에 써놓았지만, 이 글은 중간에 멈출 수도 있습니다.
OpenGL을 쓰면 EditBox를 구현할 필요가 없냐 라고 묻는다면 역시 그건 또 아니지만 뭔가 다른 방법이 있지 않을까 싶습니다.

자 그럼 혼자 질문하고 혼자 답하는 재미없는 글은 그만쓰고 어서 코드를 살펴보죠.

제가 이 글을 쓰기 위해 준비한 준비물은 다음과 같습니다.

DirectX SDK Sample - CustomUI
Direct2D - DirectWrite.
DirectX11.

자 그럼, 궁극적으로 EditBox는 뭐를 해야 할까요?
물론 글씨를 편집해야죠. 그러기 위해선 일단 글자를 출력해야합니다.

글씨를 출력한다. DirectX에서 글씨의 출력은 어떻게 해야 하는 걸까요?
렌더링을 해야합니다. 텍스쳐를 만들고 그 위에 글씨를 써서 렌더링 해야 합니다.

지금 '여보쇼, 이게 무슨 강아지 엿 씹어 먹는 소리야? 한글이 몇 글자 인줄 알아? unicodmap에서 hangul을 검색해서 나오는 카테고리의 모든 글자 수를 더하면 자그마치 11,524자나 된다고. 이걸언제 다 텍스쳐로 만들어서 로드하고 있어?' 라고 생각하신분 계시면 블로그 닫기 전에 잠시만 기다려주세요.
막 구글검색 하다가 미처 발견하지 못하신것 같은데 '순수하게' DirectX11만 사용한다면 당연히 그런 삽질을 해야겠지만 MS가 그렇게 멍청하게 DX를 만들어 놓진 않았습니다.
DXGI(DirectX Graphics infrastructure)를 사용하면 동기화된 공유 Surface를 만들 수 있다 이겁니다.

으음. 제가 개 엿씹어 먹는 수준의 설명을 하고있는것 같으니 이쯤에서 그냥 링크를 하나 뿌리죠. 이 링크 하나면 모든 설명이 끝납니다.
(절대로 코드를 올리기가 귀찮은게 아닐거라고 제 자신을 속여ㅂ...)

http://www.braynzarsoft.net/index.php?p=D3D11FONT

저 링크에 이 글의 모든게 들어있습니다. 사실 저는 윗 글을 보고 만들었거든요.
뭐 윗 글을 살짝 변형해서 설치 된 폰트가 아닌 어딘가의 경로에 별도로 있는 폰트를 로드 가능하게 수정했지만 그리 어려운 작업은 아닙니다.

영어가 보기 귀찮으시다면 어쩔수 없지만 이대로 글을 맺자니 사진도 없고 뭔가 허전하니 일단 뭐라도 써보죠.

위 링크에 들어가서 영어 말고 코드를 대충 읽고 오시면 대략적으로 다음과 같은 방법으로 진행된다는걸 아실겁니다.

DX11 디바이스를 생성합니다. 뭐 기타 등등의 렌더링에 필요한 초기화는 여러분이 만드신(혹은 쓰시는) 프레임워크나 라이브러리에 아주 잘 만들어놓여져있겠죠.
DX10 디바이스를 생성합니다. 뭐 렌더링 할건 아니구 공유 텍스쳐를 만들때 잠깐 사용되니 생성만 하시면 됩니다.
DX11 텍스쳐를 만듭니다.
위에서 만든 텍스쳐를 이용해 DX10과의 공유 텍스쳐를 생성합니다.
D2DFactroy를 하나 만들어서 DXGI의 Surface를 렌더 타겟으로 지정한 ID2DRenterTarget 객체를 하나 만듭니다.
ID2DRenterTarget을 이용해서 공유 텍스쳐에 글씨를 그리고
마지막으로 DirectX11 디바이스 컨텍스트에 텍스쳐를 3번째 단계에서 만든 텍스쳐로 설정하고 사각형 하나를 렌더링합니다.

끝.

왜 DX10 디바이스를 생성할까요? 위 링크에서 보면 마이크로소프트에서 충분한 종류의 DirectX11과 직접적으로 작동하는 Direct2D를 만들지 않았다고합니다.ㅜㅜ
뭐 그러니 DX10 디바이스를 생성해서 잠시 쓰는거죠 ㅇㅅㅇ.

프레임을 생각하면(이게 의외로 프레임 저하 현상이 심각합니다.) 초기 한번만 텍스쳐를 만들고 그 이후로는 만들어진 텍스쳐를 사용하는게 유리할 것 같습니다.
그러니까 어떤 문자를 처음 띄울 때는 텍스쳐를 생성하고 그 이후에는 만들어진 텍스쳐를 계속해서 사용하는거죠.

자 그럼 2부가 만들어지길 바라며 글을 마치죠.

사용된 폰트는 구글에서 배포한 NotoSansCJK-Regular.OTF입니다. 어떻게 설치되지 않은 폰트를 로드하는지는 다음에 시간나면 써보겠습니다. 하지만 Direct2D를 이용하면 어렵지 않은 일이니 Visual Studio의 인텔리센스 기능을 이용해서 잠시 함수를 뒤적거리시다가 삘 꽂히는 함수 하나를 발견 하신 다음에  MSDN을 뒤져보면 금방 찾으실 거라 믿습니다.