tmlibでゲージを実装する

イントロ

最近趣味でゲーム制作を始めました。

簡単にゲームを作る（javascriptでゲームを作る）フレームワークはいくつかありますが、現在僕が使わせて頂いてるのは tmlibです。

（enchant.jsはドキュメントが充実していて良いのですが、iPhone4系とかでUIWebView実装だと実行速度が遅くて厳しいです）

今回はtmlibでタイムリミットを示すゲージを表示する必要があったのでその備忘録です。
＊下図の様な物

ゲージの実装

tmlib 1.6以降には Gauge と言うとても便利なクラスが実装されてるので、ゲージを出すだけなら以下のようにすれば簡単に出来ます。
参考リンク　http://jsdo.it/phi/2gUr

qiita.js

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 だと右端がオブジェクトの位置決定の基準になる訳です。
それと同時に、ゲージクラスは値をセットすると、ゲージの長さを変えてくれる訳ですが、これの基準点も第４引数によって決まる事になります。

ゲージクラスの使い方ですが、上述のようにインスタンスを作成した後、

qiita.js

gauge.value -= 10;

とかってやるとゲージが伸び縮みします。便利ですね！
しかもこれ、ちゃんと-10までの間を補完して アニメーション して縮んでくれます。すばらしい。

ただ、今回すこし詰まったのが、このアニメーション部分です。

ゲージの長さを一瞬にして指定の長さにしたいときがあると思います。

これを以下のように記述しても上手く行きませんでした。目標の長さまでアニメーションしちゃうんですね。

qiita.js

gauge.value = 100;

で、解決方法がこれです。

qiita.js

gauge.width = 100;

身も蓋もないですが、直接幅を指定する事でアニメーションなしで目的の長さを表示出来ます。
以上、備忘録でした。

tmlibももっとドキュメント増えてくと嬉しいなー…。