Version: 2022.1
言語: 日本語
スプライトアセットのプロパティのリファレンス
Panel Text Settings アセット

カラーグラデーション

最大 4 色のグラデーションをテキストに適用できます。カラーグラデーションを加えると、TextCore によってテキスト文字列の各文字にグラデーションカラーが適用されます。

テキストオブジェクトにカラーグラデーションプリセットを適用するには、<gradient> リッチテキストタグを を使用してください。グラデーションプリセットは、テキストのローカルのグラデーションタイプと色をオーバーライドします。

カラーグラデーションのプリセットを作成する

1 つまたは複数の色でカラーグラデーションを作成し、特定のフォルダーに配置するには、以下の手順を行います。

  1. メニューから Assets > Create > Text > Color Gradient の順に選択し、新しいカラーグラデーションプリセットを加えます。

  2. カラーグラデーションの Inspector ウィンドウで、ドロップダウンメニューからカラーモードを選択します。

    • Single: 単一色を適用します。
    • Horizontal Gradient: 各文字に 2 つの色を適用し、左右に色を変化させます。
    • Vertical Gradient: 各文字に 2 つの色を適用し、上下に色を変化させます。
    • Four Corners Gradient: 4 色を適用します。各色は各文字の割り当てられた角から放射状に広がります。
  3. グラデーションの色を設定します。Colorsフィールドで使用可能な色の数は、選択したグラデーションモードによって異なります。各スウォッチは、文字スプライト上の色の原点に対応しています。

  4. カラーグラデーションアセットを、Panel Text Setting アセットColor Gradient Presets に設定されたパスに配置します。

カラーグラデーションのプリセットを適用する

カラーグラデーションプリセットをテキストに適用するには、<gradient="name-of-the-color-gradient">テキスト</gradient> のように、カラーグラデーションを名前で参照します。このようにカラーグラデーションを適用すると、テキストの色にオブジェクトの現在の頂点色が乗算されます。

純粋なグラデーションをテキストの選択範囲に適用するには、以下の例のように <color> タグを使って色を白にリセットします。

<color=white><gradient="Light to Dark Green - Vertical">ライトグリーンからダークグリーンへのグラデーション</gradient></color>

カラーグラデーションモードの例

以下に各モードのカラーグラデーションの例を示します。

Single

単色のグラデーション。

文字ごとに、テキストの色が黄色で表示されています
文字ごとに、テキストの色が黄色で表示されています

Horizontal Gradient

2 色による左右のグラデーション。

文字ごとに、テキストの色が黄色から黒に横方向に変化します
文字ごとに、テキストの色が黄色から黒に横方向に変化します
文字ごとに、テキストの色が黒から黄色に横方向に変化します
文字ごとに、テキストの色が黒から黄色に横方向に変化します

Vertical Gradient

2 色による上下のグラデーション。

文字ごとに、テキストの色が黒から黄色に上下方向にに変化します
文字ごとに、テキストの色が黒から黄色に上下方向にに変化します
文字ごとに、テキストの色が黄色から黒に上下方向にに変化します
文字ごとに、テキストの色が黄色から黒に上下方向にに変化します

Four Corners Gradient

4 色のグラデーション。各色は 1 つの角から放射状に広がります。最も用途の多いグラデーションタイプです。いくつかの色を変化させ、他の色を変化なしにするなど、さまざまな種類のグラデーションを作ることができます。

各文字の左上が黄色、右上が黒、左下が赤、右下が緑の 4 色グラデーションのテキスト。
各文字の左上が黄色、右上が黒、左下が赤、右下が緑の 4 色グラデーションのテキスト。

この例では、3 つの角が 1 つの色で、4 つ目の角が異なる色で色づけられています。

各文字に左上の角は黒、その他の角は黄色の 4 色のグラデーションを設定したテキスト
各文字に左上の角は黒、その他の角は黄色の 4 色のグラデーションを設定したテキスト

この例では、同じ色で隣接する角のペアで、左右または上下のグラデーションを示しています。

各文字に左の上下の角は黒、右の上下の角は黄色の 4 色のグラデーションを設定したテキスト
各文字に左の上下の角は黒、右の上下の角は黄色の 4 色のグラデーションを設定したテキスト
各文字に左右の上の角は黒、左右の下の角は黄色の 4 色のグラデーションを設定したテキスト
各文字に左右の上の角は黒、左右の下の角は黄色の 4 色のグラデーションを設定したテキスト

この例では、斜めに対向する角のペアを同じ色にして、斜めのグラデーションを作っています。

各文字に左上と右下の角は黒、右上と左下の角は黄色の 4 色のグラデーションを設定したテキスト
各文字に左上と右下の角は黒、右上と左下の角は黄色の 4 色のグラデーションを設定したテキスト
各文字に左上と右下の角は黄色、右上と左下の角は黒の 4 色のグラデーションを設定したテキスト
各文字に左上と右下の角は黄色、右上と左下の角は黒の 4 色のグラデーションを設定したテキスト

この例では、一方の端に支配的な色を置き、もう一方の端に 2 色間の変化を持つ左右および上下の 3 色グラデーションを示します。

各文字に左上下は黄色、右上に赤、右下に黒の 4 色のグラデーションを設定したテキスト
各文字に左上下は黄色、右上に赤、右下に黒の 4 色のグラデーションを設定したテキスト
各文字の左右の上が黄色、左下が赤、右下が黒の 4 色グラデーションのテキスト。
各文字の左右の上が黄色、左下が赤、右下が黒の 4 色グラデーションのテキスト。

この例では、斜めに対向する 2 つの角に同じ色を、残りの 2 つの角に異なる色を使い、斜めのストライプの 3 色グラデーションを作ります。

各文字に左上は赤、右上と左下に黄色、右下に黒の 4 色のグラデーションを設定したテキスト
各文字に左上は赤、右上と左下に黄色、右下に黒の 4 色のグラデーションを設定したテキスト
各文字に左上は黄色、右上に黒、左下に赤の 4 色のグラデーションを設定したテキスト
各文字に左上は黄色、右上に黒、左下に赤の 4 色のグラデーションを設定したテキスト

その他の参考資料

スプライトアセットのプロパティのリファレンス
Panel Text Settings アセット