かずおの開発ブログ(主にRuby)

日々の開発のことを色々書きます。

簡易ダメージスライダーの作成

今回はゲーム制作によく使われるダメージスライダーを作成してみます。

完成図

youtu.be

準備(iTweenをインポート)

今回はiTweenというUnityAssetを使用しますので、予めimportしておきます。

itween - A simple, powerful and easy to use animation system for Unity. - Google Project Hosting

シーンを作成

まず下のようなシーンを作成します。 f:id:kazuooooo:20150520185811p:plain 1.Canvas配下にSliderComponentを作成(GameObject→UI→Slider)。

2.Handlerは今回不要なので削除。

3.SliderのTargetGraphicにFillを設定します。FillのImageのColorもなんか好きな色に変更します。

f:id:kazuooooo:20150520190123p:plain

4.あとは写真のようにボタンやテキスト、背景の白いイメージなどを配置して完了です。

5.最後にSliderCoponentのValueを変更してScene上のSliderに反映されることを確認してください。

スクリプトを作成

DamageSlider.csという名前でSliderに以下のスクリプトをアタッチします。 ポイントはiTweenのValueToメソッドを使ってTween発生中に繰り返しコールバックを呼んでいるところです。 これによって、ライフがだんだん減っていくように見えたり、数字が動きをもって減っていったりするのを実現しています。 細かい処理の説明はコメントを御覧ください。 gist.github.com

確認

では最後にうまく動くか確認してみましょう。ダメージのボタンにOnClickメソッドでdamageLife(引数は100にデモしてみてください)を設定して、クリックしてみましょう。 f:id:kazuooooo:20150520194709p:plain

ダメージスライダーは結構既成のものもたくさんありますが、一度自分で実装しておくと、理解がすすんでいいのではないでしょうか!