目次
はじめに
RichTextBlockウィジェットを使い、文章の中に画像を埋め込む方法についてなるべく丁寧に解説します。
参考にしたドキュメントwww.unrealengine.com
個人の備忘録としてまとめています。誤った情報がある場合があります。
コメントにてご指摘のほどお願いいたします。
UE5.6で解説します。
解説
⓪ Widgetの用意
コンテンツブラウザを右クリックしユーザーインターフェース->ウィジェットブループリント、
UserWidgetを選択します。
名前はW_Sampleとしました。
① Rich Text Blockの追加
Canvas Panel - Rich Text Block と追加します。
この状態ではセットアップ前なのでTextを入力してもうまく表示されません。
② Textを表示できるようにする
1 - Rich Text Block の作成 -
Rich Text Block でTextを表示できるようにアセットをセットアップしていきます。
コンテンツブラウザを右クリックしその他->データテーブルを選び、
RichTextStyleRowを選択
名前はDT_TextStyleとしました。
2 - Rich Text Block の編集 -
データテーブルを開き追加ボタンから行を追加します。
任意の名前（Default）をつけ表示したいフォント・色などプロパティを設定します。
また、強調したい文字として新しい行Redを作成し、文字サイズや色を変更しました。
3 - Rich Text Block の登録と使い方 -
W_Smapleウィジェットに戻りRichTextBlockのプロパティにTextStyleSetに作成したデータテーブルを登録します。
コンパイルを押すことで反映されます。
このときに反映されるTextはDefaultで登録した行の内容です。
4 - 部分的なStyleの変更 -
サンプルの部分だけ別のStyleを使うようにしてみましょう。
これは<Red>サンプル</>です。
Textへ以下のように設定することで部分的に変更できます。
<TextStyleSetの行の名前>内容</>
③ Textに画像を表示できるようにする
1 - Rich Image Rowの作成 -
TextStyleと同様に
コンテンツブラウザを右クリックしその他->データテーブルを選び、
RichImageRowを選択します。
名前はDT_ImageRowとしました。
2 - Rich Image Rowの編集 -
行を追加し、行の名前とそれに応じた画像を指定します。
今回はキーマッピングを示す画像を入れてみました。
3 - RichTextBlockImageDecoratorの作成 -
TextStyleとは異なりRichImageRowを利用するにはデコレーターを経由する必要があります。
コンテンツブラウザを右クリックしブループリントクラスを選択し、
RichTextBlockImageDecoratorを選択します。
名前はB_ImageDecoratorとしました。
4 - RichTextBlockImageDecoratorの編集 -
作成したB_ImageDecoratorを開きクラスのデフォルトからImage SetにDT_ImageRowを登録します。
5 - RichTextBlockImageDecoratorの登録 -
W_Smapleに戻りDecorator Classesにデコレーターブループリントを指定します。
6 - 使い方 -
実際に画像を反映してみましょう。
ジャンプは<img id="SP"/>です。
Textへ以下のように設定することで部分的に変更できます。
<img id="RichTextTyleRowの行の名前"/>
7 - サイズ変更 -
テキスト中にタグを使って一時的にサイズを変えることも可能です。
ジャンプは<img id="SP" width="80" height="30" stretch="ScaleToFill"/>です。
Textへ以下のように設定することで変更できます。
完全一致でパースしているのでタイポに気を付けましょう。
<img id="RichTextTyleRowの行の名前" width="幅" height="高さ" stretch="拡縮モード"/>
利用可能な項目はRichTextBlockImageDecorator.cppから確認可能で、もちろん自作することもできます。
・元画像サイズで出したい
<img id="行の名前" width="desired" height="desired"/>
・ 幅だけ固定して、縦横比を保って収めたい
<img id="行の名前" width="48" stretch="ScaleToFit"/>
・ボックスいっぱいに引き伸ばしたい（縦横比は気にしない）
<img id="行の名前" width="256" height="64" stretch="Fill"/>
最後に
Textの文字列を変えることで登録されている画像であれば動的に変更することも可能です。ぜひ活用してみましょう！
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやX（Twitter）のフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
