Tile Map

예제 :)

https://github.com/eazuooz/WindowAPI/commit/c76d9a833dc8bd2fdaf7feb3fbcac92c9ee2f813

TileMap Tool · eazuooz/WindowAPI@c76d9a8

타일맵이란? 일정한 크기와 모양을 가진 그림 조각들을 의미하고, 게임에서는 이들 조각을 맞추어서 게임의 배경을 완성을 하기도 합니다. 그리고 이렇게 완성이 된 배경들을 가리켜서 '타일맵(TileMap)'이라고들 부릅니다.

<샘플로 제공되는 tmw_desert_spacing>

▶ 위 이미지와 같이 게임에서 타일을 이용해 배경맵은 마드는 이유는 게임의 배경이 이전 챕터에서 공부 했던 패럴랙스노드와 같이 크고 또한 장면(Scene)이 많을 경우에 배경이 되는 비트맵을 모두 메모리에 읽어들여야만 한다면 매우 큰 메모리가 필요하기 때문에, 타일을 사용해서 반복하게 되면은 메모리를 적게 사용하고도 게임플레이에 필요한 배경을 만들 수 있습니다.

만약 위 이미지들을 이용해서 가로 20 세로 10줄로 구성 된 배경을 구성하게 된다면 타일이 총 200개로 구성이 된것인가요? 답은 그렇지 않습니다. 왜냐하면 같은 조각들 즉, 텍스처들을 그대로 갖다 붙여서 사용하면 되기 때문이지요. 맵이 커질수록 타일맵은 메모리 관리상 아주 유용하게 사용이 됩니다.

 

이번시간에는 이런 타일맵을 제작하기 위한 Tool을 제작해보려 한다.

어떤 타일들을 선택해야할지 이미지를 띄울 새로운 윈도우를 생성해볼것이다.

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
   hInst = hInstance; // 인스턴스 핸들을 전역 변수에 저장합니다.

   HWND hWnd = CreateWindowW(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,
      CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, nullptr, nullptr, hInstance, nullptr);

   if (!hWnd)
      return FALSE;

   //윈도우 포지션 및 크기 설정
   ya::WindowData windowData;
   windowData.hWnd = hWnd;
   windowData.height = 900;
   windowData.width = 1600;

   SetWindowPos(hWnd, nullptr, 0, 0, windowData.width, windowData.height, 0);
   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);

   ya::Application::GetInstance().Initialize(windowData);

   if (ya::SceneManager::GetSecneType() != eSceneType::Tool)
       return TRUE;

   //ATLAS
   hWnd = CreateWindowW(L"AtlasWindow", L"Atlas", WS_OVERLAPPEDWINDOW,
       CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, nullptr, nullptr, hInstance, nullptr);
   if (!hWnd)
       return FALSE;

   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);

   return TRUE;
}

윈도우를 생성해줄떄 이제는 1개의 윈도우가 아닌 2개의 윈도우를 생성해준다.

 

그리고 2번쨰 윈도우는 다음과 같이 이미지 크기에 맞추어 윈도우 크기를 지정해주고

마우스 클릭시 해당 이미지의 인덱스 번호를 가져올수 있도록 설정해줄 것이다.

LRESULT CALLBACK AtlasWndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
	switch (message)
	{
	case WM_CREATE:
	{
		DefWindowProc(hWnd, message, wParam, lParam);

		ya::WindowData atlasWindowData;
		atlasWindowData.hWnd = hWnd;
		atlasWindowData.hdc = GetDC(hWnd);
		atlasWindowData.height = 900;
		atlasWindowData.width = 800;
		ya::Application::GetInstance().SetAtlasWindow(atlasWindowData);

		ya::Scene* pScene = ya::SceneManager::GetPlayScene();
		ya::ToolScene* toolScene = dynamic_cast<ya::ToolScene*>(pScene);

		ya::TilePalatte* atlas = toolScene->GetTilePalatte();
		ya::Image* atlamsImg = atlas->GetImage();

		RECT rect = { 0, 0, atlamsImg->GetWidth(), atlamsImg->GetHeight()};
		AdjustWindowRect(&rect, WS_OVERLAPPEDWINDOW, false);
		SetWindowPos(atlasWindowData.hWnd
			, nullptr, 1600, 0
			, rect.right - rect.left
			, rect.bottom - rect.top
			, 0);
		ShowWindow(atlasWindowData.hWnd, true);
	}
	break;

	case WM_COMMAND:
	{
		int wmId = LOWORD(wParam);
		// 메뉴 선택을 구문 분석합니다:
		switch (wmId)
		{
		case IDM_EXIT:
			DestroyWindow(hWnd);
			break;

		default:
			return DefWindowProc(hWnd, message, wParam, lParam);
		}
	}
	break;

	case WM_PAINT:
	{
		PAINTSTRUCT ps;
		HDC hdc = BeginPaint(hWnd, &ps);

		//Rectangle(GetDC(hWnd), 0, 0, 100, 100);

		ya::Scene* pScene = ya::SceneManager::GetPlayScene();
		ya::ToolScene* toolScene = dynamic_cast<ya::ToolScene*>(pScene);

		ya::TilePalatte* atlas = toolScene->GetTilePalatte();
		ya::Image* atlamsImg = atlas->GetImage();

		ya::Vector2 pos(ya::Vector2::Zero);

		TransparentBlt(hdc, (int)pos.x
			, (int)pos.y
			, atlamsImg->GetWidth(), atlamsImg->GetHeight()
			, atlamsImg->GetHdc(), 0, 0, atlamsImg->GetWidth(), atlamsImg->GetHeight(), RGB(255, 0, 255));

		// TODO: 여기에 hdc를 사용하는 그리기 코드를 추가합니다...

		EndPaint(hWnd, &ps);
	}
	break;

	case WM_LBUTTONDOWN:
	{
		if (GetFocus())
		{
			POINT mousePos = {};
			GetCursorPos(&mousePos);
			ScreenToClient(hWnd, &mousePos);
			// 가로 8 세로 6

			int x = mousePos.x / TILE_SIZE;
			int y = mousePos.y / TILE_SIZE;

			int index = (y * 8) + (x % 8);
			ya::Scene* pScene = ya::SceneManager::GetPlayScene();
			ya::ToolScene* toolScene = dynamic_cast<ya::ToolScene*>(pScene);
			toolScene->SetTileIndex(index);
		}
	}
	break;

	case WM_DESTROY:
		PostQuitMessage(0);
		break;
	default:
		return DefWindowProc(hWnd, message, wParam, lParam);
	}
	return 0;
}

그럼 우측 상단에 다음과 같은 윈도우가 생기게 될것이다.

 

이제 좌측 윈도우에 오른쪽으로 클릭된 타일을 설치할수 있도록 해주면 된다.

 

그작업은 TilePalatte라는 클래스에서 진행할 것인데 타일의 생성 관리 등 모든것들은 

관리해주는 클래스이다.

	void TilePalatte::Tick()
	{
		if (KEY_PREESED(KEY_CODE::LBTN))
		{
			if (GetFocus())
			{
				POINT pos = GetTilePos();
				Scene* pScene = SceneManager::GetPlayScene();
				ToolScene* toolScene = dynamic_cast<ToolScene*>(pScene);
				CreateTile(toolScene->GetTileIndex(), Vector2(pos.x, pos.y));
			}
		}
	}

 

추가적으로 생성된 타일을 저장하고 불러올수 있는 기능도 추가 해주었다.

	void TilePalatte::Save()
	{
		// open a file name
		OPENFILENAME ofn = {};

		wchar_t szFilePath[256] = {};

		ZeroMemory(&ofn, sizeof(ofn));
		ofn.lStructSize = sizeof(ofn);
		ofn.hwndOwner = NULL;
		ofn.lpstrFile = szFilePath;
		ofn.lpstrFile[0] = '\0';
		ofn.nMaxFile = 256;
		ofn.lpstrFilter = L"Tile\0*.tile\0";
		ofn.nFilterIndex = 1;
		ofn.lpstrFileTitle = NULL;
		ofn.nMaxFileTitle = 0;
		ofn.lpstrInitialDir = NULL;
		ofn.Flags = OFN_PATHMUSTEXIST | OFN_FILEMUSTEXIST;

		if (false == GetSaveFileName(&ofn))
			return;

		// 파일 입출력
		FILE* pFile = nullptr;

		// 쓰기 모드로 열기
		_wfopen_s(&pFile, szFilePath, L"wb");

		if (nullptr == pFile)
			return;

		std::unordered_map<UINT64, Tile*>::iterator iter = mTiles.begin();
		for (; iter != mTiles.end(); ++iter)
		{
			int index = (*iter).second->GetIndex();
			fwrite(&index, sizeof(int), 1, pFile);
			TileID id;
			id.ID = (*iter).first;
			fwrite(&id.ID, sizeof(UINT64), 1, pFile);
		}

		fclose(pFile);
	}

	void TilePalatte::Load()
	{
		OPENFILENAME ofn = {};

		wchar_t szFilePath[256] = {};

		ZeroMemory(&ofn, sizeof(ofn));
		ofn.lStructSize = sizeof(ofn);
		ofn.hwndOwner = NULL;
		ofn.lpstrFile = szFilePath;
		ofn.lpstrFile[0] = '\0';
		ofn.nMaxFile = 256;
		ofn.lpstrFilter = L"All\0*.*\0Text\0*.TXT\0";
		ofn.nFilterIndex = 1;
		ofn.lpstrFileTitle = NULL;
		ofn.nMaxFileTitle = 0;
		ofn.lpstrInitialDir = NULL;
		ofn.Flags = OFN_PATHMUSTEXIST | OFN_FILEMUSTEXIST;

		if (false == GetOpenFileName(&ofn))
			return;

		FILE* pFile = nullptr;
		_wfopen_s(&pFile, szFilePath, L"rb");
		
		if (pFile == nullptr)
			return;

		while (true)
		{
			int index = 0;
			TileID id;

			if (fread(&index, sizeof(int), 1, pFile) == NULL)
				break;
			if (fread(&id, sizeof(UINT64), 1, pFile) == NULL)
				break;

			CreateTile(index, Vector2(id.left, id.right));
		}

		fclose(pFile);
	}