デフォルトから一本のゲームを完成させる７.背景ぴったり表示、流れるように
前回では、背景画像の表示に成功したものの、半分ズレた位置だった。
実は[Documents]で Sprite を調べると、origin 中心位置 というものがある。
そもそも、originには何が入ってるんだ、とtmlibのソースコードを調べる（デフォルトのmain.jsをいじる４,シーンを使わずに画像表示してみる - tmlibの練習ブログ）
this.origin = tm.geom.Vector2(0.5, 0.5);
すると、こういった初期値の設定をしている事が分かる。
0.5で中心表示なら、0.0で左上の表示になる? とアタリをつけて
(tm.geom.Vector2 を詳しく調べても良いけど…)
this.back = tm.app.Sprite("BACK");
this.back.origin = tm.geom.Vector2(0.0, 0.0); // 変更
this.addChild(this.back); // シーンに追加を試してみる。
ぴったりと表示された訳だ。
今回はスクロールという事で、スピードに従って流れるようにする。
this.back.scroll_move = function(){
this.y += userData.speed;
}こんな感じで関数を持たせて（デフォルトのmain.jsをいじる１３,既存クラス(オブジェクト)に関数追加 - tmlibの練習ブログ）
そしてこれを、毎回実行される update: の中で実行。
update: function(app) {
var p = app.pointing;
this.back.scroll_move();
// ...省略
これで流れる背景はひとまず完成。
当たり前だがスピードを上げると背景も速く流れるのは、なかなかインタラクティブな面白さがある。
…だがこのままでは、一枚の背景が、あっという間に流れきってしまう。
次は背景がループするようにしてみよう。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_12_01.txt
＊バージョンは、tmlib.js 0.2.0で作成。
