このページの本文へ

Facebook APIでソーシャルなブロック崩しを作ろう

2012年06月13日 11時00分更新

萩原伸悟/jAction

  • この記事をはてなブックマークに追加
本文印刷

Step 3:Canvas内に画像を準備する

 以下の3つの処理はまとめて解説します。


●6. フレンドの画像と背景画像を読み込む(this.onInit内)
●7. 背景画像が読み込まれたらthis.onLoadを実行する
●8. フレンドの画像が読み込まれたらthis.onLoadを実行する

 Facebookのフレンドの画像が1枚以上のときに実行されるthis.onInitを作成します。元のブロック崩しで使っている背景画像と、Facebookから取得したフレンド画像をCanvasに読み込むため、this.onGetPicture = function(){ }の次の行を以下のように変更してください。


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

 ↓ 


var fbimageUnitObj = new ja.ImageUnitClass();
this.onInit = function(){
 ja.imageUnitObj.addEventListener("onLoad", this);
 ja.imageUnitObj.load(["Image/Bg.png"]);
 fbimageUnitObj.addEventListener("onLoad", this);
 fbimageUnitObj.load(fc.pictureSelectArray);
}

 1行ずつ解説していきます。


var fbimageUnitObj = new ja.ImageUnitClass();

 複数の画像を読み込み、制御するja.ImageUnitClassを生成します。Facebookから取得した画像と背景画像を別々に格納していたため、デフォルトで用意しているja.imageUnitObj以外に生成します。this.onInitの中身を見ていきます。


ja.imageUnitObj.addEventListener("onLoad", this);

 背景画像が読み込まれたら実行するイベントを登録します。画像の読み込みが完了したらja.imageUnitObjのonGetPictureイベントが発生し、thisのonLoadメソッドが実行されます。


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

 背景画像の読み込みを開始します。今回はブロック画像をフレンド画像に置き換えるので、背景画像のみ読み込んでいます。


fbimageUnitObj.addEventListener("onLoad", this);
fbimageUnitObj.load(fc.pictureSelectArray);

 Facebookから取得した画像の読み込み処理です。上の2行と同様に画像の読み込み完了イベントを登録し、画像を読み込んでいます。


●9. フレンドの画像と背景画像の読み込みが完了したらthis.displaypicを実行する

 2つの種類の画像の読み込みがあるので、両方が完了したタイミングで表示処理へ進む必要があります。そのため、onLoadが2回実行されたら表示処理を実行するようにします。

 this.onInit = function(){}の次の行に以下を追加します。


var imagecount=0;
this.onLoad = function(){
 imagecount += 1;
 if(imagecount >= 2){
 this.displaypic();
 }
}

 onLoadが実行された回数をカウントするために、新たに変数「imagecount」を定義しています。Imagecountの値が2以上になればthis.displaypicを実行します。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く