パワーゲージ（レベルゲージ）をつくる

2021年03月09日

変動ある数値を、見えるようにする方法として、レベルゲージがあります。

今回は、ため込んだパワーをゲージで可視化できるようにしましょう。

マウス長押しでパワーを貯めこみ、離すとキューブにパワーが加わります。

ライフゲージの作りかたは、こちらをご参照ください。

スライダーの作成

Cubeと平面オブジェクトを用意しました。

Cubeにはリジッドボディを追加し、X方向の回転を固定しています。

スライダーを作成しましょう。

スライダーの座標を動かし、適当な場所に配置しました。

画像の伸縮によって、スライダーも拡縮するように、CanvasのUIスケールモードを、「画面サイズに拡大」にします。

Sliderを選択し、Valueを動かしてみると、スライダーの動きを確認できます。

レベルゲージにはハンドルは必要ないので、Handle Slide Areaは非表示にします。

Fillに色をつけましょう。

もう一度、Valueを動かしてみます。

0の状態にしても、ゲージに色が残っています。

Valueを1にしてみても、満タンになりません。

順番に修正していきましょう。

まずは、FillAreaの左、右をそれぞれ0に設定します。

続いて、Fillの幅を0にしましょう。

もう一度Valueを動かしてみると、最初から最後まで、ゲージに色がついています。

ゲージの太さを変えるため、BackgroundのYを2にして、グレーの色を設定しました。

Fillも同様に、Yを2にしています。

このように、少し太めのゲージになりました。

角丸のゲージを、四角いデザインに変えましょう。

Backgroundのソース画像を「なし」に設定。

Fillも同様に、ソース画像を「なし」にします。

過度の四角いゲージが完成しました。

ゲージを連動させるスクリプト

ゲージ自体はできていますので、ここに数値を連動できるように、スクリプトを書いていきましょう。

PowerGage.csを作成し、Cubeに追加します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PowerGage : MonoBehaviour
{
    private float power;
    public Rigidbody rb;
    public Slider slider;
 
    void Start()
    {
        power = 0;
        slider.value = 0;
    }
 
    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            if( power < 10)
            {
                power += 0.1f;
            }
        }
        
        if (Input.GetMouseButtonUp(0))
        {
            rb = GetComponent<Rigidbody>();
            rb.AddForce(0, 0, power*2, ForceMode.Impulse);
            power = 0;
        }
        
        Debug.Log(power);
        slider.value = power*0.1f;
     }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class PowerGage : MonoBehaviour

{

private float power;

public Rigidbody rb;

public Slider slider;

void Start()

{

power = 0;

slider.value = 0;

}

void Update()

{

if (Input.GetMouseButton(0))

{

if( power < 10)

{

power += 0.1f;

}

if (Input.GetMouseButtonUp(0))

{

rb = GetComponent<Rigidbody>();

rb.AddForce(0, 0, power*2, ForceMode.Impulse);

power = 0;

}

Debug.Log(power);

slider.value = power*0.1f;

}

Cubeのスライダーフィールドには、Sliderを入れます。

プレイしてみましょう。

パワー数値はMAX10までにして、ゲージに表示する数値として0.1を掛けました。

Sliderはパワーゲージに限らず、ライフゲージやレベルゲージにも使える便利な機能です。

< 前の記事次の記事 >

パワーゲージ（レベルゲージ）をつくる

スライダーの作成

ゲージを連動させるスクリプト

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室