簡易ダメージスライダーの作成
今回はゲーム制作によく使われるダメージスライダーを作成してみます。
完成図
準備(iTweenをインポート)
今回はiTweenというUnityAssetを使用しますので、予めimportしておきます。
itween - A simple, powerful and easy to use animation system for Unity. - Google Project Hosting
シーンを作成
まず下のようなシーンを作成します。 1.Canvas配下にSliderComponentを作成(GameObject→UI→Slider)。
2.Handlerは今回不要なので削除。
3.SliderのTargetGraphicにFillを設定します。FillのImageのColorもなんか好きな色に変更します。
4.あとは写真のようにボタンやテキスト、背景の白いイメージなどを配置して完了です。
5.最後にSliderCoponentのValueを変更してScene上のSliderに反映されることを確認してください。
スクリプトを作成
DamageSlider.csという名前でSliderに以下のスクリプトをアタッチします。 ポイントはiTweenのValueToメソッドを使ってTween発生中に繰り返しコールバックを呼んでいるところです。 これによって、ライフがだんだん減っていくように見えたり、数字が動きをもって減っていったりするのを実現しています。 細かい処理の説明はコメントを御覧ください。 gist.github.com
確認
では最後にうまく動くか確認してみましょう。ダメージのボタンにOnClickメソッドでdamageLife(引数は100にデモしてみてください)を設定して、クリックしてみましょう。
ダメージスライダーは結構既成のものもたくさんありますが、一度自分で実装しておくと、理解がすすんでいいのではないでしょうか!