60.プレイボタンを作成してみよう

😺では今回もUI作成の一連の流れを理解するために、ゲーム開始を行うプレイボタンを実装していきたいと思います。

今回実装する機能↓

https://youtu.be/Ffh0rh1JjbA

PLAYボタンを押したらゲームが開始するというシンプルなUIです。

①プレイボタンのUIを作成する|実践

では、ゲームのプレイボタンを作成してみましょう。今回もサードパーソンのプロジェクトを使用します。

UIフォルダを作成してその中で右クリック > ユーザーインターフェース > ウィジェットブループリント > UserWidgetを選択 > WBP_PlayButtonに名前を変更します。

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

開いたら、パレットからCanvasをどこでもよいのでドラッグで追加します。

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

CanvasはUIの枠組みなので基本最初に追加するウィジェットになります。

続けてButtonを追加します。Buttonはクリックした時に何らかの処理を発動する事ができます。

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

Buttonの大きさを適当に大きくします。大きさは詳細のスロットのサイズから確認する事ができます。

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

次にTextをButtonの上にドラッグで追加します。

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

階層パネルでTextがButtonの子になっている事を確認します。これでButtonの位置に関連付けられて、Buttonが移動するとTextも一緒に移動します。もし以下のような状態でないのであればTextをButtonにドラッグ＆ドロップします。

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

Textを選択した状態でコンテンツのTextから「PLAY」にして、アピアレンス(Appearance)からFontのSizeを適当に大きくします(72にしました)

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

これでUIの見た目の部分は完了です。

②UIを画面に出力する

では作成したUIを画面に出力しましょう。今回は空のレベルを初期のレベルとしてプレイボタンを押したらサードパーソンのレベルに移行するようにしていきます。

ファイル > 新規レベル > 空のレベルを選択して作成します。

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

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

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

BeginPlayからウィジェットを作成(Create Widget)を作成してClassに作成したPlayButtonを選択します。そこからAddViewportを繋げます。

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

これで先ほど作成したボタンのUIがゲーム開始とともに表示されます。

プレイしてみましょう。空のレベルでプレイボタンが表示されました。

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

ただしこの状態はボタンの位置は固定では無いため意図しない位置に表示される可能性があります。なので位置を正しく設定していきましょう。

プレイボタン横にある点々から新規エディタウィンドウを選択してプレイします。

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

プレイ画面が別ウィンドウで開かれます。今の状態では、ゲーム画面の大きさを変更した時にボタンの位置がずれてしまいます。

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

これだと様々な解像度が異なるモニターやスマホの解像度に対応する事が出来ておらず、本来意図した場所にUIが表示されません。PLAYボタンも見切れている時がありますね。これを解消するためにアンカーの設定を行います。

PlayButtonのウィジェットブループリントに戻って、Buttonを選択した状態でスロットのアンカーを一度クリックして中央を選択します。

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

これで画面のサイズが変更されても画面の中央にアンカーを設置しているため固定で中央に表示されます。

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

先ほどと比べてPLAYボタンが見切れる事が無くなり、アンカーによって画面中央に固定されるようになりました。

😺アンカーはウィジェット(UI)の固定位置を決めるためのものです。アンカーと解像度についてはまた別で詳しく解説したいと思います。

③プレイボタンの処理を追加する

ではプレイボタンを押したらサードパーソンのレベルを開くという処理を追加したいと思います。

Buttonを選択した状態で詳細のイベントからOnClickedのプラスボタンを選択します。

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

OnClickedとは？

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

ボタンをクリックした時に実行されるノードです。なのでこの場合だとPLAYと書かれたボタンをクリックした時に実行されます。

OnClickedからOpenLevelを作成して、LevelNameに開くレベルの名前「ThirdPersonMap」を入力します。

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

OpenLevelとは？

LevelNameに記載された名前のレベルを開くためのノードです。今回の場合サードパーソンのデフォルトのレベルを開くのでこれ↓が名前になります。

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

デザイナーとグラフの切り替え

なおウィジェットブループリントはデザイナーとグラフでエディタを切り替える事ができます。デザイナーだとUIを編集する画面、グラフだとそのUIのブループリントを編集する画面になります。

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

ここでCtrl+Shift+Sで保存しておきます。

プレイして、プレイボタンを押すとサードパーソンのレベルが開かれてゲームが開始しました。

https://youtu.be/Ffh0rh1JjbA