enchant.jsの基本的なクラスの階層

enchant.jsのしくみを理解するため、クラス図を書きながらコードを読んでみることにしました。

• enchant.EventTarget: DOM Event風味の独自イベント実装を行ったクラス.
• enchant.Game: ゲームのメインループ, シーンを管理するクラス.
• enchant.Node: Sceneをルートとした表示オブジェクトツリーに属するオブジェクトの基底クラス.
• enchant.Entity: DOM上で表示する実体を持ったクラス.
• enchant.Sprite: 画像表示機能を持ったクラス.
• enchant.Group: 複数のNodeを子に持つことができるクラス.
• enchant.Scene:  表示オブジェクトツリーのルートになるクラス.

このうち、HTMLのdiv要素に対応するのが enchant.Entity クラスで、このインスタンスを通じて、対応するdiv要素のstyle属性をいろいろ書き換えることで、実際に画面を変化させていく仕組みであるということがわかりました。

Groupのインスタンスに対してSpriteのインスタンスをaddChildすることで、複数のSpriteのインスタンスを論理的に階層化して取り扱うことができます。なおこのとき、それぞれのSpriteのインスタンスに対応したdiv要素群は、論理的な構造とは無関係に、フラットな兄弟の関係にあるような要素として作成される実装になっているという点、興味深いです。同じくJavaScriptによるゲーム開発用ライブラリであるgameQueryでは、スプライトをグループ化したものについてもdiv要素を割り当てているのと対照的です。