【uGUI】ToggleのON/OFF時にToggleの色を変える

概要

uGUIのToggleでON/OFF切替時に色を変えたいなと思ってやってみたら少し手こずったので忘備録も兼ねて記事にしておきます。

NormalColorを変えるだけじゃ駄目

単純にONとOFFを切り替えたタイミングでnormalColorを変えるだけかと思っていたので、こういうスクリプトを用意します。

ToggleValueChangeColor

    using UnityEngine;
    using UnityEngine.UI;

    [RequireComponent(typeof(Toggle))]
    public class ToggleValueChangeColor : MonoBehaviour
    {
        [SerializeField]
        private Color onColor;

        [SerializeField]
        private Color offColor;

        private Toggle toggle;
       
        void Start()
        {
            toggle = GetComponent<Toggle>();
            toggle.onValueChanged.AddListener(OnToggleValueChanged);
        }


        private void OnToggleValueChanged(bool isOn)
        {
            if(isOn)
            {
                //colorsはColorBlocksという構造体のため、値型であるnormalColorを直接変えることはできないので一旦別変数に確認
                var newColors = toggle.colors;
                newColors.normalColor = new Color( onColor.r, onColor.g, onColor.b, onColor.a);
                toggle.colors = newColors;

            }
            else
            {
                var newColors = toggle.colors;
                newColors.normalColor = new Color(offColor.r, offColor.g, offColor.b, offColor.a);
                toggle.colors = newColors;
            }
        }
    }

参考
値型と参照型とミュータブルとイミュータブルと
https://qiita.com/chocolamint/items/020143cf249505bf2ffc

ButtonのTransitionをColor TintにしたときのColorBlockをスクリプトで設定する
http://d.hatena.ne.jp/acey014/20160111/1452527329

こうしたら期待通りになるかと思ったら違いました…。

Highlighted Colorも変えないと駄目

ボタンを押した時に変わる色はHighlighted Colorの方で、他の部分を押すとNormalColorに戻るそうです。

参考

uGUIのButtonでの色とかのメモ
https://qiita.com/kanpe777/items/7db0d720059effd94f77

なので最終的にこうなりました。

ToggleValueChangeColor

    using UnityEngine;
    using UnityEngine.UI;

    [RequireComponent(typeof(Toggle))]
    public class ToggleValueChangeColor : MonoBehaviour
    {
        [SerializeField]
        private Color onColor;

        [SerializeField]
        private Color offColor;

        private Toggle toggle;
       
        void Start()
        {
            toggle = GetComponent<Toggle>();
            toggle.onValueChanged.AddListener(OnToggleValueChanged);
        }


        private void OnToggleValueChanged(bool isOn)
        {
            if(isOn)
            {
                //colorsは構造体のため、値型であるnormalColorを直接変えることはできないので一旦別変数に確認
                var newColors = toggle.colors;
                newColors.normalColor = new Color( onColor.r, onColor.g, onColor.b, onColor.a);
                newColors.highlightedColor = new Color(onColor.r, onColor.g, onColor.b, onColor.a);
                toggle.colors = newColors;

            }
            else
            {
                var newColors = toggle.colors;
                newColors.normalColor = new Color(offColor.r, offColor.g, offColor.b, offColor.a);
                newColors.highlightedColor = new Color(offColor.r, offColor.g, offColor.b, offColor.a);
                toggle.colors = newColors;
            }
        }
    }

終わりに

ColorBlock構造体の仕様を知らなかったので躓いてしまいましたが、なんとか解決してほっとしました。
今後も使う機会があると思うので、きちんと理解しておきたいですね。