はじめに
Unreal Engine（以下UE）は、初心者でも直感的にゲームやCGを開発できる強力なツールです。
本記事では、UEの画面上にUIを表示させる方法を学びます。
本記事の目的
- Unreal Engineで画面上にUIを表示させる方法を身に着ける
- 初心者でも理解しやすいBlueprintを活用する
本記事で得られるスキル
- Blueprintを使ってUIを作成するテクニック
UEの基本を押さえていきましょう！
Blueprintを使ってUIを表示させる基本テクニック
プロジェクトの作成
プロジェクトは最初の記事で作成したものをそのまま使用します。
UIを作成する方法
今回は画面上の任意の場所にテキストと画像を配置してみたいと思います。
まずはプロジェクトを開いて、追加ボタンからユーザーインターフェース＞ウィジェットブループリントを選択します。
以下のようなウィンドウが表示されるので、ユーザーウィジェットをクリックします。
NewWidgetBlueprintが新規で生成されます。
NewWidgetBlueprintをダブルクリックします。
すると以下の画面が立ち上がるため、左にあるパネル＞キャンパスパネルを右にドラッグアンドドロップします。
次に左の一般＞テキストと一般＞画像を左にドラッグアンドドロップします。
こんな感じで配置しました。
次にテキストブロックの文字を変えていきます。
今回はミルクレープと書きます。（なんでもいいです）
左にあるDetailタブのコンテンツ＞テキストの欄にミルクレープと記載します。
そうすると先ほど追加したテキストウィジェットの文字がミルクレープに変化しましたね。
次にミルクレープの画像を貼っていきます。
コンテンツドロワーのインポートをクリックします。
今回はミルクレープの画像をインポートします。（適当なフリー画像などを使用してください。）
すると以下のように画像のテクスチャが生成されます。
この画像を先ほど追加した画像のウィジェットに追加していきます。
そのあとDetailタブにあるBrushのフォルダマークをクリックします。
コンテンツドロワーが表示されるので、先ほどインポートした画像をクリックしてフォルダマークの左にある矢印をクリックします。
すると以下のように画像ウィジェットにミルクレープの画像が適用されます。
最後にコンパイルと保存をしたら、ウィジェットブループリントの設定は終わりです。
次にブループリントでこのウィジェットが画面に表示されるように設計していきます。
マップ上にあるブループリントのマークを押してレベルブループリントを開くを選択します。
レベルブループリントというのはレベル（マップ）ごとに設定するブループリントです。
（レベル全体で何かを制御したりする際によく使用します）
次にイベントグラフ上のBeginPlayノードからピンを伸ばし、Create Widgetを検索します。
クラスを選択をクリックし、先ほど作成したNewWidgetBlueprintを選択します。
次にReturn Valueからノードを伸ばしAdd Viewportを検索します。
こんな感じになっていればOKです。
これはBeginPlayで先ほど作成したウィジェットを呼び出し、Viewport（画面）に反映させるという処理です。
ではコンパイルと保存をして実行してみましょう。
結果
テキストと画像をViewportに表示させることができました。
UEの画面上にUIを表示させる方法の説明は以上です。
まとめ
本記事では、Blueprintを使ってUEの画面上にUIを表示させる方法について学びました。
今後もUnrealEngine超初心者向けに役立つ記事を書いていきたいと思います。
コメント