初めてclusterでゲームワールドを制作してみたときのメモ

記事を書いた目的

• clusterでワールド作成自体が初めてだったので、忘れないように要点だけまとめておきたかったから。
• 続編に向けて、大変だったところを覚えておきたかったから。
• 作成時に使用したゲーム機能だけをリストアップしたかったから。
  • 実際にはもっと沢山のゲーム機能がありますが、ほとんど使いきれていません。

制作したワールドについて

• clusterでプレイできるVRリズムゲームです。
  • https://cluster.mu/w/17569170-80b1-4960-96a7-b5b25dc7deb1
• キセルを両手に持ってノーツを叩いて消していきます。（当てるだけで消えます）
• 沢山ノーツを消すと高ランクをゲットできます。
• WindowsPCでHTC VIVEで動作確認済み（制作したマシンがこれというだけですが。）
  • スマホやデスクトップモードではおそらくキセルが片手でしか持てないので高ランクは難しいですが、楽曲の視聴はできると思います。
• プレイ例
  • 動画はこちら（ショートバージョン）
    • https://youtu.be/ZxSACAAQJdk
  • 動画はこちら（フルバージョン）
    • https://youtu.be/_5tjwz_tQBE
  • 画像例
    

制作のきっかけ

• 2020年6月からclusterでゲームを作るための新機能が実装されました。
• ちょうど同じタイミングで、2020年6月5日に、いつも密かに応援させていただいている疾風P氏が新曲「初音吹雪に御用心！」を公開されました。
• 「公開記念に何か作りたい！」と思い、Beat〇aberのようなVR音楽ゲームがclusterでも出来ないだろうかと考えたのがきっかけです。
• しかもゲームワールドコンテストというのがclusterで開催されていたので合わせて応募してみようと思いました。
  • でもコンテストに気づいたのが6月末だったので、正直間に合わないだろうと思って、とりあえず作るだけ作るつもりでした。
• 色々四苦八苦しましたが、何とか公開しました。

楽曲について

• 初音吹雪に御用心！
  • ニコニコ動画
    • https://www.nicovideo.jp/watch/sm36982274
  • Youtube
    • https://youtu.be/KDdH_0bbQmU

使用したゲーム機能

• 使用した場所ごとに紹介
  • STARTボタン
    • 
    • フォーカスを合わせてクリックする（トリガーを引く）と楽曲が開始される
    • ゲーム機能
      • Interact Item Trigger
        • 
        • トリガーが発動するとKey「startbutton」が送信されるように設定
        • ゲームオブジェクト「TimelineManager」にアタッチされているSet Animator Value Gimmickが上記のKeyを受け取り、タイムラインを開始させて楽曲（ノーツや演出も含めて）を再生する。
  • STOPボタン
    • 
    • フォーカスを合わせてクリックする（トリガーを引く）と楽曲が停止し、初期状態へ戻る
    • ゲーム機能
      • Interact Item Trigger
        • 
        • トリガーが発動するとKey「stopbutton」が送信されるように設定
        • ゲームオブジェクト「TimelineManager」にアタッチされているSet Animator Value Gimmickが上記のKeyを受け取り、タイムラインを開始させて楽曲（ノーツや演出も含めて）を停止する。
        • 楽曲再生用のタイムラインとは別のタイムラインを読んで完全停止させている。
        • 今思えば、なぜSTARTボタンのTriggerのTargetを「This」にして、STOPボタンは「Global」にしているのか、謎だ。どちらかに統一しておいてもよかった気がする。
  • TimelineManager
    • 
    • 上記のSTARTとSTOPボタンに対応して、タイムラインを呼び出すゲームオブジェクト
    • 管理用オブジェクトなので実体はない
    • ゲーム機能
      • Set Animator Value Gimmick
        • STARTとSTOPのトリガーに対応して、「active」と「deactive」のAnimator ParameterをAnimatorへ送信
  • キセル（左右）
    • 
    • 左右の手でグリップを握ることで持つことができる
    • キセルの先端をノーツに当てることでノーツを消すことができる
    • ゲーム機能
      • Movable Item および Grabbable Item
        • 握って持てる機能の実装
      • On Collide Item Trigger
        • 
        • 衝突相手（ノーツ）へ「hitL (hitR)」を送信
        • 全体へ「distort」を送信
      • On Grab Item Trigger
        • 
        • キセルを握ったときのトリガーとして「grabL (grabR)」を送信
      • Play Audio Source Gimmick
        • 
        • 上記の「grabL (grabR)」を受け取り、握った時のサウンドを鳴らす
  • ノーツ（赤と青の三つ巴マーク）
    • 
    • キセルに接触したら蝶のパーティクルと音を発生して消える
    • ゲーム機能
      • Set Animator Value Gimmick
        • 
        • 蝶のパーティクルを発生
      • Play Audio Source Gimmick
        • 
        • 消えるときのタンバリンの音を再生
  • 地面から上がるパーティクル
    • 
    • ノーツが消えたときに、消えたノーツに応じて、赤と青のどちらかの色に変化する
    • ゲーム機能
      • Set Animator Value Gimmick
        • 
        • 消えたノーツからのKey「hitL(hitR)」を受け取ってアニメーションでパーティクルの色を変えている
        • このコンポーネントはノーツごとに複数アタッチしている。（左右８ノーツなので１６つ分）
        • 各ノーツがキセルから「hitL(hitR)」を受け取って、そのノーツからこのパーティクルが「hitL(hitR)」を受け取るという横流しのような感じのことをやっているが、果たしてこの使い方が合っているのかわからない。。。（別の方法があるかも）
  • 地面の歪み
    • 
    • キセルが何かにヒットした場合にゆがむ
    • ゲーム機能
      • Set Animator Value Gimmick
        • 
        • キセルから送信された「distort」によってアニメーション再生
        • Globalを使っているので何にヒットしてもゆがむことになります。
  • ランクゲージ（左右）
    • 
    • ノーツを消したときにゲージが少しずつ溜まっていく
    • ゲーム機能
      • Set Animator Value Gimmick
        • 
        • 消えたノーツからのKey「hitL(hitR)」を受け取って、ゲージを少しずつ加算「add」していく
        • 地面から出るパーティクル同様、ノーツ分アタッチしている

clusterのゲーム機能以外の部分で補足

• ベースとなったワールドについて
  • ClusterCreatorKitSample内のシーン「MinimalSample」を使用させてもらいました。
    • https://github.com/ClusterVR/ClusterCreatorKitSample
• ゲーム開始時の緞帳（どんちょう）について
  • 画面全体を覆いたかったので、別のカメラを使用しています
    • 
    • Clear Flagsを「Depth only」にします
    • Field of Viewはすごく小さく「0.1」にしていますが、こうしなくてもいいかもしれません。
    • Depthを「0」以上にすることで前面に貼りついて見えます。
    • Target Displayは「Display 1」にします。（おそらくMain Cameraと同じにするということ？）
  • 別のカメラへ出力するCanvasを用意します
    • 
    • Render Modeを「Screen Space - Camera」にします
    • Render Cameraを上記で作成したカメラに設定します
    • Plane Distanceは「900」と非常に遠くしていますが、別にこの数値でなくてもいいかもしれません。
  • Canvas内の画像について
    • Imageコンポーネントで表示しています
      • 
      • Sprite Rendererを使いたかったのですが、実際使うと何か２重に重なって見えるような感じになってしまったのでやめました。
• タイムラインのノーツについて
  • 左８ノーツ、右８ノーツを用意して、出したいときにActivation ClipをActiveにしています。
  • 各ノーツは更に４つまでゲームオブジェクト複製して用意しているので、同時に４つまで出せます。（逆に４つ以上出せない）
  • タイムライン画像
    • 

大変だったところ

• ノーツを楽曲に合わせてタイミングよくTimelineに配置していくところ
  • １つ１つほぼ手作業でした（400個ほどあった）
• そもそも和風の雰囲気をどうやって作ればいいか。
  • これを考えるところが一番時間かかったかも。

焦ったところ

• clusterのアップロードはとてもシンプルでやりやすかったですが、エラーで止まったときは完全に詰んでしまいました。（再アップロードしたらできたので助かりましたが。）

できなかったこと

• できるかもしれないけど自分ができずに諦めたところを紹介します。
  • キセルを振る方向を判定する
    • Beat〇aberのような、いわゆる「切る方向」を決めることができませんでした
    • しかし、これはノーツに、方向に応じて成功と失敗のコライダーを付けてあげればできそうな気もする。
  • 歌詞の焦点が合いずらい
    • Cameraの設定を色々いじってみましたがあまり改善されなかったので、結局今の状態に落ち着きました。
    • VRで左右のカメラがどのように視差を設定しているのかよくわかっていない。
  • 同じ位置のノーツは連続４つまで
    • 連続して同じ位置へ短い間隔でノーツを出したい場合は連続４つまでにしました。
    • これは増やそうと思えばもっと増やせたのですが、作りが非常に大変になるため４つまでの制限にしました。
    • また、プレハブをタイムラインから生成して呼び出すことも試したのですが、なぜかギミックがうまく動かなかったので諦めました。（これができれば一番楽だったのだが。）

次回やりたいこと

• キセルの振る方向を判定する
• 複数人でプレイできるようなゲーム性
• 振って当てる形式もいいが、歩いて踏む形式もやってみたい。
• 軽量化をほとんど考えていなかったので次回は少し考えたい。（110MBもあった）
• スマホで動作確認をしている暇がなかったので次回はやりたい。
• ノーツの曲に合わせた微調整が大変すぎて丸２日くらいかかったので、もっと楽な方法を考えたい。。。

まとめ

• ほとんど「Set Animator Value Gimmick」を使っている感じでした。
• あとは、Unityのアニメーションで力業で動かしていった感じです。

お借りした素材

• のりべん専門店
  • https://noriben.booth.pm/
    • Noriben Fireworks（花火パーティクル）
    • ビームライトシェーダーとモデル
    • ゆがみシェーダー（空間歪ませ Distortion Space）
    • 桜パーティクル
  • かなり活用させていただきました！ありがとうございました！
• virtual-boys
  • https://virtual-boys.booth.pm/
    • GPUパーティクルセット ver1.3
  • 床から出てくるパーティクルで使用
• Japanese textures
  • https://www.deviantart.com/thethecoco/art/Japanese-textures-96321419
  • 背景に使用
• pattern-sozai.website
  • http://www.pattern-sozai.website/data/%E5%92%8C%E9%A2%A8%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E6%9F%84%E3%81%AE%E5%90%8D%E5%89%8D
  • 床に使用