02:「シーンを作ろう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - 02:「シーンを作ろう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

シーンを作ってみよう

サンプル

コードの解説

今回はtitleを表示させますので、titleが最初に表示されるようにmain.jsを作り変えましょう。シーンの切り替え処理を追加した後、シーンを切り替えた後のtitle画面の処理を追加します。

新しくtitle用のシーンを追加しました。title画面を簡単に作成できるようにtmlib.jsが用意しているので、それを上書き(クラスの継承)を行なって実装します。これだけのコードの追加でゲームのタイトルを作ることができます。

もうちょっと詳しく解説

シーンの処理のコードについてもう少し踏み込んで解説していきます。

tm.main関数とはまた少し違った形になっていますね。”TitleScene”とはクラスの名前です。tm.defineという関数を使ってクラスを作成します。
 
クラスの生成処理はJavaScript標準の機能ではなく、tmlib.jsがサポートしている機能です。JavaScriptではない言語でお馴染みのクラスが簡単に作れます。クラスという言葉に覚えが無い方は、またコレもおまじないだと思ってください。
 
title画面として必要な機能は、tm.app.TitleSceneクラスで用意されています。この機能を流用(継承)している感じです。以下のコードで流用しますよと明言しています。

このように、コードを流用することで複雑な処理も簡単に書けるようになっています。自分で作ったクラスも流用していけばこれから先も楽ができますね。
 
次はinit関数です。クラス内のinit関数は、このクラスが使われた際に最初に呼ばれる関数です。(コンストラクタとも言います)

クラスを使った際、最初に呼ばれる処理なので変数の初期化などに使います。また、this.superInit関数を呼び出すことで、流用元(継承元)であるtm.app.TitleSceneクラスのinit関数を呼び出せます。これで連鎖的に初期化の処理が呼べます。

複数のシーンを用意しよう

サンプル

コードの解説

タイトルを描画するシーンは作ったので、これからゲームの動作を作っていくシーン(MainScene)と、ゲームが終了した時のシーン(EndScene)を作っておきましょう。

EndSceneはゲームが終了したときのシーンですね。スコアの表示など行います。
 
EndSceneもtmlib.jsに専用のクラスが準備されています。Twitterへの投稿処理や、戻るボタン(Backボタン)が既に組み込まれています。いたせり付くせりですね。RESULT_PARAM変数のurlを変えると、Twitterでつぶやく時に表示するリンクなどを変えることができます。ハッシュなども変更できます。

複数のシーンを繋げよう

サンプル

コードの解説

作ったシーンをつなげてみます。繋げ方は、tm.main関数で使ったreplaceScene関数を使います。ハイライトしてる部分ですね。

実行してみて、画面をタッチ(or クリック)してみてください。画面が切り替わるのが分かります。

もうちょっと詳しく解説

シーンを遷移させるために画面をタッチ(or クリック)した判定を作る必要がありますが、またこれもtmlib.jsで既に用意されています。スマートフォンのタッチとマウスのクリック同時に対応できるというスグレモノです。

addEventListener関数を使ってタッチイベントを登録します。”pointingend”とありますね? 言葉の通りタッチが終了した瞬間(指を離した瞬間)にこの処理が呼び出されます。じゃあ”どこ”をタッチした時の処理なのかというと、this.addEventListenerとなっていますのでthisをタッチした時の処理です。thisはこのクラスを指しているので、シーン全体(画面全体)が判定範囲となります。

 

EndSceneは画面全体ではなく、ボタンを押したときのみシーンを移動します。Backボタンを押したときの動作を作るときは次のように記述します。

いかがでしたか?シーンの作成とシーンをつなぐ処理も簡単にできましたね。シーンの作成まではどのゲームにも利用できますので、ひな形として保存いておくと次に繋げやすくなるのでオススメです。