PNGミュージアム5 ワールド制作記:ギミック・演出編
PNGmuseum5、無事公開することができました!わーい!
お楽しみ頂けていますでしょうか。
今回からワールド班の一員として制作に参加し、ワールド制作の過程で得た気付きや工夫、ギミック解説などをお話できればと思います。
めちゃめちゃ長いです。すまない。
ゆっくりまったり読んで下さい。
※随時更新コンテンツです! まだ内容増えます。
更新履歴
2024/09/10:公開
2024/09/12:Navigation・古代PNG文字の内容・おわりにを追記編集しました。
自己紹介
ふぁゔです。
VRChatではダンスをしたり、ワールド制作をするのが得意です。
代表作はVRPDanceStudioの練習用ダンススタジオワールドです。
軽量・機能重視・映えを意識した作りで多くのダンサーの方にご利用いただいております。
ワールド制作・ギミック制作の依頼も受けてみたいです!
ご興味のある方はお気軽にDM下さい!
新卒就活もしてます。Unityほかデザインも幅広くできます。お仕事ください(´;ω;`)
PNGミュージアムとは?
不定期に開催される、VRChatに関する画像形式のものならなんでも集めてなんでも展示する個人主催の非営利イベントです。
PNGミュージアムは、創作を楽しむ人が自らの創作を発表し、同じように創作を楽しむ人と繋がることを目的とした、創作者のためのコミュニティイベントです。
何を担当した?
私は今回主に以下のことを担当しました:
ギミック関係
UIコンポーネントの作成
gitの全体管理
テスト・デバッグ
本番環境のワールド更新
制作期間の序盤・中盤は、学校が終わったあとの時間で集中開発
→ねりねり会(隔週開催のミーティング)でデバッグやフィードバックをもらってギミックを作ったり、
終盤や開催直前は、チームで並行開発したgitブランチを集め、1つのシーン、ワールドとしてまとめ上げる部分をイオさんと協力して行いました。
つくったもの解説
9ヶ月、唸りに唸り手と頭を動かし続けて世に送り出した、我らが成果物たちのご紹介です。
大量のPinterestのリファレンス、VRChatの有名・トレンドになったワールド、フレンドのフィードバック、リスペクトと沢山の知見が詰まっています。
1. 拡張メニュー
過去のワールド制作で作成した、uGUIを使ったギミックが好評だったので、応用して何かできるかなと考えたところ、拡張メニューの開発を思いつきました。
2D平面に収まるuGUIのメニューほど美しいものはないと思っているので、せっかく作るならガチなやつ作るか…となり、少し大掛かりにしてみちゃいました。
最近学んだ、Adobe Illustratorを使ってみたいというのもメニューのデザインに手を出したきっかけでした。
アドビことはじめ クリエイティブカレッジの募集に、Illustratorコースで当選したのがきっかけでイラレの基本機能を学習していました。
デザインの制作
PNGミュージアム4のエントランスに浮かんでいたチケットが印象的だったので、チケットをモチーフにしたUIデザインを制作しました。
デスクトップ版とVR版で若干違うデザインですが、ほとんど同じです。
半券の部分がロゴになっています。案外収まりが良かった。
バーコードがついていたり、斜線でおしゃれに。
思い切ってチケットの中身をボタンにしちゃいました。
PNGミュージアムには公式キャラクターの「PNGちゃん」がいて、
1号、2号、3号、4号ちゃんと名前がついています。
それぞれにイメージカラーが設定されているため、ボタンのハイライトカラーをPNGちゃんカラーにしてみました。
頭から順番に1,2,3,4号ちゃんカラー。
今回UIの素材をたくさん作りましたが、PNGちゃん繋がりで「4」という数字をかなり意識して制作しています。
なるべく全員の立ち絵・カラーを均等に使用し、使っていない立ち絵がないかを確認しながらデザインしていました。
UI素材の書き出し・Unityでの設定
完成したらパーツごとに出力してUnityに取り込んでいきます。
こちらのnoteを1年前くらいに読んで衝撃を受け、なんとなく制作フローがつかめた気がしたので、やるか。(見切り発車)しました。
デザイン時点で、どのパーツがどう動くかを決めておく
のがとても大事。
ヒエラルキーの入れ子構造のことも頭に入れながら制作する必要があります。
Canvasに配置した要素は、階層が下にあるものが先に描画されるため
なんとなく意識する必要があったり、Animatorと動かすものを少なくしていくために必要です。
基本の形(VR版デスクトップ版ほぼ同様)はこんな感じ:
Menu_root
├─ Menu_MAIN(メインメニュー画面)←素材作成
│ ├─ Button_MYpng(Toggle)
│ │ ├─ img_btn_MYpng ←素材作成
│ │ └─ Checkmark ←素材作成
│ ...
│
├─ Menu_Event(イベントカレンダー画面)
├─ Menu_Navigate(ナビゲートシステム:画面なし)
└─ Menu_Setting(設定メニュー画面)
Sprite Atlasでパッキングし、リソース節約
作成したUI素材は、Sprite Atlasという機能を使用してパッキングしました。
複数のテクスチャを 1 つのテクスチャに統合するアセットです。
使用時には個々のテクスチャファイルとして使用でき、
ランタイムでは1枚のテクスチャファイルとしてロード、1回のドローコールに抑えてくれます。
画像
以下は手順。
Package Managerで「2D Sprite」Packageをインポート
Projectウィンドウの任意のフォルダでCreate> 2D > Sprite Atlas
作成したSprite AtlasのObjects For Packing > Packablesにパッキングしたいテクスチャを設定
インポートすぐは警告が出ていると思われます。
Sprite AtlasにはV1とV2の種類があり、V1の使用は非推奨のため警告が出ているそうです。
Project Settings > Editor > Sprite Packer > Mode から
Sprite Atlas V2 - Enabledに変更しておきます。
加えて、パック対象テクスチャをできるだけ詰め込んでくれるTight Packingがデフォルトで有効になっていますが、
この機能はサポート対象外なので外しておきます。(警告が出る)
角丸のUIを作成したときなど、隣にパッキングしたテクスチャが見えてしまうことがあります。その時はPaddingを大きくしてパッキング時の余白を広げましょう。
Objects For Packingにはフォルダごとアタッチすることが出来るため、パックしたいものをすべてフォルダに突っ込んでおいて勝手にパッキングするのが良いでしょう。
こちらの動画で解説されていました。VRChatでも使用できました!
2.Navigationシステム「FriendLocator」
今回の自信作です。
広いワールドの、どこに誰がいるかを壁越しに表示し、
その位置までの最短経路を描画してくれるシステムです。
きっかけは、とみーさんが公開した『ワールドギミック100サンプル集』のサンプル87を目にしたことでした。
これだ…!
新LC京都ブランチだ…!!!
新LC京都ブランチにめちゃくちゃインスピレーションを受けています。
実装できて嬉しかった。
プロトタイプを作る
本番環境と同様の仕様の、プロトタイプ用シーンを作って開発を進めました。
ざっくりな説明:
prefab(ラインレンダラーとカプセルを子に持つ)をローカルプレイヤー以外に追従させる
カプセルは壁越しでも描画され、どこにプレイヤーが居るかわかる
ギミックを起動すると画面にフェードがかかり、
旧)フェード越しに見たときだけ、カプセルとLineが見える
新)フェード越しでなくても、カプセルとLineが見える
旧式はVRChatカメラに映らない仕組み(ステンシル)のため、オミットして新式へ。
prefab自身とローカルプレイヤーとの位置から最短経路を計算、LineRendererで描画する。
プレイヤーが立っているエリアに応じて、カプセルとLineの色を変更する
アートストレージ:白
竜宮城:青
ビーチ:青緑
火山:オレンジ
実装こだわりポイント
・シェーダーめっちゃ書いた
簡単な色描画と、最前面に表示するためのおまじないと、どのエリアの色を描画すればよいかを判断する条件分岐で出来ています。
最前面に表示するためには、
レンダーキューをOverlay(4000)くらい上げて、
ZWrite Off
ZTest Alwaysを設定します。
ZWrite Off
オブジェクトの奥行き情報を記録せず、他のオブジェクトとの奥行き比較を無視する設定です。これにより、通常の描画順を無視してオブジェクトが表示されるようになります。
ZTest Always
オブジェクトを必ず描画する設定です。通常はカメラとの距離によって表示順が決まりますが、ZTest Alwaysでは深度比較を無視し、常に表示されます。
この設定を使用すると、オブジェクトが手前にあるかどうかに関係なく、常に最前面に描画されます。
以下の記事を参考にさせていただきました。この他のシェーダー記事もとても良いので見てみてほしい。
・エリア別カラーリングの選択・描画
EnumをUdonから指定することで色を変更しています。
初期化時に、プレイヤーの座標が、事前に定義した2点からなる領域内に存在する場合はそのエリアのカラーを選択する処理を行っています。
存在判定はコライダー内に存在するかで良かったのかもしれないが…
ポンコツギミック爆誕
今回の実装では
ギミックを起動したらInstantiate()を使ってprefabを生成し、
ギミックを終了したらprefab全てに命令が走りそれぞれがDestroy()されます。
どうやらこれが良くなかった(もしくは、それ以外 ぬるぽではない)らしく、インスタンス人数の増加やインスタンス経過時間によってギミックが崩壊していくことがわかりました…
この辺詳しくなかったので、80人一斉にInstantiate()・Destroy()するときの挙動やリスクについては全然わからないまま開発していました。すまんかった
VRChatの実行ログを舐めるように見てみましたが、ランタイムエラーについてはUdonBehaviorがエラーを吐いた!ことしか記述してくれないのか、わからずじまいでした。流石にどのスクリプトの何行目かは書いて欲しい。知っている方教えてください…😭
その結果、使ってみてください!と言いたい時に限ってランタイムエラーを吐くポンコツギミックになってしまいました。あれぇ…??
ワールド入ってすぐの時には正常に動いているので、是非新規インスタンスでお試しください。
3. エレベーター
PNGmuseum5のワールドでは、展示エリアが複数階に分かれているため、ユーザーがスムーズに移動できる手段として、エレベーターシステムを導入しました。設計・実装時にさまざまな課題がありましたが、最終的には「動く床システム」を採用したり、UdonとAnimatorとの格闘で解決しました。
システム選定
まず、ユーザーをエリア間でどう移動させるかが問題でした。
選択肢として出たアイデアはこんな感じ:
階段:実装も移動も簡単ですが、長い距離をを移動するのには向いていません。設計上螺旋状になりそうだったので危険ですが、バックアップの移動手段として使えそう。
エレベーター:現実的な移動手段ですが、実装には複雑なロジックが必要です。
スイッチやポータル式テレポート:瞬時に移動できる便利な手段ですが、物理的な移動感が失われます。実装は簡単。
大穴に飛び降りる:ユニークですが、ユーザー体験としてはやや過激です。あとは一方向の移動に限られるのも難点です。
最終的に、アートストレージの搬入口のテーマに沿ったエレベーター方式を採用することにしました。
エレベーターならば、地下に降りていく感覚、「物理的な移動感」を与えられますし、上下の移動なので酔いにくいです。
地下のイベントエリアに直接つながっているという設定を補強する目的もあります。
でも正直な話、アートストレージには展示物はないですし、二階にはサーバールーム(!?)があるだけなので、わざわざエレベーターを実装する必要あった…?という部分については少し疑問です🤔
でもいいですよね、エレベーター。扉を閉められて別の階層に連れて行かれるのにはなんとなくワクワクします。
皆さんを地下のフェスイベントにご招待するための専用エレベーターと言っても過言ではありません。
試行錯誤して作った成果です。
直面した課題
VRChatでエレベーターを作るのにはコツが要ります。(採用してから困ったのは内緒)
上昇エレベーターは問題ありませんが、下降エレベーターではユーザーがバウンスしないようにするための対策が必要です。
バウンスさせないためには、床の移動にユーザーを合わせる、
いわゆる「移動床」システムを実装する必要があることがわかりました。
実装方法にも種類があるそうで、ハツェさんの記事を見て学習しました。
動く床システムの採用
そこで、今回のエレベーターには奈良坂さんの「VRChat用乗り物床面追従システム」を採用しました。
動く床面に乗ったプレイヤーが特別なアクション無しに床に追従します。
テストで使ってたらいい感じだったのでエレベーターにしようぜ!と提案したら通りました。やりますやらせてください
以下の特徴があります。(テストとコードでわかった範囲の仕様?)
動く床の範囲をコライダーで定義し、その範囲に触れたユーザーをVRCStationに座らせる。
ユーザーの移動回転入力に合わせて移動することができる。
他のプレイヤーが動く床に乗ったとき、位置と回転が同期する。
起動中は動く床から降りられない設定ができる。
移動中に降りられない設定のとき、Stationは定義範囲から出られない。
移動中に降りられる設定のとき、範囲外に出たらユーザーを降ろす。
動く床起動時、指定したコライダーを無効化し、床が止まるとコライダーが有効化される。
動く床の上に乗っているユーザーは、ローカルユーザー目線では全員同じ床の上に乗っているように見えます。
カゴの位置はプレイヤー間で異なるけれど、プレイヤーのカゴ内での位置は同期しています。
つまり、複数人が同時にエレベーターに乗ると、隣にいるフレンドを感じながら会話も楽しめます。Stationで固定されているので、実際に隣にいるのとほぼ同じ感覚になります。個人的推しポイント。
エレベーターのロジック
エレベーターのカゴの動きを制御するロジックには、UnityのCinemachineのPathコンポーネントとDolly Cartコンポーネントを使用しました。
エレベーターが指定されたウェイポイントを通過するように設定し、スムーズな移動を実現しました。
ウェイポイントの設定
エレベーターが移動する軌道を決めるため、各階の位置にウェイポイントを設定しました。例えば、屋上がウェイポイント0、1階がウェイポイント2、地下がウェイポイント8といった具合です。
地上↔️地下の移動処理は少し独特で、暗転演出を入れるために少し工夫しています。
2から3に移動する際に徐々に暗転を入れ、カゴを7までテレポートさせ、
そこから8までゆっくり移動することで地下までの移動を演出しています。
地下何mなんだ…
Dolly Cartの操作
Dolly CartのPositionの値をアニメーションで制御することで、エレベーターがゆっくり動き始め、スムーズに停止するような動きを作りました。
Animatorで制御することにより、位置の変化にイージング(動きの緩急)をつけ、より自然な動作に仕上げています。
等速移動は悪だと思っているのですが、ちょっとのカーブの傾きでだいぶ印象が変わるんだなぁという学びを得ました。イージングを崇めよ
あとは、カゴの移動が速すぎると絶叫マシンになりかねないので、気持ち遅めの運送になるように調整しました。
イージングをスクリプトで実装できれば最高なんでしょうけど(DOTweenみたいな)、なさそうなのでこういう表現はAnimator使うしかないのかな…🤔
拡張としてNukoTweenとかが使えるのかな 今度別ワールドで試してみようと思います。
問題点と今後の展望
Genericアバター、エレベーターに乗れない問題
会期が始まってから問い合わせを受けて発覚したのですが、
Genericアバターの状態でエレベーターに乗ると、トラップドアのように落下してしまうらしい…
どうやら、GenericアバターはVRCStationに座ることができないとか…
デバッグ漏れです。でなおしてまいれ。
正直もっといい手法や実装方法があったはずですし、建物のモデリング・設計段階で工夫すればより良くなる可能性がありそうです。
例えばShaderFesのように、密閉空間の箱に乗って、ドアが閉じた瞬間に別空間に転移させて上昇している映像を見せるとか…
今回の問題点は、
360度透明な中身の見える箱
箱の中身が見えてしまうので、テレポートが丸見え
1基のみのエレベーターを動作させたこと
壊れたらおしまい
同期させると待ち時間が長すぎる
地下に行ったエレベーターを呼ぶのに30秒かかる
カメラとシェーダーを使ってハックできそうという噂を聞いたので、次はチャレンジしてみたいですね。動作の同期が絡むと大変すぎるので…あまり考えたくない…
4. 古代PNG文字
遠い昔、遥か彼方のインターネットで・・・
火山といえば洞窟!洞窟といえば未知の領域!
未知といえば古代の遺跡!
といろいろあって古代文明的な要素を作ることになりました。
でも、古代人の過ごした痕跡を残そうにも、英語や日本語を使って表現してもなんか面白くない!
フォントを作りました
PNGちゃん製作委員会のらくちゃさんに、「古代PNG文字」26文字+数字10文字のデザイン・及びフォントアセット化をしていただきました…!!
マジですげぇ…
ワールドで確認できる文字は以下の通り。
とりあえず、アルファベットと1対1対応する架空文字を作成しました。
この他にも数字のフォントもあります。
もし余裕があったら大真面目に設計して、それぞれの文字/単語の意味と成り立ちも考慮して設計してみたかった。
アルファベット対応だとどうしても長文になってしまうため、1文字にまとまった意味をもたせる言語が良いと思うのですが、難しいわな…
製作が佳境に入るあたりでQuizKnockが未知の言語の世界を冒険するゲームの実況をしていて、「これじゃん」となりました。今度遊ぼう。
フォントになったおかげで、制作班が謎の古代文字を書きまくる、とんでもない現場になりました。
中でもワールド班スタッフのねこみかんさんはほとんどの文字を暗記していた。その場で読み解いたのはビビった。
突然意味不明文字を出しても困ってしまうと思ったので、こういうのをおいたり、入口左のチルスペースに「PNG」の3文字を配置して、なんか変な記号があると認知させるようにしてもらいました。
この報告書はどこに置くかは本当に決めてなかったので、火山エリアの絵の前にちょこんとおいておくことになりました。もっと隠したかったネ…
解読班現る
もしかしたら全部の文字を読むためのヒントが足りてないんじゃないか、
そもそも読んでみたいと思ってくれるだろうか…
とビクビクしていましたが、
解読版の方が無事現れてくれました。本当に嬉しかった…!
5. アートストレージ館内マップ
アートストレージのマップが作りたくなったので作りました。
イオンモールとかららぽーとにありそう
アイソメトリック図法という立体を斜め上から見た状態の表現方法です。
Illustratorで作成しました。
BAD UI
しかし、このエリアマップは結果としてはBAD UIでした。
色がついていても、
「ユーザーはそこが展示エリアだということを知らない」
のです。
PNGミュージアムは今のところ、ワールドの内容は公開まで秘密というスタンスのイベントです。
そのため、ここに行きましょうというユーザーへの意識付けが出来ていなかったがゆえの事故でした。完全に盲点でした。
明らかにコンクリートではない部屋と大きな絵画があるので「自然と見に行ってくれるはずだ」と考えていたのですが、意外にもそうではありませんでした。
緊急措置として、各エリアへの絵への経路への矢印と絵の位置を記載しました。
2階にはイベントと直接関係のある要素がないため、2階に行こうとする人を排除するために塗りをなくしました。
6. PNGちゃん立ち絵パネル
PNGちゃん製作委員会(イラスト制作班)の方々が描いてくださった、PNGちゃんの立ち絵を3Dパネルにしました。
もちろん負荷軽減のために思いつく範囲の工夫をしてみました。(多分もっといいのある)
透過画像→3D化のために、LogoTracer というBlenderアドオンを使いました。正直houdini使いたかった。
透過画像をセットしてトレース→厚み付け。
1マテリアル・1テクスチャで作成するために、UI展開とパッキングを頑張りました。
がしかしQuest版更新時に強制的にサイズ上限1024にしてしまうことが決まり、Quest版ではガビガビになってしまいました。反省。
これならPNGちゃんバリエーションごとに1024サイズを4枚のほうが都合が良かったかも…
リソースとの兼ね合いが難しいアセットでした。
EX. ボツ案・未実装演出
古代遺跡の石畳・風化した石版・木
Houdiniを触り始めた(チュートリアル一通り・ノードリファレンスをぼんやり見ながら)ときに生成されたメッシュたちです。
全てはFBX出力不可のAPPRENTICEライセンス(無償版)のせい。もったいない~~~
オープニング
PNGmuseum 4.9 からの繋がりをもたせるための演出を考えていましたが、工数とクオリティ的に間に合いませんでした。
イメージ:
子PNGin(宇宙船)に乗ってPNGmuseum5の会場となる惑星に向かうユーザー一行。
突然の爆発、鳴り響く警告音!
ユーザーはコールドスリープから緊急脱出!
たどり着いたのは飴田財閥の施設、「アートストレージ」だった___
_REALITYというワールドの冒頭からインスピレーションを得ました。
今後作るワールドでやってみたい演出。
ARG(代替現実ゲーム)・さらなる謎解き
ふぁゔ、謎解きゲームが大好きです。
謎解きワールドは見つけた瞬間に挑戦したり、何日もかけて攻略するくらいには好きです。
大きなものだとPandoraシリーズの全作品のMaster(称号)を取得するくらい。
特にPandoraシリーズには、今回の制作にかなりの影響を受けています。
東京ディズニーリゾート(およそ2キロ平米)の2~19倍のある世界の何処かにある巨大な謎を見つけ、解き明かしていく謎解きワールドなのですが、
美麗な世界の中に、謎が調和して配置されているのが、良いなと考えています。
制作期間中に、結構な数のARG(代替現実ゲーム)が開催され、ふぁゔものめり込んでいました。
何の変哲もないWebサイトが、実はカルト教団の深遠へ触れる入口だった!
何気ない模様が、謎を解く鍵だった!
という、「巧妙に隠された謎」に熱狂していました。
VRChatにもARG的な(?)要素・ストーリーを持つ、「Dahlia」という存在があります。
共通のシンボルを掲げる謎の団体で、正体は一切不明。
何の変哲もないワールドに、何層にも隠されたプライベートワールドへアクセスするヒントが隠されていたりします。
不可解でなんとなくダークな世界観に、ふぁゔは魅了されました。
Quieter/くわいえったさんのnoteシリーズを見ると、「Dahlia」の世界観をざっくり把握することが出来ます。ご興味のある方はぜひ。
「ワールドに潜む謎」はとてもおもしろいテーマだなと考えています。
今期の制作では…
…PNG文字を解読したら、
ウェブサイトに誘導されて、
古代PNG文明の真相に触れることができる…!?!?
というところまで行きました。
ワールドに来てくれる方の99%は謎解きを目的に来ていないはずなので、
ガチな謎解きを配置してしまうと「このワールド、何」という印象を与えてしまう恐れがあります。また、VRChatワールドが本体なので、外部への誘導はそこまで積極的になるべきではありません。
難しい。いい塩梅を探します…
簡単な仕込みなら企画次第でできると思うのですが、企画する余裕とマンパワーが足りませんでした。
構想段階でフェードアウトしてしまったのでまた考えたいです。
もし出来たら参加してもらえると嬉しいです。
おわりに
ここまで読んでくださりありがとうございます…!!!
長文駄文失礼しました:(´◦ω◦`):
9ヶ月の間秘密にしていたコンテンツ制作だったので、ようやくお伝えすることが出来ました。
悩んで学んで、いい体験を提供することができたのではないかなと考えています。
来場者数も過去イチ、沢山の方々の応援とお褒めの言葉のお陰で、頑張りが報われたと思います。
改めて、PNGミュージアム5へのご来場ありがとうございました!
p.s.
PNGミュージアム5、公式グッズを期間限定で販売中!
パンフレットPDFと、クリアファイル(物理アイテム)です。
よかったら是非…!!