FC2ブログ
05 «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.26.27.28.29.30.» 07

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

株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

 

【ハルシオンブログ】uGUI.TextとTextMeshProにグラデーションをかけたい!文字にグラデーションを掛けるの意外とめんどいね・・・ 

こんにちは。坂内っす。

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)

tb 0 : cm 0   

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://halcyonsystemblog.blog.fc2.com/tb.php/563-df65b0c0
この記事にトラックバックする(FC2ブログユーザー)