Map Chip で背景を表示





上の画像のように Map Chip を組み合わせて BG(Back Ground) を表示します。
RPG では WorldMap や FieldMap やダンジョンなど多くの場面で BG(背景画像)を使用します。
BG は RPG ゲームの基本中の基本であり、Sprite Class を継承して BG Object Class を作成します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. Map Chip は背景を作成するパーツの集まりで、これをタイルのように配置して大きな背景画面を構成します。
    今回使用する Map Chip は、ページ先頭に表示したように「16 dot * 16 dot」の Chip を横に20個、縦に4個並べた画像です。
    BG Object Class では SPRITE Class と TXT2BIN Class を継承しています。
  2. BG Object Class のヘッダファイル(BG.H) です。
    class の定義で SPRITE Class と TXT2BIN Class を継承することを指示します。
    XN,YN は背景画像の大きさで、横と縦に並べる Chip の枚数で指定します。(16倍するとピクセルサイズ)
    XDN,YDN は表示する画面サイズで、横と縦に並べる Chip の枚数で指定します。
    RPG では画面サイスの何倍もの背景画像を使用することが当たり前になっています。
    int *MAP は BG を構成する Chip の並び情報を格納する領域へのポインタで、動的に領域を割り当てます。
        //★ BG(Back Ground) Class Header File   前田 稔 ★
        //   SPRITE Class, TXT2BIN Class を継承する
        #include "Sprite.h"
        #include "Txt2Bin.h"
        #define  SAFE_DELETE(p)  { if (p) { delete (p);     (p)=NULL; } }
        #define  SAFE_RELEASE(p) { if (p) { (p)->Release(); (p)=NULL; } }
    
        class BG : public SPRITE, public TXT2BIN
        { protected:
            int         XN;             //BG Size 横(XN*16)
            int         YN;             //BG Size 縦(YN*16)
            int         XDN;            //Window 横(XDN*16)
            int         YDN;            //Window 縦(YDN*16)
    
          public:
            int         *MAP;           //BG Map Table
            BG(HWND hWnd);              //Constructor
            ~BG();                      //Destructor
            HRESULT     Mapchip(LPSTR szBitmap);
            HRESULT     SetMapTable(LPSTR szMaptxt, int xn, int yn, int xdn, int ydn);
            HRESULT     View();
        };
        
  3. BG Object Class のプログラムファイルです。
    Constructor で SPRITE Class の Constructor を呼び出します。
    MAP* のポインタに初期値として NULL を設定します。
    この設定は Destructor で領域を開放するときに必要です。
    Destructor では MAP* 領域が割り当てられているとき、その領域を開放します。
        // コンストラクタ(オブジェクトの初期化)
        BG::BG(HWND hwnd) : SPRITE(hwnd)
        {
            MAP= NULL;
        }
    
        // デストラクタ(オブジェクトの終了)
        BG::~BG()
        {
            if (MAP)   delete [] MAP;
        }
        
  4. Map Chip のロードです。
    まず SPRITE Class の Load() メソッドで Map Chip をロードします。
    Load() を実行すると Map Chip 全体の画像サイズが Class の領域に記憶されます。
    次に SetSize() メソッドで一枚の Map Chip サイズ(16*16)を指定して、縦横の枚数を計算しています。
    従来と同じように Load() 関数で「横の枚数,縦の枚数」を指定することもできます。
        HRESULT  BG::Mapchip(LPSTR szBitmap)
        {
            Load(szBitmap);
            SetSize(16,16);
            return  S_OK;
        }
        
  5. SetMapTable() メソッドで BG を構成する Map Chip の並び情報を MAP* に設定します。
    *MAP の領域を動的に割り当てて、Text File から入力した Chip の並び情報を格納します。
    SetTable() は TXT2BIN Class のメソッドです。
        HRESULT  BG::SetMapTable(LPSTR szMaptxt, int xn, int yn, int xdn, int ydn)
        {
            XN= xn;
            YN= yn;
            XDN= xdn;
            YDN= ydn;
            MAP= new int[XN*YN];
            SetTable(szMaptxt,MAP,xn*yn);
            return  S_OK;
        }
        
  6. View() メソッドで BG を表示します。
    基本的には Map Chip を MAP* に従って、画面上に並べて背景画像を表示します。
    そう難しい処理では無いので、ぜひ独力で挑戦してみて下さい。
        HRESULT  BG::View()
        {   int    x,y;
              :
              :
            return S_OK;
        }
        

背景画像を作成するツール

Mapedit の画像

MapChip を組み合わせて背景画像を作成するツール(Mapedit)を開発しました。
詳細は Map Editor の開発 を参照して下さい。


Mapedit の使い方

  1. Map を構成するタイル状の画像を集めた Map Chip を用意して下さい。
    MapChip 画像は BMP, GIF, PNG, JPEG 形式が使えます。
    但し、JPEG はその仕様上「透明色が真の黒(0,0,0) に戻らない」ことがあるので、MapChip 画像には適しません。
    BMP 以外を使うときは、プラグイン(ifgif.spi, ifjpeg.spi, ifpng.spi)が必要です。
    画像サイズに特に制限はありませんが 256 から 512 ドット程度が適当でしょう。
  2. Mapedit.exe を起動して下さい。
  3. [ファイル][Mapchip load] から画像を入力すると Mapchip Window に表示されます。
  4. [設定][サイズ] から作成する背景画像のサイズと Mapchip のサイズを設定します。
    Map Size(背景画像)は最大 500*500 で、設定した値に Mapchip のサイズを掛けた大きさになります。
    一般にセルのサイズは 16 ドット(または 32)なので 500*16= 8000*8000(16000*16000)ドットの背景まで対応できます。
  5. Mapchip Window で左クリック(左ドラッグ)してセルを選択して下さい。
  6. Map Window で左クリックするとセルが貼り付けられます。
    また、左ドラッグして座標を確認しながら貼り付けることもできます。
    セルが一個のときは左ドラッグと同時に画像が貼り付けられます。
  7. 背景画像が完成すると[ファイル][保存]で、現在の状態を保存して下さい。
    保存したファイルは[ファイル][開く]から入力します。
  8. [TEXT ファイル作成]メニューで、TEXT(CSV) 形式で保存することができます。
    保存されるデータは「現在見えている」画像です。
    ファイルの先頭に Mapchip 画像の名前やサイズ情報を記録してゲームプログラムで扱いやすいようにしています。
    CSV 形式は Comma Separated Value の略で、項目をカンマで区切りレコードを改行で区切るフォーマットです。


Mapedit の操作要点

Mapedit は三枚のウインドウで操作します。
  1. Map(背景画像)を作成するメインのウインドウで、Mapchip を貼り付けてゲームの背景画面を作成します。
    1. セルのサイズは「縦/横」独立して設定できるようになっています。
    2. 7+1枚のレイヤを使って、黒を透明色に設定して画像を重ねて描画できます。
    3. メインウインドウ上で右クリック(ドラッグ)で貼り付ける画像を選択することができます。
      選択する画像はレイヤを重ねて現在見えている画像です。
    4. 選択されたセルを貼り付ける方法です。
      • 複数のセルが選択されているときは、左ドラッグで矩形を動かして、貼り付ける座標を確認できます。
        左ボタンを離すと現在表示されている矩形範囲に貼り付けられます。
      • セルが一個のときは左ドラッグと同時に画像を直接貼り付けます。
  2. Mapchip を表示するウインドウで、メインウインドウに貼り付けるセルを選択します。
    1. Mapchip のゼロ番目(左上)のセルには透明色(0,0,0)を設定して下さい。
      このプログラムでは、黒(0,0,0)を透明色として使います。
      プログラムを起動すると、全てのレイヤはゼロ番のセルで初期化されます。
    2. 画像の黒い部分(0,0,0)は透明になり、下のレイヤが透けて見えます。
      黒色を使うときは 8,8,8 ぐらいに設定して下さい。
    3. Mapchip 画像は、一枚の背景画像に対して一個のファイルを設定します。
      セル画像が不足するときは、もっと大きな Mapchip 画像を用意して下さい。
    4. BMP 画像はファイルサイズが大きいので GIF, PNG 画像をサポートします。
  3. レイヤ設定のウインドウで、メインウインドウに描画するレイヤを制御します。
    1. 7+1枚のレイヤを重ねて画像を作成することが出来ます。
    2. 「可視」ボタンでレイヤを隠すことができます。
      レイヤ機能を利用して複数の BG を同時に作成することが出来ます。
    3. 8枚目のレイヤは選択されたセルイメージのワークとして使っています。
      8枚目の可視ボタンをオンにすると選択されたイメージを確認することができます。
  4. 元に戻す機能が無いので、壊れる恐れがあるときは別のレイヤで作業して下さい。
  5. Mapchip が同一の時は、レイヤを利用して複数の背景画像を作成することが出来ます。
    TEXT(CSV)形式で保存されるデータは現在見えている画像で、隠れているレイヤは出力されません。
  6. [設定][先頭セルで塗りつぶす]で作業中のレイヤを塗りつぶすことが出来ます。

超初心者のプログラム入門(Win32API C++)