enchant.jsにおけるEntity表示制御 番外編

２回で終わらせるつもりだったのですが、zIndexいぢっている人を見かけたのでこっちも負けじと続けたいと思います。

重要なことなので最初に言っておきます。
zIndexはenchant.jsではサポート対象外のプロパティです！
Issue #3: z-indexのプロパティが欲しい · wise9/enchant.js · GitHub

まず「zIndexとは何ぞや？」というところから。
zIndexはCSSで重なり表示を制御する際にアクセスするz-indexプロパティのことで、値が大きいほど要素が手前に表示されます。
CSSですとアクセス方法は

object.style.z-index = 0;

となりますが、Javascriptの場合は

object.style.zIndex = 0;

となります。ちょと注意。
enchant.jsからですと、

entity._element.style.zIndex = 0;

でアクセスできますので、ちょっと覗いてみましょう。

console.log(entity._element.style.zIndex);

……何も表示されませんね。
ハイ、何も設定されていないんです。
カラ要素、とでも言えばいいのかな？　「entity._element.style.zIndex === ''」でtrueが返りました。
これはいくらSceneにEntityを追加しても同じです。
じゃあ、このzIndexを入力したEntityと入力しなかったEntity、どちらが手前に表示されるのでしょうか。――答えは入力したEntityです。
「'' < 1」はtrueが返ります。これと同じ理屈で「zIndex = ‘’」よりも「zIndex = 1」の方が大きな値になるので、zIndexを入力したEntityが手前に表示されます。
「’’ < 0」と「0 < ‘’」はどちらもfalseなので、Entityを追加した順序に左右されます。zIndex値が同値の場合も同じです。
また、zIndexはinsertBeforeよりも優先されます。
SceneのchildNodesを覗くと子Nodeの順番は入れ替わっているのですが、表示順は影響を受けなくなります。
それじゃ、今回のサンプル。

enchant.jsにおけるEntity表示制御　番外編 - jsdo.it - share JavaScript, HTML5 and CSS

最後にもう一度言っておきます。
zIndexはenchant.jsではサポート対象外のプロパティです！
Issue #3: z-indexのプロパティが欲しい · wise9/enchant.js · GitHub

重要なことなので二度言いました。