デフォルトから一本のゲームを完成させる６.背景の表示、画像の表示基準位置
今回から流れる(自動スクロール)する背景、というのを作ってみたいと思う。
まず ASSETS に BACK という画像を登録しよう。
画像の大きさは画面に合わせる(SCREEN_WIDTHとSCREEN_HEIGH、つまり横640 * 縦480)
(道路の背景を描いてみた。)
背景表示といっても、基本は四角や.starと同じだ。
//背景
this.back = tm.app.Sprite("BACK");
this.addChild(this.back); // シーンに追加
// 今までのシーン追加分
this.rect = tm.app.RectangleShape(64,64);
//...省略
こんな感じで追加する。
ただし背景というからには、重なった時に一番下に表示されないといけない。
this.addChild( )は追加した順に表示するようなので、一番初めに追加するのがいいだろう。
しかしこのままでは、なんだか半分しか表示されていない。
Sprite は座標を指定しないと、x,y ともに 0,0 の状態からスタートする。
そして、画像は画面の大きさと同じだ。
…ならピッタリと表示されるハズではないのか?(と、自分は不思議だった…)
実は Sprite には"どこを基準にして表示するか"という値があって、初期状態のままだと、それは"画像の中心"となっている。
早い話このままだと、x,y の値は画像の中心を意味している。
それで xが0 , yが0だと、そこに"画像の中心"が来るから、半分だけチラッと見える、という訳だ。
もちろん座標を画像の半分だけずらす… xを320、yを240としてもいいのだが、
せっかくなので次回は"基準の値"をいじり、流れる背景を作ってみる。
