Unityのフォーカスしているボタンの輪郭を赤くしたい

Question

UnityでUIを作っています。
ボタンを用意して、フォーカスされているボタンは赤く縁取りを取りたいと思っています。

縁取り自体は別のGameObjectにしてフォーカス場所によって枠が移動＆変形するようにしたいと思っているのですが良い実装方法が思い浮かびません。

ざっくりですが、アニメーションさせるとこんな感じです。
(途中赤枠の形が汚いのは絵が下手なだけです。)

また、ボタンの形、位置は様々ありますので固定のアニメーションを作成、ということは出来ません。

こういう遷移を指せる場合どのように作るとよいかアドバイスいただけますと助かります。
DoTweenを使っていますのでできればDOTweenを使っていただけると助かります。

Answer 1

##パート2

Raw Imageには下記のGraphicOutlineがアタッチされており、フォーカスの移動に合わせてアウトラインを移動させます。

using System;
using DG.Tweening;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;
using UnityEngine.UI;

[RequireComponent(typeof(RawImage))]
public class GraphicOutline : MonoBehaviour
{
	private static readonly int CurrentField = Shader.PropertyToID("_CurrentField");
	private static readonly int PreviousField = Shader.PropertyToID("_PreviousField");
	private static readonly int Progress = Shader.PropertyToID("_Progress");
	private static readonly int Threshold = Shader.PropertyToID("_Threshold");

	[SerializeField] private Shader outlineShader;
	[ColorUsage(false, true)] public Color color = Color.red;
	[Range(0.0f, 16.0f)] public float width = 4.0f;
	[Range(0.0f, 2.0f)] public float tweenDuration = 1.0f;
	[SerializeField] private TweenerEvent onTween = new TweenerEvent();

	private GraphicDistanceField anchoredField;
	private new Tweener animation;
	private Material outlineMaterial;
	private GameObject previousSelection;
	private RawImage rawImage;
	private RectTransform rectTransform;

	private void Awake()
	{
		this.rectTransform = this.transform as RectTransform;
		this.rawImage = this.GetComponent<RawImage>();
		if (this.outlineShader == null)
		{
			Debug.LogError($"{nameof(this.outlineShader)} not set.");
			this.enabled = false;
			return;
		}

		this.outlineMaterial = new Material(this.outlineShader);
		this.rawImage.material = this.outlineMaterial;
		this.rawImage.raycastTarget = false;
		this.rawImage.enabled = false;
		this.rectTransform.pivot = Vector2.one * 0.5f;
		this.rectTransform.anchorMin = this.rectTransform.anchorMax = Vector2.zero;
	}

	private void Update()
	{
		var currentSelection = EventSystem.current.currentSelectedGameObject;
		if (currentSelection != this.previousSelection)
		{
			var currentField = currentSelection == null
				? null
				: currentSelection.GetComponent<GraphicDistanceField>();
			if (currentField != null)
			{
				// 新たに選択されたオブジェクトがアウトライン対応なら、直前の選択対象を調べ...
				var previousField = this.previousSelection == null ? null : this.anchoredField;
				if (previousField != null)
				{
					// 直前の選択対象もアウトライン対応なら、2つの間を移動するトゥイーンを開始する
					if ((this.animation != null) && this.animation.active)
					{
						this.animation.Kill();
						this.animation = null;
					}

					this.animation = this.DoAnimation(previousField, currentField);
					this.onTween.Invoke(this.animation);
				}
				else
				{
					// 直前の選択対象がアウトライン非対応だった、または選択解除状態だったなら
					// 新たな選択対象の上にアウトラインを表示する
					this.outlineMaterial.SetTexture(PreviousField, currentField.Field);
					this.outlineMaterial.SetFloat(Progress, 0.0f);
					this.rectTransform.sizeDelta = Vector2.one * currentField.OutlineSize;
					this.rawImage.enabled = true;
				}

				this.anchoredField = currentField;
			}
			else
			{
				// 選択解除、またはアウトライン非対応のオブジェクトが
				// 選択された場合はアウトラインを非表示にする
				this.rawImage.enabled = false;
				this.anchoredField = null;
			}

			this.previousSelection = currentSelection;
		}

		if ((this.animation == null) && this.rawImage.enabled && (this.anchoredField != null))
		{
			var (anchoredPosition, threshold) = this.GetOutlineParameters(this.anchoredField);
			this.rectTransform.anchoredPosition = anchoredPosition;
			this.outlineMaterial.SetVector(Threshold, threshold);
			this.outlineMaterial.color = this.color;
		}
	}

	private void OnDestroy()
	{
		Destroy(this.outlineMaterial);
	}

	private (Vector2, Vector4) GetOutlineParameters(GraphicDistanceField field)
	{
		var canvas = this.rawImage.canvas;
		var canvasCamera = canvas.renderMode == RenderMode.ScreenSpaceOverlay ? null : canvas.worldCamera;
		var anchoredPosition = RectTransformUtility.WorldToScreenPoint(canvasCamera, field.transform.position) +
							   field.OutlineCenterOffset;
		var minDistance = (field.MinDistance * field.Resolution) / this.rectTransform.sizeDelta.x;
		var outerOffset = this.width * this.width * minDistance;
		var innerOffset = Mathf.Min(outerOffset, minDistance * 4.0f);
		var threshold = new Vector4(0.5f - innerOffset, 0.5f, 0.5f + outerOffset, 0.0f);
		return (anchoredPosition, threshold);
	}

	private Tweener DoAnimation(GraphicDistanceField fromField, GraphicDistanceField toField)
	{
		return DOVirtual.Float(
			0.0f,
			1.0f,
			this.tweenDuration,
			t =>
			{
				var sizeDeltaFrom = Vector2.one * fromField.OutlineSize;
				var sizeDeltaTo = Vector2.one * toField.OutlineSize;
				var (anchoredPositionFrom, thresholdFrom) = this.GetOutlineParameters(fromField);
				var (anchoredPositionTo, thresholdTo) = this.GetOutlineParameters(toField);
				this.rectTransform.anchoredPosition =
					Vector2.LerpUnclamped(anchoredPositionFrom, anchoredPositionTo, t);
				this.rectTransform.sizeDelta = Vector2.LerpUnclamped(sizeDeltaFrom, sizeDeltaTo, t);
				this.outlineMaterial.SetTexture(PreviousField, fromField.Field);
				this.outlineMaterial.SetTexture(CurrentField, toField.Field);
				this.outlineMaterial.SetVector(Threshold, Vector4.LerpUnclamped(thresholdFrom, thresholdTo, t));
				this.outlineMaterial.SetFloat(Progress, t);
				this.outlineMaterial.color = this.color;
			});
	}

	[Serializable]
	public class TweenerEvent : UnityEvent<Tweener>
	{
	}
}

outlineShaderには下記のようなシェーダーをセットしています。

Shader "Effect/Outline"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		[NoScaleOffset] _PreviousField ("Previous Field", 2D) = "white" {}
		[NoScaleOffset] _CurrentField ("Current Field", 2D) = "white" {}
		_Progress ("Progress", Range(0.0, 1.0)) = 0.0
		_Threshold ("Threshold", Vector) = (0.49975585937, 0.5, 0.5009765625, 0.0)
		_Color ("Color", Color) = (1.0, 0.0, 0.0, 1.0)
	}
	SubShader
	{
		Tags { "Queue"="Transparent" "RenderType"="Transparent" }

		Cull Off
		ZTest Always
		ZWrite Off
		Blend SrcAlpha OneMinusSrcAlpha

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			sampler2D _PreviousField;
			sampler2D _CurrentField;
			float _Progress;
			float3 _Threshold;
			float4 _Color;

			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				float distance = lerp(tex2D(_PreviousField, i.uv).r, tex2D(_CurrentField, i.uv).r, _Progress);
				float innerMask = _Threshold.x < _Threshold.y ? smoothstep(_Threshold.x, _Threshold.y, distance) : step(_Threshold.y, distance);
				float outerMask = _Threshold.z > _Threshold.y ? smoothstep(_Threshold.z, _Threshold.y, distance) : 1.0 - step(_Threshold.y, distance);
				return float4(_Color.rgb, innerMask * outerMask);
			}
			ENDCG
		}
	}
}

ボタンのクリック、またはキーボードナビゲーションによるフォーカスの移動が起こると、アウトラインオブジェクトが目標へ向かって移動します。移動中の線の太さが一定でなく見苦しくはありますが、まあ一応目標に合わせて変形させることができました。

DOTweenとの連携をどうしようか悩んだのですが、結局上述のコードにあるように「遷移アニメーションはDOTweenを使い、アニメーション開始時にそのトゥイーンを引数にしたイベントを発生させる」ということにしました。
別途下記のようなスクリプトを用意し...

using DG.Tweening;
using UnityEngine;

public class TweenModifier : MonoBehaviour
{
	public void ModifyTween(Tweener tweener)
	{
		tweener.SetEase(Ease.OutElastic).OnComplete(() => { Debug.Log("Completed"); });
	}
}

GraphicOutlineのonTweenにメソッドをセットすると...

下図のようにアニメーションが変化し、移動完了時にコンソールに文章が出力されました。

Comments

[kenji007]

ありがとうございます！！！
探していた感じとそのままでとても助かります！
早速該当のものを勉強してみようと思います、ありがとうございます！

Answer 2

物体の形状を距離場として定義し、距離場同士を混ぜ合わせることで形状をモーフィングさせる表現技法がありますが（たとえば「【UnityShader】レイマーチング入門【5】 #36 - 知識0からのUnityShader勉強」）、それと同様にできないかと思って試してみました。

実験用のシーンには下図のようにボタン3つとアウトライン用のRaw Imageを配置しています。

ボタンにアタッチしてあるGraphicDistanceFieldは下記のようになっており、「Distance Fields」で紹介されていたMin Erosionとかいう方法をまねて距離場テクスチャを生成させました。

using System.Reflection;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Graphic))]
public class GraphicDistanceField : MonoBehaviour
{
	private static readonly PropertyInfo WorkerMeshInfo = typeof(Graphic).GetProperty(
		"workerMesh",
		BindingFlags.DeclaredOnly | BindingFlags.Static | BindingFlags.NonPublic);
	private static readonly MethodInfo DoMeshGenerationInfo = typeof(Graphic).GetMethod(
		"DoMeshGeneration",
		BindingFlags.DeclaredOnly | BindingFlags.Instance | BindingFlags.NonPublic);
	private static readonly int Increment = Shader.PropertyToID("_Increment");
	private static readonly int MaxDistance = Shader.PropertyToID("_MaxDistance");
	private static readonly int Direction = Shader.PropertyToID("_Direction");

	[SerializeField][Min(16)] private int resolution = 256;
	[SerializeField] private Shader distanceFieldShader;
	[SerializeField] private RenderTexture field;
	[SerializeField][Range(1.0f, 2.0f)] private float imageScale = 1.5f;

	private Material distanceFieldMaterial;
	private Graphic graphic;
	private float maxDistance;
	private RectTransform rectTransform;

	public Vector2 OutlineCenterOffset { get; private set; }
	public float OutlineSize { get; private set; }
	public Texture Field => this.field;
	public float MinDistance => 0.5f / this.maxDistance;
	public int Resolution => this.resolution;

	private void Awake()
	{
		this.graphic = this.GetComponent<Graphic>();
		this.rectTransform = this.transform as RectTransform;
		if (this.distanceFieldShader == null)
		{
			Debug.LogError($"{nameof(this.distanceFieldShader)} not set.");
			this.enabled = false;
			return;
		}

		this.distanceFieldMaterial = new Material(this.distanceFieldShader);
		this.field = new RenderTexture(this.resolution, this.resolution, 0, RenderTextureFormat.RFloat);
	}

	private void Start()
	{
		this.UpdateField();
	}

	private void OnDestroy()
	{
		Destroy(this.distanceFieldMaterial);
		Destroy(this.field);
	}

	public void UpdateField()
	{
		// まず、このUIオブジェクトが占めるスクリーン空間内の領域を求める
		// rectTransformの四隅の位置を取得し...
		var rootCanvas = this.graphic.canvas.rootCanvas;
		var canvasCamera = rootCanvas.renderMode == RenderMode.ScreenSpaceOverlay ? null : rootCanvas.worldCamera;
		var worldCorners = new Vector3[4];
		this.rectTransform.GetWorldCorners(worldCorners);
		var screenCorners = new Vector2[worldCorners.Length];
		for (var i = 0; i < worldCorners.Length; i++)
		{
			screenCorners[i] = RectTransformUtility.WorldToScreenPoint(canvasCamera, worldCorners[i]);
		}

		// それを内包する矩形の左下と右上を求め...
		var bottomLeft = new Vector2(Mathf.Infinity, Mathf.Infinity);
		var topRight = new Vector2(Mathf.NegativeInfinity, Mathf.NegativeInfinity);
		foreach (var screenCorner in screenCorners)
		{
			bottomLeft = Vector2.Min(bottomLeft, screenCorner);
			topRight = Vector2.Max(topRight, screenCorner);
		}

		// Rect構造体としておく
		var graphicRect = new Rect
		{
			min = bottomLeft,
			max = topRight
		};

		// 各空間の座標を変換するための行列を用意する
		var screenSize = new Vector2(Screen.width, Screen.height);
		var halfScreenSize = screenSize * 0.5f;
		var localToWorld = this.rectTransform.localToWorldMatrix;
		var worldToCamera = canvasCamera == null ? Matrix4x4.identity : canvasCamera.worldToCameraMatrix;
		var cameraToScreen = canvasCamera == null
			? Matrix4x4.Scale(new Vector3(1.0f, 1.0f, 0.0f))
			: Matrix4x4.TRS(halfScreenSize, Quaternion.identity, halfScreenSize) * canvasCamera.projectionMatrix;
		var scale = Mathf.Max(graphicRect.size.x, graphicRect.size.y);
		var rectToClip = Matrix4x4.Scale(Vector2.one * (this.imageScale / scale)) *
						 Matrix4x4.Translate(-graphicRect.center);
		var cameraToTexture = rectToClip * cameraToScreen;

		// このUIオブジェクトの原点とgraphicRectの中心点がどれだけずれているかを求める
		// 後述のGraphicOutlineにおいて、UIオブジェクトの座標にこのずれを足すことで
		// graphicRectの中心点にアウトラインを配置するようにしている
		var graphicScreenPosition = (cameraToScreen * worldToCamera).MultiplyPoint(this.rectTransform.position);
		this.OutlineCenterOffset = graphicRect.center - (Vector2)graphicScreenPosition;

		// 同じく後述のGraphicOutlineにおいて、アウトラインのサイズを決めるための値を求める
		this.OutlineSize = (scale * 2.0f) / this.imageScale;

		// UIオブジェクトのメッシュを取得し、縦横resolutionピクセルのテクスチャ上に描画して...
		DoMeshGenerationInfo.Invoke(this.graphic, null);
		var mesh = WorkerMeshInfo.GetValue(null) as Mesh;
		var activeTexture = RenderTexture.active;
		var graphicMaterial = this.graphic.materialForRendering;
		var sourceTexture = RenderTexture.GetTemporary(this.resolution, this.resolution);
		RenderTexture.active = sourceTexture;
		GL.Clear(true, true, Color.clear);
		GL.PushMatrix();
		var graphicMaterialTexture = graphicMaterial.mainTexture;
		graphicMaterial.mainTexture = this.graphic.mainTexture;
		graphicMaterial.SetPass(0);
		GL.LoadProjectionMatrix(cameraToTexture);
		Graphics.DrawMeshNow(mesh, worldToCamera * localToWorld);
		GL.PopMatrix();

		// アルファ0.5を境に二値化し、距離場計算の初期状態とする
		var forwardField = RenderTexture.GetTemporary(
			this.resolution,
			this.resolution,
			0,
			RenderTextureFormat.RGFloat);
		var backField = RenderTexture.GetTemporary(
			this.resolution,
			this.resolution,
			0,
			RenderTextureFormat.RGFloat);
		this.maxDistance = this.resolution * this.resolution * 0.25f;
		this.distanceFieldMaterial.SetFloat(MaxDistance, this.maxDistance);
		Graphics.Blit(sourceTexture, forwardField, this.distanceFieldMaterial, 0);

		// Min Erosion法により各点の距離を更新していく
		var iterationCount = this.resolution / 2;
		for (var j = 0; j < 2; j++)
		{
			this.distanceFieldMaterial.SetVector(Direction, j == 0 ? Vector2.right : Vector2.up);
			for (var i = 0; i < iterationCount; i++)
			{
				this.distanceFieldMaterial.SetFloat(Increment, 1.0f + (i * 2.0f));
				Graphics.Blit(forwardField, backField, this.distanceFieldMaterial, 1);
				var nextForwardField = backField;
				backField = forwardField;
				forwardField = nextForwardField;
			}
		}

		// 距離場のプラス側とマイナス側を統合し、1チャンネルのテクスチャにする
		// 距離場は符号付きのままでもいいのだが、インスペクター上でテクスチャの仕上がりを
		// 確認しやすいよう、0.5を中心として0.0～1.0に正規化することにした
		Graphics.Blit(forwardField, this.field, this.distanceFieldMaterial, 2);

		// 後始末
		RenderTexture.active = activeTexture;
		RenderTexture.ReleaseTemporary(sourceTexture);
		RenderTexture.ReleaseTemporary(forwardField);
		RenderTexture.ReleaseTemporary(backField);
		graphicMaterial.mainTexture = graphicMaterialTexture;
	}
}

distanceFieldShaderには下記のようなシェーダーがセットされています。

Shader "Hidden/DistanceField"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_MaxDistance ("Max Distance", Float) = 0.0
		_Increment ("Increment", Float) = 0.0
		_Direction ("Direction", Vector) = (1.0, 0.0, 0.0, 0.0)
	}
	SubShader
	{
		CGINCLUDE
		#include "UnityCG.cginc"

		struct appdata
		{
			float4 vertex : POSITION;
			float2 uv : TEXCOORD0;
		};

		struct v2f
		{
			float2 uv : TEXCOORD0;
			float4 vertex : SV_POSITION;
		};

		v2f vert(appdata v)
		{
			v2f o;
			o.vertex = UnityObjectToClipPos(v.vertex);
			o.uv = v.uv;
			return o;
		}

		sampler2D _MainTex;
		float4 _MainTex_TexelSize;
		float _MaxDistance;
		float _Increment;
		float2 _Direction;
		ENDCG

		Cull Off
		ZWrite Off
		ZTest Always

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			float4 frag(v2f i) : SV_Target
			{
				return tex2D(_MainTex, i.uv).a > 0.5 ? float4(0.0, _MaxDistance, 0.0, 0.0) : float4(_MaxDistance, 0.0, 0.0, 0.0);
			}
			ENDCG
		}

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			float4 frag(v2f i) : SV_Target
			{
				float2 offset = _MainTex_TexelSize.xy * _Direction;
				return float4(min(tex2D(_MainTex, i.uv).rg, min(tex2D(_MainTex, i.uv + offset).rg, tex2D(_MainTex, i.uv - offset).rg) + _Increment), 0.0, 0.0);
			}
			ENDCG
		}

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			float4 frag(v2f i) : SV_Target
			{
				float2 distance = tex2D(_MainTex, i.uv).rg; 
				return 0.5 + (dot(distance, float2(1.0, -1.0)) * 0.5 / _MaxDistance);
			}
			ENDCG
		}
	}
}

(投稿字数が尽きてしまったため、パート2へ移動します...)