シーンを作ってみよう
サンプル
コードの解説
新しくシーンを追加したら、最初に起動するシーンを決めます。今回はtitleを表示させますので、titleが最初に表示されるように作ってみます。
/**
* ゲーム起動処理
*/
(function(ns) {
tm.main(function() {
// アプリケーション作成
ns.app = tm.app.CanvasApp("#world");
ns.app.resize(ns.SCREEN_WIDTH, ns.SCREEN_HEIGHT); // 画面サイズに合わせる
ns.app.fitWindow(); // リサイズ対応
ns.app.background = "rgb(0, 0, 0)"; // 背景色をセット
// シーンの切り替え
ns.app.replaceScene(ns.TitleScene());
// tmlibの実行
ns.app.run();
});
})(game);
シーンの切り替え処理を追加します。tm.main関数でアプリケーションを作成したら、シーンに移動してゲーム処理が開始されます。ではシーン処理も見てみましょう。
/**
* TitleScene
*/
(function(ns) {
ns.TitleScene = tm.createClass({
superClass : tm.app.TitleScene,
init : function() {
this.superInit({
title : "タッチゲーム制作チュートリアル",
width : ns.SCREEN_WIDTH,
height : ns.SCREEN_HEIGHT
});
},
});
})(game);
新しくsceneディレクトリの下に作ったtitle用のシーンです。titleを簡単に作成できるようにtmlib.jsが用意しているので、それを上書き(クラスの継承)を行なって実装します。これだけのコードの追加でゲームのタイトルを作ることができます。
もうちょっと詳しく解説
シーンの処理のコードについてもう少し踏み込んで解説していきます。
/**
* TitleScene
*/
(function(ns) {
ns.TitleScene = tm.createClass({
superClass : tm.app.TitleScene,
init : function() {
this.superInit({
title : "タッチゲーム制作チュートリアル",
width : ns.SCREEN_WIDTH,
height : ns.SCREEN_HEIGHT
});
},
});
})(game);
tm.main関数とはまた少し違った形になっていますね。ns.TitleSceneとはクラスの名前です。tm.createClassという関数を使ってクラスを作成します。
通常JavaScriptでは、関数に対してnewを使うことでクラスを作成します。しかしJavaScriptのnewは厄介者なので使いたくありません。そのため、クラスの生成はtmlib.jsがサポートしてくれています。クラスの継承など必要な機能を提供してくれますので、存分に使わせてもらっています。クラスという言葉に覚えが無い方は、またコレもおまじないだと思ってください。
title画面として必要な機能は、tm.app.TitleSceneクラスで用意されています。この機能を流用(継承)している感じです。以下のコードで流用しますよと明言しています。
superClass : tm.app.TitleScene,
このように、コードを流用することで複雑な処理も簡単に書けるようになっています。次はinit関数ですね。クラス内のinit関数は、このクラスが使われた際に最初に呼ばれる関数です。
init : function() {
this.superInit({
title : "タッチゲーム制作チュートリアル",
width : ns.SCREEN_WIDTH,
height : ns.SCREEN_HEIGHT
});
},
変数などの初期化に使います。また、this.superInit関数を呼び出すことで、流用元(継承元)であるtm.app.TitleSceneクラスのinit関数を呼び出せます。これで連鎖的に初期化の処理が呼べます。
複数のシーンを用意しよう
サンプル
コードの解説
タイトルを描画するシーンは作ったので、ゲームを実行するシーンと、ゲームが終了した時のシーンを作っておきましょう。
/**
* MainScene
*/
(function(ns) {
ns.MainScene = tm.createClass({
superClass : tm.app.Scene,
init : function() {
this.superInit();
},
});
})(game);
これからゲームの処理を組み込んでいくMainSceneクラスです。
/**
* EndScene
*/
(function(ns) {
var RESULT_PARAM = {
score: 256,
msg: "【タッチゲーム制作チュートリアル】",
hashtags: ["omatoro", "tmlibチュートリアル"],
url: "http://testcording.com",
width: ns.SCREEN_WIDTH,
height: ns.SCREEN_HEIGHT,
related: "tmlib.js Tutorial testcording",
};
ns.EndScene = tm.createClass({
superClass : tm.app.ResultScene,
init : function() {
// スコア
this.superInit(RESULT_PARAM);
},
});
})(game);
EndSceneはゲームが終了したときのシーンですね。スコアの表示など行います。
EndSceneもtmlib.jsに専用のクラスが準備されています。Twitterへの投稿処理や、戻るボタン(Backボタン)が既に組み込まれています。いたせり付くせりですね。RESULT_PARAM変数のurlを変えると、Twitterでつぶやく時に表示するリンクなどを変えることができます。ハッシュなども変更できます。
複数のシーンを繋げよう
サンプル
コードの解説
作ったシーンをつなげてみます。繋げ方は、tm.main関数で使ったreplaceScene関数を使います。ハイライトしてる部分ですね。
/**
* TitleScene
*/
(function(ns) {
ns.TitleScene = tm.createClass({
superClass : tm.app.TitleScene,
init : function() {
this.superInit({
title : "タッチゲーム制作チュートリアル",
width : ns.SCREEN_WIDTH,
height : ns.SCREEN_HEIGHT
});
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.MainScene());
});
},
});
})(game);
/**
* MainScene
*/
(function(ns) {
ns.MainScene = tm.createClass({
superClass : tm.app.Scene,
init : function() {
this.superInit();
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.EndScene());
});
},
});
})(game);
/**
* EndScene
*/
(function(ns) {
var RESULT_PARAM = {
score: 256,
msg: "【タッチゲーム制作チュートリアル】",
hashtags: ["omatoro", "tmlibチュートリアル"],
url: "http://testcording.com",
width: ns.SCREEN_WIDTH,
height: ns.SCREEN_HEIGHT,
related: "tmlib.js Tutorial testcording",
};
ns.EndScene = tm.createClass({
superClass : tm.app.ResultScene,
init : function() {
// スコア
this.superInit(RESULT_PARAM);
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.TitleScene());
});
},
});
})(game);
実行してみて、画面をタッチ(or クリック)してみてください。画面が切り替わるのが分かります。
もうちょっと詳しく解説
シーンを遷移させるために画面をタッチ(or クリック)した判定を作る必要がありますが、またこれもtmlib.jsで既に用意されています。スマートフォンのタッチとマウスのクリック同時に対応できるというスグレモノです。
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.TitleScene());
});
addEventListener関数を使ってタッチイベントを登録します。”pointingend”とありますね？ 言葉の通りタッチが終了した瞬間(指を離した瞬間)にこの処理が呼び出されます。じゃあ”どこ”をタッチした時の処理なのかというと、this.addEventListenerとなっていますのでthisをタッチした時の処理です。thisはこのクラスを指しているので、シーン全体(画面全体)が判定範囲となります。