キャンバスのテキストは単色なら選択できるが、グラデーションさせるにはひと手間必要になる。
まず元となるテキスト要素を作る ( Create UI > Text ) 。
次に C# でエフェクトを作る (後述)。
最後にテキストに作ったエフェクトをコンポーネントとして追加する。
C# でエフェクトを作る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
namespace UnityEngine.UI { [AddComponentMenu("UI/Effects/Custom/EffectTest", 100)] public class EffectTest : BaseMeshEffect { public override void ModifyMesh(VertexHelper vh) { if (!IsActive()) return; UIVertex v = new UIVertex(); int idx = 0; for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref v, i); switch(idx){ case 0:v.color = Color.red;break; case 1:v.color = Color.blue;break; case 2:v.color = Color.green;break; case 3:v.color = Color.black;break; } if (++idx >= 4) { idx = 0; } vh.SetUIVertex(v, i); } } } } |
これをTextに適用 (Add Component) するとこんな感じになる。
ソースと合わせて見ると文字は4点の頂点で出来ていて、左上から時計回りに割り振られていることがわかる。
なので縦横のグラデーションはこうする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
namespace UnityEngine.UI { [AddComponentMenu("UI/Effects/Custom/Gradient", 100)] public class GradientTest : BaseMeshEffect { public Color32 Color1 = Color.red; public Color32 Color2 = Color.white; public override void ModifyMesh(VertexHelper vh) { if (!IsActive()) return; UIVertex v = new UIVertex(); int idx = 0; for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref v, i); v.color = (idx == 0 || idx == 1) ? Color1 : Color2;//縦グラデーション v.color = (idx == 0 || idx == 3) ? Color1 : Color2;//横グラデーション if (++idx >= 4) { idx = 0; } vh.SetUIVertex(v, i); } } } } |
斜めの場合は Lerp 関数を使って以下のようにする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
namespace UnityEngine.UI { [AddComponentMenu("UI/Effects/Custom/Gradient", 100)] public class GradientColor : BaseMeshEffect { public Color32 Color1 = Color.red; public Color32 Color2 = Color.white; public override void ModifyMesh(VertexHelper vh) { if (!IsActive()) return; UIVertex v = new UIVertex(); float f = 0.0f; int idx = 0; for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref v, i); switch(idx){ case 0:f=1.0f;break; case 1:f=0.5f;break; case 2:f=0.0f;break; case 3:f=0.5f;break; } if (++idx >= 4) { idx = 0; } v.color = Color32.Lerp( Color1, Color2, f); vh.SetUIVertex(v, i); } } } } |
デフォルトのフォントでも多少凝って見える！
もっとデコレーションしたい場合はビットマップフォントを使う必要がありそう。
また他のエフェクトとあわせて使うと高確率でおかしなことになるので注意しないといけない。