AG16.ステージ選択画面の実装
😺今回はステージ選択画面の実装を行っていきます。前回作ったタイトル画面からステージ選択画面へ移行して、その後ステージ選択をできるよう実装していきます。
今回実装するステージ選択画面
今回はステージ選択画面のUIを作成して、タイトル画面から切り替える機能とステージボタンを押したらステージをロードする機能を作っていきます。
https://youtu.be/C0o83YMs0wc
🐱ではステージ選択画面をシンプルに作成していきます。
①前回までの確認と準備
ではステージ選択画面を実装する前に先に既存のタイトル画面を一時的に非表示にしておきます。
まずTitleのレベルを開いておきます。
https://scrapbox.io/files/65d58500cb20c30023d80db3.jpg
前回までに作成したWBP_Title_And_SelectStageというウィジェットブループリントを開きます。
https://scrapbox.io/files/65d5851acb20c30023d80fbe.png
現在のWBP_Title_And_SelectStageは以下のようなウィジェットになっています。
https://scrapbox.io/files/65d58542dc6c94002e82d943.png
プレイした時にタイトル画面を一旦非表示にしておきたいので、Title_CanvasPanelを選択した状態でVisibility(表示設定)をCollapsedにします。
Collapsedはゲーム中に非表示にする設定です。Visibleが表示にする設定です。
https://scrapbox.io/files/65d585546b036c0025629480.png
プレイしてみるとタイトル画面のUIが非表示になりました。
https://scrapbox.io/files/65d58563c754900024f02a3f.png
続いてウィジェットブループリント編集中に非表示にするためにTitle_CanvasPanelの目のアイコンをクリックします。
https://scrapbox.io/files/65d5856de2f27700233883fc.png
🐱これでタイトル画面はゲーム内と編集画面で非表示にする事ができたので準備完了です。ステージ選択画面を実装していきましょう。
②ステージ選択画面のUIを作る
ではこの状態のWBP_Title_And_SelectStageからステージ選択画面を作っていきます。
https://scrapbox.io/files/65d58581f1f23f0024e413f9.png
CanvasPanelを追加して名前をSelectStage_CanvasPanelにします。
https://scrapbox.io/files/65d5858add041f002ce567b4.png
アンカーを全体に伸縮する設定にして、オフセットを全部0にします。
https://scrapbox.io/files/65d5859132df570025031923.png
そして今回は以下の様に縦横にウィジェットを配置するので、GridPanelウィジェットを使用していきます。
https://scrapbox.io/files/65d5859aa72ecd0026b17d78.png
GridPanelを追加します。
https://scrapbox.io/files/65d585b4f3c58e0024b7ea8f.png
GridPanelとは？
GridPanelとは縦横に複数のウィジェットを配置するためのウィジェットです。このGridPanelを使う事によって、複数のウィジェットを意図した位置に並べて表示する事ができます。
https://scrapbox.io/files/65d585c3ec6ed8002482aaf1.png
以前のページ「GridPanelとは？」でも解説していますので気になる方はチェックしてみてください。では使ってみましょう。
GridPanelを選択した状態でアンカーを全体に伸縮する設定にして、オフセットを全部0にします。
https://scrapbox.io/files/65d5863b63f2e30026361d9b.png
GridPanelを選択した状態でフィルルールのColumnFill(縦に並ぶ空きスロット)のプラスボタンを6回押します。
https://scrapbox.io/files/65d5864732df5700250325e6.png
上から順に0.2、1、1、1、1、0.2にします。
https://scrapbox.io/files/65d5864d15fd0900256bffdf.png
GridPanelの仕組みについて
GridPanelには空きスロットを設定する必要があります。それがフィルルールのColumnFill(縦列の空きスロット)とRowFill(横列の空きスロット)です。今ColumnFill(縦の空きスロット)に0.2、1、1、1、1、0.2となるように設定したので、空きスロットを視覚化するとこんな感じになっています↓
https://scrapbox.io/files/65d586603289f8002515cbc9.png
続けてGridPanelを選択した状態でRowFill(横の空きスロット)のプラスボタンを４回おして、0.2、1、1、0.2にします。
https://scrapbox.io/files/65d58674ac9be900235c218b.png
これで縦のスロットも追加されたため視覚化すると現在こんな感じのスロットになっています↓
https://scrapbox.io/files/65d586888ff755002504b500.png
GridPanleはこのようにスロットと呼ばれる区分けされた空き場所を用意して、そこにウィジェットをはめていくという感じに使用してきます。例えばImageをGridpanelに追加すると以下の様にスロットにはめる事ができます。
https://scrapbox.io/files/65d5869715f88c00244c6775.png
では実際にウィジェットを追加していきましょう。
OverlayをGridPanelに追加します。
https://scrapbox.io/files/65d586a871b19a002490f47e.png
Overlayウィジェットとは？
一個のウィジェットに複数の子ウィジェットを配置する事は通常は出来ませんが、Overlayを使用すると複数のウィジェットを子にする事ができます。例えばOverlayにTextとImage一緒に配置するみたいな事もできます。
Overlayを合計8個になるようにCtrl+Dで複製します。
https://scrapbox.io/files/65d5877227a9870026505b9f.png
複製したOverlayをそれぞれ選択した状態で以下の様に、右と下のボタンを押してGridPanelの中央二列に順に配置していきます。
https://scrapbox.io/files/65d5878c02f9c60023aa114f.png
こんな感じに↓Overlayを上から順に中央左上の列から配置していきます。
https://scrapbox.io/files/65d58799a72ecd0026b1a413.png
こんな感じになりました↓
https://scrapbox.io/files/65d587a0a0396c00257ec620.png
🐱これでそれぞれの空きスロットにOverlayのウィジェットを割り当てる事ができました。
GridPanelのスロットの割り当て番号について
例えば一番左上のOverlayを選択して、詳細からスロットの項目を確認するとRowが1、Columnが1になっている事を確認できます。
https://scrapbox.io/files/65d587be15fd0900256c1c23.png
Rowが1、Columnが1というのは以下の様に空きスロットは区画で分けられており、配置されているスロットの座標を示しています。
https://scrapbox.io/files/65d587d499dd5700251f63e8.png
つまり一番左上に配置したOverlayは縦1の横1のスロットに配置された事を示しています。このようにGridPanelはスロットにウィジェットを割り当てて縦横に並べていきます。
ButtonをOverlayに追加します。
https://scrapbox.io/files/65d587e7b9e4370024a05a68.png
Buttonを全体に伸縮するようにHorizontalとVerticalのAlignmentを一番右にします。
https://scrapbox.io/files/65d587eefa31a7002546a9ee.png
以下の画像を使用するのでダウンロードしてください。
https://scrapbox.io/files/65d587f932e42e0026853038.png
スクリーンショットを撮って境界線を付けたシンプルなものです。画像の境界線はUnrealEngine内でもつける事は可能ですが今回は元の画像に境界線をつけました。
UIフォルダにドラッグで追加してインポートします。名前をT_LEVEL1にします。
https://scrapbox.io/files/65d5880963f2e3002636467f.png
WBP_Title_And_SelectStageを再度開いてButtonを選択しておきます。
https://scrapbox.io/files/65d5881563f2e30026364753.png
🐱ではこのButtonに画像を割り当てていきます。
ボタンの画像をセットする場所について
Buttonの画像を設定する場所は詳細のNormal(通常状態)、Hovered(マウスをあてた時)、Pressed(押した時)の三つの場所があります。なので基本的にボタンに画像を割り当てる場合は三つの箇所で設定する必要があるので覚えておきましょう!
アピアランス > Style > Normal > ImageにT_LEVEL1の画像をセットします。その後、DrawAsをImageを選択します。
DrawAsとは？
DrawAsは画像の描画方法ですが、デフォルトのRoundedBoxだとこんな感じに↓画像に境界線がついてしまいます。Imageにしてあげると境界線を無くす事ができます。
https://scrapbox.io/files/65d5886e32e42e0026853877.png
Normalの設定下にあるHoveredとPressedも同じようにT_LEVEL1の画像を割り当てて、DrawAsからImageを選択します。
https://scrapbox.io/files/65d5888dac9be900235c469c.png
🐱これでButtonが通常時、ホバーした時、押した時の画像を全部一緒にする事ができました。
ButtonのPadding(隙間)をLeft60,Top100,Right60,Bottom100にします。
https://scrapbox.io/files/65d588a7fa31a7002546b504.png
アピアランス> BackgroundColorを少し暗くしておきます(RGBの値が0.71になるぐらい)。
https://scrapbox.io/files/65d588ac0a446300247aab34.png
一度プレイしてみて確認しています。あくまで見た目の部分なので大体こんな感じの見た目になっていればオッケーです。画面の比率によって見た目は少し異なります。
https://scrapbox.io/files/65d588c56cc9170024afb019.png
🐱なおマウスカーソルは非表示の設定にしているのでカーソルはこの時点では出ません。後からタイトル画面から切り替えた時に表示させる機能を追加します。
現在こんな感じのUIになっています。
https://scrapbox.io/files/65d58918246088002d48eeac.png
テキストをセットしていきます。TextウィジェットをButton下に追加します。
https://scrapbox.io/files/65d5892589f2c0002311a312.png
テキスト内容をLEVEL1にします。フォントはお好きなものを使用してもらって大丈夫です。
https://scrapbox.io/files/65d5892dfa31a7002546c005.png
位置を調整していきます。PaddingをBottomだけ15にしてそれ以外は0にします。FontのSizeは30にします。
https://scrapbox.io/files/65d5893e246088002d48f3f2.png
再度プレイして確認します。なおマウスカーソルが現時点ではスタート時に非表示になる設定なので、一旦Shift+F1でマウスカーソルを手動で表示して問題無いか確認してください。
https://scrapbox.io/files/65db62d730aaa40024658f7b.gif
🐱画像が正しく描画されない場合はもう一度Buttonの画像がNormal,Hoverd,Pressedにちゃんと割り当てられているかご確認ください。
他のOverlayにも作ったボタンも追加していきます。Buttonを選択してCtrl+Cでコピー、次のOverlayを選択した状態でペーストします。
https://scrapbox.io/files/65d5895889f2c0002311a64e.png
これを繰り返してButtonをコピーしてそれぞれのOverlayにペーストします。
https://scrapbox.io/files/65d5896002f9c60023aa2b8d.png
テキスト内容をLEVEL1~8まで全て変更します。こんな感じ↓に左から順にLEVEL1~8にします
https://scrapbox.io/files/65d5896d0c7af400284d8fa8.png
🐱では画像をLEVEL2にはLEVEL2の画像を、残りのレベルに関しては真っ暗の画像を設定していきます。保存も忘れずにおこないましょう!
LEVEL2用のステージの画像をダウンロードしてください↓
https://scrapbox.io/files/65d589777f91650026a98d02.png
UIフォルダにインポートしておきます。名前はT_LEVEL2にしておきます。
https://scrapbox.io/files/65d589840af85f002418fb0d.png
再度WBP_Title_And_SelectStageを開いて、LEVEL2のButtonを選択した状態でNormal,Hovered,PressedのImageをT_LEVEL2に変更してます。
https://scrapbox.io/files/65d589995a41300025cd2452.png
現在こんな感じ↓
https://scrapbox.io/files/65d589a390b3d0002448618e.png
他のステージのボタン画像は真っ暗にしていきます。
以下の真っ暗の画像をダウンロードしてください。
https://scrapbox.io/files/65d589b60dc7970023fc241b.png
UIフォルダにインポートして名前をT_LEVELにしておきます。
https://scrapbox.io/files/65d589d9f80dc20025a2dc81.png
LEVEL3からLEVEL8までのButtonをCtlr+クリックで全て選択しておきます。
https://scrapbox.io/files/65d589e18ff755002504e7dd.png
アピアレンスのNormal,Hovered,PressedのImageをT_LEVELの画像に変更します。
https://scrapbox.io/files/65d589eb05dd560025a5d38d.png
プレイして確認します。Shift+F1でマウスカーソルを表示して確認します。
https://scrapbox.io/files/65db6308da4ed20023caa1f1.gif
🐱今回のステージ選択画面の見た目はこんな感じでいきたいと思います。
ここまでで実装したUI (WBP_Title_And_SelectStage) の確認
https://scrapbox.io/files/65d589f84dd90c0024450e37.png
😺ではここからはタイトルからステージ選択画面に切り替える機能と、ステージ選択画面でLEVEL~のボタンをクリックしたらそのステージをロードする機能を作っていきます。
③タイトル画面からステージ選択画面に切り替える機能を作る
タイトル画面からステージ選択画面に切り替える機能を実装していきます。こんな感じです↓
https://scrapbox.io/files/65d5a4b1ec49500024d361da.gif
ゲームプレイの流れとしては最初にタイトル画面のUI→何かボタンを押す→ステージ選択画面のUIに切り替えるという事をしていきます。
ステージ選択画面となるSelectStage_CanvasPanelを選択した状態でVisibilityをCollapsed(非表示)にします。
https://scrapbox.io/files/65d58a20db985a002531dfd5.png
Title_CanvasPanelを選択した状態でVisibityをVisible(表示)にします。
https://scrapbox.io/files/65d58a25854ce10026ca79bf.png
これでプレイすると初期状態はタイトル画面が表示される状態になっています。
https://scrapbox.io/files/65d58a2ddd041f002ce5a4fa.png
🐱そしてPRESS ANY BUTTONとタイトル画面に書いてあるようにどのボタンを押してもステージ選択画面に進むように実装していきます。まず操作入力となるインプットマッピングを作成していきます。
設定 > プロジェクト設定 > インプット > アクションマッピングを開きます。アクションマッピングのプラスボタンを一回クリックしてアクションマッピングを追加します。
https://scrapbox.io/files/65d58a35482ab500255004df.png
追加されたインプットの名前をAnyButtonとして、日本語だと「いずれかのキー」英語だと「AnyKey」のボタンを割り当てます。
https://scrapbox.io/files/65d58a3ec8d9b60025f0bd2a.png
「いずれかのキー」はキーボードの項目にあります。
https://scrapbox.io/files/65d58a471f520f00247338aa.png
そしたらWBP_Ttitle_And_SelectStageに戻ってグラフを開きます。
https://scrapbox.io/files/65d58a4d8aec930025a0e480.png
下の方にAnyButtonと検索してインプットアクションAnyButtonを追加します。
https://scrapbox.io/files/65d58a58776aa30023bb3cd2.png
次に、デザイナータブを開いてTitle_CanvasPanelとSelectStage_CanvasPanelをCtrl+クリックで選択した状態でIsVariableにチェックを入れて変数化します。
https://scrapbox.io/files/65d58a640e33fd00246787de.png
グラフを開いて変数が追加されている事を確認します。
https://scrapbox.io/files/65d58a6cc8d9b60025f0c020.png
AnyButtonからSetVisibilityノードを二つ追加して、最初のInVisivilityをCollapsed、あとのノードをVisibleに設定します。ターゲットには変数からTitle_CanvasPanelとSelectStage_CanvasPanelを追加します。
https://scrapbox.io/files/65d59740275ea000241629b2.png
SetVisibilityとは？
UIの表示,非表示を切り替えるノードです。Visibleで表示,Collapsedで非表示にします。
一度プレイしてみましょう。何でも良いのでボタンを押すと画面が切り替わります。
https://scrapbox.io/files/65d5978006a3fa0024ebd078.gif
🐱続けて切り替えた時に、マウスを表示させる機能を追加していきます。
同じくWBP_Ttitle_And_SelectStageの作成したSetVisibilityノードから、SetInputUIOnlyノード、GetPlayerControllerノード、SetShowMouseCursorノードを作成します。SetShowMouseCursorノードにはチェックを入れます。
https://scrapbox.io/files/65d5a48641dd1900253d8ea3.png
SetInputUIOnlyノードとは？
SetInputUIOnlyノードはクリックしてもマウスが非表示にならないように設定するノードです。
SetShowMouseCursorノードとは？
マウスカーソルを表示するノードです。
🐱これでマウスを表示させてUIを問題なくクリックできる状態にしました。blueprintUEはもう少し下に記載してあります。
これでプレイしてみるとタイトルからステージ選択画面に切り替わって、マウスを表示させる事ができました。
https://scrapbox.io/files/65d5a4b1ec49500024d361da.gif
😺では最後にボタンを押した時にレベルをロードする機能を実装していきます。
④LEVEL~のボタンを押したらロードする
ではLEVEL~のボタンを押したらその対象のレベルを開く機能を作っていきます。今回はLEVEL2までのステージしか作っていないので、LEVEL1とLEVEL2の二つのボタンを簡単に実装していきます。
WBP_Title_And_SelectStageを開いて、まずLEVEL1とLEVEL2のボタンの名前をLEVEL1_Button,LEVEL2_Buttonに変えます。
https://scrapbox.io/files/65d5a4ed5246460026b7f413.png
😺確認ですが名前を変える理由は後から変数にするためです。変数にすると何のボタンかは名前で判断するしかないので基本的に変数化させるウィジェットはわかりやすく名前を変更した方が良いです。もちろん全てのウィジェットに名前を最初からきちんと付けておくのが一番良いですが、大変なので今回は省いています。
LEVEL1_Buttonを選択した状態で、OnClickedをクリックします。
https://scrapbox.io/files/65d5a4fa0958f80024696dec.png
OnClickedからOpenLevelノードでLEVEL1と入力します。
https://scrapbox.io/files/65d5a5098a9b7e00251e1081.png
これでボタンが押されたらLEVEL1という名前のレベルをロードします。
https://scrapbox.io/files/65d5a512a9b4b700247fd466.png
同じようにLEVEL2_Buttonを選択した状態でOnClickedを押します。
https://scrapbox.io/files/65d5a512a9b4b700247fd466.png
OpenLevelで「LEVEL2」とします。
https://scrapbox.io/files/65d5a52cc4062b0024705efd.png
これで完成です。
WBP_Title_And_SelectStageに実装した全ノード↓
完成！
これでステージ選択画面が実装でき、タイトル画面からの切り替えとレベルのロードが完成しました
https://youtu.be/C0o83YMs0wc
😺一般的なゲームであればLEVEL1をクリアしたら次はLEVEL2と言った感じに順にステージが解放されていく訳ですが、今回はシンプルさを重視してステージ選択画面を作ってみました。順にステージが解放されていく機能の作り方の一つとしては、SaveGameでクリアしたステージ数などを保存して、ステージ選択画面を表示する時にクリア済みのステージ数をロードし、そのデータに合わせてプレイ可能なステージを表示するといった法などがあります。