テキストについて

UI Toolkit は、TextMesh Pro に基づいた技術である TextCore を使ってテキストをレンダリングします。TextCore は、高度なスタイリング機能を備えており、さまざまなポイントサイズや解像度でテキストを鮮明にレンダリングできます。SDF (Signed Distance Field) フォントレンダリングの利点を生かし、変形や拡大を行っても鮮明なフォントアセットを生成することができます。

この例では、UI Builder でテキストをスタイル設定する方法、静的および動的フォントアセットを作成して適用する方法、リッチテキストタグとカスタムスタイルシートを使用してテキストをスタイル設定する方法、パネルのテキスト設定を管理する Panel Text Settings アセットを作成する方法を説明します。

ノート: デモンストレーションのため、このガイドではランタイム UI を使用しています。フォントアセットとスタイルシートを作成する手順は、エディター UI にも適用されます。ただし、このリリースではエディター UI のデフォルトの Panel Text Settings を変更することはできません。

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

• UI Builder
• UXML
• ランタイム UI

Panel Text Settings アセットの作成

ランタイム UI で開始し、パネルのテキスト設定を管理する Panel Text Settings アセット を作成します。また、Resources フォルダーとサブフォルダーを作成し、フォントアセットとカスタムスタイルシートを格納します。

1. ランタイム UI について の手順に従って、シンプルなランタイム UI を作成します。
2. Assets フォルダーに、Resourcesフォルダーを作成します。
3. Assets\UI Toolkit フォルダーで右クリックし、Create > UI Toolkit > Text Settings を選択して UITK Text Settings.asset を作成します。UITK Text Settings.asset の Inspector ウィンドウには、フォントアセット、テキストスタイルシートアセット、スプライトアセット、カラーグラデーションプリセットのデフォルトパス名が表示されます。
4. Resources フォルダーに、Fonts & Materials と Text Style Sheets という名の 2 つのフォルダーを作成します。

UI Builder でテキストのスタイルを設定する

UI Builder を使って、トグルテキストを太字の斜体にし、フォントサイズを 12px にします。詳細については、USS でテキストのスタイルを設定する を参照してください。

1. SimpleRuntimeUi.uxml をダブルクリックして UI Builder で開きます。
2. トグルコントロールの Inspector ウィンドウで、Text を選択します。
3. Font Style フィールドで B と I を選択します。
4. Size フィールドに 12 と入力します。

静的フォントアセットの作成

静的フォントアセット を作成し、それをボタンコントロールに適用します。静的フォントアセットの場合、ソースフォントファイルをビルドに加える必要はありません。ただし、ボタンの表示テキストのすべての文字についてアトラスを生成する必要があります。表示テキストは This is a Button で、テキストに * を追加し、TBhinostua* のアトラスを生成します。

1. Google Fonts から Lato フォントパッケージをダウンロードします。

2. フォントパッケージファイルを解凍し、プロジェクトの Assets フォルダーに Lato-Regula.ttf を配置します。

3. フォントファイルの Inspector ウィンドウで、以下を確認します。

   • Include Font Data が有効であること。
   • Character が Dynamic に設定されていること。

4. Project ウィンドウで Lato-Regula.ttf を右クリックし、Create > Text > Font Asset を選択します。これにより、Lato-Regula SDF.asset というダイナミックフォントアセットが作成されます。

5. Lato-Regula SDF.asset の Inspector ウィンドウで、Atlas Population Mode を Static に設定します。

6. Update Atlas Texture をクリックします。

7. Font Asset Creator ウィンドウで、Character Set リストから Custom Characters を選択します。

8. Custom Characters List フィールドに TBhinostua* と入力します。

9. Generate Font Atlas をクリックします。

10. 保存します。

11. Assets\Resources\Fonts & Materials フォルダーに Lato-Regula SDF.asset を格納します。

12. SimpleRuntimeUi.uxml をダブルクリックして UI Builder で開きます。

13. ボタンコントロールの Inspector ウィンドウで、Text > Font Asset > Lato-Regula SDF を選択します。

ダイナミックフォントアセットの作成

ダイナミックフォントアセット を作成し、TextField コントロールに適用します。ダイナミックフォントアセットの場合、ソースフォントファイルをビルドに加える必要があります。フォント用に設定されたパスにソースフォントファイルを直接インポートします。

1. Google Fonts から Roboto フォントパッケージをダウンロードします。

2. フォントパッケージファイルを解凍し、プロジェクトの Assets\Resources\Fonts & Materials フォルダーに Roboto-Regular.ttf を格納します。

3. フォントファイルの Inspector ウィンドウで、以下を確認します。

   • Include Font Data が有効であること
   • Character が Dynamic に設定されていること。

4. Roboto-Regular.ttf を右クリックし、Create > Text > Font Asset を選択します。これにより、Roboto-Regular SDF.asset というダイナミックフォントアセットが作成されます。

5. SimpleRuntimeUi.uxml をダブルクリックして UI Builder で開きます。

6. TextField コントロールの Inspector ウィンドウで、Text > Font Asset > Roboto-Regular SDF を選択します。

リッチテキストタグを使ったスタイル

リッチテキストタグ を使用して、ラベルコントロールのテキストをスタイル設定します。

ノート： このリリースでは、リッチテキストタグは TextField ではサポートされていません。

1. SimpleRuntimeUi.uxml をダブルクリックして UI Builder で開きます。
2. Label コントロールの Inspector ウィンドウで、Text を This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight> に変更します。これで、Label` という文字が大きく、赤く、太字になり、その両側にアスタリスクが付きます。
3. Enable Rich Text が選択されていることを確認してください。

ラベルテキストはビューポートウィンドウで以下のように表示されます。

スタイルシートを使ったスタイル設定

Label と同じスタイルを Button に適用するには、カスタムスタイルシート を作成し、両方の単語にそのスタイルを適用します。

1. Assets\Resources\Text Style Sheets フォルダーで右クリックし、Create > Text > Text StyleSheet を選択します。これにより、Panel Text Settings アセットで設定したパスに Text StyleSheet.asset が作成されます。

2. Text StyleSheet.asset の Inspector ウィンドウで、以下を行います。

   • Name に ExampleStyle と入力します。
   • Opening Tags に <font-weight=700><size=2em><color=#FF0000>* と入力します。
   • Closing Tags* に *</color></size></font-weight> と入力します。

3. UITK Text Settings.asset の Inspector ウィンドウで、Default Style Sheet リストから Text StyleSheet を選択します。

4. SimpleRuntimeUi.uxml をダブルクリックして UI Builder で開きます。

5. Label コントロールの Inspector ウィンドウで、Text を <s>This is a <style="ExampleStyle">Label</style> に変更します。

6. Enable Rich Text が選択されていることを確認してください。

7. Button コントロールの Inspector ウィンドウで、Text を <s>This is a <style="ExampleStyle">Button</style> に変更します。

8. Enable Rich Text が選択されていることを確認してください。

9. 再生モードに入り、ランタイム UI でテキストを確認します。

10. テキストフィールドにランダムな文字を入力します。ダイナミックフォントアセットの場合、テキストフィールドにテキストを入力すると、フォントアトラスが動的に生成されます。

11. プロジェクトの Assets\Resources\Fonts & Materials フォルダーでRoboto-Regular SDF.asset を選択します。

12. Roboto-Regular SDF.asset の Inspector ウィンドウで、Update Atlas Texture を選択し、Font Asset Creator ウィンドウを開きます。アトラスウィンドウが隠されている場合は、それを表示します。アトラスウィンドウに入力した文字が表示されます。

その他の参考資料

• フォントアセットプロパティ
• スプライトをテキストに加える
• カラーグラデーション
• フォールバックフォント
• ランタイム UI について