イメージマップを使おう(2ページ目)

一般的なマップの作成法

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

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
};

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

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

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

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

col/rowは、マップの縦横の数です。ここでは７×７ですから、どちらも「７」にしてあります。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);
}

これが、実際にマップを描画している部分です。繰り返しを使い、７×７＝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配列から値を取り出し、横に７つずつ７段にイメージが描かれていきます。

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