
【5月】制作コンテンツ
はじめに
4月からスタートしたコンテンツ制作の第2弾。
「1年後には手元に12種類のコンテンツがある」を目標に月ごとの制作物を紹介します。
5月制作コンテンツ紹介
自主制作第2弾は、実際に振って切ってリズムをとるコンテンツ「JUST CUT DANCE」を作りました通称「JCD」です。いわゆる音ゲーです。


特定のリズムでランダムに生成されるコアをサイリウム状のブレードで粉砕することが出来ます。
粉砕出来ず見逃してしまうと上部のHPが減っていき、
ゼロになるとゲームオーバーです。
HPがゼロになる前に曲を完走するとクリアになります。
ブレードは降らないと当たり判定が無く、
タイミングよく当てに行くい必要があります。

今回の経緯
前回とはまた別タイプのコンテンツにしようと模索し、
iPhone標準搭載のセンサー機能を使えないかと考えました。
その結果行きついたのが「ZIG SIM」というアプリ。
対応端末であればAppleStoreやGoogleplayから無料でダウンロード出来、
ジャイロセンサーや傾き情報などをパソコンに送ることが出来ます。
「ZIGSIM」を使って角度の数値を取得出来るようになったため、
現実のスマホとUE5上のオブジェクトがリンクして動くように!
回転させて謎解きやボール転がしも考えましたが、やっぱり切りたい!
と思い今回のコンテンツとなりました。
作成にあたってこちらの動画を参考にさせて頂きました。
今制作の課題
「ZIG SIM」と参考動画を元にスマホをコントローラーにすることに成功したが、大きく2つの問題に悩まされた。
課題1・ジンバルロック
自分自身10年近く3DCGに携わっているのだが、
恥ずかしながらこの言葉を知らなかった。
問題となったのはスマホの回転に合わせオブジェクトを回転させた時。
X軸やY軸の単軸に対しては実際の角度とリンクしていたのだが、複数の軸を複合的に回転させるとどうもおかしい。
まさしくこれが「ジンバルロック現状」に加え「角度の計算順序」による影響によるものだ。
そもそも「ジンバルロック」とはどのような現象のことを言うのか、
ジンバルロックの細かな説明だけで記事が1つ書けてしまうためここでは解説しきれないが、普段3Dソフトを扱う上で必ず触れている回転のギズモ、
見た目は各軸がクロスしている状態だが、正確には階層になっていて親子関係にある、その為一定の軸が90度回転した際に別の軸に重なってしまい、本来3軸方向あるはずのギズモが二軸になってしまうのである。
その為消滅してしまった軸に回転させることが出来なくなってしまう、
この現象をジンバルロックと言う。
ジンバルロックの回避に加え、物体を回転させるうえで大切なのが「角度の計算順序」である、特定の角度にするために、[X]→[Y]の順番で計算するのか、[Y]→[X]の順番で計算するのかでその角度にたどり着くまでのルートに誤差が生じるのだ。ここで前述した各軸の親子関係が関わってくる。
例えば[X]だけを動かしたくても[Y]が子に設定されていた場合は、子である[Y]にも数値が代入されてしまうのである。
この現象を回避するために用いるのが「Quaternion」
簡単に説明してしまうと[X][Y][Z]とは異なる架空の軸のことである。
想定した角度になるように新たな軸を新設してその軸で回してしまうことで上記の問題を回避している。
「ZIGSIM」には「Quaternion」が実装されており、[X][Y][Z]とは別に[W]軸の数値も取得出来るようになっている。
また、UE5側にも「Quaternion」に対応したノードがあるため、
今回の今回はそれを活用している。
課題2・譜面
当たり前だがリズムゲームなので叩くための譜面が必要になる。
だが筆者は楽器演奏(購入したギターはしっかりとホコリでコーティングされている)どころか楽譜も読めない。
そこで、使用する楽曲を元にアナライザーを作成し数値化、一定の数値以上でコアを生成するように設定した。
だがこれが大失敗、本来ならベースやメロディーごとに数値を取得するべきなのだが、全部ひとまとめにした為にあの「宮本武蔵」に手が4本生えても追いつかない譜面が完成した。。
その後の試行錯誤のうえ、楽曲のBPM(曲のテンポ)に合わせたタイミングでコアをランダム生成するに落ち着いた。
UE5簡易構築講座
今回もかなり薄く紹介。

ピンクの枠がコリジョン(あたり判定)、
コアが通過する際に立方体を光らせている。
上手のピンク枠はダメージ判定の為のコリジョン。

今回の肝になる「ZIGSIM」からの情報を取得する為の構築。
ここで作成されたイベントから必要な情報を抽出しUE5上のオブジェクトに影響させている。

スマホを回転させた時に実際の角度と数値があってなかったので各軸の数値を無理やり補正。。
絶対もっといいやりかたがあるはず。。。
コンテンツの課題
楽曲を扱うならやっぱり譜面も曲に合ったものにしたい。
そうすることで他の楽曲を読み込ませることで自動で譜面を作成することも可能になる。
また、現状の作りだとWi-FiやIPアドレス毎に新規にデータをビルドして書き出さなければいけない為、コンフィグ画面を実装し設定の変更をそこで完結出来るようにしたいと考えている。
また、可視性やUIのどは随時アップデートしたいと考えている。
(現状だと「GAMEOVER」が手抜き過ぎる。。ダメージ時にカメラも揺らしたい。。)
裏話・小話
やはり月1でのコンテンツ作成はハードルが高い。
1週間必死に調べて試行錯誤したがオブジェクトが1つもプロジェクトに増えなかった時は少し諦めかけた。。
大人だが刀で物体を切るのは楽しい。
コアが出来て切れるようになってからは意味もなくスマホを振り回して20分くらい無心で破壊を楽しんだ。
終わりに
今回供養する素材は発生しなかった。
まだ2回目だがもう2個出来た、
取り合えず両手に1つずつ持つ構図は作れる。。