概要
泡盛もろみです。
今回は
続々・UI用ボタンの続き
東雲ミサゴです。
前回に引き続き、UI用ボタンについて紹介します。
やりたいこと
今回は以下の2点を操作します
前者はスクリプト作成の最初の記事 で初期化だけ行ったGaugeImage.colorの出番です。
ゲージ色の変更
ゲージの色を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); /** 追加 **/
}
/** 省略 **/
パラメータ変更
ではフレーム毎に見た目を更新するための部分に移ります。
/** ゲージ・ボタン色管理 **/
// 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にします。
エディタ上での画像と色の指定、コードでのパラメータ変更
エディタ作業
ここで一度エディタに移ります。
Transitionの値がColor Tintになっていなければ、プルダウンメニューから選択ます。
さらに、Disabled Colorの値を設定します。
コードの追加
ではコード編集に戻ります。
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()のゲージ・ボタン色管理の部分にパラーメータを操作する行を追加します。
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の中に全ての処理を書くのは読みづらいので機能別にメソッド化してみる、など、思いついたところをガンガン変更してみてください。
この一連の記事で興味を持ってくださった方がおられれば幸いです。
それでは今回はこれにて。お付き合いありがとうございました！
フォロワー以上限定無料
ゲーム進捗に関する内容はフォロワー限定公開になります。
