テキストの使用を開始する
UI Toolkit は TextCore を使用してテキストをレンダリングします。これは、TextMesh Pro に基づいたテクノロジーです。TextCore は高度なスタイリング機能を提供しており、さまざまなポイントサイズや解像度でテキストをはっきりとレンダリングすることができます。Signed Distance Field (SDF) フォントレンダリングを活用しており、変形や拡大されても鮮明な見た目のフォントアセットを生成することができます。
この例では、UI Builder でのテキストのスタイル設定、静的およびダイナミックフォントアセットの作成と適用、リッチテキストタグとカスタムスタイルシートを使用したテキストのスタイル設定、パネルのテキスト設定を管理するための UITK Text Settings アセットの作成方法を示します。
ノート: デモンストレーション目的で、このガイドではランタイム UI を使用しています。フォントアセットとスタイルシートの作成手順は、エディター UI にも適用できます。ただし、現在のリリースでは、エディター UI のデフォルトの UITK Text Settings を変更することはできません。
必要な要件
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。
UITK Text Settings アセットの作成
ランタイム UI から開始し、パネルのテキスト設定を管理する UITK Text Settings アセット を作成します。また、フォントアセットとカスタムスタイルシートを格納するための Resources フォルダーとサブフォルダーも作成します。
- ランタイム UI について のステップに従って、シンプルなランタイム UI を作成します。
-
Assetsフォルダーに、Resourcesフォルダーを作成します。 -
Assets\UI Toolkitフォルダーを右クリックし、Create > UI Toolkit > Text Settings を選択してUITK Text Settings.assetを作成します。UITK Text Settings.assetの Inspector ウィンドウには、フォントアセット、テキストスタイルシートアセット、スプライトアセット、およびカラーグラデーションプリセットのデフォルトパス名が表示されます。 -
Resourcesフォルダーに、Fonts & MaterialsとText Style Sheetsという名前の 2 つのフォルダーを作成します。
UI Builder によるテキストのスタイル設定
UI Builder を使用して、トグルテキストのスタイルを太字斜体、フォントサイズを 12px にします。詳細については、USS でテキストのスタイルを設定する を参照してください。
-
SimpleRuntimeUi.uxmlをダブルクリックして、UI Builder で開きます。 - トグルコントロールの Inspector ウィンドウで、Text を選択します。
- Font Style フィールドで、B と I を選択します。
- Size フィールドに 12 と入力します。
静的フォントアセットの作成
静的フォントアセット を作成し、ボタンコントロールに適用します。静的フォントアセットの場合、ソースフォントファイルをビルドに追加する必要はありません。ただし、ボタンの表示テキストのすべての文字に対してアトラスを生成する必要があります。表示テキストは This is a Button で、テキストに * を追加するので、TBhinostua* 用のアトラスを生成します。
Google Fonts から Lato フォントパッケージをダウンロードします。
フォントパッケージファイルを解凍し、プロジェクトの
AssetsフォルダーにLato-Regula.ttfを配置します。-
フォントファイルの Inspector ウィンドウで、以下を確認します。
- Include Font Data が有効になっている。
- Character が Dynamic に設定されている。
Project ウィンドウで
Lato-Regula.ttfを右クリックし、Create > Text Core > Font Asset > SDF を選択します。これにより、Lato-Regula SDF.assetというダイナミックフォントアセットが作成されます。Lato-Regula SDF.assetの Inspector ウィンドウで、Atlas Population Mode を Static に設定します。Update Atlas Texture をクリックします。
Font Asset Creator ウィンドウの Character Set リストから、Custom Characters を選択します。
Custom Characters List ボックスに
TBhinostua*と入力します。Generate Font Atlas をクリックします。
変更を保存します。
Assets\Resources\Fonts & MaterialsフォルダーにLato-Regula SDF.assetを配置します。SimpleRuntimeUi.uxmlをダブルクリックして、UI Builder で開きます。ボタンコントロールの Inspector ウィンドウで、Text > Font Asset > Lato-Regula SDF を選択します。
ダイナミックフォントアセットの作成
ダイナミックフォントアセット を作成し、TextField コントロールに適用します。ダイナミックフォントアセットの場合は、ソースフォントファイルをビルドに追加する必要があります。ソースフォントファイルをフォントに設定されたパスに直接インポートします。
Google Fonts から Roboto フォントパッケージをダウンロードします。
フォントパッケージファイルを解凍し、プロジェクトの
Assets\Resources\Fonts & MaterialsフォルダーにRoboto-Regular.ttfを配置します。-
フォントファイルの Inspector ウィンドウで、以下を確認します。
- Include Font Data が有効になっている
- Character が Dynamic に設定されている
Roboto-Regular.ttfを右クリックし、Create > Text Core > Font Asset を選択します。これにより、Roboto-Regular SDF.assetというダイナミックフォントアセットが作成されます。SimpleRuntimeUi.uxmlをダブルクリックして、UI Builder で開きます。TextField コントロールの Inspector ウィンドウで、Text > Font Asset > Roboto-Regular SDF を選択します。
リッチテキストタグによるスタイル設定
リッチテキストタグ を使用して、ラベルコントロールのテキストのスタイルを設定します。
ノート: 現在のリリースでは、リッチテキストタグは TextField でサポートされていません。
-
SimpleRuntimeUi.uxmlをダブルクリックして、UI Builder で開きます。 - ラベルコントロールの Inspector パネルで、Text を
This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>に変更します。これにより、単語Labelは大きく、赤、太字になり、その両側にアスタリスクが表示されます。 - Enable Rich Text が選択されていることを確認します。
ラベルは Viewport ウィンドウでは以下のようになります。
スタイルシートによるスタイル設定
Label と同じスタイルを Button に適用するには、カスタムスタイルシート を作成し、そのスタイルを両方の単語に適用します。
Assets\Resources\Text Style Sheetsフォルダーを右クリックし、Create > Text Core > Text StyleSheet を選択します。これにより、UITK Text Settings アセットで設定したパスにText StyleSheet.assetが作成されます。-
Text StyleSheet.assetの Inspector ウィンドウで以下を行います。-
Name に
ExampleStyleと入力します。 -
Opening Tags に
<font-weight=700><size=2em><color=#FF0000>*と入力します。 -
Closing Tags に
*</color></size></font-weight>と入力します。
-
Name に
UITK Text Settings.assetの Inspector ウィンドウで、Default Style Sheet リストから、Text StyleSheet を選択します。SimpleRuntimeUi.uxmlをダブルクリックして、UI Builder で開きます。ラベルコントロールの Inspector ウィンドウで、Text を
<s>This is a <style="ExampleStyle">Label</style>に変更します。Enable Rich Text が選択されていることを確認します。
ボタンコントロールの Inspector ウィンドウで、Text を
<s>This is a <style="ExampleStyle">Button</style>に変更します。Enable Rich Text が選択されていることを確認します。
再生モードに入り、ランタイム UI でテキストを確認します。
テキストフィールドに、ランダムな文字を入力します。ダイナミックフォントアセットの場合、テキストフィールドにテキストを入力するとフォントアトラスが動的に生成されます。
プロジェクトの
Assets\Resources\Fonts & Materialsフォルダーで、Roboto-Regular SDF.assetを選択します。Roboto-Regular SDF.assetの Inspector ウィンドウで、Update Atlas Texture を選択して Font Asset Creator ウィンドウを開きます。アトラスウィンドウが非表示になっている場合は展開します。入力した文字がアトラスウィンドウに表示されます。
