アニメーション – プログラム学習

今回は、マップチップのアニメーション処理をしたいと思います。

やり方は、animation用のoffsetX(画像を切り出すX座標)を管理して、
描画するマップチップがアニメーション用のマップチップだった場合にoffSetXを切り替えて、
アニメーションさせるようにします。

そのために、offSetXを切り替えるための関数を用意します。

解説

今回は、マップチップのスクロールを行います。
画像にコインのアニメーションをする画像を追加したので、新しくmap512.pngを入れ替えてください。

マリオマップチップ

まず、const.jsにマップチップアニメーションに関する定数の定義をします。

const.js

MAP_ANIM_NUMがアニメーションマップチップの数で、
MAP_ANIM_FRAMEがマップチップを切り替えるフレーム数です。

// chapter32
// マップチップのアニメーション数
var MAX_MAP_ANIM_NUM = 4;
// マップチップ切り替え数
var MAX_MAP_ANIM_FRAME = 10;

次に、マップチップアニメーションをさせる関数を追加するので、main.jsを開いてください。

main.js

マップチップアニメーションのフレームを管理する変数と
アニメーションのオフセットを管理する変数を追加します。

var gMapAnimFrame = 0;
var gMapAnimOffsetX = 0;

次に、アニメーションをするマップチップかどうかを判定するために、
定数配列を作って、アニメーションをするマップチップの番号を格納します。

コインのマップチップ番号は33なので、とりあえず、33のみを入れます。

// アニメーションマップチップを入れる
var ANIM_MAP_CHIPS = [33];

次に、アニメーションマップチップかを判定する関数を作ります。

/**
  アニメーションマップチップかどうか判定する

  mapIndex : 対象のマップチップインデックス
*/
function isAnimationMap(mapIndex){
  for(var i = 0;i < ANIM_MAP_CHIPS.length;++i){
    if(ANIM_MAP_CHIPS[i] == mapIndex){
      return true;
    }
  }
  return false;
}

続いて、マップチップをアニメーションさせるために、
マップチップのオフセットを調整する関数を定義します。

/**
  マップチップ用のAnimationFrameの処理
*/
function changeMapAnim(){
  if(gMapAnimFrame++ >= MAX_MAP_ANIM_FRAME){
    gMapAnimFrame = 0;
    if(++gMapAnimOffsetX >= MAX_MAP_ANIM_NUM){
      gMapAnimOffsetX = 0;
    }
  }
}

オブジェクト用の描画関数の定義

描画の処理数を減らすために、オブジェクト用の描画関数を定義したいと思います。

マップチップをアニメーションさせるために、
描画する対象がアニメーションのマップチップだった場合は、
先ほど追加した、offsetXを加算することにより、マップチップのアニメーションさせます。

/**
  マップチップオブジェクトを描画
  マップオブジェクトの一部はアニメーションする

  map:対象のマップチップ配列
*/
function drawObjectMap(map){
  // y軸
  for(var y = 0;y < MAX_MAP_Y;++y){
    // x軸
    for(var x = gMario.minDrawMapX;x < gMario.maxDrawMapX;++x){
      if(map[y][x] != NOT_DRAW_MAP){
        var indexX = 32 * ((map[y][x] + 16) % 16);
        // アニメーション用のマップチップの場合、animation offsetを足す
        if(isAnimationMap(map[y][x])){
          indexX += gMapAnimOffsetX * MAP_SIZE;
        }
        var indexY = 32 * Math.floor(map[y][x] / 16);
        g_Ctx.drawImage(gMapTex,indexX,indexY,32,32,x * 32 - gMario.mapScrollX,y * 32,32,32);
      }
    }
  }
}

これで、必要な関数がそろったので、draw関数を修正します。

drawObjectMap関数を読んで、マップチップをアニメーションさせるための、changeMapAnim関数を呼びましょう。

/*
	Draw
	描画
*/
function Draw(){
  // 背景
  drawMap(gBackGroundMapChip);
  // オブジェクト
  drawObjectMap(gMapChip);
	gMario.draw(g_Ctx,gMarioTex);
  gKuribo.draw(g_Ctx,gKuriboTex,gMario.mapScrollX);

  drawCoin(630,10,gMario.coinNum);
  changeMapAnim();
}

これで、マップチップのアニメーション処理が完成したので、実行して確認してみましょう!

ソースはgithubから参照してください。

タグ: アニメーション

マップチップのアニメーション(プログラムでマリオを作る第32回)

解説

const.js

main.js