jgame.jsのリリース - tsuge development page

sourceforge.jpでもニュース登録しておいたけど、jgame.jsという名前でここ三日程作っていたTypeScriptで作ったjavascriptのゲーム用フレームワークをリリースした。

sourceforge.jpでのニュース
http://sourceforge.jp/forum/forum.php?forum_id=30671

昨日からの修正点

Shapeクラスの追加、LoadingSceneクラスに内容を入れ忘れていたのでその追加。
あとすげー簡単だけどドキュメント類をちょこちょこ。主にサンプル関係だけど。

そのサンプルは、一応プロジェクトwebにもファイルアップしておいた。
webkit系はさくさく、operaはちょっときつめ。FireFoxはなんとも。
http://jgame-js.sourceforge.jp/
素材がしょぼいのは仕様というかしようがねぇだろというか。。

それから、前回enchant.jsを作ったのと全く同じ内容のデモを作ってアップした。
http://tsuge.sub.jp/sugoroku/blog/jgame.js/sugoroku/
enchant.js版と比べるとわかりやすいかも。
http://tsuge.sub.jp/sugoroku/blog/sugoroku/test.html

macだと綺麗に見えるんだけど、いかんせんテスト不足。
テスト不足っていうのは、今いる環境には手元でまともに動作するpcが2台しかないので、テスト環境不足。工数不足ではないのでどうにもならん。
この辺、大してリッチじゃない状態での独力に限界を感じないでもない。

誰か見た人いたらコメントとかでどんな感か教えてもらえるとすごく嬉しいです。
ラグいんですけど、っていうのがどのくらいのスペックから出るのかを知りたい。
手元macのoperaで、レイヤー２枚目出した瞬間に40fps程度しか出ずにコマ落ちするのは確認してるけど、operaだしなぁ。。

enchant.jsとの比較

正直、あんまり変わらないと思うんだけど、イベントの駆動方法とかちょくちょく違う。
enchant.jsのトップにある動作サンプルがこうで、

<!doctype html>
<html><head><script src="enchant.js"></script></head>
<body style="margin:0; padding: 0;">
<script>
    enchant(); // initialize
    var game = new Game(320, 320); // game stage
    game.preload('chara1.png'); // preload image
    game.fps = 20;

    game.onload = function(){
        var bear = new Sprite(32, 32);
        bear.image = game.assets['chara1.png'];
        game.rootScene.addChild(bear);
        bear.frame = [6, 6, 7, 7];   // select sprite frame
        
        bear.tl.moveBy(288, 0, 90)   // move right
            .scaleTo(-1, 1, 10)      // turn left
            .moveBy(-288, 0, 90)     // move left
            .scaleTo(1, 1, 10)       // turn right
            .loop();                 // loop it
    };

    game.start(); // start your game!
</script>
</body>
</html>

こっちはこう。

<!doctype html>
<html>
<head>
<title>Hello world</title>
<script type="text/javascript" src="js/jgame.js"></script>
<script type="text/javascript">
window.onload = function() {
	var game = new Game(320, 320);
	game.preload({chara: "chara1.png"});
	game.loaded.handle(function() {
		var chara = new Character(32, 48, game.r("bear"));
		game.currentScene.append(chara);
		chara.frame = [6, 7, 8, 7];
		chara.tl().moveBy(288, 0, 1800)
			.scaleTo(-1, 1, 300)
			.moveBy(-288, 0, 1800)
			.scaleTo(1, 1, 300)
			.loop();
	});
}
</script>
</head>
<body>
</body>
</html>

これだけだと、SpriteがCharacterになっていたり、game.onload =がgame.loaded.handleになっていたり、リソースの指定が名前付きになっていたり、tlがtl()になっていたりするくらい。
ちょくちょく変わっているけど、今回は意識的に似せたので、enchant.js経験者ならそれほど違和感なく入れるはず。

現時点でのenchant.jsとの比較はこんな感じかな。

機能	enchant.js	jgame.js
サウンド	○	×
管理単位	フレーム	時間
DOMサポート	○	×
ビットマップフォント	○	×
レイヤー	×	○
記述言語	javascript	typescript
デフォルト素材	○	×
ドキュメント	充実	皆無

他、enchant.jsはプラグインも入れると、ui部品とかsocketとかbox2dとかまあ色々サポートされてる。
あと、多分enchant.jsのが若干作りやすい。今後もそれは変わらないかなぁと思う。

こっちはスピード命、enchant.jsは作りやすさ命かなと。
ちなみにこっちをフレームベースで動かす方法もあるにはある。その辺の裏技は、今後ぼちぼちwikiに書いていくつもり。

サポートしたいのはビットマップフォントとサウンド、デフォルトの素材、それからbox2d。
追加機能に関しては本体を極限までダイエットさせて、プラグインの仕組み入れた方がいいかもとは思っとる。今でもいつの間にかjavascriptで2000行いっちまってるし。tl.enchant.jsのサポートでかなり食われた。
あと名前空間ね。今グローバル空間汚しまくりで、俺は別に構わんのだけど、嫌な人もいるでしょと。

あとサンプルゲームもいくつか作りたいね。サンプル少なすぎてわからんだろうというのが心配。
アクション、シューティング、RPG、ノベルってとこすか。ノベルゲーはさすがに向いとらんと気もするが。。

今後の方針

今後は不思議のすごろく作りながらちょくちょくアップデートしつつ、1.0を目指してく感じ。
今でもそれなりに使えると思うけど、まあバグはあるだろうな〜。

テスト不足なところは現状どうしようもない部分もあるので、現在までのバージョンをデモしつつ、仲間を募るしかやりようねぇかなとは思ってる。
単独でテスト環境作ろうにも、いかんせん今の俺には金がねぇ。

iPhone3種android5種pc5種くらいのそこそこ設備でも、100万くらいはどうしてもかかっちゃうからね。
iPhoneやandroidで60fps出したいんだけど、それが現実的な目標なのかどうかってのを早めに検証したいけど、まあしゃあない。

とりあえず、フレームワークは現時点まででいったん一段落で、不思議のすごろく作りながらChromeでテストしつつ、戦闘シーンのデモが出来た時点で誰かを巻き込んでテストしていきたいなってとこっすかね。

TypeScriptのコーディングが壮快だったこともあり、今回のコーディングはかなり楽しめた。
今後もバリバリ作っていきたいな。