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

#今回の目標
前回は環境が整ったので実践編第１回ではC++での変数の扱いと演算子、DxLibの描画関数を触っていきたいと思います(*'▽')
まだ環境が整っていない方は前回の記事を見ながら環境整備をしてくだい！

前回の記事 : [C++の勉強しながらDxLibで2Dゲーム作ってみない?(準備編)](https://qiita.com/mayu___cs/items/e25c3ae5bdfdf670645b)

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

#変数と関数に触れてみる
プログラミングにおいてなくてはならないもの、それは変数です。
とりあえず今は数値や文字列を格納するもの(ざっくりw)ぐらいに思っていただければ大丈夫です。
おそらく実際に触ってみたほうが理解しやすいのでまずはDxLibで文字を描画する関数、`DrawFormatString`を使い機能を確認してみましょう。
前回おまじないとだけ説明したコードに追加していきましょう。

```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; }

	//整数型の変数宣言
	int x = 100;

	while (true) {
		ClearDrawScreen();

		//整数型変数xの描画
		DrawFormatString(0, 0, GetColor(255, 255, 255), "%d", x);

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

	DxLib_End();
	return 0;
}
```

ここでポイントになる部分は変数宣言と描画です。
一つずつ説明していきます。
まずは文字列の描画関数です。

```cpp
DrawFormatString(0, 0, GetColor(255, 255, 255), "%d", x);
```
はい、よくわからないですよね...w
この`DrawFormatString`という関数は４つの`引数(ひきすう)`を持っています。
分解して説明します。

```cpp
DrawFormatString(int x, int y, unsigned int Color, const TCHAR *FormatString, ...);
```
DrawFormatString関数はこのような引数を持っています。意味は以下のとおりです。
`int x` : 描画するx座標(今回は0)
`int y` : 描画するy座標(今回は0)
`unsigned int Color` : 文字色(今回は白色)
`const TCHAR *FormatString` : 表示する文字(今回は`x`を代入して表示)

座標についてはスクリーン座標(0, 0)に表示しているとわかると思うので割愛します。
まずは文字色です。
この関数の中で`GetColor`という関数に値`(255, 255, 255)`を渡しています。
これは左からRGBの値で並んでいてすべて最大値なので加法混色で白色となります。

次に表示する文字です。
今回の文字を表示している部分は`"%d", x`の部分が当てはまります。
`"%d"`は整数を意味します。そこに`,x`でxを表示することを指示することで今回はxの値が表示されます。
![描画1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/ea7fb194-1965-0e34-ca62-9b80c6ffc8d1.png)
表示されましたでしょうか?
でもおそらくまだ漠然としないですよね。
そこで次は`DrawFormatString`関数の引数を書き換えて文字を入れてみましょう。

```cpp
DrawFormatString(0, 0, GetColor(255, 255, 255), "xの値は%dです", x);
```
このように書き換えるとどうなるでしょうか?
答えはこうです。
![描画2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/a7d839df-9950-56be-bfef-5a14b0471d00.jpeg)
大体使い方はわかってきたでしょうか？
とりあえず`%d`の場所に`,`以降に指定した変数の値が表示されると覚えていただければ今は問題ないです。


次は変数宣言です。

```cpp
int x = 100;
```
このコードは`int(整数型)`で`x`という名前の変数を宣言し、`100`を代入するという処理になります。
すなわちプログラムではこの`x`に`100`という数字が入っていることを意味します。
試しに`x`に代入している数値をいじってみるとその値が表示されるはずですのでやってみてください。
C++では変数の方がいくつか存在するので、詳しくは以下のリンクを参考にしてみてください。
・[MicrosoftDocs データ型の範囲]("https://docs.microsoft.com/ja-jp/cpp/cpp/data-type-ranges?view=msvc-160")

#図形の描画
先程は`DrawFormatString`で文字を表示しました。
ですがこれならコンソールで`std::cout`を使ってるのと対して変わりません(見た目は)
なので今度はDxLibの図形の描画関数を使ってみましょう。
まずは四角を描画していきます。
以下のコードを書いてみてください。

```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();

		//四角形の描画
		DrawBox(100, 100, 200, 200, GetColor(255, 255, 255), true);

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

	DxLib_End();
	return 0;
}
```
このコードのポイントは四角形の描画関数であるこの部分です。

```cpp
DrawBox(100, 100, 200, 200, GetColor(255, 255, 255), true);
```
こちらも分解して説明していきます。
まずは引数ですが、構造はこの様になっています。

```cpp
DrawBox(int x1, int y1, int x2, int y2, unsigned int Color, int FillFlag);
```
`int x1` : スクリーン座標`x`の始点
`int y1` : スクリーン座標`y`の始点
`int x2` : スクリーン座標`x`の終点
`int y2` : スクリーン座標`y`の終点
`unsigned int Color` : 文字色
`int FillFlag` : 塗りつぶすかどうか(trueで塗りつぶす、falseで塗りつぶさない)

今回は始点が`(100, 100)`、終点が`(200, 200)`ですので白色の四角形を`(100, 100)`から一辺100pxの四角形を描画して塗りつぶすという処理になります。
結果はこのとおりです。
![描画3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/a36cd772-4dbd-56c3-7eb0-9b612ec2c60d.jpeg)
出ましたね四角形！
この他にも丸や三角などの描画関数もあります。
三角形は引数が多くてめんどくさいので丸を描画してみましょう。
`DrawBox`の下の行にこのコードを追加していきます。

```cpp
DrawCircle(300, 300, 50, GetColor(255, 255, 255), true);
```
引数についてもだいたいわかってきたと思うので省略して説明していきます。
このコードでは中心点`(300, 300)`から半径`50`の白色の円を描画して塗りつぶすという処理をしています。
なんとなくわかってきましたか?
実行結果は次のようになります。
![描画4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/996df5ae-8348-0248-9835-be1091122085.jpeg)

#変数を使って描画する
ここまで図形の表示と変数のことについてやってきましたがなんかこの２つ、一緒に使ったら便利そうじゃないですか?
先程変数はデータを格納するものト説明しましたがこの変数は演算することができます。

```cpp
int x = 0;

x = x + 1;
```
このように書くことで`0`が代入されている`x`に`1`を足すことができます。
これは変数同士でもできます。

```cpp
int x = 0;
int y = 10;

x = x + y;
```
このように書くことで変数`y`の値が変数`x`に足されます。
もちろん足し算だけではなく四則演算ができます。実際には他の演算もできますがとりあえずこれを覚えれば不便はないです。
`+` : 加算 (例 `x + y`)
`-` : 減算 (例 `x - y`)
`*` : 乗算 (例 `x * y`)
`/` : 除算 (例 `x / y`)
`%` : あまり (例 `x % y`)

更に変数は`インクリメント`と`デクリメント`というものが存在します。
どちらも１増やす/減らすという処理です。
`x = x + 1`は`x++`と書けますし`x = x - 1`は`x--`と書く事ができます。

`インクリメント` : `++`(１加算する)
`デクリメント` : `--`(１減算する)

これらを応用して図形を描画してみましょう！
まずは以下のコードを書いてください

```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; }

	int size = 100;
	int x = 0;
	int y = ( WIN_HEIGHT / 2 ) - ( size / 2 );

	while (true) {
		ClearDrawScreen();

		//四角形の描画
		DrawBox(x, y, x + size, y + size, GetColor(255, 255, 255), true);

		//変数xのインクリメント
		x++;

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

	DxLib_End();
	return 0;
}
```
このコードでは３つの変数が宣言されています。
まず`size`は四角形のサイズです。
次に`x`はx座標です。
最後に`y`はy座標ですがなんか式が書かれていますね？
これはy座標の中心を求めています。
WIN_HEIGHTは画面のy方向のサイズですので2で割るとスクリーン座標yの中心を求めることができます。
ただし`DrawBoxでは左上の始点を元に描画されるため四角形のサイズを2で割った値を引くことで四角形はスクリーン座標yの中心に描画されることになります。
![DrawBox.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390774/32e404bc-0178-cc18-063b-81da37dfb154.gif)
今回はxだけをインクリメントしたのでx方向にずっと動いていますね！
***画面外に行ってしまうのは仕様ですので安心してください。***


ちなみに`x`のインクリメントを次のどちらかのコードに変えると速度が二倍になります。
これは１フレームで1だけ加算する処理から2を加算する処理に変更したためです。

```cpp
x = x + 2;
```

```cpp
//僕はこっちをよく使います
x += 2;
```

#次回
次回はまずこの動くようになった四角形を画面内で反射させる処理を書くために条件分岐とキー入力で変数の値を加算、減算しキャラクターを操作するような処理を作るための説明をしていく予定です！
今の時点でこのレベルなら理解できる...以上の方なら次回もまだ簡単かと思いますのでぜひ実践してみてください(*'▽')

#あとがき
実践編第1回お疲れ様です！
前回ウィンドウを作って今回はオブジェクトを移動させるところまで行きましたね！
次回やることまでマスターしたら見た目だけ"それっぽいやつ"が作れるようになりますw
お楽しみに！

###作者について
詳しくはわんころメソッド();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)