tmlib.jsx - tmlib.js を jsx に移植してみた

遅れてすいませんm(_ _)m
言い訳すると食中毒にかかっ...いやなんでもないです.

ってことで本題.
JavaScript 用にずっと作ってるゲームライブラリ tmlib.js を一部 jsx に移植してみました.

Github リポジトリはこちら.
お粗末な感じですが...

機能

ゲームを作るのに最低限必要な機能は移植したつもりです.

• ベクトル計算(マトリックスは保留)
• タッチ管理
• イベント発火
• タスク管理
• 描画, 更新
• リソース(現在は画像のみ)の読み込み管理
• 衝突判定
• 乱数生成簡易ラッパー

などなど

デモサンプル

いくつかデモサンプルをつくってみました.

• shooting
• touch the number

使い方

touch the number のコードはこんな感じです.
一般的なゲームの作り方って感じでコードは丁度100行ぐらいです.

import "console.jsx";
import "js/web.jsx";

import "../../../src/app/scene.jsx";

import "../../../src/geom/vector2.jsx";

import "../../../src/display/canvasapp.jsx";
import "../../../src/display/canvaselement.jsx";
import "../../../src/display/sprite.jsx";
import "../../../src/display/label.jsx";
import "../../../src/display/shape.jsx";

import "../../../src/input/pointing.jsx";

/**
 * main
 */
class _Main {
    static function main(args: string[]): void {
        var canvas = dom.window.document.createElement("canvas");
        dom.window.document.body.appendChild(canvas);
        
        var app = new TouchColorApp(canvas as HTMLCanvasElement);
        app.canvas.setSize(640, 960);
        app.bgColor = "rgb(245, 245, 250)";
        app.canvas.fit();
        app.run();
    }
}

class TouchColorApp extends CanvasApp {
    /**
     * constructor
     */
    function constructor(elm: HTMLCanvasElement) {
        super(elm);

        var scene = new GameScene();

        this.replaceScene(scene);
    }
}

class GameScene extends Scene {
    var pieceGroup: CanvasElement = new CanvasElement();

    function constructor() {
        super();

        this.addChild(this.pieceGroup);

        for (var i=0; i<5; ++i) {
                for (var j=0; j<5; ++j) {
                var index = i*5+j;
                        var x = j*100;
                        var y = i*100;
                var angle = (360/25)*index;
                        var piece = new Piece(angle);
                        piece.setPosition(x+115, y+100);
                        this.pieceGroup.addChild(piece);
                }
        }
    }
    override function update(app:variant): void {
        this.checkCollision(app);
    }

    function checkCollision(app:variant): void {
        var baseApp = app as CanvasApp;
        var p = baseApp.pointing;
        if (!p.getPointingStart()) { return ; }
        
        var temp = new Vector2(p.position.x, p.position.y);
        
        this.pieceGroup.children.forEach(function(elm) {
            var canvasElement = elm as CanvasElement;
            
            if (canvasElement.isHit(temp)) {
                this.pieceGroup.removeChild(elm);
                canvasElement.scale.x *= 1.1;
                canvasElement.scale.y *= 1.1;
            }
        });
    }
}

class Piece extends CanvasElement {
        function constructor(angle:number) {
                super();

        this.width  = 64;
        this.height = 64;

        var color = "hsl(" + angle + ",75%, 55%)";
        var shape = new Shape(64, 64);
        shape.canvas.clear(color);
        this.addChild(shape);
        }
}

使い方

tmlib.jsx のテンプレートを用意しました. -> (こちら)
これを clone して grunt を使えばサクッと jsx でゲーム開発を始めることができます.

Setup

$git clone https://github.com/phi-jp/jsx-game-template.git
$cd jsx-game-template
$npm install
npm install

Build

grunt コマンドを叩くだけでビルドできます.
※grunt-cli をグローバルインストールしておく必要があります.

$grunt

感想

自分は C++ でずっとゲームを作って来たので
型付き言語でゲーム開発するのは懐かしい感じでわりとすんなり jsx やれました.

地味に関数オーバーロードのありがたさを感じた.
名前迷うのはもうイヤ><

他にも細々と書きたいことは山ほどあるのですが,
とりあえず公開します.

詳細は自分のブログのほうにでもいずれ書きたいと思います!!

以上, メリークリスマス♪