Unity ボタンの中にimageを追加したがクリックした時の色が気に入らない...

###ボタンの中に追加した画像の色がクリック時に変わらない
Unityでボタンの中に image を追加したが、ボタンを押した時に、追加した image の色が変わらない...。
なんか画像が浮いてる...。

これは困った...と、ググってみたら...。

UGUI; Multi image button transition
http://answers.unity3d.com/questions/820311/ugui-multi-image-button-transition.html

なるほど、これは良さげだなと...今回、組み込んでみた内容を記録してみました。

###MultiImageButton.csを作成
まず、MultiImageButton.csを作成しましたが、自分はGraphicsプロパティでm_graphicsへ代入する式を変更しました(ボタン自身の子供を指定)。

MultiImageButton.cs

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

using UnityEngine.UI;
using UnityEngine.EventSystems;


/**
 * 参考にした URL
 * http://answers.unity3d.com/questions/820311/ugui-multi-image-button-transition.html
 */
public class MultiImageButton : Button
{
	private Graphic[] m_graphics;
	protected Graphic[] Graphics
	{
		get
		{
			if (this.m_graphics == null)
			{
				//変更点 ボタンオブジェクト以下の子オブジェクトを対象としました。
				this.m_graphics = targetGraphic.transform.GetComponentsInChildren<Graphic>();
			}

			return this.m_graphics;
		}
	}


	protected override void DoStateTransition (SelectionState state, bool instant)
	{
		Color color;
		switch (state)
		{
			case (Selectable.SelectionState.Normal):
				color = this.colors.normalColor;
				break;

			case (Selectable.SelectionState.Highlighted):
				color = this.colors.highlightedColor;
				break;

			case (Selectable.SelectionState.Pressed):
				color = this.colors.pressedColor;
				break;

			case (Selectable.SelectionState.Disabled):
				color = this.colors.disabledColor;
				break;

			default:
				color = Color.black;
				break;
		}

		if (base.gameObject.activeInHierarchy)
		{
			switch (this.transition)
			{
				case (Selectable.Transition.ColorTint):
					this.ColorTween(color * this.colors.colorMultiplier, instant);
					break;

				default:
					throw new System.NotSupportedException();
			}
		}
	}


	private void ColorTween(Color targetColor, bool instant)
	{
		if (this.targetGraphic == null)
		{
			return;
		}

		foreach (var g in this.Graphics)
		{
			g.CrossFadeColor(targetColor, (!instant) ? this.colors.fadeDuration : 0f, true, true);
		}
	}
}

ボタンのスクリプトを差し替え

ボタンの「Button (Script)」を「MultiButton (Script)」に差し替えます。

いったんボタンから「Button (Script)」コンポーネントを削除し...

ボタンの[Add Component]から「Multi Image Button (Script)」コンポーネントを追加しました。

追加した「Multi Image Button (Script)」の設定は以前と同じように設定可能みたいです。

動作確認

デバッグしてみると、押したときの違和感がなくなりました。
(例だとわかりづらいですが...)