TextMeshProのカラーグラデーション


投稿日:2024年1月10日 | 最終更新日:2024年3月8日

概要

TextMeshProでは、テキストのカラーグラデーションを適用することができます。
グラデーションは一文字ごとにかかります。

テキストコンポーネント全体にグラデーションを設定する

テキストコンポーネントのColor Gradientをオンにすると、テキスト全体にグラデーションをかけることができるようになります。


テキストコンポーネント全体にかけるグラデーションカラーはVertex Colorで乗算されます。
Vertex Colorが白に設定されている場合は、グラデーションカラーがそのまま表示されることになりますが、
黒に設定するとグラデーションは真っ黒に塗りつぶされて表示されなれなくなってしまうので注意してください。

Color Mode

「Color Mode」でグラデーションのタイプを設定します。

Single(単色)

一色だけでグラデーションはかかりません。

Horitonal(左右)

左右にグラデーションをかけます。

Vertical(上下)

上下にグラデーションをかけます。

For Corner(上下左右)

上下左右にグラデーションをかけます。

4色それぞれに違う色を設定しても良いですが、いくつかおなじ色を設定することで、効果的な使い方ができます。

3つ同じ色に

3つ同じ色にして1つだけ違う色にすると、色つきの角が1つあるようなグラデーションがかけられます

対角線同士を同じ色に

対角線同士を同じ色にすると、斜めにグラデーションがかかります

片側だけ同じ色

片側だけ同じ色に設定して、反対側にそれぞれ違う色を設定すると、水平と垂直方向に3色のグラデーションをかけられます。

一つの対角線を同じ色に

一つの対角線を同じ色にし、残りを違う色にすると斜めストライプのグラデーションがかかります

グラデーションプリセット

グラデーションのデータは、グラデーションプリセットという独立したアセットとして作成し、プロジェクト全体で使いまわすことができます。

グラデーションプリセットの作成

新しいグラデーションプリセットは、ProjectWindowで右クリックして「Create > TextMesh Pro > Color Gradient」から作成できます。
「Color Mode」、「Colors」などの各プロパティはテキストコンポーネントのグラデーションと同じです。

グラデーションプリセットの設定

テキストコンポーネントの「Color Preset」に、作成したグラデーションプリセットを設定できます。

プリセットを設定すると、そのグラデーションがテキストに適用されます。

注意点

テキストコンポーネントの「Color Preset」が設定された状態で「Color Mode」や「Colors」を編集すると、設定してあるグラデーションプリセット自体の値が変更されます。
プリセットの値を変更するということは、編集中のコンポーネントだけではなく、
そのプリセットを使用しているプロジェクト内のすべてのグラデーションの色が変更されてしまうので、注意してください

gradientタグで表示する

テキストの一部だけにグラデーションを使う場合は、gradientタグでグラデーションプリセットを利用する形になります。
詳細はgradientタグを確認してください。

グラデーションプリセットの置き場所

gradientタグで使用するグラデーションションプリセットは、
プロジェクト設定のColor Gradient Presetsの「Path」で設定したフォルダに置く必要があります。