マップチップを使って背景を描画する(プログラミングでマリオを作る第11回)

前回ツールを使って作成したcsvファイルを元に実際に背景を描画していきたいと思います。

イントロダクション

前回は、マップチップの概念を学んだので、今回はマップチップを使って
背景を描画したいと思います。

まず、マップチップ画像をresourceフォルダ内に入れます。
この画像はこのページからダウンロードしてください

続いて、プログラムを書いていきます。
main.jsを開いてください。

main.js

まず、リソースファイルを読み込むプログラムを書きます。

// texture
var gMapTex;

/*
   テクスチャのロード
*/
function loadTexture(){
   gMapTex = new Image();
   gMapTex.src = "resource/map512.png";
}

マップチップ配列を変数化する

続いて前回マップエディタを利用して作ったマップチップの座標を
変数化します。

作成したcsvファイルをコピーをして、貼り付けて、
2次元配列として定義します。

/**
  マップ
*/
var gMapChip = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,80,80,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,64,64,64,64,64,64,64,64,64,64,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[112,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,114],
[128,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,130]
];

続いてマップを描画するための関数を定義します

縦方向の描画ですが、縦が480 / 32 = 15なので15個なので、15回forでループさせます。

x軸方向は640 / 32 = 20なので、20回描画します。

これらは定数なので、constファイルに定義しましょう。

/**
  マップチップの描画

  map:対象のマップチップ配列
*/
function drawMap(map){
  // y軸
  for(var y = 0;y < MAX_MAP_Y;++y){
    // x軸
    for(var x = 0;x < MAX_MAP_X;++x){
      var indexX = 32 * ((map[y][x] + 16) % 16);
      var indexY = 32 * Math.floor(map[y][x] / 16);
      g_Ctx.drawImage(gMapTex, indexX, indexY , 32, 32, x * 32, y * 32, 32, 32);
    }
  }
}

const.js

var MAX_MAP_X = 20;
var MAX_MAP_Y = 15;

32は一枚一枚のマップチップサイズで、16というのは、マップチップ画像のx軸方向の最大枚数です。
この式に関してですが、後で確認します。

y軸の切り出す範囲を変数にします。
Math.floorというのは、少数点を切り捨てるためにつかっています。

この関数を描画関数内に追加します。

/*
  描画
*/
function Draw(){
  drawMap(gMapChip)
  // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  gMario.draw(g_Ctx,gMarioTex);
}

表示確認

保存して、表示されるかどうか確認したいと思います。

マップチップ式についての確認

先ほどのマップチップを表示するところの確認をします。
画像を見てみると。

x軸方向・y軸方向ともに16個まで描画されていますが、
x軸を切り出したい場合は、一番左の時に0
次のコマの一番左の場合でも0を表示させていので、
0-15でループさせる式を書く必要があります。

その式が、
var indexX = 32 * ((map[y][x] + 16) % 16);

またyも同じくそういう式になりますので、確認してみてください。

以上です。

Pocket