October 3, 2018

Rich Text Block を使ったテキストの高度なスタイル設定

作成 Cody Albert

ゲームの UI に取り組むとき、UMG の一般的なテキスト ブロックには、さまざまなスタイルのオプションやカスタマイズが用意されています。しかし、多くのデベロッパーは、スタイルの変更、インライン イメージ、ハイパーリンクなどのマークアップをサポートする、より柔軟なテキストが必要であると感じています。その多くが、試験的に採用された Rich Text Block ウィジェットにより、コードを通じて可能になっています。

4.20 リリースでは、このウィジェットが UMG で利用可能になり、その過程で、ワークフローの柔軟性、拡張性が以前と比べて向上しました。デベロッパーが必要とする可能性があるすべてのカスタマイズをサポートするのではなく、Rich Text Block が Decorator クラスに対応するようにして、デベロッパー自身がプロジェクトに必要なマークアップ機能を定義できるようにしました。独自のデコレーターを設定する例として、RichTextBlockImageDecorator.cpp に Decorator クラスが 1 つ用意されています。

この記事では、UI デザイナーとプログラマーのみなさんが UMG で新しい Rich Text Block ウィジェットを活用する方法を紹介します。また、Decorator クラスを使用して、追加機能でウィジェットを拡張する方法についても説明します。独自のカスタマイズを追加する前に、UMG に追加された Rich Text Block 機能について理解しておくと役立ちます。Rich Text Block ウィジェットを使用すると、テキスト スタイルやデコレーターを使用して、ブロックのコンテンツをカスタマイズできます。このとき、データ テーブル アセットや独自の Decorator クラスを使用できます。

データ テーブル アセットを作成したら、ユーザーが定義する任意の構造体に基づいて任意のタイプのデータを格納できます。データ テーブルを作成すると、2 つの構造体が用意されていることがわかります。Text Style RowImage Row です。Text Style Row 構造体は、Rich Text Block のビルトイン スタイルの一部であり、フォントのタイプ、たとえばアウトラインの有無、色、サイズなどを定義できます。Image Row は、RichTextBlockImageDecorator サンプル クラスに含まれ、Rich Text Block ウィジェットで任意の Decorator クラスを指定できるようにします。Text Style Row 構造体と同様に、Image Row を使用すると、インライン イメージのプロパティ、たとえばサイズのスケーリング、ティント、アライメントなどを定義できます。

RichTextBlockImageDecorator サンプル クラスは、独自のマークアップ テキストを作成するための出発点となります。そのマークアップ テキストは、イメージ、ハイパーリンク、ウィジェット全体など、任意のスレート コンテンツと置き換えることができます。データ テーブルは、任意のタイプのデータを格納でき、また Data Table アセットを通じてエディタで設定できます。

作業の開始

最初に、新しい Widget ブループリントを作成し、パレットを使用して Rich Text Block をキャンバスまでドラッグします。Rich Text Block を選択した状態で、[Details (詳細)] パネルで [Text Style Set (テキスト スタイル セット)] を見つけます。このアセット割り当てスロットにより、テキスト スタイルと、追加で使用したい任意のスタイルを定義する、スタイルのデータ テーブルを渡すことができます。新しいデータ テーブルの作成に進むには、この割り当てドロップダウンから [Data Table (データ テーブル)] を選択するか、コンテンツ ブラウザを使用して [Add New (新規追加)] - [Miscellaneous (その他)] - [Data Table (データ テーブル)] の順に選択します。
Rich-Text-Block_1.png

データ テーブルの作成は、UMG の [Details (詳細)] パネル内で行うことができます。[Pick Structure (構造体の選択)] ウィンドウのドロップダウンで、行の構造体として [Rich Text Style Row (リッチ テキスト スタイル行)] を選択します。
Rich-Text-Block_2.png

UMG の [Details (詳細)] パネルで新しいデータ テーブルをダブルクリックするか、コンテンツ ブラウザから新しいデータ テーブルを開きます。まず、データ テーブル エディタで「Default」という新しい行を作成します。この行は、テキストのデフォルト状態を表し、Rich Text Block でテキストに明示的に別のスタイルが設定されていない場合に自動的に使用されます。
Rich-Text-Block_3.png

新規に作成した Default 行の下にあるオプションを確認し、フォント、サイズ、書体などについて、ベースラインとなるスタイルを設定します。設定を完了したら、スタイルを追加していきます。[+] (プラス) ボタンをクリックして新しい行を追加し、[Row Name (行名)] テキスト ボックスに名前を入力します。

データ テーブル アセットが割り当てられた Widget ブループリントに戻り、[Details (詳細)] パネルで Rich Text Block の [Text (テキスト)] セクションにテキストを追加します。
Rich-Text-Block_4.png

場合によっては、Rich Text Block ウィジェットにテキストを表示するために、UMG のツールバーで [Compile (コンパイル)] ボタンをクリックする必要があります。
Rich-Text-Block_5.png

ここに示すテキストは、設定した Default 行を使用しています。データ テーブル アセットで作成した別のスタイルを適用するには、テキストを次のように囲みます。
<stylename>Text</>
Rich-Text-Block_6.png

この例では、データ テーブル ア