実際に「Main.js」「Start.js」「Game.js」を構築していきましょう。
今回は、「Start.js」でタイトル画面を作り、画面をタッチしたら「Game.js」に切り替え。
「Game.js」の本格的なゲームは次回に説明しますので、ゲーム用のBGを貼りつけて、BGをクリックしたら、またタイトル画面に戻るものを作ってみます。
シーンの考え方の基本が詰まっていますので、しっかり覚えてください。
完成ページを見てみましょう。
※PCの場合グーグルクロームかSafari、スマートフォンの場合アンドロイド、iPhoneでごらんください
完成サンプルはこちら
jActionで作られてるので、もちろんそのままスマートフォンで動きます。
いままでの説明の通り
「index.html」「jAction.js」「Main.js」「Start.js」「Game.js」があります。
その他に「Image」フォルダがあり中に
Bg.jpg -- ゲーム用の背景画像 titleBg.jpg - タイトル画面用背景画像 touchStart.png - タイトル画面に表示される「タッチスタート」の文字素材 |
が入ってます。
まずMain.jsを見てみましょう。
Main = function()
{
ja_CanvasSet();
var start = new Start();
start.addEventListener("onTouchStart", this);
var game;
this.onTouchStart = function()
{
start.removeEventListener("onTouchStart", this);
start.destroy();
game = new Game();
game.addEventListener("onGameEnd", this);
};
this.onGameEnd = function()
{
game.removeEventListener("onGameEnd", this);
game.destroy();
start = new Start();
start.addEventListener("onTouchStart", this);
};
};
|
随分とシンプルになりました。
var start = new Start(); |
という命令でStart.jsでstartという名前のタイトル画面オブジェクトを作り、と同時に
start.addEventListener("onTouchStart", this); |
startオブジェクトの”onTouchStart”というイベントを監視しています。
"onTouchStart"イベント(つまりはタイトル画面で指でタッチしたときに)が発生したら、
startオブジェクトを破棄して、
game = new Game(); |
という命令でGame.jsでgameという名前のゲームオブジェクトを作り、と同時に
game.addEventListener("onGameEnd", this); |
gameオブジェクトの”onGameEnd”というイベントを監視しています。
“onGameEnd”イベントが発生したら、gameオブジェクトを破棄して、またタイトル画面へ。
その繰り返しです。
では、「Start.js」をみてみましょう。
Start = function() { EventDispatcher.initialize(this); ja.imageUnitObj.addEventListener("onLoad", this); ja.imageUnitObj.load(["Image/titleBg.jpg", "Image/touchStart.png"]); this.onLoad = function() { window.scrollTo(0, 1); //アドレスバーを消す ja.imageUnitObj.removeEventListener("onLoad", this); ja.imageUnitObj["touchStart"].x = 50; ja.imageUnitObj["touchStart"].y = 300; ja.stage.addChild(ja.imageUnitObj["titleBg"]); ja.stage.addChild(ja.imageUnitObj["touchStart"]); ja.imageUnitObj["touchStart"].addEventListener("onEnterFrame" , this); ja.imageUnitObj["titleBg"].addEventListener("touchUp", this); }; var blend = 1; var blendDown = true; this.onEnterFrame = function() { if(blendDown) { blend -= 0.1; if(blend <= 0) { blend = 0; blendDown = false; } } else { blend += 0.1; if(blend >= 1) { blend = 1; blendDown = true; } } ja.imageUnitObj["touchStart"].alpha = blend; }; this.touchUp = function() { ja.imageUnitObj["titleBg"].removeEventListener("touchUp", this); ja.imageUnitObj["touchStart"].removeEventListener("onEnterFrame" , this); this.dispatchEvent({type:"onTouchStart", target:this}); }; this.destroy = function() { ja.stage.removeChild(ja.imageUnitObj["titleBg"]); ja.stage.removeChild(ja.imageUnitObj["touchStart"]); ja.imageUnitObj.destroy(); EventDispatcher.destroy(this); }; }; |
チュートリアル3までは、「Main.js」に書いてた見覚えある内容が多々出てきてます。その応用です。
ポイントは、
EventDispatcher.initialize(this); |
イベントを発生させるオブジェクトは、まずこの宣言をしなければなりません。
MainがStartのイベント”onTouchStart”の発生をまってるので、Startはこの宣言がいるのです。
この宣言を行うと、イベントが発生できるので、タッチしたときに
this.dispatchEvent({type:"onTouchStart", target:this}); |
とイベントを発生させてます。
dispatchEvent({type:"イベントの名前", target:イベントが起きたオブジェクト}); |
がイベントを発生させる基本書式です。
そして、イベントを二度と使わなくなった場合は、
EventDispatcher.destroy(this); |
とかき、オブジェクトからイベントの仕組みそのものを取り除いています。
1、イベント発生させる宣言
2、イベンtのの発生
3、イベント発生の破棄
この3ステップは、とても重要です。
慣れるまで時間が、かかるかもしれませんが、しっかり覚えましょう。
今回、「Start.js」は、ゲーム画面に移る時に、必要無くなるために破棄して、メモリから消えていかねばなりません。
「Start.js」の中に「destroy」というメソッドを作り、そのなかに破棄命令を書いています。
this.destroy = function() { ja.stage.removeChild(ja.imageUnitObj["titleBg"]); ja.stage.removeChild(ja.imageUnitObj["touchStart"]); ja.imageUnitObj.destroy(); EventDispatcher.destroy(this); }; |
「ja.imageUnitObj」もdestroyメソッドが準備されてるので、忘れずに実行しましょう。
「ja.imageUnitObj」にdestroy忘れると、Start画面に使われてた画像を、Gameでは使わないのに
「ja.imageUnitObj」はずっと持ち続けることになります。
また「ja.imageUnitObj」にdestroyをかける前に、「ja.imageUnitObj」の画像オブジェクトを画面からremoveChild
するのを忘れないようにしましょう。破棄してなくなってしまうのに画面に描画しようとする事になってしまうのでエラーに
なってしまいます。
また今回は
ja.imageUnitObj["titleBg"].removeEventListener("touchUp", this); ja.imageUnitObj["touchStart"].removeEventListener("onEnterFrame" , this); |
のリスナー解除をタッチした瞬間にかいてますが、destroyの中に書いても結構です。
その場合は、
imageObj["titleBg"].removeEventListener("touchUp", this); imageObj["touchStart"].removeEventListener("onEnterFrame" , this); imageObj.destroy(); |
のようにimageObj.destroy(); を後の方で実行しないとエラーがおきます。
imageObjの画像を消去してししまったのに、なくなった画像オブジェクトのリスナーを外す事になるからです。
気をつけてください。
「Game.js」をみてみましょう。
Game = function() { EventDispatcher.initialize(this); ja.imageUnitObj.addEventListener("onLoad", this); ja.imageUnitObj.load(["Image/Bg.jpg"]); this.onLoad = function() { ja.imageUnitObj.removeEventListener("onLoad", this); ja.imageUnitObj["touchStart"].x = 50; ja.imageUnitObj["touchStart"].y = 300; ja.stage.addChild(ja.imageUnitObj["Bg"]); ja.imageUnitObj["Bg"].addEventListener("touchUp", this); }; this.touchUp = function() { ja.imageUnitObj["Bg"].removeEventListener("touchUp", this); this.dispatchEvent({type:"onGameEnd", target:this}); }; this.destroy = function() { ja.stage.removeChild(ja.imageUnitObj["Bg"]); ja.imageUnitObj.destroy(); EventDispatcher.destroy(this); }; }; |
Startとほぼ同じ流れになります。
今回は、タイトル画面とゲーム画面の行き来の流れをつくりました。
シーンで分ける手法を覚えると、分業がししゃすくなります。 覚えていきましょう。
次回はいよいよ、「Game.js」をブロック崩しゲームに仕上げていきます。