土日の2日間で音ゲーを作ってみた記録

Bigswamp a.k.a.だいふく @dfk_ohnuma

この土日が暇で暇で仕方ないのでUE4を使って簡単な音ゲーを作ろうと思い、「土日で音ゲーを作ろう！ in UE4」を始めます。　というわけでよろしくお願いします　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう

Bigswamp a.k.a.だいふく @dfk_ohnuma

まずは譜面の仕組みを作ろう。　　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう

Bigswamp a.k.a.だいふく @dfk_ohnuma

まっさらな新規プロジェクトに適当なフォルダを作っておきました。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/VEE3Ds0nkM

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

譜面用の構造体を作ります。String型で「Command」「Arg1（引数1）」「Arg2（引数2）」を用意します　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/H77jCv0wdT

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

さっきの構造体を使って、このようにデータテーブルを作っていきます。これはCSVで作ったものをｲﾝﾎﾟｰﾖすることも出来るけど、今はテスト段階なのでこのエディタ上で入力しました。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/EFS3Qg1b3j

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

最後の行にあった「1」「0」「01001001」の項目が実際の譜面配置になります。「1」＝1小節目の　「0」＝0番目のレーンに　「01001001」＝0を休符、1を音符として文字数ぶんの等間隔に配置　です。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう

Bigswamp a.k.a.だいふく @dfk_ohnuma

将来ロングノートまでは搭載したいので2がロングノート開始、3がロングノート終了って感じにはなると思います　それ以上に譜面の種類が増えたところで9種類（1～9に対応。0は休符のため）にはならんだろ（慢心）　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう

Bigswamp a.k.a.だいふく @dfk_ohnuma

譜面のフォーマットが確定したので、それをロードする仕組みを作らなければいけません。ということでまずここまでは作ってみました。コマンドから先はもうちょっと色々準備してから作らないといかん。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/BZJ4uh2mAv

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

タイトル、BPM、ジャンルについては例によって例のごとくウィジェットやリザルトにも表示するし、ゲームレベルとリザルトレベルが独立している以上はプレイデータをGameInstanceに持たせる必要があります　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう

Bigswamp a.k.a.だいふく @dfk_ohnuma

なんとまあ乱暴なお名前で。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/VivYRhujlb

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

もちろん、プロジェクト設定も忘れないようにしましょう　　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/W5wKy0EpS8

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

Game Instanceにもたせておく変数はこんな感じにしておきます。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/MMAgQ7sVO8

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

ちょっと項目増やしました　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう

Bigswamp a.k.a.だいふく @dfk_ohnuma

ところで、GameInstanceを持ってくる時に毎回毎回こうしてるのってめんどくさくないですか　　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/r3AP9j7QI5

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

ということで、まずは純粋キャストに変更します。これで実行ノード通さなくて良いね！！　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/8tYbkjduvw

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

これをマクロに折りたためば、あとはコレを呼ぶだけでいいので楽ちんですね　　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/4h74Nf3dws

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

というわけでここまで進みました。これで曲名とアーティスト名、BPM、ジャンル名まではセットできますね。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/lsBVIZvbMk

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

譜面生成は同じグラフ内でやるとゴチャゴチャになるので、このように譜面生成用の関数を用意しておきます（まだ中身はすっからかん）　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/89dPhBgZ4Q

拡大

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

L.F.O.で使ってた自作マテリアルを持ってきました。これで多少かっこよさげなものが作れるのではないでしょうか　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/K1g9QnV9x5

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

さっきのマテリアルを使って、譜面が流れてくるレーンを作りました。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/E1xod4kq42

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

でこのマテリアルですが、マテリアルインスタンス化した時にいじれる部分を結構多くしてあります。これを……　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/gm6JGSMwuI

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

このように先程のマテリアルインスタンスを編集することで、3つのレーンが生まれましたね。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/UkNSYGTcSo

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

というわけで、このマテリアルを適用することで仮のレーンが出来上がりです。　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/nsp0kk9a9B

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

レーンの角度や座標を修正して、このような画面ができました。もう音ゲーっぽくないですか？　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/SOdWQm3YPm

拡大

Bigswamp a.k.a.だいふく @dfk_ohnuma

ちょっと考えてたけど、SequenceLineというアクタとNoteComponentというアクタコンポーネントを増やしました。Lineアクタの上にNoteコンポーネントを生成していく感じです。　　#UE4 #UE4Study #indiedev #土日で音ゲー作ろう pic.twitter.com/bpNG7lTUbl

拡大