デフォルトから一本のゲームを完成させる８.背景のループの仕組みを考える
前回ではスクロールで流れる背景を作った。
しかしこのままでは、画像１枚で流れてしまう。
画像が永久に流れるようにしたい。
そこで画像がループする仕組みを考えてみよう。
色々方法はあるかも知れないが、私が考えたのは、以下のやり方。
まず背景画像を２枚用意する。
１枚は画面にすっぽりと表示し、２枚めはその上にピッタリと付けて置く。
そして２枚とも下に同時に動かす(スクロールさせる)
１枚めが画面下に見切れていくほど、２枚めは画面上からせり入っていく形。
そして、１枚めが完全に見えなくなってしまった時…(２枚めの全体がすっぽりと表示された時でもある)
１枚めはすぐさま２枚めの後ろへ移動する(初めに２枚めが居た位置だ)
同様に２枚めにも、この処理を行う。２枚めが画面下から出たら、また画面上に戻る。
１枚目は画面内におり、再びその上にぴったりと付く形。
この仕組みを導入すれば無事、背景が途切れる事なく流れ続けるのではないだろうか。
さっそくこの方法を試してみたい…だが背景が２枚だからといって、
// １枚め
this.back1 = tm.app.Sprite("BACK");
this.back1.origin = tm.geom.Vector2(0.0, 0.0);
this.back1.scroll_move = function(){
this.y += userData.speed;
}
this.addChild(this.back1);
// ２枚め
this.back2 = tm.app.Sprite("BACK");
// ..省略
this.addChild(this.back2);みたいに、同じ文が続くのはまた、スマートではない。
ならばmakeLabelみたいな作成する関数を作る…? と言いたい所だが、そもそも今回は、それぞれが独立して動くラベルとは違う。
今回は"画像こそ２枚並べるが、その２枚で一つの背景"…という位置づけだ。
画像としてはそれぞれ Sprite で表示するが、実際には２つをまとめて処理しないと、背景ループと呼べる処理にならない。
こうした場合は、２つの変数を一つの"配列"にしてまとめてると、処理しやすく、見た目に関係性も分かってスマートになる。
という訳で少し回り道して、"配列"というものを勉強しよう。
