レイヤーの前後関係を考慮したキャラクター追加方法

今回のサンプル
 サンプルの全ファイル
例えば画面の奥から「背景」「キャラクター」「手前に描画する画像」という並び(レイヤー)にしたい場合、最初にこれらをまとめてゲーム開始前に追加する場合は問題は有りません。

しかし、ゲーム中に随時キャラクターを追加する場合には enchant.js の「後に追加したものは後に描画されるルール」の影響により以下の様にしたい場合も

以下の様な順番で描画されてしまいます。

まぁ、この部分はそのうちバージョンが上がったらz-index用のプロパティなども追加されるかもしれませんが現状でも以下の様にCSSのz-indexを利用する事でその様なレイヤー構造の作成が可能です。

        player._element.style.zIndex = 10; // ※手前に描画したいものほど、値を大きく設定する事

今回のサンプルでは以下の様なレイヤー構造になっていて

画面をタップすると「背景の前」「雲の後ろ」位置関係でUFOが追加されます。
サンプル

強火で進め