FC2ブログ
    08 «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.» 10

    ハルシオンシステムの気まま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.jp/tb.php/563-df65b0c0
    この記事にトラックバックする(FC2ブログユーザー)