ハルシオンシステムの気ままBlog

こんにちは。坂内っす。

Unityで文字にグラデーションを掛けたいと思うことありませんか？
意外と簡単そうで、めんどいグラデーション。

上の文字がuGUIのText、下の文字がTextMeshProになります。


これを基に、グラデーションを試してみましょう。

[TMPの場合]
TMPにはグラデーションが初めから用意されています。

TMPのここにある「Color Gradient」にチェックを入れると、グラデーションのカラー設定が出てきます。



この設定だとこんな感じになりますね。



横にグラデーションを書けるとこんな感じ。


[uGUI.Textの場合]
デフォルトのままでは無理なんで・・・・

https://github.com/azixMcAze/Unity-UIGradient

こちらにあるUIGradientを使うと、グラデーションが可能になります。



こんな感じ。
Angleをいじると、グラデーションの角度が変わります。


[ふたたびTMP]
Textの方のグラデーションでやったように、TMPでもこうしたい！
（TMPの横グラデーションだと1文字ずつのグラデーションになって、全体での横グラデーションができない！）



そして、TMPだとUIGradientが使えない！

こんな時はMaskを使います。
①まずはこんなグラデのかかってる1枚絵を用意します。


②uGUIのImageとして①のグラデの絵を作成し、TMPの子供として配置する。


③TMPにMaskコンポーネントを追加。




こんな感じで、キレイに横グラデーションがTMPにかかりました。

なんかもっと簡単な方法ありそうなんだけどね・・・・・・

ということで、文字にグラデーションをつける方法でした！

では、あでゅ～ノシ

Category: 開発日記（Unity）