tmlibを使って速読訓練ゲームを作ってみたかった

XSERVERに変えた影響で開発のモチベが上がっております。

そんなわけで、今まで作りたくても動けなかった速読ゲームを作ってみようと思います。

今回はこちらで紹介されているチュートリアルを元に作っていきます。

ただし、速読訓練ゲームということで少し改変しながらやっていきます。

まずはhtml。ここには処理は欠かないので読み込むjsを指定するだけ。

起動時にブラウザいっぱいに画面を広げる

速読訓練では目を動かしたり周辺視野をいっぱいに使ったりするため、
画面をフルに使ってあげる必要があります。

起動時に参照するスクリーンサイズはブラウザの画面サイズを表すinnerWidth, innerHeightを使用します。

/**
 * ゲーム用ネームスペース作成、定数作成
 * Created by Tono on 2015/02/16.
 */
var game = game || {};

(function(ns) {
    // スクリーンサイズ
    ns.SCREEN_WIDTH  = innerWidth;
    ns.SCREEN_HEIGHT = innerHeight;
})(game);

タイトル画面でいきなりのundefined

メインの処理を書きます。

/**
 * ゲーム起動処理
 */
(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);

こちらはタイトル画面。

/**
 * TitleScene
 */
(function(ns) {
 
    ns.TitleScene = tm.createClass({
        superClass : tm.app.TitleScene,
 
        init : function() {
            this.superInit({
                title :  "Speed Reading",
                width :  ns.SCREEN_WIDTH,
                height : ns.SCREEN_HEIGHT
            });
        },
    });
 
})(game);

これでタイトル画面が出るはず！

＿人人人人人人＿
＞　undefined　＜
￣Y^Y^Y^Y^Y^Y￣

はて、なんでかと調べてみると、

7行目のtm.app.TitleSceneがundefinedになっており、
正しくはtm.scene.TitleSceneでした。

なんか仕様が変わったのかな？

そこを直して再度起動すると…

おお、ゲーム画面っぽい！！

TOUCH STARTとか1言も書いていないのに出てくるとか感動です。

でもちょっとデザインが無骨だよなー。

なんとか楽をしていい感じに変えたい！

というところで試行錯誤中。