>> ゲームプログラミング入門トップに戻る

画像を動かしてみよう

それでは今回は画像を動かしてみましょう。

画像を動かすには、講座の4で説明したとおり、
画像を少しずつずらしながら描画することで、動いてるように見せることができるんでしたよね?
その仕組みと講座の3で説明した描画関数を使えば、物体を動かしながら描画できるのですが、
単純にDrawGraph関数だけで描画していると、
ウィンドウ自体に直接描画していることになるので、
描画回数が増えてくると、PCのモニタの60Hz以外のタイミングで描画してしまうことになります。
60Hzというのは、1秒間に画面が60回更新(描画)される、という意味です。
大体1回につき、16.6ミリ秒の間隔ですね。
これをリフレッシュレートと言います。
このタイミング以外で書き込んでしまうことになるので、画面にちらつきが出来てしまいます。

そこでダブルバッファリングという方法を使うことで、
この画面のちらつきを抑えることが出来ます。
これは、物体の描画先をウィンドウ画面ではなく、一旦裏画面に全て描画を行い、
描画が終わったら、その裏画面を表画面であるウィンドウ画面に反映させるという方法です。

人間の目には表画面しか見えませんから、裏画面を表画面に反映させる一瞬の時だけしか影響をうけません。
毎回表画面に描画していると、その描画回数分だけ人間の目に見えてしまいますから、
考えるだけでもちらつきが多く発生してしまいますよね?

このダブルバッファリングを使うためには、まず描画先を裏画面に設定しなければなりません。
そのために、SetDrawScreen関数を使います。
引数には定数である、DX_SCREEN_BACKを指定します。
これをメインループより前の部分で位置だけ呼び出してやれば、以後描画先は全て裏画面になります。

次に裏画面を人間の目に見えるようにするために、表画面へ反映させなければなりません。
そのために、ScreenFlip関数を使います。
引数はありません。成功すると0が返ります。

ここまでで、表画面へ描画する回数は1ループにつき一回だけになりました。
ですが、まだリフレッシュレートのタイミングにあわせる処理を書いていません。
また別の関数を使うのか?と思われるかもしれませんが、
ScreenFlip関数がその役目も担ってくれています。
実はScreenFlip関数はモニタのリフレッシュレートのタイミングに合わせて、
表画面への反映を行ってくれているのです。
ですので、この関数を実行するだけでちらつきを原因を押さえることができます。

これらの関数を使ってコードを書いてみましょう。
イメージとしてはこんな感じです。

	//描画先を裏画面に設定
	SetDrawScreen(DX_SCREEN_BACK);
	//メインループ
	while(ScreenFlip()==0 && ProcessMessage()==0){

		DrawGraph(x,100,gh,TRUE);

		x+=2;
		if(x==640)
			break;

	}
	

まず描画先を裏画面に設定してから、メインループに入ります。
while文の条件の中でScreenFlipとProcessMessage関数を実行しています。
ProcessMessage関数はwindowsプログラミングをする上で絶対必要でしたよね?
ScreenFlipは表画面へ反映させるためには絶対必要です。
これらの関数の戻り値がエラーだった場合はループを抜けるようにしています。
ループ内では、DrawGraph関数を使って描画しています。
x座標をループ内で、毎ループごとに2ずつ増加させながらループしています。
ループしっぱなしだと処理が終わらないので、xが640になったらループを抜けるようにします。

流れを言うと、
①DrawGraphで裏画面に描画

②x座標増加

③ScreenFlipで表画面へ反映

④以後ループ

となり、
xの値が増加しながら描画されるため、動いているように見えるわけです。

今回の画像は、

の画像を使います。
コチラの画像は、
REFMAP様が配布しているフリー画像素材を使用してます。
URLはhttp://www.tekepon.net/fsmになります。
素晴らしい素材を沢山配布されていますので、是非一度訪れてみてくださいね。
このキャラチップを使う場合はこのサイトからダウンロードせずに、
REFMAP様のサイトにいき、ダウンロードしてください。
この画像をプロジェクトファイルがあるフォルダに、char.pngという名前で保存してください。
上記のコードを使った全体のプログラムは以下の通りです。

#include "DxLib.h"

// プログラムは WinMain から始まります
int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow )
{
	ChangeWindowMode(TRUE);

	if( DxLib_Init() == -1 )		// DXライブラリ初期化処理
	{
		return -1 ;			// エラーが起きたら直ちに終了
	}

	//グラフィックハンドル
	int gh;

	//x座標
	int x=0;

	//画像読み込み
	gh = LoadGraph("char.png");

	//描画先を裏画面に設定
	SetDrawScreen(DX_SCREEN_BACK);

	while(ScreenFlip()==0 && ProcessMessage()==0){

		DrawGraph(x,100,gh,TRUE);

		x+=2;
		if(x==640)
			break;

	}

	WaitKey() ;				// キー入力待ち

	DxLib_End() ;				// DXライブラリ使用の終了処理

	return 0 ;				// ソフトの終了 
}

これを実行すると以下のように描画されます。

あれ?
ちょっとイメージと違いますよね。
移動する過程において、画像が全て上書きされてしまっています。
これは、裏画面をループごとに消去していない為に起こっています。
裏画面に物体を描画し、次のループでまたその裏画面に描画しますが、
何もしないと前回描画した物体が裏画面にはまだ残っています。
そのためこんな変な状態になってしまうんですね。
つまり、裏画面をループごとに消去すればこの問題は解決できます。
裏画面を消去するには、CrearDrawScreen関数を使います。
引数はありません。成功すると0が返ります。
これをループごとに呼び出してやれば上手くいきます。
下記のコードをご覧下さい。

#include "DxLib.h"

// プログラムは WinMain から始まります
int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow )
{
	ChangeWindowMode(TRUE);

	if( DxLib_Init() == -1 )		// DXライブラリ初期化処理
	{
		return -1 ;			// エラーが起きたら直ちに終了
	}

	//グラフィックハンドル
	int gh;

	//x座標
	int x=0;

	//画像読み込み
	gh = LoadGraph("char.png");

	//描画先を裏画面に設定
	SetDrawScreen(DX_SCREEN_BACK);

	while(ScreenFlip()==0 && ProcessMessage()==0 && ClearDrawScreen()==0){

		DrawGraph(x,100,gh,TRUE);

		x+=2;
		if(x==640)
			break;

	}


	WaitKey() ;				// キー入力待ち

	DxLib_End() ;				// DXライブラリ使用の終了処理

	return 0 ;				// ソフトの終了 
}

下記のように綺麗に描画されると思います。

ちょっとカクカクしているのは動画撮影時に私のPCのスペックが低い為に、
重くなってしまったことが原因です。
皆さんのPCで実行すればもっと滑らかに動きます。

ClearDrawScreen関数もWhile文の中で実行しています。
これもエラーがあればループを抜けるようにしています。
必ずScreenFlip関数の後に実行して下さい。
裏画面を消してから表画面へ反映しても意味ありませんからね(笑)

以上が物体を動かして描画する際の基本になります。
今回はここまで。
次回はキーボードのキーの押下状態を取得してみます

>> 【キーボードのキー押下状態を取得】に進む
>> ゲームプログラミング入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)