listing componets of Crafty.js and so on.

JavaScriptとhtmlでボードゲームを実装しようと思って, 記事で列挙されていたモノの中からCrafty.jsを選んで読んでいる. いまのところ3Dを使うつもりが無かったのと複雑なモノは明らかにいらないので Crafty.jsを選んだわけだ.

Documentはあるのだが、肝心のComponent一覧がない. なのでソースをあさってみた. grepすればいいという単純なことに気づくのに 時間がかかってしまった. 良くないね.

$ grep '^Crafty.c("' crafty.js 
Crafty.c("2D", {
Crafty.c("Gravity", {
Crafty.c("DOM", {
Crafty.c("DebugCanvas", {
Crafty.c("DebugRectangle", {
Crafty.c("VisibleMBR", {
Crafty.c("DebugPolygon", {
Crafty.c("WiredHitBox", {
Crafty.c("SolidHitBox", {
Crafty.c("Tween", {
Crafty.c("Canvas", {
Crafty.c("Collision", {
Crafty.c("Mouse", {
Crafty.c("Draggable", {
Crafty.c("Keyboard", {
Crafty.c("Multiway", {
Crafty.c("Fourway", {
Crafty.c("Twoway", {
Crafty.c("Color", {
Crafty.c("Tint", {
Crafty.c("Image", {
Crafty.c("HTML", {
Crafty.c("Particles", {
Crafty.c("SpriteAnimation", {
Crafty.c("Sprite", {
Crafty.c("Text", {
Crafty.c("Delay", {
Crafty.c("TestSquare", {
Crafty.c("TestSquareWhite", {
Crafty.c("TestColor", {
Crafty.c("GLSprite", {
Crafty.c("WebGL", {

ほかに斜め読みしたところで目が止まった点を紹介しておく.

L3605 タッチディスプレーにも対応できそう.

        if (e.type === "touchstart") type = "mousedown";
        else if (e.type === "touchmove") type = "mousemove";
        else if (e.type === "touchend") type = "mouseup";
        else if (e.type === "touchcancel") type = "mouseup";
        else if (e.type === "touchleave") type = "mouseup";

L5607 Crafty.e("Hoge, Fuga")ってなんなのさ？への答え.

    e: function () {
        var id = UID(),
            craft;

        entities[id] = null; //register the space
        entities[id] = craft = Crafty(id);

        if (arguments.length > 0) {
            craft.addComponent.apply(craft, arguments);
        }
        craft.setName('Entity #' + id); //set default entity human readable name
        craft.addComponent("obj"); //every entity automatically assumes obj

        Crafty.trigger("NewEntity", {
            id: id
        });

        return craft;

L7293 component間には依存関係があり、それはCrafty側で解決して満たしてくれるのだろう...

    init: function () {
        this.requires('2D, DOM');
    },

私にとって今回の調査, 最大の収穫はDraggableの存在を発見できたことかな. ボードゲーム作るという用途では非常に価値があります. これを実行するとマウスでつかんで動かせる赤い四角が黒い背景上に現れます.

$(document).ready(function() {
        Crafty.init(640, 480);
        Crafty.canvas.init();
        Crafty.background("black");
        var piece = Crafty.e("2D, DOM, Color, Draggable");
        piece.attr({x:0, y:0, w:100, h:100}).color("red");
})