【phina.js】自作SpriteクラスをRot.jsのゲームエンジンに登録する

Rot.jsのGameTurnEngineでもphina.jsのクラスが使えます。
自作クラスにactメソッドとhandleEventメソッドを持たせれば、phina.jsのクラスでもschedulerに追加して使うことができます。

ソース全体

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>SpriteクラスをGameTurnEngineに登録</title>
    <!-- phina.js を読み込む -->
    <script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script>
    <!-- rot.js を読み込む -->
    <script src="https://cdn.rawgit.com/ondras/rot.js/v0.6.0/rot.js"></script>
</head>
<body>
    <script>
        //一ブロックのサイズ
        var baseSize = 48;
        //歩行スピード
        var speed = 48;
        //ゲームターンエンジン
        var GameEngine = null;

        /*SpriteSheet*/
        var ASSETS = {
            image: {
                'player': './images/player.png',
            },
            spritesheet: {
                "playerSS":
                {
                    "frame": {
                        "width": baseSize,
                        "height": baseSize,
                        "cols": 3,
                        "rows": 4,
                    },
                    //animation
                    "animations": {
                        "walkDown": {
                            "frames": [0, 2],
                            "next": "walkDown",
                            "frequency": 15,
                        },
                        "walkUp": {
                            "frames": [9, 11],
                            "next": "walkUp",
                            "frequency": 15,
                        },
                        "walkLeft": {
                            "frames": [3, 5],
                            "next": "walkLeft",
                            "frequency": 15,
                        },
                        "walkRight": {
                            "frames": [6, 8],
                            "next": "walkRight",
                            "frequency": 15,
                        },
                    }
                },
            }
        };

        // phina.js をグローバル領域に展開
        phina.globalize();
        // MainScene クラスを定義
        phina.define('MainScene', {
            superClass: 'CanvasScene',
            init: function () {
                this.superInit();
                // 背景色を指定
                this.backgroundColor = '#444';
                //プレイヤー生成
                this.player = PlayerClass(this).addChildTo(this);
                //ゲームエンジン
                this.scheduler = new ROT.Scheduler.Simple();
                this.scheduler.add(this.player, true);
                GameEngine = new ROT.Engine(this.scheduler);
                GameEngine.start();
            },
        });

        /*playerクラス*/
        phina.define("PlayerClass", {
            // Spriteクラスを継承
            superClass: 'Sprite',
            // コンストラクタ
            init: function (self) {
                this.self = self;
                // 親クラス初期化
                this.superInit('player');
                this.width = baseSize;
                this.height = baseSize;
                //attach
                this.anim = FrameAnimation('playerSS').attachTo(this);
                //サイズをフィットさせない
                this.anim.fit = false;
                //animation
                this.anim.gotoAndPlay('walkDown');
            },
            act: function () {
                GameEngine.lock();
                window.addEventListener("keydown", this);
            },
            handleEvent: function (e) {
                if (e.keyCode == 37) {
                    this.anim.gotoAndPlay('walkLeft');
                    this.x -= speed;
                } else if (e.keyCode == 38) {
                    this.anim.gotoAndPlay('walkUp');
                    this.y -= speed;
                } else if (e.keyCode == 39) {
                    this.anim.gotoAndPlay('walkRight');
                    this.x += speed;
                } else if (e.keyCode == 40) {
                    this.anim.gotoAndPlay('walkDown');
                    this.y += speed;
                }
                GameEngine.unlock();
            }
        });
        // メイン処理
        phina.main(function () {
            // アプリケーション生成
            var app = GameApp({
                startLabel: 'main', // メインシーンから開始する
                assets: ASSETS,
            });
            // アプリケーション実行
            app.run();
        });
    </script>
</body>
</html>