進捗報告(15) + UI用ボタンのつづき

概要

泡盛もろみです。

今回は
・UIボタンの続き (byミサゴ)
・UIパーツ作成 (by泡盛)
です。

UIボタンの続き

東雲ミサゴです。

今回は、以前の記事で見た目を作成したゲージ付きボタンを動かす流れを紹介します。
ただ本件、長くなることが予想されますので、今週から何度かに分けてご説明します。お付き合いいただければ幸いです。
尚、実際に使用する際は、一連の記事で書く予定のものから変形すると思います（寧ろ既にだいぶ違っています）。
他の機能を追加したくなる事もあるでしょうし、違う書き方にすることで管理が楽になる事もあるでしょうからね！

今回は、「とりあえずゲージが動く」ところまでを考えてみます。

前提

機能を色々付けたくなってしまいますが、それらは後から拡張するものとして、まずは最低限で動かす事を考えます。

1. スクリプトはボタン本体にアタッチするものとする
2. 時間の経過に応じてゲージを伸ばし、最大になるとそこで止める
3. ゲージが最大である時のみ操作を有効とする
4. ゲージの保持数は1本のみとする
5. ゲージが100%未満の間はボタン操作を無効にする
6. ボタン動作時の処理はDebug.Log()とする
   としてみましょう。

大雑把な構造を考える

前提を踏まえて、
1. Startでオブジェクトの取得と変数の初期化する
2. Updateでフレーム毎に最大値までゲージを進行する
3. ボタンが押された場合、ゲージが最大値であれば処理を実行し、ゲージを0にする

という流れで考えたいと思います。

より具体的にすると、
1. Start()内で
　a) オブジェクト、コンポーネントを検索・取得する
　b) 変数を初期化する
2. Update()で
　a) Time.deltaTimeで前回のフレームからの経過時間を取得、加算
　b) FillAmountに反映
3. ButtonOnClickで
　a) FillAmountを減らす
　b) Debug.Logを吐く

……という具合ですね。

インポート

Class内部の編集に入る前に、コード頭の塊に次の1行を追加します。

using UnityEngine.UI;

これがないとUIの操作ができませんからねっ！

変数の宣言

ここからClass内部。続いて変数を宣言します。
オブジェクト用として

// ゲージ本体のオブジェクト
private GameObject GaugeMain;
// ゲージ本体画像
private Image GaugeImage;

数値用として

// チャージ進行時間
private float ChargeAmount;

が必要ですね。

Start()

まずはStart()から。

オブジェクトの取得

// このスクリプトをアタッチしたオブジェクトの子オブジェクトから
// 名前の一致するものを取得
GaugeMain = transform.Find("GaugeMain").gameObject; 

// GaugeMainの中の画像を取得
GaugeImage = GaugeMain.GetComponent<Image>(); 

書籍などでGameObject.Find("OBJECT_NAME")をよく見かけますが、ここではtransform.Find("OBJECT_NAME")としています。
GameObject.Findではヒエラルキーにある全ての（有効な）オブジェクトから検索しますが、最初のものを見つけたところで検索が終わってしまいます。
このボタンが1つしかなければ良いのですが、複数ある場合は同ボタンのどれか一つのGaugeMainが引っかかった時点で、他が無視されてしまう訳ですね。
（最悪の場合、このボタンとは関係ないGaugeMainというオブジェクトを発見…の可能性もあります）
これを回避するため、「このスクリプトがアタッチされているオブジェクト」の「子オブジェクト」を名前で検索しています。
（前提でスクリプトはボタンにアタッチする、と書いているのはここのためで、ここが変わると書き方が変わります）

変数の初期化

// チャージ進行時間の初期化
ChargeAmount = 0.00f;
// ゲージ色の初期化
GaugeImage.color = new Color(0.66f, 0.00f, 0.00f);

ゲージの量を0にするほか、伸ばすゲージの色を初期化しています。
作成時に分かりやすいのでエディタ上でも色を指定しましたが、最終的にこの値を変更する事で見た目を操作する事を目指します。

確認

これらを一度まとめると……

<Charge.cs>
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 追加

public class Charge : MonoBehaviour {

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

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

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

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

        /** 数値の初期化 **/
        // チャージ進行時間の初期化
        ChargeAmount = 0.00f;
        // ゲージ色の初期化
        GaugeImage.color = new Color(0.00f, 0.66f, 0.00f);

    }

    // Update is called once per frame
    void Update() {
    }
}

となりますね。

Update()

続いてUpdate()です。
以前の記事で、ゲージ画像の表示をFilledに設定しました。
ここではフレームごとにその値を変更する事を考えます。
具体的には、フレームごとにChargeAmountに直前のフレームからの経過時間を加算し、FillAmountに反映します。

経過時間の取得と加算

条件分けをします。
ゲージが最大値になったら処理をやめるよう、ChargeAmountが1.00の時は何もしません。
それ以外である時は、ChargeAmountに前のフレームからの経過時間を加算します。
その上で、1.00を越えている場合は1.00を代入し直します。
ここでは「ChargeAmountと1.00の2つのうち、最小値を取る」という形をとりました。

FillAmountに反映

上の項で更新したChargeAmountを、ゲージ本体画像のFillAmountに代入します。

記述

これらを纏めると、同スクリプトの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); 
        }

        /** ゲージ画像のリフレッシュ **/
        // FillAmountにChargeAmountの値を代入
        GaugeImage.fillAmount = ChargeAmount;
    }
} // <Charge.cs>末尾

休憩

ここで一度エラーが出ないか確認してみましょう。
エラーがなければボタンにアタッチし、シーンを再生してみてください。
ゲージは正しく（1秒間かけて）伸びたでしょうか。

長くなってきましたので今回はここまでにします。
次回はボタンを操作できるようにしていきたいと思います。おたのしみに！