+
*
+
ココ先生
ゲーム開発の案内役
この記事では ダウン状態と蘇生導線 を、読んで終わりにせず、スキルを使うと、アイコンの扇形ゲージと残り秒数が減るUIを作ります。
+
*
+
はじめちゃん
ゲームエンジン学習中
クールダウンとホットバーUI設計の基本 を読む前に、まずUnity のどこを見ればよいかを確認したいです。
スキルを使うと、アイコンの扇形ゲージと残り秒数が減るUIを作ります。
残り時間が0になるまで同じスキルは押せないのですね。
UseSkillでremainingを入れ、fillAmountとButtonを毎フレーム更新します。
完成イメージ
使用時に時間を入れる
UseSkillでremainingへクールダウン秒数を入れます。
扇形を減らす
Image.fillAmountで残り時間をアイコンへ重ねます。
再使用を許可する
remainingが0になった時だけButtonを有効にします。
導入
スキルアイコンに残り時間の扇形ゲージを重ね、使える時は色を戻すホットバーを作ります。
これから作るもの
CanvasにButtonのSkillButton、ImageのCooldownFill、TMPのCooldownLabelを重ねます。
ステップ1: スキルを使った時に残り時間を入れる
public void UseSkill(){if(remaining>0)return;remaining=cooldownSeconds;}
ステップ2: fillAmountで扇形を減らす
void Update(){remaining=Mathf.Max(0,remaining-Time.deltaTime);fill.fillAmount=remaining/cooldownSeconds;label.text=remaining>0?$"{remaining:0.0}":"";button.interactable=remaining<=0;}
完成版
using UnityEngine;using UnityEngine.UI;using TMPro; public class CooldownHotbar:MonoBehaviour{[SerializeField]Button button;[SerializeField]Image fill;[SerializeField]TMP_Text label;[SerializeField]float cooldownSeconds=5;float remaining;public void UseSkill(){if(remaining<=0)remaining=cooldownSeconds;}void Update(){remaining=Mathf.Max(0,remaining-Time.deltaTime);fill.fillAmount=remaining/cooldownSeconds;label.text=remaining>0?$"{remaining:0.0}":"";button.interactable=remaining<=0;}}
扇形ゲージは何にremainingを入れますか？
Image.fillAmountへremainingをcooldownSecondsで割った値を入れます。
流れは「ダウンするを表示」から始めて、「Revive Buttonで進める」で操作を入れる、と覚えればよいですか？
その通りです。その後に「蘇生中を確認」で途中状態を見て、「復帰するで結果を見る」で結果を確認します。順番を固定すると、失敗した場所も見つけやすくなります。
つまり、いきなり完成システムにせず、状態名、表示、値の変化を小さくそろえるのですね。
はい。最後は「ダウン状態と蘇生導線をわかりやすく考える」の考え方で、難しい処理をプレイヤーに伝わる短い合図へ置き換えられるか確認しましょう。
この記事のまとめ
スキルの再使用待ち、入力順、使える状態の伝え方を整理し、初心者でも押し間違えにくいアクションUIを作る入門記事です。
大きな違いを生むのは、派手な性能よりも 毎日触れる環境を無理なく整えること です。見やすい画面と使いやすい道具がそろうと、学習や次の一歩を決めやすくなります。