C++の勉強しながらDxLibで2Dゲーム作ってみない?(準備編)

#はじめに
お久しぶりです、まゆC#と申します(*'▽')
初投稿から１年以上空いて0ｘ12歳になりました...w
ここ最近はAIやらDiscordBotから一時離れてゲーム開発関係のことをしています。
そこでDxLibで簡単にゲーム開発をしながらついでにC++を勉強していく記事を書いてみようと思いました。
僕自身C#がメイン言語ですのであくまでも初心者の方向け記事となります。

#この記事の対象
・Dxlibを使いゲーム開発をしてみたい方  
・C++を始めたばかりの初心者の方で作りながら覚えたい方  
・何かしらのライブラリやツールを使ってゲーム開発をしてみたい人方

#環境整備
この記事ではVisualStudio2019を使っての開発を前提に書いていきます。
VisualStudio2019をダウンロードされていない方は以下のリンクからダウンロードしてください。
個人開発ではVisualStudio Communityで大丈夫です。  
・[VisualStudio2019のダウンロード](https://visualstudio.microsoft.com/ja/downloads/)

##1.DXLibのダウンロード
・[DxLibのダウンロード](https://dxlib.xsrv.jp/dxdload.html)  
DxLibは上記の公式サイトからダウンロードできます。
Windows版VisuakStudio(C++)用をダウンロード、解凍してください。
解凍まで終わったら解凍後のファイルに入っているDxLib_VCというファイルを任意の場所に移動します。
今回はCドライブ直下にDxLib_VCファイルを置くことを前提に進めていきます。

##2.VisualStudioの設定
DxLibをDLしただけではまだプロジェクトで使うことはできません。
まずはVisualStudioでプロジェクトを作り、リンカの設定をしていきます。
VisualStudioを開いて新しいプロジェクトの作成を選択します。
![VS_Start.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/11d27d41-261b-c1cc-582b-92b5df40439e.jpeg)

ドロップダウンで`C++` / `Windows` / `デスクトップ`を選択し、Windowsデスクトップウィザードを選択します。
![VS_select.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/28f2fa87-5ee7-08d0-97e9-1088c3d1b0dc.jpeg)

適当なプロジェクト名をつけて好きなディレクトリで作成します。
今回はDxLib_Projectという名前にしました(ダサい)
![VS_MakeProject.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/c5fd7813-a234-99de-30ff-2defae224dab.jpeg)

アプリケーションの種類は以下の通りにします。
このときからのプロジェクトにするようにしてください。
![VS_Project_set.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/b73e7202-c2bf-b0a6-c193-e718bdd4084d.jpeg)


ここまでできたらソリューションエクスプローラーにあるプロジェクトを右クリック
↓
プロパティを選択します。
![VS_Setting1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/b51dbc6a-7614-ada7-2e0e-6a1f8db1c74f.jpeg)
プロパティページで構成をすべての構成にし、文字セットをマルチバイト文字セットに変更して適用します。
![VS_Setting2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/d89ea84c-45cd-38cf-65d3-1cceb0804b41.jpeg)

ここでソースファイルの追加を忘れていたので追加します(書き直せとか言わないで)
プロパティを閉じてソリューションエクスプローラーに戻ります。
ここで`ソースファイル`を右クリックし`追加`から`新しい項目`を選択します
![VS_AddSource.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/8fa1573f-2b19-c9fb-05dc-67d827b299d3.jpeg)

`main.cpp`というファイルを作成します。
![VS_AddSource2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/6f09b0f3-8e13-443c-b9dc-cc7b4cc1f228.jpeg)

ここまで作りもう一度プロパティを開くと`C/C++`という項目が追加されています。
この`C/C++`から`全般`を開き`追加インクルードディレクトリ`にダウンロードしたDxLibの`プロジェクトに追加すべきファイル_VC用`までを
設定し適用します。
今回はCドライブにファイルを配置しているので変更していなければ以下のディレクトリをコピペで大丈夫です。
`C:\DxLib_VC\プロジェクトに追加すべきファイル_VC用`

この作業を`リンカー`から`全般`を選択し、追加のライブラリディレクトリでもう一度繰り返します。
![VS_Setting3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/2e7aa811-434f-e7f3-65fb-72833d264b34.jpeg)

次に構成を`Release`にし、`C/C++`で`コード生成`からランタイムライブラリをマルチスレッド(/MT)にして適用します。
![VS_Setting5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/ac9c01ff-a81c-8ff4-7dd1-cab1c9e866a9.jpeg)

最後に構成を`Debug`にし`ランタイムライブラリを``マルチスレッド デバッグ(/MTd)`に変更し適用したら設定は終了です。
なかなか多いですね...w
![VS_Setting6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/caf977d3-255c-b4de-9b8c-108de5793bb1.jpeg)

#取りあえず動くようにする
長い設定お疲れ様でした！
でもこれだけではコードがないので動きません。
今回はあくまで動くか確認ということでウィンドウを出すところまでやっていきます。
以下のコードを今はとりあえず魔法の言葉ということでコピペしてみてください。

```cpp:main.cpp
#include "DxLib.h"

const char *TITLE = "Untitled";
const int WIN_WIDTH = 960;
const int WIN_HEIGHT = 540;

int WINAPI WinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hPrevInstance, _In_ LPSTR lpCmdLine, _In_ int nCmdShow)
{
	ChangeWindowMode(true);
	SetWindowSizeChangeEnableFlag(false, false);
	SetMainWindowText(TITLE);
	SetGraphMode(WIN_WIDTH, WIN_HEIGHT, 32);
	SetWindowSizeExtendRate(1.0);
	SetBackgroundColor(35, 35, 35);
	SetDrawScreen(DX_SCREEN_BACK);

	if (DxLib_Init() == -1) { return -1; }

	while (true) {
		ClearDrawScreen();

		ScreenFlip();
		WaitTimer(20);
		if (ProcessMessage() == -1) { break; }
		if (CheckHitKey(KEY_INPUT_ESCAPE) == 1) { break; }
	}

	DxLib_End();
	return 0;
}
```

ここまで書けたらVisualStudioの上の方にある再生マーク(ローカルWindowsデバッガー)を押してみましょう！
![Window.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/de239f98-a5b6-061a-6cf3-6253f93f5184.jpeg)

上図の灰色な画面が出力されたら成功です！
とりあえず準備編ではここまでとしましょう(*'▽')

#最後に
準備編お疲れさまでした！
今回はウィンドウを作るところまで進みましたね！作れちゃいましたね！！！
次回からは実際に図形の描画などをやっていくつもりですので少々お待ち下さい！

###参考URL
・[DxLib公式ページ](https://dxlib.xsrv.jp/)

###作者について
詳しくはわんころメソッド();HPにどうぞ(*'▽')  
・[わんころメソッド();HP](http://mayu-cs.xyz)  
・[Twitter(まゆC#)](https://twitter.com/mayu___cs)  
・[GitHub(まゆC#)](https://github.com/mayu-cs)  

###コミュニティ
Discordで雑談から質問まで様々なチャンネルがあるまゆC#のコミュニティサーバーがあります！
わからないことがあればこちらでもお答えするのでぜひ！

[Discordサーバー : わんころメソッド(雑談);](https://discord.com/invite/TZVTBkk)