uGUIの文字は単色で塗りつぶしたり、Outlineコンポーネントでアウトラインを描画することはできますが(あまり綺麗じゃない)、グラデーションの表示には現在のところ対応していません。
そこで、uGUIの文字列にグラデーションをかけることができるスクリプトを作ってみたので、作り方を紹介したいと思います。
uGUIの文字をポリゴンとして扱う
「uGUIの文字を動かす」という記事でも書いたように、uGUIの文字は一文字一文字がポリゴンで描画されています。
したがってこのポリゴンの頂点に異なる色を付けることでグラデーションのかかった文字を表示することが出来ます。
文字にグラデーションを掛けるスクリプト
プロジェクトビューで右クリックし、「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というメソッドをオーバーライドして使います。
https://docs.unity3d.com/jp/current/ScriptReference/UI.BaseMeshEffect.htmldocs.unity3d.com
このクラスからuGUIのTextが持つ全てのポリゴンを取得し、Gradationメソッドに渡しています。Gradationメソッドでは、ポリゴンの1頂点ごとにアクセスし、頂点の位置によって色を変えています。
頂点は次のような並びになっているので、頂点番号が0、1、5のときには上側の色、頂点番号が2、3、4のときは下側の色をつけています。
実行結果
このスクリプトをuGUIのTextにアタッチして、インスペクタから色を設定する(TextコンポーネントのColorで設定した色は無視されます)とグラデーションデモ時が表示されます。
「Add Component」で「Outlineコンポーネント」を追加するとアウトラインがついたグラデーションの文字を表示することも出来ます。
uGUIに関してはこちらの参考書が詳しいです。