UMG Rich Text Block

UMG のリッチ テキスト ブロックの使い方

Unreal Motion Graphics (UMG) が提供するテキスト ブロックでは、さまざまなスタイル オプションとカスタマイズ機能を利用できます。それでも、スタイル変更、インライン画像、ハイパーリンクなどのマークアップをサポートするさらに柔軟なテキスト ブロックが必要になることがあります。

UMG RichTextBlock は、より柔軟なテキスト ブロックを提供します。スタイルの変更、インライン画像、ハイパーリンクなどのマークアップをサポートしています。UMG RichTextBlock は Decorator クラスに対応しているため、プロジェクトに必要なマークアップの動作の定義を記述することができます。また、ページにはプロパティに関する詳細情報が表示されます。これらのプロパティは、RichTextBlock ウィジェットと、Rich Image Row および Rich Text Style Row のデータ タイプを持つデータ テーブル アセットに設定できます。

Rich Text Block は データ テーブル アセット を使用して追加したスタイルとカスタマイズ機能を管理します。データ テーブル アセットを利用することで、独自のスタイルを作成できます。また、カスタムの Decorator クラスを記述し、プロジェクトに必要なマークアップの動作を定義できます。このページでは、Decorator クラスの例として RichTextBlockImageDecorator を示しています。この例は、カスタムの Decorator クラスを試しに書く際の取り掛かりとして使用することができます。

このページの内容を習得すると、UMG の RichTextBlock の詳細を把握し、カスタムの Decorator クラスを作成できるようになります。

データ テーブル アセットを作成し、割り当てる

まず、データ テーブル アセットを作成する必要があります。データ テーブル アセットを利用することで、さまざまなタイプのデータ タグを作成し、UMG の RichTextBlock ウィジェットでそれを使用することができます。データ テーブル アセットを使用してテキスト スタイルやイメージを指定し、RichTextBlock でリッチ テキストをインラインで使用できます。

他のアセットと同様に、データ テーブル アセットを作成します。これには、コンテンツ ブラウザ[Add New (新規追加)] をクリックし、[Miscellaneous (その他)] > [Data Table (データ テーブル)] を選択します。

01_AddNewDTA.png

[Pick Row Structure (行構造を選択)] ウィンドウで、[Rich Image Row] または [Rich Text Style Row] のいずれかを選択します。

02_CreateDTA_PickStructure.png

[Rich Image Row] は、カスタム Decorator クラスを使用します。このクラスの詳細については、「Decorator クラス」セクションを参照してください。

Rich Image Row データ タイプ

例として、このページではカスタム Decorator クラスの Rich Image Row データ タイプについて説明します。データ テーブル アセットと Rich Image Row データ タイプを使用してイメージを格納し、さまざまなカスタマイズ オプションでセットアップします。これにより、RichTextBlock を使用し、テキスト内のインライン イメージとしてこのデータを使用できます。

以下の手順に従い、データ テーブル アセットの Rich Image Row データ タイプを作成して使用します。

  1. データ テーブル アセットを作成し、[Pick Row Structure] ウィンドウのドロップダウン リストから [Rich Image Row] を選択します。また、このデータ テーブル アセットの名前を変更することもできます。たとえば、「Image_DataTable」という名前を入力します。

  2. 作成したデータ テーブル アセットをコンテンツ ブラウザでダブルクリックし、Data Table Editor で開きます。

  3. [Data Table Asset (データ テーブル アセット)] パネルの [Add (追加)] をクリックし、新しい行を追加します。各インライン イメージ用のデータ テーブル アセットの行を作成します。これが、RichTextBlock によってテキスト内で使用する行になります。[Data Table Asset] パネルでは他の処理を行うこともでき、コピー貼り付け複製削除 などが可能です。

    04_AddRows_DTA_ImageRowDT.png

  4. [Row Name (行の名前)] セクションのテキスト フィールドを使用し、行の名前を変更することもできます。プレフィックス、キャメル ケースなども使用できます。

  5. これらのイメージに必要なプロパティは、[Appearance (外観)] で設定します。

  6. 行の追加が終わったら [Save (保存)] をクリックしてデータ テーブル アセットを閉じます。

これらの設定の詳細については、「Rich Image Row データ タイプのデータ テーブル アセットに使用するプロパティ」を参照してください。

Rich Text Style Row データ タイプ

Rich Text Style Row データ タイプは、デフォルトの Decorator クラスです。これを利用してテキスト スタイルを設定し、RichTextBlock を使用してそのスタイルをテキストに適用できます。

以下の手順を実行して、データ テーブル アセットの Rich Text Style Row データ タイプを作成して使用します。

  1. データ テーブル アセットを作成し、[Pick Row Structure] ウィンドウのドロップダウン リストから [Rich Text Style Row] を選択します。また、このデータ テーブル アセットの名前を変更することもできます。たとえば、「TextStyle_DataTable」という名前を入力します。

  2. 作成したデータ テーブル アセットをコンテンツ ブラウザでダブルクリックし、Data Table Editor で開きます。

  3. [Data Table Asset (データ テーブル アセット)] パネルの [Add (追加)] をクリックし、新しい行を追加します。各テキスト スタイル用のデータ テーブル アセットの行を作成します。これが、RichTextBlock によってテキスト内で使用する行になります。[Data Table Asset] パネルでは他の処理を行うこともでき、コピー貼り付け複製削除 などが可能です。

    06_AddRows_DTA_TextStyleRowDT.png

  4. [Row Name] セクションのテキスト フィールドでは、各行の名前を変更できます。プレフィックス、キャメル ケースなども使用できます。

    データ テーブル アセットの最初の行の名前は、「Default」に変更することをお勧めします。このように変更するため、この行のスタイルは、割り当てられた RichTextBlock のテキストのデフォルト スタイルとして定義しています。

  5. これらのスタイルに必要なプロパティは、[Appearance] で設定します。

  6. 行の追加が終わったら [Save] をクリックしてデータ テーブル アセットを閉じます。

これらの設定の詳細については、「Rich Text Style Row データ タイプのデータ テーブル アセットに使用するプロパティ」を参照してください。

正しくテキストを表示するため、各 Rich Text Style Row について、データ テーブル アセットのフォントを設定する必要があります。Data Table Editor を開きます。カスタマイズするテキスト行を選択し、[行エディタ] の [Appearance] > [Text Style (テキスト スタイル)] > [Font (フォント)] セクションに移動します。新しいウィンドウで、歯車 アイコンをクリックし、[Show Engine Content (エンジンのコンテンツを表示)] をオンにする必要があります。これにより、Roboto フォント (または好みの別のフォント) を選択できるようになります。

UMG UI デザイナで Rich Text Block ウィジェットを使用する

作成したデータ テーブル アセットは、RichTextBlock ウィジェットに割り当てる必要があります。これにより、Designer Viewport から、データ テーブル アセットの構成済みテキスト スタイルやインライン イメージを使用できるようになります。

Rich Text Block ウィジェットを追加する

Widget ブループリントを作成するには、コンテンツ ブラウザで [Add New] をクリックし、[User Interface (ユーザー インターフェース)] > [Widget Blueprint (ウィジェット ブループリント)] を選択します。

08_CreateWidgetBlueprint.png

左側の [Palette (パレット)] パネルに、[Canvas (キャンバス)] パネルがあります。[Canvas] パネルを Designer Viewport にドラッグします。[Palette] パネルの RichTextBlock を見つけ、このウィジェットを Designer Viewport の Canvas Panel ボックスにドラッグします。RichTextBlock ボックスは、必要に応じて拡大/縮小またはリサイズすることができます。

09_AddRichTextBlockToWB.png

テキスト ボックスはテキスト サイズに合うように自動で伸縮しません。ボックスをテキスト サイズに合うようにリサイズしないと、テキストが途切れて正しく表示されないことがあります。また、コンテンツに対してテキスト ボックスを自動でリサイズするために、[Details (詳細)] パネルの [Set to Content (コンテンツに合わせて設定)] のセクションのチェックボックスをオンにすることもできます。

データ テーブル アセットを Rich Text Block に割り当てる

追加済みの RichTextBlock ウィジェットを選択します。右側の [Details] パネルを利用し、データ テーブル アセットを [Appearance] セクションの RichTextBlock に割り当てることができます。

[Text Style Set (テキスト スタイル セット)] を使用し、Rich Text Style Row のデータ テーブル アセットを RichTextBlock に割り当てます。

10_AssignDTToRTB.png

スタイルをテキストに適用する

前述のとおり、データ テーブル アセットは、RichTextBlock に割り当てる必要があります。以下の手順を実行して、データ テーブル アセットのスタイルをテキストに適用します。

  1. RichTextBlock を選択します。

  2. 右側の [Details] パネル の [Content (コンテンツ)] セクションを見つけます。

  3. [Text (テキスト)] セクションのテキスト フィールドに、テキストを入力します。

表示テキストには、「Default」という名前が付けられたデータ テーブル アセットの行のスタイルが適用されます。たとえば、このテキスト フィールドに「This is some rich text!」と入力した場合は、データ テーブル アセットの「Default」行でカスタマイズされたスタイルを使用してこのテキストが表示されます。

データ テーブル アセットで定義した RichTextBlock のデフォルト テキスト スタイルは、変更できます。[Details] パネルの [Override Default Style (デフォルトのスタイルをオーバーライド)] セクションのチェックボックスをオンにします。これにより、[Default Text Style Override (デフォルト テキスト スタイルをオーバーライド)] セクションで新しいデフォルト テキスト スタイルをカスタマイズできるようになります。

使用しているデータ テーブル アセットの別のスタイルが必要な場合は、そのスタイル行の名前を山括弧で囲み、マークアップを使用して <TextStyleRowName>text</> の形式で入力します (ここで、"TextStyleRowName" は、割り当てたデータ テーブル アセットのテキスト スタイル行の名前であり、"text" は、スタイルを適用する指定行のテキストの一部です)。次はその例です。This is some <RichText.Emphasis>rich</> text! テキストの異なる部分に異なるスタイルを適用できます。

ヒント:データ テーブル アセットの行名の大文字と小文字は、RichTextBlock の行名のタグでは区別されません。

Decorator クラス

Decorator クラス を使用すると、スタイル以外の要素をテキストに含めることができます。Decorator クラスを作成する場合は、独自のマークアップ タグをセットアップできます。これにより、 スレート を使用できるようになります。スレートを使用すると、テキスト内でその他の要素をシームレスにレンダリングできます。

Decorator を使用する

このページでは、RichTextBlockImageRowDecorator クラスを使用し、インライン イメージをテキストに含める方法を例として示します。この例は、カスタムの Decorator クラスの利用を開始するのに役立ちます。

Rich Image Row データ タイプのデータ テーブル アセットが作成済みでなければなりません (上記の「データ テーブル アセットを作成し、割り当てる」のセクションを参照)。また、インスタンスを構成するブループリントとして、RichTextBlockImageRowDecorator を 親クラス に持つサブクラスの ブループリント クラス が必要です。以下の手順を実行して、この操作を行います。

  1. 新しいブループリント クラスを作成するには、コンテンツ ブラウザ で [Add New] をクリックし、[Blueprint Class (ブループリント クラス)] を選択します。

    13_CreateBlueprintClass.png

  2. [Pick Parent Class (親クラスを選択)] ウィンドウで [RichTextBlockImageRowDecorator] を選択し、[Select (選択)] をクリックします。

  3. コンテンツ ブラウザで作成したブループリント クラスをダブルクリックして、ブループリント エディタ で開きます。

  4. [Details] パネルを使用して [Image Set (イメージ セット)] から、このブループリント クラスを Rich Image Row データ タイプのデータ テーブル アセットに割り当てます。

    15_AssignDTAToBC.png

上記のすべてが完了すると、Decorator クラスを RichTextBlock ウィジェットに追加できます。テキスト内でデータ テーブル アセットのインライン イメージを使用するには、以下の手順を実行します。

  1. [Widget Blueprint (ウィジェット ブループリント)] を開きます。

  2. 右側の [Details] パネル の [Appearance] で、[Decorator Classes (Decorator クラス)] セクションを見つけます。

  3. [+] ボタンをクリックし、Decorator クラスに配列要素を追加します。

  4. ドロップダウン リストの作成済みブループリント クラスを選択します。

    16_AddDecoratorClass_to_RTB.png

データ テーブル アセットからインライン イメージを挿入するには、[Details] パネルの [Content] セクションにマークアップ <img id="ImageRowName"/> (ここで "ImageNameFromTable" は割り当てたデータ テーブル アセットの行名) を挿入する必要があります。たとえば、テキスト フィールドに「With <img id="RichText.Logo"/> inline images!」と入力し、[Compile (コンパイル)] をクリックすると、データ テーブル アセットの「"RichText.Logo"」という行でカスタマイズしたインライン イメージを使用してテキストが表示されます。

新規 Decorator を追加する

カスタムの Decorator クラスを定義し、スレートを利用して任意の要素をテキストにインラインで追加することができます。これを行うには、2 つのクラス、URichTextBlockDecorator および FRichTextDecorator を記述する必要があります。これらのクラスをセットアップしてください。これにより、任意の RichTextBlock に 独自の Decorator を追加できるようになります。Decorator クラス配列およびマークアップを使用し、Decorator でテキストを解析します。

URichTextBlockDecoratorSharedPtrFRichTextDecorator に返す CreateDecorator を実装する UObject を定義します。これにより、任意のプロパティおよびユーティリティ関数を実装できます。また、Decorator をブループリントとしてサブクラス化することができるようになります。サブクラスを使用すると、RichTextBlock に必要な任意のデータを追加して使用できます。

なお、RichTextBlockImageDecorator はデータ テーブルのプロパティを定義します。ブループリントで修正するものはすべてこちらの UObject に存在する必要があります。

UMG Rich Text Block の設定

このリファレンス セクションでは、Rich Image Row データ タイプおよび Rich Text Style Row データ タイプを使用し、RichTextBlock ウィジェットとデータ テーブル アセットに設定できるプロパティに関する詳細情報を掲載しています。

Rich Text Block のプロパティ

プロパティ

説明

スロット (Canvas Panel Slot)

Anchors

選択したウィジェットのアンカーの場所を設定します。

  • Minimum - 左と上、最小限のアンカーを保持します。

  • Maximum - 右と下、最大限のアンカーを保持します。

Alignment

Alignment はウィジェットのピボット ポイントです。左上の (0,0) から始まり、右下の (1,1) で終わります。アライメント ポイントを移動することでウィジェットの原点を移動させることができます。

Size To Content

AutoSize が true のとき、ウィジェットで必要となるサイズが使用されます。

ZOrder

選択したウィジェットをレンダリングする優先順位を表します。値が高いと後でレンダリングされ、上部に表示されます。値が低いと初めにレンダリングされ下部に表示されます。

Content (コンテンツ)

Text

ウィジェットに表示されるテキストです。

Appearance (外観)

Text Style Set

データ テーブル アセットを保持して、テキストとイメージ スタイルで使用されるリッチ テキストの装飾を利用可能にします。

Decorator Classes

選択したウィジェットに使用できる Decorator を追加します。

Override Default Style

true に設定すると、このインライン リッチ テキストのデフォルトのテキスト スタイルを指定して、スタイル セット テーブルで与えられているデフォルト値をオーバーライドします。

Default Text Style Override

デフォルトで適用されるテキスト スタイルを設定します。

Min Desired Width

テキストの望ましい最小サイズを設定します。

Transform Policy

このテキスト ブロックに適用するテキスト変換ポリシー。

  • None - 指定されたテキストを変換せずにそのまま使用します。

  • To Lower - テキストを表示用に小文字に変換します。

  • To Upper - テキストを表示用に大文字に変換します。

Justification

テキストのマージンへの揃え方を設定します。

Margin

テキスト領域の周縁部の余白の広さを設定します。

Line Height Percentage

各ラインの高さの縮尺率を設定します。

Clipping (クリッピング)

Clipping

このウィジェットのクリッピングの動作方法を制御します。通常、ウィジェットの境界からはみ出たコンテンツは、引き続きレンダリングされます。クリッピングを有効にすることで、はみ出たコンテンツが見えてしまうのを防ぎます。

  • Inherit - 選択したウィジェットは子をクリッピングせず、自身とすべての子は、最後にクリッピングしたウィジェットのクリッピング領域を継承します。

  • Clip to Bounds - 選択したウィジェットは、このウィジェットの境界でコンテンツをクリッピングします。それらのバウンドは以前のクリッピング領域と交差します。

異なるクリッピング スペースの要素を 1 つにまとめることができないため、クリッピングが適用されるとパフォーマンス上の負荷が発生します。パネルで本当に境界の外側にコンテンツが表示されないようにする必要がある場合を除いて有効にしないでください。

Overflow Policy

このウィジェットの長方形のクリップに収まらない、はみ出したテキストの処理を設定します。

  • Clip - はみ出したテキストは省略されます。

  • Ellipsis - はみ出したテキストは省略記号に置き換えられます。

Wrapping (ラッピング)

Auto Wrap Text

true に設定すると、このウィジェットに対して算出された水平領域に基づいてテキストを自動的に折り返します。

Wrap Text At

テキストがこの幅の値より長いときに新しいラインで折り返すかどうかを決定します。この値がゼロかマイナスの場合は折り返しません。

Wrapping Policy

以下の折返しポリシーが使用されます。

  • Default Wrapping - フォールバックなし。与えられた改行イテレータのみ使用します。

  • Allow Per Character Wrapping - ワードが長すぎる場合に、文字ごとの折り返しにフォールバックします。

Behavior (動作)

Tool Tip Text

ユーザーがウィジェットにマウス カーソルを乗せたときに表示されるツールチップ テキスト。

Is Enabled

ウィジェットがユーザーとのインタラクションで修正可能か否かを設定します。

Visibility

ウィジェットの可視性を設定します。

  • Visible - ウィジェットが表示され、カーソルで操作可能です。

  • Collapsed - ウィジェットは表示されず、レイアウト中のスペースを占有しません。スペースを専有しないのでクリックできません。

  • Hidden - ウィジェットは表示されませんが、レイアウト スペースを専有します。非表示であるため操作できません。

  • Not Hit Testable (Self & All Children) - ウィジェットとその子は表示されますが、カーソルで操作できません。

  • Not Hit Testable (Self Only) - ウィジェットとその子は表示されますが、カーソルで操作できません (子ウィジェットに適用されない以外は Not Hit Testable (Self & All Children) と同じです)。

Render Opacity

ウィジェットのオパシティを設定します。

Tool Tip Widget

ユーザーがウィジェットにマウス カーソルを乗せたときに表示されるツールチップ ウィジェット。

Cursor

マウスをウィジェットに乗せたときに表示されるカーソル。

  • None - マウス カーソルを非表示にします。

  • Default - デフォルトの矢印カーソル。

  • Text Edit Beam - テキストが編集可能であることを示します。

  • Resize Left Right - 水平矢印カーソルをリサイズします。

  • Resize Up Down - 垂直矢印カーソルをリサイズします。

  • Resize South East - 前方 2 方向の矢印カーソルをリサイズ。

  • Resize South West - 後方 2 方向の矢印カーソルをリサイズ。

  • Cardinal Cross - 何かが動いていることを示します。

  • Crosshairs - 通常、選択ボックスを何かの周りでドラッグすることによる、正確な選択を示します。

  • Hand - 指差しが付いた手のカーソルを使用します。

  • Grab Hand - 何かつかめることを示す開いた手のカーソルを使用します。

  • Grab Hand Closed - 何かをつかんだことを示す、閉じた手のカーソルを使用します。

  • Slashed Circle - アクションが完了できないことを示すカーソル。

  • Eye Dropper - 色の選択が可能であることを示します。

Render Transform (レンダリングの変形)

Transform

ウィジェットのレンダリングの変形により、任意の 2D 変形をウィジェットに適用できるようにします。

  • Translation - スレート ユニットでウィジェットを XY 座標で平行移動させる量。

  • Scale - ウィジェットに適用する XY 座標での縮尺量。

  • Shear - ウィジェットに適用する XY 座標での切り取り量。

  • Angle - ウィジェットを回転させる角度数。

Pivot

レンダリングの変形軸が変形の適用される場所を制御します。この値は回転などを行う正規座標です。

Performance (パフォーマンス)

Is Volatile

true に設定すると、ウィジェットやその子ジオメトリまたはレイアウト情報がキャッシュされないようにします。このウィジェットがフレームごとに変化しても [Invalidation (無効化)] パネルで保持したい場合は、フレームごとに無効化する代わりに volatile とマークします。これにより、実際には [Invalidation] パネルで何もキャッシュされないようにします。

Navigation

Left

Left 使用時のナビゲーションを定義します。

  • Escape - このウィジェットの境界をエスケープするためにナビゲーションが可能です。

  • Stop - ナビゲーションは、このウィジェットの境界で止まります。

  • Wrap - ナビゲーションがオブジェクトの反対側の境界で折り返します。

  • Explicit - 特定のウィジェットにナビゲーションを移動します。

  • Custom - カスタム関数により、ウィジェット自体またはその子がナビゲートから離れたときにどのウィジェットがナビゲートされるか決定します。それ自体またはいずれかの子から移動するときに適用されます。

  • Custom Boundary - カスタム関数でどのウィジェットに移動するのかを決定できます。境界にヒットしたときに適用されます。

Right

Right 使用時のナビゲーションを定義します。

  • Escape - このウィジェットの境界をエスケープするためにナビゲーションが可能です。

  • Stop - ナビゲーションは、このウィジェットの境界で止まります。

  • Wrap - ナビゲーションがオブジェクトの反対側の境界で折り返します。

  • Explicit - 特定のウィジェットにナビゲーションを移動します。

  • Custom - カスタム関数により、ウィジェット自体またはその子がナビゲートから離れたときにどのウィジェットがナビゲートされるか決定します。それ自体またはいずれかの子から移動するときに適用されます。

  • Custom Boundary - カスタム関数でどのウィジェットに移動するのかを決定できます。境界にヒットしたときに適用されます。

Up

Up 使用時のナビゲーションを定義します。

  • Escape - このウィジェットの境界をエスケープするためにナビゲーションが可能です。

  • Stop - ナビゲーションは、このウィジェットの境界で止まります。

  • Wrap - ナビゲーションがオブジェクトの反対側の境界で折り返します。

  • Explicit - 特定のウィジェットにナビゲーションを移動します。

  • Custom - カスタム関数により、ウィジェット自体またはその子がナビゲートから離れたときにどのウィジェットがナビゲートされるか決定します。それ自体またはいずれかの子から移動するときに適用されます。

  • Custom Boundary - カスタム関数でどのウィジェットに移動するのかを決定できます。境界にヒットしたときに適用されます。

Down

Down 使用時のナビゲーションを定義します。

  • Escape - このウィジェットの境界をエスケープするためにナビゲーションが可能です。

  • Stop - ナビゲーションは、このウィジェットの境界で止まります。

  • Wrap - ナビゲーションがオブジェクトの反対側の境界で折り返します。

  • Explicit - 特定のウィジェットにナビゲーションを移動します。

  • Custom - カスタム関数により、ウィジェット自体またはその子がナビゲートから離れたときにどのウィジェットがナビゲートされるか決定します。それ自体またはいずれかの子から移動するときに適用されます。

  • Custom Boundary - カスタム関数でどのウィジェットに移動するのかを決定できます。境界にヒットしたときに適用されます。

Next

Next 使用時のナビゲーションを定義します。

  • Escape - このウィジェットの境界をエスケープするためにナビゲーションが可能です。

  • Stop - ナビゲーションは、このウィジェットの境界で止まります。

  • Wrap - ナビゲーションがオブジェクトの反対側の境界で折り返します。

  • Explicit - 特定のウィジェットにナビゲーションを移動します。

  • Custom - カスタム関数により、ウィジェット自体またはその子がナビゲートから離れたときにどのウィジェットがナビゲートされるか決定します。それ自体またはいずれかの子から移動するときに適用されます。

  • Custom Boundary - カスタム関数でどのウィジェットに移動するのかを決定できます。境界にヒットしたときに適用されます。

Previous

Previous 使用時のナビゲーションを定義します。

  • Escape - このウィジェットの境界をエスケープするためにナビゲーションが可能です。

  • Stop - ナビゲーションは、このウィジェットの境界で止まります。

  • Wrap - ナビゲーションがオブジェクトの反対側の境界で折り返します。

  • Explicit - 特定のウィジェットにナビゲーションを移動します。

  • Custom - カスタム関数により、ウィジェット自体またはその子がナビゲートから離れたときにどのウィジェットがナビゲートされるか決定します。それ自体またはいずれかの子から移動するときに適用されます。

  • Custom Boundary - カスタム関数でどのウィジェットに移動するのかを決定できます。境界にヒットしたときに適用されます。

Localization (ローカライゼーション)

Force Direction Preference

新しいフローの方向をセットアップするのに使用します。

  • Inherit - 親ウィジェットで設定されているフロー方向が継承されます。

  • Culture - ウィジェットのレイアウトを開始します。フローの指向性を切り替えて現在のカルチャのレイアウト方向設定を使用します。

  • Left to Right - 左から右へのレイアウト フローを強制します。

  • Right to Left - 右から左へのレイアウト フローを強制します。

Text Shaping Method

選択したウィジェット内で使用されるテキスト シェイピング メソッドを決定します。設定されなければ、Get Default Text Shaping Method によって設定したデフォルト値を使用します。

  • Auto - テキストを読む方向に基づき、可能な限り最速のシェイピング メソッド (KerningOnly または FullShaping) を自動選択します。左から右へのテキストは KerningOnly メソッドを使用します。右から左へのテキストは FullShaping メソッドを使用します。

  • Kerning Only - カーニング データのみを使用した擬似シェイピングを提供します。フル シェイピングより高速ですが、右から左または双方向の複雑な文字 (アラビア文字など) はレンダリングしません。テキスト ブロックがシンプルな文字 (数字など) のみ表示することが分かっている場合の最適化として有用です。

  • Full Shaping - 右から左または双方向の複雑な文字 (アラビア文字など) の正確なレンダリングを可能にする完全なシェイピングを提供します。すべての言語で合字 (リガチャ) による置き換えを提供します (たとえば英語の「fi」を合成した文字)。

Text Flow Direction

選択したウィジェット内で使用されるフロー方向を決定します。設定されなければ、Get Default Text Flow Direction によって設定したデフォルト値を使用します。

  • Auto - テキストのパラグラフごとにフローの方向を自動検出します。

  • Left to Right - テキストが左から右へフローするように強制します。

  • Right to Left - テキストが右から左へフローするように強制します。

Rich Image Row データ タイプのデータ テーブル アセットに使用するプロパティ

以下のデータ テーブル アセットのプロパティを設定し、RichTextBlock ウィジェットで使用されるイメージのスタイルを制御します。

プロパティ

説明

Image

このブラシのレンダリングをするイメージ。UTexture、UMaterialInterface、AtlasedTextureInterface を実装するオブジェクトをアセットとして割り当てることができます。

Image Size

スレート ユニットでのリソースのサイズ。

Tint

イメージに適用される色合い。

Draw As

イメージの描画方法。

  • None- 何もしません。

  • Box - マージンに基づいて側面と真ん中のストレッチ位置に 3x3 サイズのボックスを描画します。

  • Border - 側面と真ん中のタイルが空な位置に 3x3 サイズの境界を描画します。

  • Image - イメージを描画します。マージンは無視します。

  • Rounded Box- 輪郭と角の丸みがあるソリッド矩形を描画します。

Tiling

Image モードで画像をタイル処理する方法。

  • No Tile - 伸縮のみ。

  • Horizontal - イメージを水平にタイル処理します。

  • Vertical - イメージを垂直にタイル処理します。

  • Both - イメージを両方向にタイル処理します。

Preview

プレビュー ボックスでのイメージの表示方法を設定します。

Horizontal Alignment:

  • Fill - イメージがプレビュー ボックスを水平に埋めます。

  • Left - イメージがプレビュー ボックスに対して左揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Right - イメージがプレビュー ボックスに対して右揃えになります。

Vertical Alignment:

  • Fill - イメージがプレビュー ボックスを垂直に埋めます。

  • Top - イメージがプレビュー ボックスに対して上揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Bottom - イメージがプレビュー ボックスに対して下揃えになります。

Rich Text Style Row データ タイプのデータ テーブル アセットに使用するプロパティ

以下のデータ テーブル アセットのプロパティを設定し、RichTextBlock ウィジェットで使用されるテキストのスタイルを制御します。

プロパティ

説明

Font (フォント)

Font Family

フォント オブジェクト (UMG または スレート ウィジェット スタイル アセットから使用されたときに有効)

Typeface

デフォルトの書体から使用されるフォント名。初期状態で何も選択されていなければ、最初のエントリ (太字) が使用されます。

Size

ポイント値のフォント サイズが単位になります。ポイントからスレート ユニットへの変換は 96 dpi で実行します。このため、レイアウトや UI のモックアップのプロトタイプ作りに Photoshop のようなツールを使用している場合、デフォルトの dpi 測定値を 72 dpi から 96 dpi に変更してください。

Font Material

フォントのレンダリング時に使用するマテリアル。

Outline Settings

輪郭をフォントに適用するための設定。

  • Outline Size - スレート ユニットでの輪郭のサイズ (フォント スケール 1.0、単位はピクセル)。

  • Separate Fill Alpha - true に設定すると、埋めた領域の輪郭は完全に半透明になります。別個に埋めるアルファ値の使用が可能になります。この機能を有効にした場合のトレードオフは、内側の輪郭の境界が埋めた領域と重なる完全に不透明で埋めた部分で画質が若干低下することです。

  • Apply Outline to Drop Shadows- true に設定すると、このフォントを使用するドロップ シャドウに輪郭が適用されます。

  • Outline Material- 輪郭に適用するオプションのマテリアルを設定します。

  • Outline Color - このフォントの文字の輪郭のカラー。

Color

テキストのカラーとオパシティ。

Shadow Offset

シャドウがオフセットされる量を設定します。オフセットが 0 はシャドウがないことを表します。

Shadow Color and Opacity

シャドウの色と不透明性。

Shadow Background Color

選択したテキストの背景色。

Highlight Color

ハイライトしたテキストの色。

Transform Policy

テキスト変換ポリシー (デフォルトは None)。

Overflow Policy

Text ウィジェットの長方形のクリップに収まらない、クリップされたテキストの処理を決定します。

Highlight Shape (ハイライトの形状)

Image

このブラシのレンダリングをするイメージ。UTexture、UMaterialInterface、AtlasedTextureInterface を実装するオブジェクトをアセットとして割り当てることができます。

Image Size

スレート ユニットでのリソースのサイズ。

Tint

イメージに適用される色合い。

Draw As

イメージの描画方法。

  • None- 何もしません。

  • Box - マージンに基づいて側面と真ん中のストレッチ位置に 3x3 サイズのボックスを描画します。

  • Border - 側面と真ん中のタイルが空な位置に 3x3 サイズの境界を描画します。

  • Image - イメージを描画します。マージンは無視します。

  • Rounded Box- 輪郭と角の丸みがあるソリッド矩形を描画します。

Tiling

Image モードで画像をタイル処理する方法。

  • No Tile - 伸縮のみ。

  • Horizontal - イメージを水平にタイル処理します。

  • Vertical - イメージを垂直にタイル処理します。

  • Both - イメージを両方向にタイル処理します。

Preview

プレビュー ボックスでのイメージの表示方法を設定します。

Horizontal Alignment:

  • Fill - イメージがプレビュー ボックスを水平に埋めます。

  • Left - イメージがプレビュー ボックスに対して左揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Right - イメージがプレビュー ボックスに対して右揃えになります。

Vertical Alignment:

  • Fill - イメージがプレビュー ボックスを垂直に埋めます。

  • Top - イメージがプレビュー ボックスに対して上揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Bottom - イメージがプレビュー ボックスに対して下揃えになります。

Strike Brush

Image

このブラシのレンダリングをするイメージ。UTexture、UMaterialInterface、AtlasedTextureInterface を実装するオブジェクトをアセットとして割り当てることができます。

Image Size

スレート ユニットでのリソースのサイズ。

Tint

イメージに適用される色合い。

Draw As

イメージの描画方法。

  • None- 何もしません。

  • Box - マージンに基づいて側面と真ん中のストレッチ位置に 3x3 サイズのボックスを描画します。

  • Border - 側面と真ん中のタイルが空な位置に 3x3 サイズの境界を描画します。

  • Image - イメージを描画します。マージンは無視します。

  • Rounded Box- 輪郭と角の丸みがあるソリッド矩形を描画します。

Tiling

Image モードで画像をタイル処理する方法。

  • No Tile - 伸縮のみ。

  • Horizontal - イメージを水平にタイル処理します。

  • Vertical - イメージを垂直にタイル処理します。

  • Both - イメージを両方向にタイル処理します。

Preview

プレビュー ボックスでのイメージの表示方法を設定します。

Horizontal Alignment:

  • Fill - イメージがプレビュー ボックスを水平に埋めます。

  • Left - イメージがプレビュー ボックスに対して左揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Right - イメージがプレビュー ボックスに対して右揃えになります。

Vertical Alignment:

  • Fill - イメージがプレビュー ボックスを垂直に埋めます。

  • Top - イメージがプレビュー ボックスに対して上揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Bottom - イメージがプレビュー ボックスに対して下揃えになります。

Underline Brush

Image

このブラシのレンダリングをするイメージ。UTexture、UMaterialInterface、AtlasedTextureInterface を実装するオブジェクトをアセットとして割り当てることができます。

Image Size

スレート ユニットでのリソースのサイズ。

Tint

イメージに適用される色合い。

Draw As

イメージの描画方法。

  • None- 何もしません。

  • Box - マージンに基づいて側面と真ん中のストレッチ位置に 3x3 サイズのボックスを描画します。

  • Border - 側面と真ん中のタイルが空な位置に 3x3 サイズの境界を描画します。

  • Image - イメージを描画します。マージンは無視します。

  • Rounded Box- 輪郭と角の丸みがあるソリッド矩形を描画します。

Tiling

Image モードで画像をタイル処理する方法。

  • No Tile - 伸縮のみ。

  • Horizontal - イメージを水平にタイル処理します。

  • Vertical - イメージを垂直にタイル処理します。

  • Both - イメージを両方向にタイル処理します。

Preview

プレビュー ボックスでのイメージの表示方法を設定します。

Horizontal Alignment:

  • Fill - イメージがプレビュー ボックスを水平に埋めます。

  • Left - イメージがプレビュー ボックスに対して左揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Right - イメージがプレビュー ボックスに対して右揃えになります。

Vertical Alignment:

  • Fill - イメージがプレビュー ボックスを垂直に埋めます。

  • Top - イメージがプレビュー ボックスに対して上揃えになります。

  • Center - イメージがプレビュー ボックスの中央に配置されます。

  • Bottom - イメージがプレビュー ボックスに対して下揃えになります。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル