【Unity】Button の ColorTint で複数 Graphic 対応する方法

はじめに

UnityのButtonはデフォルトでは1つのGraphicしか設定できません。そのため、ボタンのTransitionをColor Tintに設定した場合、指定した色が適用されるのはtargetGraphicとして設定した1つのみとなります。

例えば、ボタンの背景とテキストの両方を一緒に色変更したい場合、標準のButtonコンポーネントでは対応できません。そこで、独自のMultiGraphicButtonクラスを作成し、複数のGraphic要素に対して同じ色変更を適用できるようにします。

---

MultiGraphicButtonの実装

MultiGraphicButtonは、UnityのButtonを拡張し、複数のGraphicに対して色変更を適用できるようにしたカスタムコンポーネントです。

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

[RequireComponent(typeof(RectTransform))]
public class MultiGraphicButton : Button
{
    [SerializeField] 
    private List<Graphic> _additionalGraphics = new List<Graphic>();

    protected override void DoStateTransition(SelectionState state, bool instant)
    {
        base.DoStateTransition(state, instant);
        Color targetColor = colors.normalColor;

        switch (state)
        {
            case SelectionState.Highlighted:
                targetColor = colors.highlightedColor;
                break;
            case SelectionState.Pressed:
                targetColor = colors.pressedColor;
                break;
            case SelectionState.Selected:
                targetColor = colors.selectedColor;
                break;
            case SelectionState.Disabled:
                targetColor = colors.disabledColor;
                break;
        }
        
        foreach (var graphic in _additionalGraphics)
        {
            if (graphic != null)
            {
                graphic.CrossFadeColor(targetColor, instant ? 0f : colors.fadeDuration, true, true);
            }
        }
    }
}

このスクリプトでは、additionalGraphicsリストを用意し、リストに含まれるすべてのGraphicに対して、Buttonの状態変化 (Normal、Highlighted、Pressed など) に応じた色変更を適用します。

---

インスペクターでadditionalGraphicsを表示する

UnityではButtonを継承したクラスを作成すると、カスタムフィールドがインスペクターに表示されない問題があります。
そのため、CustomEditorを作成し、インスペクターでadditionalGraphicsリストを編集できるようにします。

using UnityEditor;
using UnityEngine.UI;
using UnityEditor.UI;

[CustomEditor(typeof(MultiGraphicButton))]
public class MultiGraphicButtonEditor : ButtonEditor
{
    SerializedProperty _additionalGraphics;

    protected override void OnEnable()
    {
        base.OnEnable();
        additionalGraphics = serializedObject.FindProperty("_additionalGraphics");
    }

    public override void OnInspectorGUI()
    {
        serializedObject.Update();
        base.OnInspectorGUI();
        
        EditorGUILayout.PropertyField(_additionalGraphics, true);
        
        serializedObject.ApplyModifiedProperties();
    }
}

このエディター拡張を追加することで、インスペクター上にadditionalGraphicsのリストが表示され、複数のGraphicを設定できるようになります。

まとめ

デフォルトのButtonでは1つのGraphicにしか色を適用できませんが、MultiGraphicButtonを使用することで、複数のGraphicに対して同時に色変更を適用できるようになります。ボタンの背景とテキストを同時に変更したい場合や、ボタン内の複数の要素に統一感のある色変更をしたい場合に便利です。