59.UMGでテキストを表示してみよう

今回実装する機能↓

では、UI作成の基本的な流れを掴むために以下のようなテキストのUIをUMGで作成してみましょう。

https://scrapbox.io/files/65c8b9302533810023002b9c.gif

①UMGでテキストを作成してみよう

何でも良いですが今回もサードパーソンのプロジェクトを使用していきます。

フォルダを作成して名前をUIにします。

https://scrapbox.io/files/65c8bb5b218698002600d18a.jpg

その中で右クリック > ユーザーインターフェース > ウィジェットブループリントを選択します。

https://scrapbox.io/files/65c8bb7d16d70b00259d5edf.jpg

UserWidgetを選択します。

https://scrapbox.io/files/65c8bba25ef9f10024fc6761.jpg

作成できたらMyUIという名前にしておきます。

https://scrapbox.io/files/65c8bbc75092d2002549dd0b.jpg

このアセットは？

これがウィジェットブループリントと呼ばれるUIの構成を決定するアセットになります。

https://scrapbox.io/files/65c8bc31e30a00002466fa06.jpg

ウィジェットブループリントエディタとは？

ウィジェットブループリントエディタではウィジェットを組んでいきます。ウィジェットとはUIを構成するパーツの事です。例えばテキストとかボタンなどのUIのパーツがウィジェットになります。

ではまずはCanavasPanelを設置しましょう。パネル > CanavasPanelをドラッグでどこでもよいので追加します。

https://scrapbox.io/files/65c8bd4b7ab6d5002499fa84.jpg

CanavasPanelとは？

CanavasPanelはUIを作成するための枠組みとなるウィジェットです。ゲームプレイ時の画面の枠にあたる部分が上画像の緑のラインになります。基本的にUIを作成する時にはこのCanvasを設置してからUIを作成していきます。また後ほど紹介するのですが、アンカーというUIのポジションを決める際に必要な設定もCanvasを事前に設置しておく必要があります。

🐱シンプルにウィジェットブループリントエディタでUIを作成する一番最初にCanvasパネルを設置するものだと覚えておきましょう。「CanavasPanel = UIの枠組み」です。

操作方法はブループリントエディタと同じですが、右クリックで画面を移動できてスクロールで拡大縮小できます。

https://scrapbox.io/files/65c8bda389b3870025b48e88.gif

次に一般 > Textをドラッグで追加します。

https://scrapbox.io/files/65c8bdd42717320024eab029.jpg

Textウィジェットとは？

Textウィジェットは画面上に表示するテキストになります。大きさやフォントなどを設定できます。

また階層パネルでも確認しましょう。CanvasPanelの下にTextウィジェットが配置されているのが確認できます。

https://scrapbox.io/files/65c8be3866a4cd00251b8935.jpg

🐱このようにCanvasPanelの下にウィジェットは配置しています。階層パネルに直接ウィジェットをドラッグで配置する事もできます。

テキスト内容を変更しましょう。テキストをクリックして選択した状態で詳細からコンテンツ > Textの内容をHelloWorldに変更します。

https://scrapbox.io/files/65c8c108ef3f6700244c258a.jpg

さらに大きさを変更します。アピアレンス > Font > Sizeを適当に80ぐらいにします。

https://scrapbox.io/files/65c8c12ca8bd11002361473b.jpg

緑枠の部分をドラッグするとTextウィジェットを移動できるので、大体でよいのでCanvasPanelの枠組みの中央になるようにセットします。

https://scrapbox.io/files/65c8c165dc3d230025939856.gif

コンパイルします。今回のUIはこれで完成なのであとは画面上に表示するだけです。

https://scrapbox.io/files/65c8c1b46dbab60025987128.jpg

😺ではUIが作成できたので今度はこのUIをゲーム画面で表示してみましょう。表示するにはブループリントでノードを組んでいきます。

②作成したUIをゲームで表示する

ではウィジェットブループリントで作成したUIをゲーム画面上に表示させましょう。表示させる方法はブループリントでノードを組んでいく必要があります。

レベルブループリントを開きます。

https://scrapbox.io/files/65c8c21ccde84c0024fb1685.jpg

UIを表示させるブループリントはどこに作るべき？

特に指定はありませんが、基本的にはレベルブループリントやゲームモードが良いかと思います。他にも例えばプレイヤーのHPバーなどはプレイヤーのブループリントクラスに作成しても構いません。

https://scrapbox.io/files/65c8c24b9a186b0025a407db.jpg

ウィジェットを作成ノードのClassに作成したMyUIを選択します。

https://scrapbox.io/files/65c8c2d347f23d002df47f37.jpg

ウィジェットを作成ノードとは？

ウィジェットを作成ノードとは作成したウィジェットブループリントのアセットをゲーム上に作成するノードです。

さらにAddtoViewportノードを作成して接続します。

https://scrapbox.io/files/65c8c39aa263ce0025c0748c.jpg

AddtoViewportノードとは？

AddViewportは作成したUIを画面上に追加するノードです。

🐱作成したUIを表示するにはこの「ウィジェットを作成」ノードと、「AddtoViewport」ノードをセットで使用すると覚えておきましょう、

コンパイルしてプレイします。画面中央あたりにテキストが表示されてるのが確認できます。(ビューポートの画面サイズによって位置がちょっと違う可能性があります)

https://scrapbox.io/files/65c8b9302533810023002b9c.gif

テキストが表示されてUIの作成は完了です。

🐱UI作成の流れとしてはこんな感じです。今後の実践では色々なウィジェットを組み合わせて、HPバーとかスコアとかメニュー画面とかを作っていきます。

まとめ

UnrealEngineでUIを作成する主流の方法としてUMGと呼ばれる方法があります。まずウィジェットブループリントというアセットを作成して、そこの中でウィジェットというUIのパーツを組み合わせてUIを作成していきます。UIを作成したらブループリントでゲーム画面上に表示させるというのが基本的な流れになります。

このUIを表示させるためのノード↓は今後もずっと使用していくので覚えてしまいましょう。

https://scrapbox.io/files/65c8c4784b5871002415799c.jpg

😺次回からエディタの見方やどんなウィジェットがあるのか、ボタンを押したら処理させたい場合にはどうすればよいのか？など基本的なウィジェットについて解説していきます。今回は以上です。お疲れ様でした。