PR

【UE5】HPゲージ/スタミナゲージを滑らかにアニメーションさせる方法【UI/Widget】

UI/Widget

このページは、「UE5 ver5.3.2」の環境で制作されています

こんにちは!
ウンパッパです!

今回はカクカク減ったり増えたりするゲージのUIを

「Leap」ノードを使って

動画みたいにゲージの増減を滑らかにアニメーションさせていくよ!

よかったら参考にしてね!

前提:「スタミナ―ゲージ」を滑らかにする

今回は「スタミナゲージ」を滑らかにしていくよ

「Leap」ノードを「入れる前」はこんな感じ

そしてこのUIのアニメーションを組んでいる「ウィジェットブループリント」は
こんなかんじ

初心者向けチュートリアルによくあるゲージのBPだね

そして何も手を加えてないからUIのゲージがカクカクしているよ

スタミナが回復してるときは特にカクカクが目立つかな

それは良くないので、さっそく滑らかなゲージに変えていこう

ゲージアニメーションを滑らかにする方法

まず、「ウィジェットブループリント」内にある関数名「Get Percent」に移動しよう

そしたら、新しい変数を作っていくよ

入れる値を1にした理由は
0だとゲームをプレイしたときにスタミナゲージが灰色(0)で始まるからなんだ

そしてこの変数を組み込んで完成したノード群がこれだよ

このノード群に組み込まれている「Leap」ノードは

AとBの値をこんな感じに曲線型に補完してくれるノードなんだ

このノードを使ってゲージの増減を「なめらか」にしていくよ

「Lerp」ノードの「Alpha」を使えば曲がり具合(滑らかさ)を強調することができるから
「Alpha」を「0.1」にしてとても滑らかな数字の移動にしてもらおう

そしてコンパイルしてプレイしてみよう

するとこうなるよ

とても滑らかにスタミナゲージがえったり増えたりしているね!

やったね!

おわりに

以上、HP、スタミナのゲージを滑らかにアニメーションさせる方法でした!

この手法はHPやその他ゲージが適応されるパラメーターにも応用できるから

よかったら是非使ってみてね!

それじゃあ次の記事に、またね!

コメント

unpappa

3Dとゲーム制作を趣味でたしなむ遊び人
ロボットアニメとアニメ調のキャラが好きで趣味でちょこちょこ作ります
人生の目標は「オリジナルのロボゲー」を1本作る事!
初心者だからこそ、いろいろな荒波がやってくるけど、それらを学びに変えて
「最もわかりやすいクリエイティブブログ」を目指してます!どうぞ良しなに!

unpappaをフォローする
Ci-enを始めました!あなたの応援で本サイトの記事の投稿頻度と質を向上させることができます!
詳しく見る!
Ci-enを始めました!あなたの応援で本サイトの記事の投稿頻度と質を向上させることができます!
詳しく見る!
タイトルとURLをコピーしました