表示された7×7のマップ。

一般的なマップの作成法



作成したサンプルでは、7×7の大きさのマップを描画します。ここでは、まずマップに表示するデータを配列として用意しておきます。

data = new int[]{
    2,2,2,2,3,0,0,
    2,2,3,3,3,3,3,
    2,2,3,0,0,0,1,
    2,0,3,0,0,1,1,
    0,0,3,0,1,1,1,
    0,0,3,0,1,1,1,
    0,0,3,0,0,1,1
};


こうした2次元のマップは、一般に2次元配列を使って管理することも多いのですが、ここでは通常の1次元配列でデータをまとめてあります。そのままではわかりにくいので、7つごとに改行して表示してあります。

配列に記述してある数字は、「マップのイメージの何番目のものを表示するか」を示しています。これは0~3までの数字で指定してあり、ゼロが一番左側にあるイメージを示します。

では、実際の描画をしているpaintでは、どういう処理をしているのでしょうか。まず、必要な値を変数などに収めて準備をします。

int col = 7;
int row = 7;
int dx = 10;
int dy = 10;
int w = 25;
int h = 25;

col/rowは、マップの縦横の数です。ここでは7×7ですから、どちらも「7」にしてあります。dx/dyは、マップの位置です。またw/hは、個々の部品の大きさを示します。まぁ、これらはわざわざ変数として用意しなくともいいのですが、後からの修正や、ソースコードでの数字の役割を把握しやすくするために用意しておきました。

for(int i = 0;i < col * row;i++){
  g.drawImage(map,dx + i % col * w,dy + i / col * h,data[i] * w,0,w,h);
}

これが、実際にマップを描画している部分です。繰り返しを使い、7×7=49個のイメージを、配列から表示するマップの値を取り出し、それを使って描画をしています。ここでは、以下のような形で描画に関する値を計算していますね。

・マップを描く横位置
dx + i % col * w

・マップを描く縦位置
dy + i / col * h

・マップイメージの横位置
data[i] * w

ここでは、マップのイメージimages.gifから作成されたImageインスタンスのdata[i] * wドットの位置にあるイメージを25×25サイズで切り出し、横dx + i % col * w、縦dy + i / col * hの位置に描画をしています。これで、data配列から値を取り出し、横に7つずつ7段にイメージが描かれていきます。

まぁ、言葉で説明すれば簡単そうですが、これをいちいち考えて処理していくのは、ちょっと面倒なのは間違いないでしょう。