【enchant.js】ver. 0.6でのGroupの注意点【実験】

プログラミング enchant.js 9leap

先日、enchant.js 0.6がリリースされましたね。
twitterを眺めていると、色々な方の悲鳴が聞こえてきます（笑）。

今回のバージョンアップの目玉は、やはりCanvasベースの描画でしょうか。
というわけでその影響を受けるもののひとつ、Groupについて探ってみました。
まずは以下の２つのコードをご覧下さい。

  • パターン１
// 子ノードを追加した後にGroupのプロパティを操作
var g1 = new Group();
game.rootScene.addChild(g1);
var b1 = new Sprite(32,32);
b1.image = game.asstes['chara1.gif'];
b1.x = b1.y = 160 - 16;
g1.addChild(b1);
g1.originX = g1.originY = 160;
g1.rotation = 45;


  • パターン２
// Groupのプロパティを操作した後に子ノードを追加
var g2 = new Group();
game.rootScene.addChild(g2);
g2.originX = g2.originY = 160;
g2.rotation = 45;
var b2 = new Sprite(32,32);
b2.image = game.asstes['chara1.gif'];
b2.x = b2.y = 160 - 16;
g2.addChild(b2);

違いが分かるでしょうか。
パターン１では、子ノードを追加した後にGroupのプロパティを操作しています。一方、パターン２ではプロパティを操作した後に子ノードを追加しています。
この２つ、感覚的には同じ結果が得られると考えるのですが……なんと！　パターン１ではプロパティの操作結果に従って子ノードも回転するのですが、パターン２ではプロパティの捜査結果に子ノードが追従していません！　この結果から分かることは、Groupのプロパティ操作の結果は、操作された時点で保持している子ノードに対してのみ有効、ということです。正直、この仕様はどうかな～と思います。

それでは、この仕様に対する方策は何かあるのでしょうか。ベタなところでは、下のパターン３のようにaddChild後に必ずプロパティ操作をする、ですか。

  • パターン３
// Groupのプロパティを操作した後に子ノードを追加、さらにGroupのプロパティを操作
var g3 = new Group();
game.rootScene.addChild(g3);
g3.originX = g3.originY = 160;
g3.rotation = 45;
var b3 = new Sprite(32,32);
b3.image = game.asstes['chara1.gif'];
b3.x = b3.y = 160 - 16;
g3.addChild(b3);
g3.x = g3.x;

マニアックなやり方だと、Groupのハックですね。

  • パターン４
// addChild関数の中でGroupのプロパティを操作
var g4 = new Group();
g4.addChild = function(node) {
    enchant.Group.prototype.addChild.call(this,node);
    this.x = this.x;
};
g4.originX = g3.originY = 160;
g4.rotation = 45;
var b4 = new Sprite(32,32);
b4.image = game.asstes['chara1.gif'];
b4.x = b4.y = 160 - 16;
g4.addChild(b4);

addChild関数の中でプロパティを操作するようにしてしまえば楽ちんです。