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");
})
0 件のコメント:
コメントを投稿