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を実行します。
