こんにちは。
株式会社アドグローブ ゲーム事業部エンジニアの影島です。
今回はUnreal EngineにおけるUIの作り方について紹介します。
自分への覚え書きの意味も込めてUI作成の基礎中の基礎を書こうと思います。
はじめに
基本的なUI作成の手順を書いていきます。
ファイルを作成するところから画面に表示するまでの一連の流れが分かるようにしようと思います。
また最後には汎用的なゲームUIの作成例も併せて紹介します。
※Engineバージョン5.0.3を使用しており同環境での開発を想定してます。
Unreal EngineでのUI作成について
UIはウィジェットブループリント（以下ウィジェット）を使用して作っていきます。
ウィジェットでは画像やテキスト等を配置したりアニメーションを作ることができます。
フェードやスライドなどUIトランジションはここで簡単に作れます。
編集ウィンドウではデザインとグラフで画面の切り替えができ、デザイン側でUI配置、グラフ側でブループリントの記述を行います。
クラスの設定では親クラスやインターフェースの指定ができ、C++で用意したものも設定が可能です。
UI作成手順
ウィジェットの作成
コンテンツブラウザの追加または右クリックで「ウィジェットブループリント」を選択することで作成できます。
この時に親クラスを指定することができます。
デフォルトはUser Widgetで「すべてのクラス」から選択できるクラスの一覧を表示したり検索できます。
C++で作られたクラスがあればここの一覧に表示されます。
親クラス選択 UIの配置
基本的にオブジェクトの座標を指定する場合は「Canvas Panel」をルートに置いてその下に各UIを配置します。
試しに画像とテキストを表示するために「Image」と「Text」を配置してみます。
調整をする場合は詳細ウィンドウで座標や各種パラメータの設定します。
UI配置 ゲーム画面に表示
ゲーム画面に表示するには用意したウィジェットを生成する必要があります。
その方法はいくつかありますが、今回はブループリントを使ったものを紹介します。
Actorのブループリントを用意し、開始時にウィジェットを生成してビューポートに追加するようノードを組みます。
ブループリント
このブループリントをマップ上に配置してプレイすると起動と同時にUIが表示されているのが確認できます。
画像では画面左上に表示されて見えづらいですが、ウィジェットのアンカーや座標を設定することで調整ができます。
以上がUIを表示するまでの簡単な流れです。
UIを表示するまでの基本的な手順はご理解いただけたでしょうか？
UI作成例
流れが分かったところで応用編として作成例を紹介します。
UnrealEngineにはUIの機能がいくつか用意されており、実務でもそれらを組み合わせてさまざまなUIを作っていきます。
例には汎用的なUIを選んだので、参考になれば幸いです。
リスト
アイテムリストやクエスト一覧などスクロールによるリスト表示をするUIです。
Scroll ViewやList Viewを使うことで作成が可能です。
中に表示するUIを別途用意してブループリントで必要数追加するようにして使います。
アイテムリストやクエスト一覧はもちろんログの表示などスクロールを使うさまざまな用途で使えるUIです。
リスト タブ
Widget Switcherを使ったタブUIです。 Widget Switcherは子に設定されているウィジェットを簡単に切り替えることができる機能で、複数のUIを素早く切り替える機能に使えます。
ポーズ画面でプレイヤーのステータスやアイテム一覧、オプション画面などを切り替えたい場合なんかにはぴったりです。
タブ
タブの作成例ではBackground Blurを使用しており、背景がぼやけています。
UIは視覚情報とプレイヤーへの操作感がダイレクトにリンクします。
キャラクターの操作よりUIの操作に集中させる場合にはこのようにしてUIをより際立たせることで見やすさがぐっと変わり操作感が良くなります。
より良いUIを作るにはデザイン面だけでなくプレイヤー視点で工夫を凝らすのも大事になってきます。
さいごに
以上がUnrealEngineでUIを作る方法の紹介でした。
まだまだたくさんの機能があり組み合わせ次第でより柔軟に複雑な機能を作ることもできます。
実務ではブループリントやC++で内部処理を実装する作業が大半です。
思い通りのUIを作るには想像以上に時間がかかりますが、まずは基礎からUnrealEngineの理解を深めていき使いこなせるようになってから応用していくのが良いかと思います。
UnrealEngine自体触ったことない方やUI開発の経験が浅い方向けの一助になれば幸いです。
最後まで読んでいただきありがとうございました。
アドグローブではゲームエンジニアを含め、さまざまなポジションで一緒に働く仲間を募集しています。
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。
