40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

敵機の配置と移動するアニメーション解説

自機から発射される弾道処理について解説すると前回触れていましたが、敵機の動きについて解説する資料が先に出来たのでそっちについて触れることにします

敵機の配置について

今回は画面上に敵機を5機配置するようにしてますが、GameViewのonloadイベント内で、initAliensという関数を呼び出すことで実現出来ます。

なお敵機&敵機の移動スピードを格納するために、aliens、 aliensSpeedという配列を準備してそこに必要な情報を格納しておきます

scene.add(tank);
// 前回書いたエントリに以下追加
var aliens = [];
var aliensSpeed = [];

game.addEventListener('onload', function(e) {
  initAliens();
  game.start();
});
// 中略
win1.open();
function initAliens(){
 for (var i = 0; i < 5; i++) {
    aliens[i]= quicktigame2d.createSprite({image:'images/alien1.png'});
    aliensSpeed[i] = 5;
    aliens[i].x = Math.random() * game.screen.width;
    aliens[i].y = 100; // 敵機を配置した状態を見せたいので数値を100にしてます 
    scene.add(aliens[i]);
  }
}

このようにすることで、以下のように敵機が画面に配置されます。
f:id:h5y1m141:20120313072255p:plain

アニメーションの肝となるenterframeイベント

QuickTiGame2dのAPI Referenceによると

enterframe event is fired on every time the view starts to draw the frame.

と書かれています。

一定時間毎に、画面の描画を更新する処理が実施されるようですが言葉だとうまく説明しきれないので図にしてみました。

f:id:h5y1m141:20120313072323p:plain
f:id:h5y1m141:20120313072329p:plain

updateAliensPosition()という敵機の位置を更新する処理するための関数をGameViewのenterframeイベント内で呼び出してあげることで、敵機が動いて見えるようになります。画面外に行ってしまったかどうかを判定する処理をいれてあげればOKなので、こんな感じのソースコードになります

// 中略
game.addEventListener('enterframe', function(e) {
  updateAliensPosition();
});
game.addEventListener('touchmove',function(e){
  //
});
// 中略
// initBulletPositionの後に以下を追加
function updateAliensPosition(){
  for (var i = 0; i < gameLevel[selectedLevel].MAXALIENS; i++) {
    aliens[i].y += aliensSpeed[i] * Math.random();
    if(aliens[i].y > 480){
      aliens[i].y = -100;
    }
  }
}

これで敵機が動くようになりました!弾道のアニメーションも基本的に同じなのですが、弾道は自機の砲台から発射させたいのでその配置がちょっと面倒なのでそのあたり次回触れていきたいと思います