2020/12/28エンジニア

    [UE4] Time Synthを用いて簡単なリズムゲームを作ってみた2

    執筆者 M.M

    執筆バージョン: Unreal Engine 4.24

    いつもORENDAのブログをお読みいただきまして、本当にありがとうございます。 2020年、最後のブログです。「簡単なリズムゲーム作り」、よろしかったら、年末年始にチャレンジしてみて下さい。

    はじめに

    引き続き最近リズムゲームを作成していきます。前回は譜面のデータテーブルを作成するところで終わりました。今回はその続きで、その譜面をブループリントで動かす機能を作成するところから始めます。

    この記事の内容

    1. ブループリントの作成

    2. 実際に動かしてみた

    ブループリントの作成

    譜面の作成

    次に譜面を作成するための構造体を作成します

    譜面データは譜面の位置だけが書かれていても意味がありません。

    本来であれば曲の名前や、テンポ、wavファイルによっては開始地点からどれだけ調整するかなども記録しておく必要があります。

    が、今回はシンプルに作りたいので、最低限動かすのに必要な譜面のデータだけを作成します。

    というわけでこのような構造体を作りました。

    ①構造体を選択

    ②上記の通りに構造の設定

    次に、「コンテンツ右クリック」→「その他」→「データテーブル」を選択して、先ほど作成した譜面構造体のテーブルを作成します。

    テーブルの中身に関しては後述する「最小カウントするQuantization Type」に応じて任意に設定を行ってください。

    ①先ほど作成した構造体のデータテーブルを作成

    ②作成したテーブルに任意の値を設定

    ブループリントの作成

    まず、リズムゲームに必要なノーツの作成を行います。

    ブループリントを作成し、中央に簡単なオブジェクトを配置

    今回は一定の距離を動くだけの簡単なノーツを作成します

    ブループリントは以下のようになります。

    BPにも記載がある通り、ノーツの速度計算を距離÷時間で求めます。

    細かい時間の算出は上図BPを参考にしてください。

    次にBGMの再生と再生位置を制御するブループリントを作成します。以下のように空のポーンを配置し、ブループリントを開いて設定をしてください。

    ①モードから任意のアクターをアウトライナに配置

    ②配置したアクターのブループリントを作成

    作成したブループリントを以下のように設定します。

    設定する際の細かな詳細を下記に記載しておきます。①TimeSynthのコンポーネントを追加

    ②テーブルに設定した値を格納するための変数を定義

    ③取り込んだ曲のBPMを設定

    ④先ほど作成したテーブルを取得し、分解した中身を変数に設定

    ⑤最小カウントするQuantizationTypeに合わせて設定

    ⑥コンテンツ内にあるTymeSynthを設定

    ①作成したAddQuantizationEventDelegateから引っ張ってきてカスタムイベントを作成

    ②タイミングよくノーツを作成するよう設定。場所は任意

    全体図は以下のようになってます。

    最後にクリック判定用のブループリントを作成します。

    ここで一点注意なのですが、判定にoverlap等の衝突判定を利用すると、ノーツが近いときに正しく判定しにくくなったり若干誤差が出る恐れがあります。

    今回は上記を考慮してノード一つ一つの距離を算出して判定を行います。

    以上で準備完了です。

    実際に動かしてみた

    では実際に遊んでみます。

    Gifだと音が聞こえませんが、音楽と同期してリズムゲームを遊ぶことができました。

    まとめ

    簡単なリズムゲームを作成してみました。ここから、曲の再生とノーツタイミングを合わせたり、ノーツのレーンを増やす等を行ってオリジナルのリズムゲームを作成してみてください。今回リズムゲームに必要な考え方やプラグインを紹介しました。リズムゲームを作る際の参考になればと思います。

    【ブログ編集部よりご挨拶】

    最後までお読みいただき、ありがとうございました。今年はコロナに始まり、コロナに終わる、大変な1年間でしたね。ORENDAでは、8月にブログをスタートして、皆さんのお役に立ちそうなことを、毎週スタッフたちが持ち回りで書いてまいりました。2021年、さらに精進してまいりますので、引き続き、お付き合いくださいませ。どうぞ、よいお年をお迎えください!

    ブログ一覧へ戻る