このページは、「UE5 ver5.3.2」の環境で制作されています
こんにちは！
ウンパッパです！
今回はカクカク減ったり増えたりするゲージのUIを
「Leap」ノードを使って
動画みたいにゲージの増減を滑らかにアニメーションさせていくよ！
よかったら参考にしてね！
前提：「スタミナ―ゲージ」を滑らかにする
今回は「スタミナゲージ」を滑らかにしていくよ
「Leap」ノードを「入れる前」はこんな感じ
そしてこのUIのアニメーションを組んでいる「ウィジェットブループリント」は
こんなかんじ
初心者向けチュートリアルによくあるゲージのBPだね
そして何も手を加えてないからUIのゲージがカクカクしているよ
スタミナが回復してるときは特にカクカクが目立つかな
それは良くないので、さっそく滑らかなゲージに変えていこう
ゲージアニメーションを滑らかにする方法
まず、「ウィジェットブループリント」内にある関数名「Get Percent」に移動しよう
そしたら、新しい変数を作っていくよ
| No. | 変数の型 | 名前 | 入れる値 | 変数の説明 |
| 1. | Float | Stamina_Percent | 1 | 「現在のスタミナ」を表示し、 「前回のスタミナ」との差の値を出すため |
入れる値を1にした理由は
0だとゲームをプレイしたときにスタミナゲージが灰色（0）で始まるからなんだ
そしてこの変数を組み込んで完成したノード群がこれだよ
このノード群に組み込まれている「Leap」ノードは
AとBの値をこんな感じに曲線型に補完してくれるノードなんだ
このノードを使ってゲージの増減を「なめらか」にしていくよ
「Lerp」ノードの「Alpha」を使えば曲がり具合（滑らかさ）を強調することができるから
「Alpha」を「0.1」にしてとても滑らかな数字の移動にしてもらおう
そしてコンパイルしてプレイしてみよう
するとこうなるよ
とても滑らかにスタミナゲージが減ったり増えたりしているね！
やったね！
おわりに
以上、HP、スタミナのゲージを滑らかにアニメーションさせる方法でした！
この手法はHPやその他ゲージが適応されるパラメーターにも応用できるから
よかったら是非使ってみてね！
それじゃあ次の記事に、またね！
コメント