Groupクラスはとっても便利【enchant.js】

enchant.jsでゲームを作っていて気付いたのがGroupクラスの便利さ。

実は最初は使い方が分からずあんまり使っていなかったんですが、何度か使っているうちに「そう使うものだったのか！」という発見がありました(；´∀｀)

というわけで「Groupってなに？」ってなってる方のために私なりに気づいたGroupの使い方を説明したいと思います。

Groupは親になる

まずGroupとは何かって話ですが、簡単に言うと要素の親になります。スプライトを画面に表示する際にaddChild()を使っていますが、綴りの通り子をくっつけているわけです。つまりルートシーンにaddChildするとルートシーンが親になります。

で、Groupを使うときはGroupにaddChildします。そうすることでGroupが親になります。

ちょっと何言ってるかわからない、ってなってるかもしれませんがenchant.jsではaddChildされた要素は親要素に対して座標を持ちます。つまりシーンにaddChildされるとシーンに、GroupにaddChildされるとGroupに対しての座標になります。

Groupの座標を変えるだけで済む

enchant.jsではスプライトなどが持つ座標は画面に対しての絶対座標ではなく、相対座標になっています。つまり、

親が動けば子も動く

ということです。例えばこんな感じのメッセージボックスを表示させたい場合

Groupを使ってこのメッセージボックスを作ると後で表示位置を変えたくなった時にGroupの座標を変えるだけで済みます。Groupの座標を変えるだけで子の要素も移動します。なぜなら子の要素は親の座標を基準にした座標になるからです。

さらに便利なことはGroupを拡大・縮小すると子要素も同じくそうなります。

あとがき

ちょっと親子関係について説明が下手で内容が伝わっていないんじゃないかと不安です(-_-;)

一応、親子関係でいうとGroupの親はシーンでシーンの親は画面になります。つまりシーンすら画面に対しての座標を持つので動かせます。

Groupを上手く使えば複数のスプライトを使った大きなキャラだって自由自在に動かせる！？はずです(^^;)