こんにちは、ちょこです。
ここではUE5の超初歩的な操作方法を書き残しておきます。
今回はUMG (Unreal Motion Graphics) を利用して、画面にテキストを表示する方法を紹介します。
ざっくり手順です！
- 1：ウィジェットブループリントを作成
- 2：「Canvas Panel」を作成
- 3：「Text」ウィジェットを作成
- 4：「Text」ウィジェットの詳細を設定
- 5：ウィジェットブループリントをコンパイルする
- 6：レベルブループリントを作成
- 7：Create Widgetノードを作成し、設定する
- 8：テキストを表示する条件を設定する
- 9：レベルをプレイ
- 10：テキストの表示を確認
1：ウィジェットブループリントを作成
まずはウィジェットブループリントを作成し、テキストを配置します。
ウィジェットブループリントはコンテンツブラウザの「+追加」から作成できます。
今回は「ThirdPerson」フォルダの中にウェジェットブループリントを作成します。
「ThirdPerson」フォルダを選択し、「+追加」ボタンを押してください。
下位階層から「ユーザーインターフェイス」を選択します。
続いて「ウィジェットブループリント」を選択します。
ダイアログが開くので「User Widget」を選択してください。
これでウィジェットブループリントが作成されます。
 |
称号【ウィジェットブループリントを作りし者】を獲得！ |
今回は作成したウィジェットブループリントの名前を「SampleUI」にします。
サムネイルを右クリックし、「名前変更」のメニューを選択すると、ウィジェットブループリントの名前を変更できます。
|
称号【ウィジェットブループリントの名前を変えし者】を獲得！ |
2：「Canvas Panel」を作成
作成したウィジェットブループリントこと「Sample UI」を編集していきます。
「Sample UI」をダブルクリックし、ウィジェットブループリントエディタを開きます。
ウィジェットブループリントを開いたら、キャンバスが作られているか確認してください。もし作られていないようであれば「Canvas Panel」を作成してください。
※すでにキャンバスが作られている場合は手順をスキップしてください。
ローカル環境なのかバージョンのせいなのか仕様なのか分かりませんが、デフォルトでキャンバスが作られていないケースがあります。
|
称号【Canvas Panelを作りし者】を獲得！ |
3：「Text」ウィジェットを作成
次に「Text」ウィジェットを作成します。
キャンバスパネルの下位階層に「Text」ウィジェット配置してください。
|
称号【テキストを配置せし者】を獲得！ |
4：「Text」ウィジェットの詳細を設定
「Text」ウィジェットを配置したら、今度は詳細設定を編集していきます。
設定項目の上から順に進めます。まずはアンカーが画面中央にくるように設定します。
方眼紙の真ん中にブロックがあるサムネイルを選択してください。
|
称号【アンカーを設定せし者】を獲得！ |
次にウィジェットの名前も変更します。
今回は「HelloWorld」と入力してください。
|
称号【ウィジェット名を変えし者】を獲得！ |
続いて、テキストウィジェットをウィジェットサイズに合わせるように設定します。
「Size To Content」のチェックボックスにチェックを入れてください。
|
称号【ウィジェットをコンテンツのサイズにあわせし者】を獲得！ |
更に、表示するテキストの内容を変更します。
ここでは「Hello World」と入力します。
|
称号【テキストの文字列を変えし者】を獲得！ |
テキストの文字色も変更します。
色が付いた矩形をダブルクリックして、任意の色に設定してください。
|
称号【テキストの色を変えし者】を獲得！ |
テキストのサイズも変更します。
ここでは「56」ポイントにしました。
|
称号【テキストのサイズを変えし者】を獲得！ |
テキストの詳細を設定が完了したら、こんな感じでテキストが表示されると思います。
5：ウィジェットブループリントをコンパイルする
最後にウィジェットブループリントをコンパイルして終了です。
画面右上のコンパイルのアイコンをクリックします。
▲未更新の処理があった場合はハテナアイコンが表示されます
黄色いハテナアイコンから緑のチェックアイコンに更新されたらコンパイルは成功です。
▲コンパイルが成功したらチェックアイコンに変わります
これでウィジェットブループリントの編集は終了です。
お疲れ様でした。
|
称号【コンパイルを成功させし者】を獲得！ |
6：レベルブループリントを作成
テキストデータを作ったら、次はテキストを表示させる条件を設定します。
画面上部の遷移図のようなアイコンから、レベルブループリントエディタを開きます。
すると、レベルブループリントエディタが別ウィンドウで表示されます。
▲エディタを開いた直後はこんな状態になるかと思います
|
称号【レベルブループリントエディタを開きし者】を獲得！ |
7：Create Widgetノードを作成し、設定する
レベルブループリントエディタ―上で右クリックをして、ノードの検索窓を表示。
検索フィールドに「Create Widget」と入力し、Create Widgetノードを検索します。
表示された「ウィジェットを作成」のテキストを選択するとCreate Widget ノードが作成されます。
|
称号【Create Widgetノードを作りし者】を獲得！ |
作成されたCreate Widget ノードを見てみます。
これだけだと意味をなさないため、Create Widget ノードに設定を入力します。
まずはClassには「SampleUI」を設定してください。
これでCreate Widget ノードが、Classセクションで指定されている Widget ブループリントを呼び出しています。
次に、Return Value を右クリックし、「変数へ昇格」を選択します。
Setノードが作成されます。
作成されたSetノードの変数名を「NewVar」から「SampleUI」に変更します。
|
称号【Set ノードを作りし者】を獲得！ |
さらに、Set ノードからAdd to Viewportを接続します。
Set ノードから線を伸ばし、「Add to Viewport」を検索。
Set ノードと Add to Viewport ノードを繋ぎます。
Add to Viewport は Widget ブループリントを画面に描画するものです。
これで画面に描画する準備ができました。
もっと詳しく知りたい方は、以下の公式ドキュメントに情報が集約されています。
Unreal Engine でのウィジェットの作成 | Unreal Engine 5.1 ドキュメント
|
称号【Add to Viewport ノードを作りし者】を獲得！ |
8：テキストを表示する条件を設定する
もうひと頑張りです！
最後にテキストを表示する条件を設定します。
ここではキーボードのEnterキーを押してる間だけ表示されるように設定します。
レベルブループリントエディタ上で右クリックをし、「Enter」を入力。
Enter Keyboard Event」を検索します。
キーボードのアイコンとEnterと書かれたノードが作成されます。
|
称号【EnterKeyboard Eventノードを作りし者】を獲得！ |
EnterのノードとCreate Widget ノードを繋ぎます。
続いて、エンターボタンが押されていない時の処理も設定します。
エンターキーを離すと、SampleUIを非表示にする、という条件を設定します。
まず、Ctrlを押しながら、「SampleUI」をエディタ上にドラッグアンドドロップします。
「SampleUI」の変数がエディタ上に表示されたらOKです。
|
称号【変数のノードを作りし者】を獲得！ |
「Sample UI」のノードから線を伸ばし、検索フィールドに「Remove from Parent」を入力します。
Remove from Parent ノードを設置したら、Enter ノードとRemove from Parent ノードを繋ぎます。下の図のようになればOKです。
|
称号【Remove from Parent ノードを作りし者】を獲得！ |
最後にコンパイルも忘れずに行ったら、レベルブループリントエディタを終了してください。
9：レベルをプレイ
プロジェクトに戻り、レベルをプレイして処理を確認します。
画面上部にある、レベルプレイのアイコンをクリックします。
レベルをプレイするビュー（シミュレーション）に切り替わります。
10：テキストの表示を確認
Enterキーを押してる間は「Hello World」が表示され、Enterキーを離したら「Hello World」の表示が消えたらOKです！
|
称号【テキストを表示せし者】を獲得！ |
以上です。お疲れさまでした。
これでUIで文字を表示する基礎は出来たかと思います。
環境
- UE5.1.1
- Windows 11
自分用メモ：BeginPlay ノードを表示条件にした場合、ゲームプレイ直後からテキストが表示される。
この記事は以下の公式ドキュメントを参考にしました。
