
このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。
今回は前回の「UIのSlider活用【前編】」引き続き、UIのSlider機能の活用について。前回はSliderの値を取得してテキストに表示する方法をご説明しましたが、今回はスライダーの値をスクリプトファイルで更新する方法のご紹介です。
ヒットポイントや経過時間の可視化に使えそうですね。
下の動画は「ファイブボックス 一分間Unity講座 UIのsliderの値をTextに表示させる方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください。
素材作成
前回作成したSliderを配置、なければHierarchy上に UI ⇒ Slider で Slider を配置します。
Slider は下の図のように各素材が階層構造となり構成されています。
- Slider – Slider本体を表し、Sliderコンポーネントを持ちます。
- Rect Trandrom でHeight(高さ)を50程度にして、スライダーのゲージが見えやすいようにある程度の高さを持たせます。
- Sliderコンポーネント Interactable – チェックを外しつまみ操作など、直接Sliderの値を変更する操作を無効にします。
- BackGround – Slider の背景に当たる部分、サンプルではそのまま使用しています
- Fill Area – Slider の変化するゲージ部分の外枠になります
- Rect Trandrom で左右の余白を削除(0にします)
- Fill – Sliderの増減するゲージの表面の部分です
- Rect Trandrom でWidth(幅)を 0にして、Valueが0の時に何も表示されないように指定
- Color を任意の色にしておきます(ゲージの色になります)

Sliderのコントロール
今回はヒットポイントのゲージを想定して、ヒットポイントが減少するごとにSliderの値が減少していくプログラムを作成します。
事前にヒットポイントの最大値(maxHp
)、および現在のヒットポイント(hp
)を表す変数を作成します。
ヒットポイントは整数なので int型
でもいいのですが、Sliderの値を出す際に、hp / maxHp
で計算を行います。hp、maxHp をint型にした場合、Sliderの値は int型( int型 / int型) つまり 1または 0 となってしまいます。Slider の値を float型
にするには、hp、maxHp のいずれか、または両方を float型にする必要があります。
なお、maxHp(ヒットポイント最大値)には10を指定しておきます。
float maxHp = 10, hp; //maxHp(初期値10)とhpを宣言
Slider slider; //Sliderコンポーネント型の変数を宣言(記述済み)
Text sliderText; //Text型の変数を宣言(記述済み)
Start()関数
で hp の値をmaxHpに指定。Slideの値には hp/maxHp (=1)を指定。 その他、前回まで作成済みのコードです。
void Start()
{
//子要素にあるSliderコンポーネントを取得しsliderに代入(記述済み)
slider = transform.GetComponentInChildren<Slider>();
//SliderTextを探しTextコンポーネントを取得、sliderTextに代入(記述済み)
sliderText = transform.Find("SliderText").GetComponent<Text>();
hp = maxHp; //hpにmaxHPの値を指定
slider.value = hp / maxHp; //sliderの初期値を指定
}
Slideの値を更新する下の関数は作成、およびSliderコンポーネントの On Value Changed
のイベントに登録済みです。
ここでは、hp 値を表示するプログラムに変更します。
public void SliderChange()
{
//SlideTextのtextを hpの値に
sliderText.text = hp.ToString();
}
Update()関数
では、Spaceキーが押されたタイミングでhpを1ずつ減少させ、hp/maxHpで現在のhpの割合を計算、Sliderの値に反映させています。
void Update()
{
if (Input.GetKeyDown(KeyCode.Space)) //Spaceキーが押されたら
{
hp--; //hpを1ずつ減少
slider.value = hp / maxHp; //slideの値を再計算し更新
}
}
これで正しくSliderの値がヒットポイントと連動して変化するという動きが確認できたと思います。
ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。