ブロック崩しで学ぶスマホアプリ開発の基礎 (2/4)

2012年05月08日　13時00分更新

文●萩原伸悟／jAction

ツイートする

Step 2：背景画像を表示する

　準備ができたら、ブロック崩しゲームのプログラムを書いていきましょう。まず、画像が読み込まれたら呼び出すイベントを登録します。


Main = function()
{
ja.imageUnitObj.addEventListener ("onLoad",this);
}

　ja.imageUnitObj.addEventListenerは、以下のように記述します。

ja.imageUnitObj.addEventListener ("onLoad", オブジェクト);

　「onLoad」は、発生するイベントと実行されるメソッドの2つの意味を持っています。すべての画像読み込みが終了したら「ja.imageUnitObj」の"onLoad"イベントが発生し、イベントが発生したら「オブジェクト」のonLoadメソッドが実行されます。

　次に、ブロック崩しゲームで表示させたい画像を読み込みます。Main内に以下の1行を追加します。


ja.imageUnitObj.load (["Image/Bg.png",  "Image/block.png"]);

　ja.imageUnitObj.loadは画像を読み込む命令で、以下のように記述します。

ja.imageUnitObj.load ([画像ファイル名1, 画像ファイル名2...]);

　これで画像を読み込めます。サンプルの場合、「Bg.png」が背景画像、「block.png」がブロックの画像です。画像の読み込みができたらcanvasに描画します。以下のコードを追加します。


this.onLoad = function()
{
 window.scrollTo(0, 1);
ja.imageUnitObj.removeEventListener("onLoad", this);
ja.stage.addChild(ja.imageUnitObj["Bg"]);
}

　画像の読み込みが完了してから画像を表示させたいので、this.onLoad = function(){}　の中に処理内容を書いていきます。window.scrollTo(0, 1);は、スマートフォンのアドレスバーを消す命令です。すでにja.imageUnitObjのonLoadイベントは呼ばれているので、最初に登録したイベントリスナーはremoveEventListenerで解除します。イベントリスナーを解除しないと余分なメモリーが使われてしまい、アプリが落ちる原因になります。

　次のja.stage.addChild(ja.imageUnitObj["Bg"]);が、実際に画像を描画する命令です。jActionでは、addChild()メソッドを使ってオブジェクトを表示させます。

ja.オブジェクト.addChild(ja.imageUnitObj["拡張子を除いた画像ファイル名"]);

　canvas自体に描画する場合は、stageオブジェクトに対してaddChildメソッドを実行します。addChildでは画像ファイルの拡張子はjActionが吸収するので不要です。

　これで背景画像を表示できました（サンプル1）。

サンプル1の実行画面。スクロールバーが消え、背景にブルーの画像が表示される

■サンプル1[Main.js]（実行画面）


Main = function()
{
  /***追加部分***/
  //このゲームで使用する画像の準備をします。
  ja.imageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらthisのonLoadを実行します。
  ja.imageUnitObj.load(["Image/Bg.png", "Image/block.png"]); //画像を読み込みます。
  
  //画像が読み込み終わったあとに以下が実行されます。
  this.onLoad = function()
  {
    window.scrollTo(0, 1); //アドレスバーを消します。
    
    ja.imageUnitObj.removeEventListener("onLoad", this); //onLoadは既に呼ばれたのでリスナーを解除します。
    ja.stage.addChild(ja.imageUnitObj["Bg"]); //読み込んでおいた画像を表示させます。
  }
  /***追加部分***/
}

Step 3：ボールとバーを描画する

　背景が表示できたら、今度はブロック崩しのボールとバーを描画してみましょう。

　サンプル1の Main = function(){}内の先頭に以下のコードを追加します。


var boxObject = new ja.BoxClass(20,20,"#000000");
boxObject.x = 150;
boxObject.y = 200;
var barObj = new ja.BoxClass(100,15,"#000000");
barObj.x = 110; 
barObj.y = 350;

　ブロックを崩すボールとバーは矩形ですので（今回はボールも矩形を使います）、画像ファイルを表示するのではなく、BoxClassを使ってボックスオブジェクトを生成してcanvas上に直接描きます。BoxClassは以下のようにして生成します。

new ja.BoxClass (四角形の幅 , 四角形の高さ , 色);

　BoxClassでは以下のプロパティ値を扱えます。

x	X座標（ピクセル）
y	Y座標（ピクセル）
w	画像の幅サイズ（ピクセル）
h	画像の縦サイズ（ピクセル）
alpha	透明度（0～1）
visible	trueで表示、falseで非表示
color	色を16進文字列で表す

　ここでは、X座標が150px、Y座標が200pxの位置に20×20pxの黒のボール（boxObject）を、x座標が110px、Y座標が350pxの位置に110×15pxの黒のバー（barObj）を生成するように指定しました。

　BoxClassで生成したボールとバーのオブジェクトは、背景画像のときと同様にaddChildメソッドを使って描画します。サンプル1のja.stage.addChild(ja.imageUnitObj["Bg"]);の後に、以下の2行を追加します。


ja.stage.addChild(boxObject);
ja.stage.addChild(barObj);

　これで、背景の上にボールとバーが表示されるようになりました（サンプル2）。

サンプル2の実行画面。背景の上にボールとバーが表示される

■サンプル2[Main.js]（実行画面）


Main = function()
{
  /***追加部分***/
  var boxObject = new ja.BoxClass(20,20,"#000000"); //ブロックを崩すボールを描画します。
  boxObject.x = 150; //ブロックを位置を指定します。
  boxObject.y = 200;
  var barObj = new ja.BoxClass(100,15,"#000000"); //自分の指で動かすを描画します。
  barObj.x = 110; //バーを位置を指定します。
  barObj.y = 350;
  /***追加部分***/
    
  //このゲームで使用する画像の準備をします。
  ja.imageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらthisのonLoadを実行します。
  ja.imageUnitObj.load(["Image/Bg.png", "Image/block.png"]); //画像を読み込みます。
  
  //画像が読み込み終わったあとに以下が実行されます。
  this.onLoad = function()
  {
    window.scrollTo(0, 1); //アドレスバーを消します。
    
    ja.imageUnitObj.removeEventListener("onLoad", this); //onLoadは既に呼ばれたのでリスナーを解除します。
    ja.stage.addChild(ja.imageUnitObj["Bg"]); //読み込んでおいた画像を表示させます。
    
    /***追加部分***/
    ja.stage.addChild(boxObject);
    ja.stage.addChild(barObj);
    /***追加部分***/
  }
}