2 / 3 画像の読み込みと描画
画像ファイルをメモリに読み込み、画面上に描画する方法を学びます。画像リソースの「読み込み」「描画」「解放」というライフサイクルと、画像を識別する「画像ハンドル」の概念を理解します。
読み込み・描画・解放の順序
画像はループの前に一度読み込み、受け取った 画像ハンドル(画像を識別する番号) で毎フレーム描画します。使い終えたら、ループの後に解放します。この順でコードを追加しましょう。
画像ファイルの読み込みとエラー処理
プロジェクトフォルダ内の Assets/Images/ に配置されている Robot.png(48×48ピクセルの青いロボット画像)を読み込みます。この画像は、キャラクターの輪郭の周囲が透明(透過情報付きPNG)に加工されています。
SetBackgroundColor の後、変数 x, y の宣言の前に、次のコードを追加してください。
SetBackgroundColor(245, 248, 252);
int image = LoadGraph(L"Assets/Images/Robot.png");
if (image == -1)
{
MessageBoxW(nullptr, L"Assets/Images/Robot.png を読み込めません。", L"画像の確認", MB_OK);
DxLib_End();
return -1;
}
int x = 160;
int y = 120;LoadGraph 関数と画像ハンドル
LoadGraph は指定されたファイルパスの画像データを読み込むDXライブラリの関数です。
読み込みに成功すると、DXライブラリはその画像を識別する整数値(整理番号)を返します。これを 画像ハンドル(graph handle) と呼び、整数型の変数 image に保持します。プログラムはこの番号を使って画像を描画・解放します。
画像ハンドルと実体データ
変数 image に格納されているのは画像データのピクセル情報そのものではなく、「DXライブラリが内部で管理しているどの画像を指すか」というID(識別番号)です。そのため、自分で適当な数値を代入するのではなく、必ず LoadGraph の戻り値をそのまま格納して利用します。
読み込み失敗の判定(エラーハンドリング)
ファイルが存在しなかったりパスを書き間違えたりして読み込みに失敗した場合、LoadGraph は -1 を返します。
直後の if (image == -1) でその失敗を検出し、次の手順を実行します。
MessageBoxWでエラーダイアログを表示し、どのファイルの読み込みに失敗したかをユーザーに通知するDxLib_End()で安全にDXライブラリの終了処理を行うreturn -1;でプログラムを異常終了コードとともに終了する
画像が存在しないままメインループへ進んでしまうと、描画が失敗するだけでなく意図しない不具合の原因になります。読み込み直後に成否を確認することが重要です。
画像の描画とリソースの解放
読み込んだ画像を画面に表示し、終了時にメモリを解放する処理を追加します。
描画処理の変更(毎フレーム実行)
while ループ内の DrawBox を削除し、代わりに DrawGraph を呼び出します。
DrawGraph(x, y, image, TRUE);x, y:左上の画面座標image:画像ハンドルTRUE:透過を有効化
これにより、四角形の代わりに青いロボットの画像が (x, y) の位置に描画されます。最後の引数を TRUE にすると、画像の透明な部分を透過して描画します。
リソース解放処理の追加(終了時に実行)
while ループを抜けた後、正常終了時の DxLib_End(); の直前に次の1行を追加します。
DeleteGraph(image);
DxLib_End();
return 0;DeleteGraph は使い終えた画像を解放する関数です。画像ファイル Robot.png 自体は残ります。解放したハンドルで描画しないよう、ループの後に置きます。
画面消去とメモリ解放の区別
消す対象と実行タイミングの比較
ここで混同しやすい2つの操作を明確に区別しておきましょう。
ClearDrawScreen()(画面消去)
毎フレーム実行されます。「キャンバス(裏画面)に描かれたインクを消す」操作です。画像ハンドルやメモリ上の画像データ自体には何の影響も与えません。そのため、消去後も同じimageハンドルを指定すれば何度でも画像を描き直せます。DeleteGraph(image)(リソース解放)
ゲーム終了時に一度だけ実行されます。「メモリ上に展開した画像データそのものを破棄する」操作です。解放した後にその画像ハンドルを使ってDrawGraphを呼ぶことはできません。
ロボットの表示と座標変更の確認
実行して、青いロボットが画面に表示されることを確認してください。また、x や y の初期値を変更して、ロボットの表示位置が変わることも確認してみましょう。確認後は x = 160、y = 120 に戻してから次のステップへ進みます。
- 画像リソースの「読み込み」「描画」「解放」の役割と実行タイミングを説明できる
- 変数
imageに格納される画像ハンドル(識別ID)の意味を理解している -
ClearDrawScreen(画面の消去)とDeleteGraph(メモリの解放)の違いを区別できる