LoginSignup
2
5

More than 3 years have passed since last update.

@mayu___cs(まゆ C#.cpp)inwnkr();

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

Last updated at Posted at 2020-11-27

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

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

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

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

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

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

DrawFormatString(0, 0, GetColor(255, 255, 255), "%d", x);

はい、よくわからないですよね...w
このDrawFormatStringという関数は４つの引数(ひきすう)を持っています。
分解して説明します。

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
表示されましたでしょうか?
でもおそらくまだ漠然としないですよね。
そこで次はDrawFormatString関数の引数を書き換えて文字を入れてみましょう。

DrawFormatString(0, 0, GetColor(255, 255, 255), "xの値は%dです", x);

このように書き換えるとどうなるでしょうか?
答えはこうです。
描画2.jpg
大体使い方はわかってきたでしょうか？
とりあえず%dの場所に,以降に指定した変数の値が表示されると覚えていただければ今は問題ないです。

次は変数宣言です。

int x = 100;

このコードはint(整数型)でxという名前の変数を宣言し、100を代入するという処理になります。
すなわちプログラムではこのxに100という数字が入っていることを意味します。
試しにxに代入している数値をいじってみるとその値が表示されるはずですのでやってみてください。
C++では変数の方がいくつか存在するので、詳しくは以下のリンクを参考にしてみてください。
・MicrosoftDocs データ型の範囲

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

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

このコードのポイントは四角形の描画関数であるこの部分です。

DrawBox(100, 100, 200, 200, GetColor(255, 255, 255), true);

こちらも分解して説明していきます。
まずは引数ですが、構造はこの様になっています。

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
出ましたね四角形！
この他にも丸や三角などの描画関数もあります。
三角形は引数が多くてめんどくさいので丸を描画してみましょう。
DrawBoxの下の行にこのコードを追加していきます。

DrawCircle(300, 300, 50, GetColor(255, 255, 255), true);

引数についてもだいたいわかってきたと思うので省略して説明していきます。
このコードでは中心点(300, 300)から半径50の白色の円を描画して塗りつぶすという処理をしています。
なんとなくわかってきましたか?
実行結果は次のようになります。
描画4.jpg

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

int x = 0;

x = x + 1;

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

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--と書く事ができます。

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

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

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
今回はxだけをインクリメントしたのでx方向にずっと動いていますね！
画面外に行ってしまうのは仕様ですので安心してください。

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

x = x + 2;

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

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

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

###作者について
詳しくはわんころメソッド();HPにどうぞ(*'▽')
・わんころメソッド();HP
・Twitter(まゆC#)
・GitHub(まゆC#)

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

Discordサーバー : わんころメソッド(雑談);

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
5