『あんさんぶるスターズ！！Music』MV「Heart aid Cafeteria」の小物の受け渡しについて
はじめに
Happy Elements株式会社 カカリアスタジオで『あんさんぶるスターズ！！Music』（以下『あんスタ！！Music』）のゲームエンジニアをしているI.Y.です。
あんスタ！！Musicの開発には初期の頃から参加していまして、2017年頃に3DライブMVの技術検証を少し行ったり、2018年の春頃には音楽ゲームと箱庭ゲームのプロトタイプを他のチームメンバーと一緒に作ったりしていました。現在は3DライブMVの開発・運用を担当しています。
そろそろ開発期間とリリース後の運用期間が同じくらいになりそうです。
皆様、長い間ありがとうございます。
この5年間はかなり忙しい時期もあったのですが、同時に楽しかったような気がします。
今回は、11月に公開したMV「Heart aid Cafeteria」で使われている技術について、いくつかご紹介したいと思います。技術といっても、あんスタ！！Musicは複数の会社で分担して制作されていますので、弊社エンジニアの担当範囲についてです。
MV制作の全体像については月刊CGWORLDの2022年9月号に詳しく掲載していただきましたので、興味のある方はご覧いただくと面白いかもしれません。
MV「Heart aid Cafeteria」
このMVは11月15日から23日にかけて開催されたゲーム内イベント『SHUFFLE×憩う一杯とカフェテリア』に合わせて公開されたものです。異なるユニットから選ばれた5人のメンバーで構成されているシャッフル曲です。
あんスタ！！Musicでは、このようなMVを毎月平均して4曲ほど公開しています。（演出や背景の豪華さはMVごとに異なります）
小物の受け渡しについて
このMVではパフェやコーヒーカップといった小物が多く登場しています。あんスタ！！Musicではキャラクターが持つ小物はプロップと呼ばれ、背景モデルとは区別されています。プロップの制作は衣装と同じく、協力会社のフライトユニット様の担当です。
（パフェのキラキラやコーヒーの湯気は後から追加されたもので、プロップではありません）
また、このMVの特徴の一つとして、キャラクター同士がプロップの受け渡しを行っていることが挙げられます。例えば以下のシーンでは、コーヒーカップが朱桜司（すおうつかさ）から葵ゆうたに渡され、その後、斎宮宗（いつきしゅう）に渡された後、テーブルにそっと置かれています。
あんスタ！！Musicでは現在51人（と少し）のキャラクターがMVに登場します。キャラクターの身長は153cmから181cmまであり、幅広いです。アプリ内の主要機能の一つである音楽ゲームでは、これらのキャラクターと衣装を自由に入れ替えてMVを再生することができます。
上記のシーンを最も背の低い姫宮桃李（ひめみやとうり）で再生すると下の画像のようになります。衣装は今年の9月に公開されたフィーチャー衣装「ハッピーステップ」です。
MVはその楽曲のオリジナルメンバーで再生したときが最も綺麗な見た目になるように作られているのですが、このようにキャラクターを入れ替えてもかなり自然に見せることができています。
その裏にはアニメーターやデザイナー、エンジニアの努力もあるのですが、それ以外にも、デバッグを行っていただいている協力会社様や、弊社のコンテンツ担当など、多くの人の手によって成り立っているところです。
キャラクターとプロップの制御システムの改修
今年公開したMVは去年よりもキャラクター同士の接触が多く、また、プロップの受け渡しのような複雑なものもあったため、既存の制御システムでは十分に対応できませんでした。そこで、今年の前半にキャラクター関連のシステムを大きく改修し、より柔軟な設定を作れるようにしてみました。
例えば上記のコーヒーカップの受け渡しでは、プロップの位置を合わせる対象として複数人のキャラクターを指定し、それぞれの比重にアニメーションを付けることで滑らかに持つ人を切り替えています。
全体の計算は以下のような流れで行っています。
キャラクターの位置設定でスケールの基準点（ピボット）を決める
キャラクターのピボットとプロップの位置設定からプロップの位置を計算する
プロップの位置とスケールからキャラクターの手の位置を計算する
キャラクターの位置設定や手の位置を決める部分についても改修を行い、作業の手間を減らしたり、既存の機能では難しかったような状況に対応できるようになりました。
プロップの上を移動するプロップ
さくらんぼをパフェに乗せるシーンはもっと複雑です。青葉つむぎが持っているボウルにさくらんぼが盛られています。それを大神晃牙（おおがみこうが）がつまみ、テーブルに置かれたパフェの上に移動します。その後、それを葵ゆうたが持ち上げてポーズをとる流れになっています。
通常のMVで登場するプロップは、それを持つキャラクターのスケールが反映されて大きさが変わるようになっています。（例えば桃李の持つハンドマイクは桃李のスケールが反映されて小さくなる）
しかし、このMVに登場するパフェやコーヒーカップはキャラクターのスケールが反映されないように設定されています。そのため、位置の計算が少し難しくなっているのですが、今年の前半にキャラクター関連のシステムを改修しておいたおかげで、シンプルな機能追加で対応することができました。
小物の受け渡しについてのまとめ
MVでキャラクターが持つ小物（プロップ）の制御方法について紹介させていただきました。
プロップのモデルやアニメーションの制作については、弊社の担当範囲外のため説明はできませんが、これほど複雑なMVを作るためには多くの苦労があるのではと想像しています。
コーヒーの液体表現について
ついでに、このMVで使われている他の技術についても簡単に紹介いたします。（私ではなく別のエンジニアが実装したものです）
コーヒーカップの中で揺れている液体はプロップではなく、MVの制作時に弊社で追加したものです。
既に他のMV用にVAT（Vertex Animation Texture）の機能を実装していたため、それを使っています。
以下のような仕組みになっています。
- デザイナーがアニメーション制作ツール（Maya）で液体のアニメーションを作成
- UnityにAlembic形式でインポート
- Unityのエディタ拡張でVAT用のテクスチャと、頂点番号をUVに格納したメッシュを作成。また、シェーダーをセットしたマテリアルも作成し、頂点の移動範囲を表すバウンディングボックスをパラメータに記録しておく
- 頂点シェーダーで頂点番号と時刻をもとにテクスチャからサンプリングし、頂点の移動範囲の情報からアニメーションを復元する（RGBに格納された[0, 1]の値を使って移動範囲の下限と上限の座標を線形補間する）
ガラスの反射について
あまり目立っていませんが、窓ガラスには反対側のオブジェクトが反射して映り込んでいます。
通常の床の反射については、メインカメラを床に対して反転させた別のカメラにより、リアルタイムに撮影したものを描画に使っています。しかし、このMVはガラスの量が多く、範囲も広かったため、視差を考慮したキューブマップ（Parallax Corrected Cubemap）で実装されています。
以下のような仕組みになっています。
- シーン内の適当な場所にReflection Probeを配置してキューブマップを作成する
- 交差判定を行うための直方体の領域をマテリアルのパラメータで設定する
- 反射ベクトルと直方体との交差地点と、Reflection Probeの位置からベクトルを計算し、キューブマップからサンプリングする
- ガラス面への入射角度から反射の度合いを計算し、いい感じに調整して描画に使用する
まとめ
MV「Heart aid Cafeteria」で使われている技術について、いくつか紹介させていただきました。キャラクターの制御システムや背景モデルの細かな表現など、様々な機能を社内で制作しています。弊社への応募を考えておられる方の参考になれば幸いです。
また、以下はあんスタ！！Musicのエンジニアが今年のMV制作について書いた記事ですので、合わせてご覧ください。
Discussion