tmlibでゲージを実装する
イントロ
最近趣味でゲーム制作を始めました。
簡単にゲームを作る（javascriptでゲームを作る）フレームワークはいくつかありますが、現在僕が使わせて頂いてるのは tmlibです。
（enchant.jsはドキュメントが充実していて良いのですが、iPhone4系とかでUIWebView実装だと実行速度が遅くて厳しいです）
今回はtmlibでタイムリミットを示すゲージを表示する必要があったのでその備忘録です。
＊下図の様な物
ゲージの実装
tmlib 1.6以降には Gauge と言うとても便利なクラスが実装されてるので、ゲージを出すだけなら以下のようにすれば簡単に出来ます。
参考リンク http://jsdo.it/phi/2gUr
var gauge = tm.app.Gauge(300, 25, "red", "left");
gauge.position.set(0, 0);
scene.addChild(gauge);
ちなみに Gaugeクラスに渡してる
- 第１引数(300)が横幅
- 第２引数(35)が高さ
- 第３引数には色
- 第４引数には基準となる位置を right or left で渡します
第４引数について補足ですが、ここで指定した right or left によって、オブジェクトの位置の基準点が変わります。
right だと右端がオブジェクトの位置決定の基準になる訳です。
それと同時に、ゲージクラスは値をセットすると、ゲージの長さを変えてくれる訳ですが、これの基準点も第４引数によって決まる事になります。
ゲージクラスの使い方ですが、上述のようにインスタンスを作成した後、
gauge.value -= 10;
とかってやるとゲージが伸び縮みします。便利ですね！
しかもこれ、ちゃんと-10までの間を補完して アニメーション して縮んでくれます。すばらしい。
ただ、今回すこし詰まったのが、このアニメーション部分です。
ゲージの長さを一瞬にして指定の長さにしたいときがあると思います。
これを以下のように記述しても上手く行きませんでした。目標の長さまでアニメーションしちゃうんですね。
gauge.value = 100;
で、解決方法がこれです。
gauge.width = 100;
身も蓋もないですが、直接幅を指定する事でアニメーションなしで目的の長さを表示出来ます。
以上、備忘録でした。
tmlibももっとドキュメント増えてくと嬉しいなー…。