強火で進め

このブログではプログラム関連の記事を中心に書いてます。こちらで( http://blog.livedoor.jp/tsuyobi-outdoor/ ) アウトドア関連の記事も書いてます。

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


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

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

  • 背景
  • キャラクター
  • キャラクター2
  • 手前に描画する画像

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

  • 背景
  • キャラクター
  • 手前に描画する画像
  • キャラクター2

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

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

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

  • 背景(夜景)
  • 背景2(家)
  • キャラクター(UFO)
  • 手前に描画する画像(雲)

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

関連情報

nakamura001 @ ウィキ - トップページ/JavaScriptゲーム/ライブラリ/enchant.js/サンプル
http://www32.atwiki.jp/nakamura001/pages/149.html