「Happy Elements Advent Calendar 2023」 12月23日の記事です。
はじめに
Happy Elements株式会社 カカリアスタジオで『あんさんぶるスターズ！！Music』のゲームエンジニアをしているI.Y.です。普段はMVの背景演出で使用する機能の開発や、キャラクター関連の制御システムの開発、データ準備などの運用業務を担当しています。
去年のアドベントカレンダーではMV内の小物の受け渡しについて書いたのですが、今回の記事では、今年公開されたMVの中で使われているキャラクター関連の機能について、いくつか印象的だったものをご紹介したいと思います。
※ あんスタのMVは複数の会社で協力して制作しています。今回ご紹介するのは弊社の担当範囲のみです。
「One with One」の手を画面端に合わせる機能
今年、あんさんぶるスターズはビックリマークが１つだった頃のアプリ「あんさんぶるスターズ！」をリリースしてから8周年を迎えました！
ビックリマークが２つの「あんさんぶるスターズ！！Music」と「あんさんぶるスターズ！！Basic」になってからは、もうすぐ4年が経とうとしています。
あんスタでは毎年、周年を祝うためのテーマを用意しています。
- 5周年のテーマは SMILE(スマイル) で、記念楽曲は Walk with your smile
- 6周年のテーマは FUSION(フュージョン) で、記念楽曲は FUSIONIC STARS!!
- 7周年のテーマは SURPRISE(サプライズ) で、記念楽曲は Surprising Thanks!!
そして、8周年のテーマは One on One（ワンオンワン） で、記念楽曲は One with One です！
とても賑やかで可愛いMVに仕上がっていますので、まだの方はご覧になってください。
このMVでは、8周年のテーマである One on One （アイドルとお客さんの一対一の関係、距離の近さ）を感じられるように、様々な工夫が行われています。
アイドルの振り付けにはお客さんを意識したものが多く入っていますし、カメラも観客席からのカットが多用されていて、実際にライブ会場で見ているような気分で楽しんでいただけるかと思います。
また、YouTubeの動画では分かりませんが、実際のゲームでは以下のような機能が入っています。
- ゲーム中に表示される３つのうちわの中から１つを選ぶことで、アイドルのスペシャルパフォーマンス（SPP）が変化する機能（全アイドルの専用モーションとボイス付き）
- ゲーム外で募集した実際の声援・コールボイスを一緒に再生する機能（すごい！）
ところで、このMVの中盤あたりに、アイドルが画面の端に手を合わせてポーズを取るところがあります。
これは、ユーザーさんが実際に画面の端に手を合わせて、アイドルと一緒に一つのハートを作って楽しんでいただくことを想定した演出です。
実はこの部分はアイドルの身長や画面サイズに関わらず、しっかりと位置が合うようになっています。
例えば、178cmの羽風薫（はかぜかおる）と160cmの仁兎なずな（にとなずな）を画面比率が16:9の端末で再生すると、下の画像のようになります。
また、画面比率が19.5:9の端末（iPhoneなど[1]）で再生すると下のようになります。
既存の仕組みだけだと、横長の端末では手が画面の端から離れてしまっていたのですが、やはり、どの端末でも綺麗なハートを作れた方がいいだろう、ということで、機能を拡張して対応することにしました。
実装方法は以下のようになっています。既存の仕組みに上手く組み込むことができたため、大きな機能変更を行わずに対応することができました。
- 横長の端末では、このシーンの少し前あたりからアイドルが少しずつ端の方に寄っていき、ちょうどいいところで、カメラに映る範囲を考慮して手の位置を移動させる。（手の位置を動かすだけだと不自然な体勢になってしまったため、体ごと移動した上で、手の位置を動かすようにしています）
- カメラの位置もアイドルの顔の位置に合わせて少しずつ移動させる。ただし、端に寄っていく部分は考慮しないようにする
実際にどのくらいの人がハートを作っていただいたのか分かりませんが、楽しんでいただけたら幸いです。
「ハレノヒSugar Wave」のベッドに座る演出
このMVは、今年の1月に開催されたRa*bitsの新曲イベント「社会人☆門出を出発新GO！」に合わせて公開されたものです。
冒頭のシーンで4人がベッドに座る演出があるのですが、このMVの専用衣装は振り袖のようになっているため、キャラクターが座った状態で手を動かすと衣装が体の中に入ってしまう問題がありました。
あんスタのMVは、キャラクターと衣装を自由に入れ替えて再生しても破綻しないことを前提に作られてはいるものの、あらゆる組み合わせで綺麗に見せることはとても難しいため、ある程度の妥協も行なっています。
今回のケースでは以下のような方針で対応することになりました。
- MVに紐付けられた専用衣装については、貫通を防ぐためにできる限り対応を行う
- 衣装の袖については揺れもののアニメーションを手作業で作成していただく
- 通常時は揺れものの動きは自動で計算されていますが、特定の区間だけ計算を停止し、揺れものの骨に対してアニメーションを適用する仕組みを用意しています。
- 今回のケースは対象区間が長く、衣装が複雑で人数も多いため、かなり手間のかかる作業だったようです。
- あまり目立たない場所や、袖とベルトとの貫通は許容にする
また、今回の衣装はズボンの裾が大きく広がっているため、衣装とベッドが貫通して見えてしまうという問題もありました。
キャラクターの位置を少し前に動かしてベッドとの接触を避けることも考えられましたが、空中椅子のようになり不自然に見えてしまったため、今回はベッド側で専用シェーダーを用意して対応することにしました。
具体的には、フラグメントシェーダーで SV_Depth を使って深度バッファの値を奥に押し出しています。また、ベッドと床との関係が自然に見えるように、高さによって数値を補間したりして、少し工夫しています。[2]
この手法は、今年9月にリリースしたミニアプリ「あんさんぶるトレーニング！！」でも使用されています。日々樹渉（ひびきわたる）の髪が床の中に入ってしまうのを緩和するため、床のメッシュの深度情報を奥に押し出しています。完全な対応方法ではありませんが、状況によっては効果的なようです。
「Crazy Anthem」のカウンターの対応
このMVは、今年の6月に開催されたCrazy:Bのクライマックスイベント「スゴロク旅！BGMはナンバーエイト」に合わせて公開されたものです。
クライマックスイベントというだけあり、このMVはキャラクター同士の接触や背景オブジェクトとの接触対応も過去最大級のものだったのですが、その分、見どころが多く素敵なMVに仕上がっていると思います。
キャラクターの入れ替えで少し苦労したのはカウンターとの接触です。既存の機能では肘を上手くカウンターに乗せることが難しかったため、仕組みを整理して、より柔軟に位置を設定できるようにしてみました。
具体的には、次のような機能を追加しました。
- 170cmのキャラクターで綺麗に見えるような肘の角度を設定する
- 肘の角度というのは、肘の曲げ方を固定した状態で、脇を閉じたときを0度、完全に開いたときを180度とするような角度のことです。
- 背の最も低いキャラクターと最も高いキャラクターに対して、それぞれ加算する角度を設定する。その間のキャラクターについては数値を補間する
とてもシンプルな機能ですが、背景との接触対応や細かい見栄えの調整に役立っています。
また、車に乗るシーンでも少し工夫しています。衣装によっては車体の下からはみ出してしまう場合があったため、その対策として車の横に見えない箱を置いています。
この箱は深度バッファのみに値を書き込むシェーダーを使っており、背景とキャラクターの間に描画することで、見えてはいけない部分を隠してくれる効果があります。実際の配置や大きさはカットごとに調整しています。
おわりに
簡単にではありますが、今年のMVで使われたキャラクター関連の機能についてご紹介しました。
アイドルを魅力的に見せるためのこだわりを感じていただければ幸いです。
また、以下の記事は今年のアドベンドカレンダー向けに弊社の3D担当エンジニアが書いたものですので、合わせてご覧ください。
- ゲーム開発未経験から『あんさんぶるスターズ！！Music』のMV制作チームに所属してみて
- 『あんさんぶるスターズ！！Music』MV軽量化の取り組み(レーダー風扇形シェーダー)・新卒入社して一年の感想
- 『あんさんぶるトレーニング！！』の開発事例のご紹介
- 『あんさんぶるスターズ！！Music』2023年のMV演出ダイジェスト
Discussion