夏のゲーム開発！#1ータイルMAPを作る

2024年8月8日 12:49

はじめ

ごきげんよう、みなさん
私はやっと夏休みにはいれました
未だにその気分ではないのですが
いっぱい楽しみたいと思いますわ

さて、今回はMAPのタイルを作りました！
そのために必要な過程を紹介していきます
まずは基本的なところから見ていきましょう

ゲームにおける「タイル」とは？

ゲームにおいての「タイル」とは
ゲームの舞台となるフィールドやマップを
構成する基本的なパーツのことです
こちらは参考画像です

このようなMAPの一マス一マスを構成しているものが
「タイル」です
今回は参考画像のような感じなものを作っていきます。

タイルとは｜アクションゲームツクールMV ヘルプ

RPG風イラストマップ

タイルの素材を作る

では、実際に作っていきます
今回は、GIMPを使っていきます
ホームページはこちらから

ではまず
新しい画像を作りましょう
タイルの縦横比は１：１です
サイズは２進数に沿ったものが最適です
今回は、３２×３２で作成しています

そしたら、適当に作ってしまいましょう！

とりあえず私は５枚作ってみました。
そし画像たら、一枚の画像にまとめてしまいましょう

完成した画像をエクスポートし
PNG画像にできたらタイルの完成です

画像を描画する

ここからコードを実際に書いていきます
今回は、ＤＸライブラリでの紹介です
まずは、画像を表示させましょう
画像の切り抜き表示は
DrawRectGraph
この関数を使いましょう
こちらの関数の引数は

int DestX, int DestY　: 画像を描画するスクリーン上の座標
int SrcX, int SrcY　 : 描画する画像の中の左上座標
int Width, int Height : 描画する画像の切り抜くサイズ（単位：ドット）
int GraphHandle　 : 描画する画像のハンドル
int TransFlag　 :　画像の透明度を有効にするかどうか
( TRUE：有効にする　FALSE：無効にする )

この関数を使うことで画像の一部のみを描画できます
細かいところはこちらからお願いします

描画する画像のハンドルは
LoadGraph
という関数を使って画像データを読み込んできましょう
以下にコードの例を書きました参考にしてください

#include <DxLib.h>
#include <cstdio>
#include <ctime>
#include <WinBase.h>

int WINAPI WinMain(_In_ HINSTANCE hInstance, _In_opt_  HINSTANCE hPrevInstance, _In_ LPSTR lpCmdLine, _In_ int nShowCmd)
{
    /*ウインドウの初期化処理*/
    ChangeWindowMode(true);
    SetGraphMode(640, 480, 32);
    SetOutApplicationLogValidFlag(FALSE);

    //初期化に失敗時にエラーを吐かせて終了
    if (DxLib_Init() == 1)
        return -1;

    /*Initialize*/
    // 画像を描画するスクリーン上の座標
    int DestX = 320;
    int DestY = 240;

    // 描画する画像の中の左上座標
    int SrcX = 0;
    int SrcY = 0;

    // 描画する画像の切り抜くサイズ
    int Width = 32;
    int Height = 32;

    // 描画する画像のハンドル
    int GraphHandle = LoadGraph("tile_chip.png");

    // 画像の透明度を有効にするかどうか
    int TransFlag = TRUE;

    while (ProcessMessage() == 0 && !CheckHitKey(KEY_INPUT_ESCAPE))
    {
        ClearDrawScreen();//裏画面消す
        SetDrawScreen(DX_SCREEN_BACK);//描画先を裏画面に

        /*Update*/

        /*Render*/
        DrawRectGraph(
            DestX, DestY,
            SrcX, SrcY,
            Width, Height,
            GraphHandle,
            TransFlag
        );


        ScreenFlip();//裏画面を表画面にコピー
    }

    /*Finalize*/
    DeleteGraph(GraphHandle);

    DxLib_End();
    return 0;
}

補足として、このコードで読み込まれている
tile_chip.png
はタイルの素材を作るで作成した画像データです
そして、こちらを起動すると以下のようになります

これで、画像を描画できました
これを応用すれば
あなただけのマップを作れます

タイルマップを作ってみた

タイルの描画ができましたら
ここからは私の作ったものの紹介です
現在のマップの状態はこちらです

こちらは、マップの自動生成でのマップの作成に挑んでいます
マップは、INT型の2次元配列を使ってタイルの情報を保存し
描画のときに、SWITCH文を使って描画するタイルを判別しています

コードの内容は未完成なので
別の回のときにもしかしたら公開します

おわり

この記事を書き上げるまでに数日かけてしまいました
やっぱり家だと作業がはかどりませんね
何処かの喫茶店にでも行くべきなのでしょうね
次回は、エネミーの出現させるという回にしようと考えてます
それでは、良い一日をお過ごしください
わっぴ～！

この記事が気に入ったらサポートをしてみませんか？