【enchant.js】タグを使ってみよう

今回取り上げるのは、enchant.jsでのhtmlタグの利用についてです。

enchant.jsは、v0.5まではDOMベースの描画で、文字列を扱うLabelにタグを直接書き込むという荒業が可能でした。しかしv0.6以降、描画がCanvasベースに変わったためLabelでタグを利用することができなくなりました。
唯一使えるのがbrタグなのですが、これは内部で改行のキーとして使われているにすぎません。*1

では、v0.6以降のenchant.jsではhtmlタグを使うことが出来ないのでしょうか。
そんなことはありません。
ちょっとv0.6のリリースアナウンスを引いてみましょう。

具体的には CanvasLayer, DOMLayer という2つの描画方法をサポートするクラスが追加され、
Sceneは複数の Layer を持つようになりました。
Scene に addChild で描画ツリーに追加された Entity は、
各Layer (_element プロパティにDOMを持っていれば DOMLayer、そうでなければ CanvasLayer) に振り分けられ、
それぞれの Layer によって描画されることになります。

デフォルトでは、同じシーンの中では Canvas で描画されるオブジェクトの上に
DOM で描画されるオブジェクトが表示されます。

今までのAPIは変わりません。この変更を意識せず、今までどおり Entity, Sprite, Scene を使うことができます。 
但し、Sprite のプライベートだったプロパティ ._element, ._style が廃止されていますので、
これを使っていたコードは動かなくなる可能性がありますのでご注意ください。
DOM を表示したければ、._element プロパティにDOMを持つクラスを作るだけで DOM を表示できます。

Entityの_elementプロパティにDOM要素を生成してやればいいことがわかります。
さて、それでは今回のコードです。

widthを設定するのを忘れないで下さい。でないと、思わぬところで改行される結果となります。

*1:反対に改行するにはbrタグを使わないといけないってのはあまりいただけない仕様だと思います。