大福未来研究所

大福フューチャーラボのなんか色々なアレ。プログラミング(C++/DirectX/Unity/UE4あたりやりたい)とか音楽とかの。

【UE4】UE4でシンプルな音ゲーを作ろう:その5

この記事は、「ひとりUE4 Advent Calendar 2017」の12/7担当記事です。
qiita.com

(あくまでも音ゲーとしての実装は自己流のものですので、
実際はもっと効率のいい組み方があったりすることもあると思いますが、
そういう場合は是非ブログ等でその技術をシェアしていただけるととても助かりますので
何卒よろしくお願いします……)

第5回、ゲームとしての体をなすために

前回までで、


譜面データを読み込み、
画面に表示し、
それを流し、
入力に対して判定を取る


までは実装できました。
さてようやく、音楽ゲームらしく、音を鳴らすパート……にしたいところですが、
その前にやっておくことがあります。
ゲームとしての体をなすために、タイトル画面、セレクト画面、リザルト画面をとりあえず組みましょう。

まずはタイトルを作る

前回の記事までで、GameMainを含めて4つのレベルを用意するところまではやりましたね。
f:id:dfk_ohnuma:20171208020049p:plain
では、その中のタイトル画面を用意します。

dfkfuturelab.hatenablog.com
この記事で使っていたBPをそのまま持ってきます。
f:id:dfk_ohnuma:20171213020140p:plain

とりあえずタイトル用ウィジェットを作ります。
f:id:dfk_ohnuma:20171213020257p:plain
ひどくシンプルな画面ですが、絵心がないので仕方ないね(諦め)
これじゃ嫌だ!という場合は色々デザインを頑張ってみて下さい。
まあ今回の大事な部分はそこではないので……

f:id:dfk_ohnuma:20171213020449p:plain
タイトル画面のウィジェットの中身はこんな感じです。シンプルですね
次に、選曲画面を作ります。

案外難しい選曲画面

(※選曲画面の背景については割愛します。今回は選曲画面のUIメニューの実装についてがメインになります。)
選曲画面では、譜面データの数が増えれば増えるほど項目の数が増えるわけです。
しかし、そのタイトルやら何やらを全て手作業で入力しなければならないとしたら手間の増え方がハンパナイです。
なので、せめて手作業でやるのは譜面データの追加ぐらいにして、それ以降は勝手にゲーム側で読み込んで処理してもらおうと思うわけです。

SelectLevel用に作ったBPはこちらです。全てウィジェットBPになります。
f:id:dfk_ohnuma:20171213021131p:plain
このうち、最低限必要なのはSongSelectとListItemです。残り2つは演出用に自分の趣味で用意したものです。
実際、SelectLevelのレベルブループリントには
f:id:dfk_ohnuma:20171213021244p:plain
こうあるだけです。
SongSelectWidgetを作成したら、後はその中でいろいろやってくれるようにします。

SongSelectWidgetの中はこうなっています。
f:id:dfk_ohnuma:20171213022238p:plain
この左側にあるSongSelBoxの中に楽曲の情報を入れていきます。
このSongSelBoxはScrollBoxという種類のUMGパレットを使っています。
ScrollBoxについては、

UMGのscrollboxをマウスやタッチを使わずにゲームパッドのみでスクロールさせる方法 - UE4 AnswerHub
limesode.hatenablog.com
qiita.com
これらのサイトも参考にされると良いと思います。

このScrollBoxに突っ込む楽曲情報のWidget、それがListItemです。
f:id:dfk_ohnuma:20171213022624p:plain
中身はとても簡素です。曲名を表示するテキストと、レベルを表示するテキストと、背景のImage。
f:id:dfk_ohnuma:20171213022720p:plain
アニメーションは右へずらすのと、戻すのの2つです。

f:id:dfk_ohnuma:20171213022959p:plain
イベントグラフには外部からそれぞれの値を設定するためのイベントだけがあります。

f:id:dfk_ohnuma:20171213023036p:plain
f:id:dfk_ohnuma:20171213023050p:plain
背景と選択時のマスク画像の変更についての関数が1つずつ用意されています。

ListItemの中身はこれだけです。

選曲画面の最初の流れ

今回の選曲画面の最初の流れですが、


1:譜面データの配列から1つずつ取り出し
2:TITLEコマンドとLEVELコマンドを見つける
3:ListItemを作って、そこにTITLEとLEVELを登録して、SongSelBoxの子供として登録する
4:全部終わったらカーソルを0番目にする
(4+:開始演出を入れる)
5:カーソルが合っている番号の楽曲情報をインフォ欄に書き込む


という形になっています。
これをBPで実装してみます。

f:id:dfk_ohnuma:20171213023921p:plain


ちょっと拡大してみます。
f:id:dfk_ohnuma:20171213024023p:plain

f:id:dfk_ohnuma:20171213024040p:plain


ここの開始演出については、選曲画面の実装に必須のものではないので割愛します。
また別の機会に書かせていただきます。
f:id:dfk_ohnuma:20171213024158p:plain
この「曲の情報をインフォ欄に登録」という部分については、
他にも使う箇所があったのでマクロにしました。
f:id:dfk_ohnuma:20171213024241p:plain


このマクロの中身については、こうなっています。
f:id:dfk_ohnuma:20171213024338p:plain


楽曲選択時のカーソル入力対応は以下の通りになります。
f:id:dfk_ohnuma:20171213024657p:plain
今までカーソルが合っていたListItemに非選択処理をしてやってから、選択先のListItemに選択時処理をするのを忘れないようにします。


拡大するとこんな感じです。
f:id:dfk_ohnuma:20171213024817p:plain


選曲決定時には、GameMainで譜面データを取得できるよう、選択された譜面データをGameInstanceに投げておきましょう。
f:id:dfk_ohnuma:20171213050310p:plain

最小限の構成で良ければ、囲んだ部分はいらないはずです。
囲まれている部分は演出用に組まれています。
f:id:dfk_ohnuma:20171213050600p:plain


これで、譜面データの配列にデフォルトの要素を設定してやることで
www.youtube.com
このように選曲画面のUIが実装できました。

なんとまあひどいリザルト

リザルト画面については、各判定がそれぞれGameInstance内に保存されていますので、
f:id:dfk_ohnuma:20171213051306p:plain
こんな感じにテキストをバインドしてやれば
f:id:dfk_ohnuma:20171213051356p:plain
リザルトに必要な要素を用意することが出来ます。

これでタイトルからリザルトまでの流れが実装できたので、今回はここまでです。

最後に

これでタイトル画面や選曲画面やリザルト画面をとりあえず作って、ゲームとしての形が整ってきました。
次回はいよいよ音の部分の実装です。

以上で今回の記事は終わりです。お疲れ様でした。
アドカレの翌日の記事も私です(というか25日まで全部私です)。よろしくお願いします。