おもちゃラボ

Unityで遊びを作っていきます

【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;
		}
	}
}

uGUIのTextのポリゴンにアクセスするにはBaseMeshEffectクラスのModifyMeshというメソッドをオーバーライドして使います。

docs.unity3d.com

このクラスからuGUIのTextが持つ全てのポリゴンを取得し、Gradationメソッドに渡しています。Gradationメソッドでは、ポリゴンの1頂点ごとにアクセスし、頂点の位置によって色を変えています。

頂点は次のような並びになっているので、頂点番号が0、1、5のときには上側の色、頂点番号が2、3、4のときは下側の色をつけています。

f:id:nn_hokuson:20170605204411p:plain:w150

実行結果

このスクリプトをuGUIのTextにアタッチして、インスペクタから色を設定する(TextコンポーネントのColorで設定した色は無視されます)とグラデーションデモ時が表示されます。

f:id:nn_hokuson:20170605205543j:plain

「Add Component」で「Outlineコンポーネント」を追加するとアウトラインがついたグラデーションの文字を表示することも出来ます。

f:id:nn_hokuson:20170605210137j:plain

uGUIに関してはこちらの参考書が詳しいです。

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード