【Unity】uGUIの文字をグラデーションで表示する

uGUIの文字は単色で塗りつぶしたり、Outlineコンポーネントでアウトラインを描画することはできますが（あまり綺麗じゃない）、グラデーションの表示には現在のところ対応していません。

そこで、uGUIの文字列にグラデーションをかけることができるスクリプトを作ってみたので、作り方を紹介したいと思います。

uGUIの文字をポリゴンとして扱う

「uGUIの文字を動かす」という記事でも書いたように、uGUIの文字は一文字一文字がポリゴンで描画されています。

f:id:nn_hokuson:20170521085157p:plain:w500

nn-hokuson.hatenablog.com

したがってこのポリゴンの頂点に異なる色を付けることでグラデーションのかかった文字を表示することが出来ます。

f:id:nn_hokuson:20170605204107j:plain:w450

文字にグラデーションを掛けるスクリプト

プロジェクトビューで右クリックし、「Create」→「C# Script」を選択し、「GradationController.cs」という名前でC#スクリプトを作りました。作成したスクリプトは次のようになります。

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

public class GradationController : BaseMeshEffect
{
	public Color colorTop    = Color.white;
	public Color colorBottom = Color.white;

	public override void ModifyMesh(VertexHelper vh)
	{
		if ( !IsActive() )
			return;

		List<UIVertex> vertices = new List<UIVertex>();

		vh.GetUIVertexStream(vertices);

		Gradation(vertices);

		vh.Clear();
		vh.AddUIVertexTriangleStream(vertices);
	}

	private void Gradation(List<UIVertex> vertices)
	{
		for (int i = 0; i < vertices.Count; i++)
		{
			UIVertex newVertex= vertices [i];
								
			newVertex.color = (i % 6 == 0 || i % 6 == 1 || i % 6 == 5) ? colorTop : colorBottom;

			vertices [i] = newVertex;
		}
	}
}