![見出し画像](https://assets.st-note.com/production/uploads/images/92962194/rectangle_large_type_2_f7258d8f5db90c723b307d09a3d8fd9e.png?width=1200)
INSIDE OF THE WATBOX v4 【OPENTHEWATBOXの内側解説】
こんにちはこんばんはおはようございますW@です。
この記事はCluster Creator #1 Advent Calendar 2022 10日目の記事です。
昨日はメタらいおんさんで魔法の国エアリス(eAlice in magicland)〜謀(はかりごと)にはご用心〜 仕掛けについてでした。
制作に当たっての裏話など見れて面白かったです!
![](https://assets.st-note.com/img/1670593201300-faz0gUNR0t.png?width=1200)
さて、今回は自分の代表的なイベントといっても過言ではない
OPENTHEWATBOX
についてのギミック解説などしていきたいと思います。
OPENTHEWATBOXについて
OPENTTHEWATBOXとは?
OPENTHEWATBOXは自分が好きなように作る音楽イベントです。
やりたいようにDJ、会場、演出を一人で作っています。
再演を含むと過去9回行っており前回はVer4を初公演しました。
ちなみに、後ろのついてるVer表記はシリーズ的なもので、
Ver<会場更新>.<演出更新>R^<同じ演出での再演回数>
的な感じで増えていってます。
共通テーマ
OPENTHEWATBOXのメインは他では見られないような『音楽×演出』です。
Ver2.X以降は特に演出に力を入れており、音と演出が完全にマッチした体験ができるように作っています。
また、『だれでも楽しめる』ということも意識しています。
clusterのイベントの良さは色々なデバイスで多くの人が同じイベントに入れることだと思っているので、
いくら演出がすごくてもPC以外はFPSが下がりまくるということが無いように軽量化のことも考えながら作っています。
過去のOPENTHEWATBOX
それぞれの会場
・DJやってみる! ・V1.1R
初DJ&初イベントだったこのイベント。
最初はOPENTHEWATBOXのタグが存在していなかったので、画像がそんなに残ってないのが悲しみ。
![](https://assets.st-note.com/img/1669877884896-rMu8aF8yyl.png?width=1200)
![](https://assets.st-note.com/img/1669877927880-I67YYRSmjr.png?width=1200)
![](https://assets.st-note.com/img/1669878001561-j1OTIYkd5P.png?width=1200)
・V2.0 ・V2.1R ・V2.1R^2 ・THEWATBOXES
最初の会場よりも演出量が格段に増えた。
増えすぎたがために、ボタン式を諦めLogic+Timeline式へ変更した。
![](https://assets.st-note.com/img/1669878787884-Bfq8GtTEMf.png?width=1200)
![](https://assets.st-note.com/img/1669878880649-YIAQhVK1C9.png?width=1200)
![](https://assets.st-note.com/img/1669879564840-bHvMDILbCM.png?width=1200)
・V3.0 ・THEWATBOXES ・V3.1R^2
更に演出量が増えすべてをTimelineで制御するように変更。
作業量もめちゃくちゃ増えた。
そのおかげで、音と演出を完全にマッチできるように。
![](https://assets.st-note.com/img/1669879642265-TiI9yBtshj.png?width=1200)
![](https://assets.st-note.com/img/1669879801381-2hO7F2ks9O.png?width=1200)
・V4.0
V3.Xと同じく完全にTimelineで制御。
ただし、演出量と作業量が爆増。
![](https://assets.st-note.com/img/1669881576896-48SsrUQYdi.png?width=1200)
データ比較
・イベントデータ
イベントの再演はだいたい3回前後くらいにしようと考えてます。
開催するたびに参加者が増えていくのはありがたい限りです。
![](https://assets.st-note.com/img/1669881650281-OdVORNwBrI.png?width=1200)
・会場データ
回を重ねるたびに自分の中の技術革新が起きてどんどん進化していっています。
それに加えて負荷がやばいことになってます。
![](https://assets.st-note.com/img/1669887325208-JDIvr1coH5.png?width=1200)
OPENTHEWATBOXv4.Xの会場について
音楽について
OPENTHEWATBOXの特徴の一つとして音が良いという点があります。
clusterのDJイベントの多くはリアルタイムでDJを行うため現状ではマイクから音源を流す必要があります。
そのためどうしても音が劣化してしまいます。
そこで、このイベントでは事前に繋いだ音源をワールドに組み込み、Timelineで再生しています。
音源を組み込むことでワールドの容量が増えてしまいますが、その分シンプルな会場にしているのでそこまで問題にはなってないと思われます。
(ワールド容量の8割以上が音源)
![](https://assets.st-note.com/img/1670580496363-1lpWG49DII.png?width=1200)
ライトの制御方法について
固定ライトの制御は基本的にSpriteをアニメーションさせ、それをRenderTextureをつけたCameraで撮影し、そのRenderTextureをそのままテクスチャとしてモデルに反映させています。
![](https://assets.st-note.com/img/1669889610196-RhZN4T1y0A.png)
![](https://assets.st-note.com/img/1669889639976-bdi0NYC5WR.png)
![](https://assets.st-note.com/img/1669889707333-gmA69eAUU4.png)
![](https://assets.st-note.com/img/1669889752795-jxnDMi4Xbx.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/92381883/picture_pc_6476ab749cdeb953e4412feba45d308f.gif?width=1200)
この方法の利点としては、
・複数の照明を1箇所で管理できる
・比較的簡単に様々な動きを作ることができる
・Materialを変更しないためAnimationで制御しても負荷が増えない
などがあります。
色についてはTimelineからSpriteの色を変更するだけなので、どんな色でも設定可能です。
ただし、一つ一つ色を制御しようとすると演出を作る際の負荷がやばいことになるので基本的に白にしておいて、視界ジャックで色を乗算することで色がついているように表現しています。
視界ジャックについては後で説明します。
ビームライト自体について
ビームライト自体は白百合めしべさんの【Unity】Simple Volumetric Lightシェーダー (早期アクセス版)を少し改変して使用しています。
![](https://assets.st-note.com/img/1669890697528-5MVEjojgEA.png?width=1200)
ボリュームライトと言うともう一つnoribenさんのビームライトシェーダー / BeamLightShaderが有名ですが、
めしべさんのものよりも負荷が高く、特にライトを200以上使うこのイベントでは使用できないと判断しました。
(TweetはQuest単体動作の様子です)
軽量化のこと考えたら
— W@(㍗)⏸ (@what_wat_) September 6, 2022
やっぱりめしべさんのライトなんだよなぁ。 pic.twitter.com/ebVu6ADkRR
ビームライト制御方法について
ビームライトの制御は主に
・パラメータの制御
・動きの制御
の2つに分かれています。
・パラメータの制御
パラメータとは、ビームライトの
色/明るさ/サイズ/長さ
のことで、そのままだとMaterialの値を変更しなければ制御できません。
![](https://assets.st-note.com/production/uploads/images/92384268/picture_pc_98e0ff91ee5e7a9e8fe904b138afe33a.gif?width=1200)
![](https://assets.st-note.com/img/1669891698291-Ygo3OBnvel.png)
そこで、シェーダーとモデルを少し改変し、
ライトと同じようにSpriteの色でパラメータを設定できるように改変しました。
(R:輝度(0~255) G:ライトサイズ(0~255) B:ライト長さ(0~255))
![](https://assets.st-note.com/img/1669891991716-hED0ADyXXH.png?width=1200)
![](https://assets.st-note.com/img/1669892317426-PawEYt2QyA.png)
(UV2に色参照位置、UV3にパラメータ参照位置設定)
![](https://assets.st-note.com/img/1669891951434-espz574bLQ.png)
![](https://assets.st-note.com/production/uploads/images/92384777/picture_pc_0e087e1bbf965f5d67946d4d7a48f585.gif?width=1200)
(左がライト色、右がパラメータ)
・動きの制御
動きについては、あらかじめAnimationで複数の動きを作っておいて、
それをTimelineに並べることで制御しています。
![](https://assets.st-note.com/production/uploads/images/92385305/picture_pc_9eef936774ba27bb3789609cd29edfc4.gif)
![](https://assets.st-note.com/img/1669893137406-DKRfZe8GPm.png)
動き方によってConstraintの設定を変えたものを
複数用意する
動きをBPMに合わせる方法については、CCGで記事を書いていますのでそちらを見てください。
視界ジャックについて
OPENTHEWATBOXでは以下の2種類の視界ジャックを使用しています。
・画面演出用
・色の乗算用
・画面演出用
ここで言う画面演出とは以下のような画面の拡大縮小や振動などのことです。
使用場面としては、演出を激しくしたいときなどに使います。
ただ、使いすぎると酔いにもつながるので程々に。
![](https://assets.st-note.com/production/uploads/images/92931586/picture_pc_b345646370f4da41ab363361d68b0ea4.gif?width=1200)
アセットはreimhakさんの【視界エフェクト】パリピシェーダーv12.1【シェーダー】を使用しています。
このアセットには拡大縮小や振動以外にも大量のエフェクトがあるのでおすすめです。
(ただし、一部の演出はスマホなどには対応してないようです…。)
![](https://assets.st-note.com/img/1670570689557-9ZmPXZEh7K.png?width=1200)
・色の乗算用
「ライトの制御方法について」で書いた通り、負荷軽減のためビームライトの色は基本的に白で統一されています。
そこで、視界全体に色を乗算することにより任意の色で光っているように見せています。
![](https://assets.st-note.com/production/uploads/images/92382448/picture_pc_f38ea6696df0731b40a1cc96a9e7ce20.gif?width=1200)
シェーダーはAmplifyShaderEditorを使用して作っています。
とは言え、自分もよくわかっていなのでとりあえず使用している設定を貼っておきます。
(多分描画の最後らへんにそのオブジェクトの色を画面に乗算するようになってるはず…。)
![](https://assets.st-note.com/img/1670572047627-qCxUAX05wS.png?width=1200)
(もっといい方法がわかる方は教えてください…)
演出制御方法
OPENTHEWATBOXでは基本的にTimelineで演出のすべてを制御しています。
Timelineで演出を組む利点としては
・音と演出がセットなので音ズレがない
・再現性100%
・本番は再生するだけで手間がない
などです。
逆に唯一にして最大のデメリットとしては、準備がめちゃくちゃにしんどいということです。
作業自体は事前に準備したAnimationClipを並べるだけの簡単な作業です。
![](https://assets.st-note.com/img/1669893781937-xImw6Ol1Wd.png?width=1200)
カメラについて
今回は初の試みとして、配信用のカメラも演出の中に組み込みました。
制御方法は、CinemachineというUnity標準のアセットを導入してTimelineで演出と一緒にカメラを制御し、撮影時はローカルギミックでカメラマンだけに有効にするようにギミックを組みました。
![](https://assets.st-note.com/img/1669894370929-V2mASd3iAw.png?width=1200)
![](https://assets.st-note.com/img/1669894429152-de1DpWq4gK.png?width=1200)
![](https://assets.st-note.com/img/1669894486849-5YhA6vssaz.png?width=1200)
![](https://assets.st-note.com/img/1669894532833-xJzHkhP4MP.png?width=1200)
その他裏側システム
・疑似スタッフギミック
今回のイベントでは、cluster標準のStaff機能の他に
ワールド内で擬似スタッフギミックををいくつか作りました。
![](https://assets.st-note.com/img/1669894714441-FP4OmelCdT.png?width=1200)
スタッフモードになると、ローカルギミックで一部のボタンなどが有効になります。
このようにすることで、観客からボタンを押されたり、観客にとっては不要な負荷(演者用確認パネル等)を抑えることができます。
![](https://assets.st-note.com/img/1669894824909-T3xxms2VX6.png?width=1200)
![](https://assets.st-note.com/img/1669894869634-H3gmSLEqTu.png?width=1200)
![](https://assets.st-note.com/img/1669894897993-jAlWdKzs2q.png?width=1200)
ローカルギミックに関しては、この記事で詳しく説明しているので良ければ見てください。
・BANギミック
前回イベントの最後に、巨大アバターを使用した荒らしに遭遇したので、その対処法として巨大アバターを使用すると遠くへ飛ばされるギミックを導入しました。(通称9191返し)
![](https://assets.st-note.com/production/uploads/images/92939515/picture_pc_deb31eebbb1336abfd4547e76e89e235.gif?width=1200)
簡単にギミックを説明すると、天井にコライダー用意してOnCollideItemGimmickでプレイヤーを飛ばしているだけです。
![](https://assets.st-note.com/img/1670579986111-WrZYF77qQh.png?width=1200)
詳しい実装方法に関しては9191さんが解説しています。
名前非表示アバターの対策『9191返し』もう一度まとめます
— ⛩(カミサマノイルトコロ) (@9191_1919) September 25, 2021
①CUBEを作ります
②添付画像のギミックを組みます
③objectの左上のチェック外しとBOX colliderをis triggerがポイント
④ワープ先はDespawn Heightか閉じ込めたい場所とかに指定
これを透明アバターを禁止したいところの上空に展開 pic.twitter.com/yAPqTCkiT4
最後に
いかがだったでしょうか?
ここまで読んでくださった方なら分かる通り、めちゃくちゃ手がかかってるイベントであり準備もめちゃくちゃ大変です。
ただ、その分イベントが終わったあとは達成感が凄まじいです。
ぜひ皆さんも一大イベント的なイベントを開いてみてはいかがでしょうか?
…本当は、他にも演出のこだわりとか色々書きたかったですが、時間と気力が持たなかったのでここまでということで。
次回はさくらさんで2022年 V音楽勢にとってclusterはどのような立ち位置になったかです!!
2022年は去年に比べて音楽系イベントが激増した感じがするので気になりますねぇ~
それでは!
この記事が気に入ったらサポートをしてみませんか?