進捗報告(17) + 続々・UI用ボタンの続き

概要

泡盛もろみです。

今回は
・続々・UI用ボタンの続き (by ミサゴ)
・ダメージを受けるアニメーション (by 明山昇)
です。

続々・UI用ボタンの続き

東雲ミサゴです。

前回に引き続き、UI用ボタンについて紹介します。
前回はチャージの進行状態が100%の時のみ操作を受け付る作りにしましたが、これを視覚的に表現してみます。

やりたいこと

今回は以下の2点を操作します
1. チャージ中と完了時時のゲージ色の変更
2. 操作が不能である間のボタンの表示の変更

前者はスクリプト作成の最初の記事で初期化だけ行ったGaugeImage.colorの出番です。
これをスクリプトから操作しようというわけですね。
後者はButtonコンポーネントのパラメータを変更します。

ゲージ色の変更

ゲージの色をChargeAmountが1未満である間は赤、1の時は緑で表示します。

変数の宣言と初期化……のその前に

ここでお詫びが1点あります。最初の記事にミスがありました。
まとめの部分を写した場合は動いたと思いますが、丁寧に上から進めて下さった方は整合性がなくて戸惑ってしまわれたのではないかと思います。お詫び申し上げます。
（現在は訂正済みです）

訂正内容

具体的にはStart()項の最初の"オブジェクトの取得"から

// このスクリプトをアタッチしたオブジェクトの画像を取得
GaugeBase = GetComponent<Image> 

また、"変数の初期化"から

// ゲージ背景色の初期化
GaugeBase.color = new Color(0.40f, 0.40f, 0.40f);

が、当該記事の時点では不要となります。
つまり今回これを使用します。

改めて宣言と初期化

ここでは上記の内容に加え、変数の宣言にゲージ背景画像を追加します。

// ゲージ背景画像
private Image GaugeBase;

また、ゲージ色の初期化の際の色を緑から赤に変更します。

GaugeImage.color = new Color(0.00f, 0.66f, 0.00f);

↓↓↓変更↓↓↓

GaugeImage.color = new Color(0.66f, 0.00f, 0.00f);

長くなってしまいますが、classからStart()まで記します。

/** 省略 **/
public class Charge : MonoBehaviour {

    /** オブジェクト用 **/
    // ゲージ本体オブジェクト
    private GameObject GaugeMain;
    // ゲージ本体画像
    private Image GaugeImage;
    // ゲージ背景画像
    private Image GaugeBase; /** 追加 **/

    /** 数値用 **/ 
    // チャージ進行時間
    private float ChargeAmount;

    // Start is called before the first frame update
    void Start() {

        /** オブジェクト取得 **/ 
        // このスクリプトをアタッチしたオブジェクトの子オブジェクトから
        // 名前の一致するものを取得
        GaugeMain = transform.Find("GaugeMain").gameObject;
        // GaugeMainの中の画像を取得
        GaugeImage = GaugeMain.GetComponent<Image>();
        // このスクリプトをアタッチしたオブジェクトの画像を取得
        // ゲージ背景画像
        GaugeBase = GetComponent<Image>(); /** 追加 **/

        /** 数値の初期化 **/
        // チャージ進行時間の初期化
        ChargeAmount = 0.00f;
        // ゲージ色の初期化
        GaugeImage.color = new Color(0.66f, 0.00f, 0.00f); /** 変更 **/
        // ゲージ背景色の初期化
        GaugeBase.color = new Color(0.40f, 0.40f, 0.44f); /** 追加 **/

    }
/** 省略 **/

パラメータ変更

ではフレーム毎に見た目を更新するための部分に移ります。
Update()のゲージ加算処理の後に、ChargeAmountの値によりGaugeBase.colorを変更する処理を追加します

/** ゲージ・ボタン色管理 **/
// ChargeAmountが1のとき
if (ChargeAmount == 1.00f) {
    // 背景色を緑に
    GaugeBase.color = new Color(0.00f, 0.66f, 0.00f);
// 上記以外のとき
} else {
    // 背景色をグレーに
    GaugeBase.color = new Color(0.40f, 0.40f, 0.44f);
}

また、画像のリフレッシュの処理を変更し、FillAmountに代入する値をChargeAmountからChargeAmountの小数部分に変更します。

/** ゲージ画像のリフレッシュ **/
// FillAmountにChargeAmountの値を代入
GaugeImage.fillAmount = ChargeAmount;

↓↓↓変更↓↓↓

/** ゲージ画像のリフレッシュ **/
// FillAmountにChargeAmountの小数部分を代入
GaugeImage.fillAmount = ChargeAmount % 1;

ChargeAmountが1.00の時、FillAmountは0となり緑色になったGaugeBaseを見せるようにしています。
今後ゲージを複数ストックできるように拡張する際に便利だと良いなという思いでこういう書き方にしましたが、あまりスマートでないかもしれません。

ここまでを纏めると、Update()は以下のようになります。

/** 省略 **/
    void Update() {

        /** ゲージ加算処理 **/
        // ChargeAmountが1.00である場合
        if (ChargeAmount == 1.00f) {
            // 処理なし
            return;

        // 上記以外のとき
        } else {
            // 前回のフレームからの経過時間を加算
            ChargeAmount += Time.deltaTime;
            // 1.00を越えている場合、1.00とする
            ChargeAmount = Mathf.Min(ChargeAmount, 1.00f);
        }

        /** ゲージ・ボタン色管理 **/
        // ChargeAmountが1のとき
        if (ChargeAmount == 1.00f) {
            // 背景色を緑に
            GaugeBase.color = new Color(0.00f, 0.66f, 0.00f);
        // 上記以外のとき
        } else {
            // 背景色をグレーに
            GaugeBase.color = new Color(0.40f, 0.40f, 0.44f);
        }

        /** ゲージ画像のリフレッシュ **/
        // FillAmountにChargeAmountの小数部分を代入
        GaugeImage.fillAmount = ChargeAmount % 1; /** 変更 **/

    }
/** 省略 **/

操作不能の間の表示

ChargeAmountが1未満であるとき、（スクリプトがアタッチされているボタンオブジェクトの）ButtonコンポーネントのInteractableをfalseにします。
これにより、ボタンが物理的に無効になります。
Buttonコンポーネントはボタンの状態により見た目を変更するパラメータを持っているので、状態に応じて色を変えたり画像を差し替えたりすることができます。
今回は色の変更で状態を表現するようにします。

エディタ上での画像と色の指定、コードでのパラメータ変更

エディタ作業

ここで一度エディタに移ります。
ボタン本体のオブジェクトを選択し、InspectorのButtonコンポーネントを確認しましょう。

Transitionの値がColor Tintになっていなければ、プルダウンメニューから選択ます。
Target Graphicの値が、デフォルトでは"ボタン本体のオブジェクト名 (Image)"となっていると思います。
この画像はゲージの背景部分に使用するように設定してしまっているので、このままではこの部分の見た目が変わっても殆ど目に見えません。
そこで、Hierarcheyビューのボタンアイコン（記事ではButtonIconの名前）のオブジェクトを指定します。
ドラッグアンドドロップでも良いですが、Projectビューの画像ではなくHierarcheyビューのオブジェクトの指定である事に注意します。

さらに、Disabled Colorの値を設定します。
色は元々グレーですがお好みで、透過度は1に変更します。

コードの追加

ではコード編集に戻ります。

Start()にInteractableの初期化を追加します。

    void Start() {

        /** 省略 **/ 
        
        /** 数値の初期化 **/
        // チャージ進行時間の初期化
        ChargeAmount = 0.00f;
        // ゲージ色の初期化
        GaugeImage.color = new Color(0.66f, 0.00f, 0.00f);
        // ゲージ背景色の初期化
        GaugeBase.color = new Color(0.40f, 0.40f, 0.44f);
        // ボタンの状態の初期化
        GetComponent<Button>().interactable = false; /** 追加 **/

    }

また、Update()のゲージ・ボタン色管理の部分にパラーメータを操作する行を追加します。
条件に従い、InteractableのチェックボックスをOn/Offします。

    void Update() {

        /** 省略 **/ 

        /** ゲージ・ボタン色管理 **/
        // ChargeAmountが1のとき
        if (ChargeAmount == 1.00f) {
            // 背景色を緑に
            GaugeBase.color = new Color(0.00f, 0.66f, 0.00f);
            // ボタンを有効に
            GetComponent<Button>().interactable = true; /** 追加 **/
        // 上記以外のとき
        } else {
            // 背景色をグレーに
            GaugeBase.color = new Color(0.40f, 0.40f, 0.44f);
            // ボタンを無効に
            GetComponent<Button>().interactable = false; /** 追加 **/
        }

        /** 省略 **/ 

    }

動作確認

動作を確認してみましょう。上手く動いたでしょうか。
これで今回の目標を達成しました。お疲れ様です！
そして、この一連の記事の目標も達成です。

この後はゲージの伸びる速度を変更するにはどうすれば良いか、Updateの中に全ての処理を書くのは読みづらいので機能別にメソッド化してみる、など、思いついたところをガンガン変更してみてください。

この一連の記事で興味を持ってくださった方がおられれば幸いです。

それでは今回はこれにて。お付き合いありがとうございました！