ウィジェットブループリントを使う

ウィジェットブループリントとは

ウィジェットはゲームの情報表示領域として使用可能であり、通常のワールド上とは異なる形で画面を形作ることが可能です。ゲームで用いる場合には、タイトル画面、メニュー画面、ステータス表示などに用いることになるでしょう。この記事では、タイトル画面っぽいものを作っていこうと思います。

ウィジェットブループリント作成

ウィジェットブループリントを作成していきます。追加/インポートのユーザーインターフェースにあります。作成すると以下の画像のようなアイコンのウィジェットブループリントが作成されます。

ファイルを開くと以下のようなウィジェットブループリントの画面が出ます。この機能を使って画面の機能を使って、タイトル画面を作っていきましょう。

ウィジェットの見た目を整える

タイトル画面といっても、そんなにしっかり作るつもりはありませんのでとりあえず、レベル遷移とゲームの終了だけを実装しようと考えております。

実装する予定の画面はこちらのようになっています。

ブログに貼る都合上灰色にしておりますが、要するにタイトル画面に必要な機能だけを実装している感じです。ゲーム終了もウィンドウを閉じれば消えるのでいらないっていえばいらないのですが、選択の切り替えの説明をしたいのでゲーム終了は実装しておきます。それを画面上にドラッグドロップしてしまいましょう。するとウィジェットの画面にImageが表示され階層にも追加されます。現在選択されている要素の内容は右の詳細に表示されます。

Imageを整えていきます。まずアンカーを設定します。ここでどこを基準としてイメージを表示するかを設定します。すべて中央基準でもよいのですが、基準位置をすべて中央にすると実行時の端末やウィンドウサイズによって画面からはみ出してしまうことがあります。特にボタンが画面から完全に外れると次の画面に映ることが難しくなるので、要素によって適切なアンカーを設定しましょう。

ここでイメージは背景にするつもりなので、アンカーを四隅に設定しましょう。オフセットは基準点からのずれなので背景として全体を埋める場合には0のしておきましょう。尚このように設定する場合には、横長の端末で見るか、縦長の端末で見るかによってイメージが引き延ばされます。場合によっては上下だけアンカーを使ったり左右だけアンカーを使ったりして理想的な形で表示できるようにしましょう。Brushを開くと画像イメージを変えることができます。今回は画像を用意していないので、Tintで色だけ変えましょう。用意している画像がある場合には画像を設定しても大丈夫です。

以下のような画面になりました。

次にタイトルテキストを設定するために、パレットの一般からテキストをドラッグしましょう。タイトルテキストの設定をします。まずアンカーの設定ですが、中央上部でいいと思います。上部においておけばとりあえず表示されますし、押すボタンでもないので、左右が切れるようなことがあってもそこまで問題はないんじゃないかな～という感じです。まあ、タイトルの長さとかいろいろな要素からよさそうなものを選択すればいいと思います。

数値はすべてデフォルトにリセットの黄色いボタンを押しておきましょう。Alignment の Xの値は0.5に設定しましょう。テキストの中央を基準にできます。 さらにSize To Contentのチェックをオンにしておきましょう。フォントサイズに合わせて、枠のサイズが自動的に変更されます。テキストの内容と文字色も変更しておきました。

テキストフォントの設定は以下のようにしました。テキストサイズを大きくし、テキストを中央ぞろえにしたということです。

次にボタンを設定しましょう。同じ手順で一般のボタンを配置いたします。今回は、ボタン上にテキストを配置したいので、テキストを階層のボタンの上にドラッグしましょう。階層上のボタンをクリックして詳細を出しましょう。とりあえず中央にしておきましょう、中央ならば位置をずらさなければ表示されないということもありませんしボタンが押せなくなる可能性も低いでしょう。そのほかの設定はデフォルトにリセットして、Alignment　を(X=0.500000,Y=0.500000)、Size To Contentをオンとしました。ボタンの設定はいろいろありますが、いったん後回しにしてテキストを設定しましょう。

以下のように、テキストに関して必要最低限の設定をしておきました。今までと同じように設定しましょう。

ゲーム終了のボタンを配置します。ボタンの右クリックから複製を選びましょう。全く同じボタンが複製されます。少しだけ詳細を変更します。アンカー設定は下に変更いたしました。また一番下の位置から少しだけ浮かせるために、位置yを-50.000000 にAlignmentは(X=0.500000,Y=1.000000)としました。文字自体のテキストはゲーム終了としました。

以下でとりあえず見た目だけは完成です。表示していきましょう。コンパイルと保存をしておきましょう。

画面に表示してみる

新しいレベルを作ってウィジェットを表示していきましょう。どのレベルでもよいですが空のレベルでも十分です。ウィジェットはそのままでは配置できないので、レベルブループリントを編集しましょう。

ユーザーインターフェースにウィジェットを作成があるので作成しましょう。そこでClassには先ほど作成したウィジェット、OwningPlayerにはGetPPlayerControllerから、Ｐlayer0を設定し、それをイベントBeginPlayにつなぎましょう。ウィジェットを作成ノードからピンを伸ばし、Add to Viewportへつなぎましょう。

これで表示するブループリントは完成です。

実行してみましょう。

ボタンを機能させる

現状ボタンを押しても何も反応しません、ボタンを押してゲームを終了できるようにしましょう。扱いやすくするためにボタンの名前を変更しておきます。

ボタンの詳細の一番下に、イベントというものがあり、そこのＯnＣlickedを押してみましょう。するとグラフ画面に映り、Onclickedイベントが生成されます。先ほどの画面に操作したい場合には、右上のボタンで移動できます。Onclickedイベントのピンから、QuitGameを探して接続しましょう。

これでゲーム終了のイベントの実装は終了です。以下のようなイベントグラフになりました。

次にゲーム開始ボタンを機能させましょう。終了ボタンと同じ手順でスタートボタンを作りましょう。レベル遷移に使うノードはオープンレベルというものです。以下のようにつなげばそれで完成です。

開く先のレベルを作っていないのでそのままでは、どのレベルも開かれませんが、下のようにレベル名をコピーして貼り付ければそのままボタンクリックでレベルそのレベルに遷移するようにできます。

関係ないところをクリックするとマウスが消える場合

関数にオーバーライドという項目がありその中のOnInitializedを実装しGetPlayerControllerからSetShowMouseCursorをつなげてオンにしましょう。これによりゲーム内の関係ない場所をクリックしてマウスが見えなくなるということがなくなります。

以下のようなブループリントが完成しました。

以上でとりあえずウィジェットブループリントの実装は終わりです。キーボードだけで選択できるようにしたりとかまだいろいろやっておきたいことはありますが、なかなか処理が多くなる可能性も高くなりそうなのでまたの機会に紹介いたします。ここまでご覧いただきましてありがとうございました。

ウィジェットに関して学びたいなら下記のUdemy講座がおすすめです。