QuickTiGame2dを使ったシューティングゲーム解説:画面に配置する

前回、QuickTiGame2dで利用するオブジェクトの役割について開設したので、今回はそれぞれの要素を画面内に配置する処理について解説していきます

モジュール読み込み

モジュール読み込み方法は他の人のブログ等を参考にしてね・・・と書こうと思ったけど、折角なのでここも説明します。

まずQuickTiGame2dのダウンロードサイトに行き、該当のZIPファイルをダウンロードします。

※2012/03/05時点で、ver0.9まであるけどものすごい勢いで開発されてますね ：）

ダウンロードしたzipファイルを、作成中のTitaniumのプロジェクト内で展開します。展開する場所はResourcesフォルダと同位置になるようにします。

※以下はFinder上でのフォルダ構成の例です。modules/iphone/com.googlecode.quicktigame2d以下いくつかフォルダがありますが、渡しの場合0.3、0.4，0.7と３つのバージョンを試していたのでこのような構成になってのでこのあたりは適宜読み替えてください

モジュール読み込むための下準備

作成中のTitaniumプロジェクト内に、tiapp.xmlというファイルがあるかと思います。これを開き、39行目あたりの

    <modules/>

という記述を以下のように修正します

    <modules>
        <module version="0.7">com.googlecode.quicktigame2d</module>
    </modules>

module version="0.7" の所ですが、ダウンロードしたQuickTiGame2dのバージョンによって適宜読み替えてください

オブジェクト初期化

QuickTiGame2dを使うのに、以下のようにおまじないを唱えます

/*
  ゲームの初期設定
 */
var quicktigame2d = require('com.googlecode.quicktigame2d');
var game = quicktigame2d.createGameView();
var scene = quicktigame2d.createScene();
game.screen = {width:320, height:480};
game.fps = 30; // (1)
game.color(0, 0, 0);
game.pushScene(scene);

(1)のgame.fps = 30だけちょっと説明しておきます。

fpsは、Frames Per Secondの略（というのを今しらべて初めて知った）。敵や弾道が画面上で動いて見えるのはパラパラ漫画の様にひとコマずつ連続して再生しているからです。

１秒間あたり30コマパラパラすれば、それだけ滑らかに動いて見えるし、この数値を低くすると、なんとなくカクカクした動きになります。このあたりはFlashを使ったことがある人（*1）だとわりとイメージしやすいんじゃないかと思ってます。

参考までにfpsを12にした場合と、30にした場合のキャプチャを撮ったので比較してもらえると一目瞭然だと思います

fps12の場合

fps30の場合

自機の画面配置

var tank = quicktigame2d.createSprite({image:'images/tank.png'}); // (2)
tank.x = (320/2) - (tank.width/2);
tank.y = 480 - tank.height;
var back = quicktigame2d.createSprite({image:'images/back.png'}); 
back.x = (320/2) - (back.width/2);
back.y = 480 - back.height;
scene.add(back);
scene.add(tank);

(2) の記述により、QuickTiGame2dのSpriteオブジェクトを利用して、自機と背景画像を画面に読み込みます。ここはそれほど難しくないと思うのですが、画面中央に自機を配置する処理がなかなか理解できなかったのでここ少し触れておきます

横の位置を決定（X座標）

画面下辺の中央に設置するために画面横幅の半分を取得。さらに画像の幅の半分を引くことで描画する位置のX座標が計算可能ですが、文章だと伝わりづらいので図にしました

縦位置を決定（Y座標）

画面の高さから画像の高さ分を引くことで計算可能ですが、こちらも図にしてみました

自機の画面配置

横位置、縦の位置を決めたら最後忘れずに

scene.add(tank);

としてあげるとSceneオブジェクトに配置されます。

背景画像と上記同じ手順で配置が出来ます。

次回は自機から発射される弾道処理について解説していきます

（*1）実はFlash Ver1.0を使ったことあるのでこのあたりすぐイメージついた