経緯
Flappy Birdを作ったはいいが背景が物足りない......
せや!クリアした土管の数に合わせて背景を変化させたろ!
と、安直な発想で背景に画像を流すことに。
これまでに作ってきたゲームでも重ね順によって操作が...みたいなことがあったので
今回はAnimate内でレイヤーを分けて重ね順を管理することに。
重ね順
- 地面、ゲーム開始時などの文字
- 鳥
- 土管
- 背景
- レイヤーを4つに分けて数字が大きいほうが後ろに来るように配置。
結果
コード等すべて用意して実行してみると...
背景に流れる画像以外は思った通りの動き。
ただ、背景に流れる画像だけは土管の前に来る。なんで?
土管と鳥と背景と地面
背景の画像がどの位置にいるのか確かめるためにいろいろ位置を変えたりしてみた結果、、
以下の順番で重なっていた。
(数字が大きいほうが後ろ)
- 地面
- 鳥
- 背景画像
- 土管
そこでそれぞれのゲーム内への追加のされ方だろう、ということで見てみると...
地面と鳥はAnimate内ですでに配置をされていて座標をいじっているだけの状態。
背景画像と土管はAnimateで配置したムービークリップに対してコード上でアドしている。
たぶんこれが原因だ、ということで解決策を考える。
レイヤー分ければ解決するはずなんだけど...
解決方法
まずaddChildだったものをaddChildAtに変えてみる。
これでaddChildのタイミングでindexを指定できるらしい。
addChildAt(child, index)
//実際に書いたコード
sceneContainer.bgContPos.addChildAt(bgCont, 100);
で土管を前に!とz-indexと同じ要領でやってみたら、消えた。
見事に一番後ろに回ってしまった。
ということでaddChildAtは置いておいてsetChildIndexを使ってみる。
これで任意のchildのindexを指定できる。
setChildIndex(child, index)
// 実際に書いたコード
sceneContainer.bgContPos.SetChildIndex(bgCont, 0);
やってみたけどうまくいかない。
なんでだ?と思ってたけどよく考えたら原因がわかった。
childで指定してる対象が土管なり背景の画像なりでaddChildしたムービークリップ内でindexを変えているだけだった。
ということで背景画像をアドしているムービークリップのindexを変えてみる。
sceneContainer.setChidIndex(sceneContainer.bgContPos, 1);
できた。
けどなんかやり方がキモイ。
謎
本来であればaddChildされるムービークリップの重ね順をAnimate内で変えれば結果もそうなるはず。
だけどならなかった。よくわからない。
ということでこれはまた今度原因を調査してみる。