『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』不良たちの英雄譚　アート開発秘話

𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥 不良たちの英雄譚アート開発秘話

はじめに

こんにちは。第2事業部の安田です。今回のブログでは、私たち第2事業部TeamCaravanアート部が、ゲーム「𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥 不良たちの英雄譚」のビジュアルがどうやって出来上がったのか、その試行錯誤の舞台裏を皆さんにご紹介したいと思います。モデル、モーション、エフェクト、背景、UI、2D、各セクションごとに、開発のこだわりをお話ししていきます。

モデル編

『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』に学ぶ魅力的な学ランの追求

このモデルを制作するにあたり、特に力を入れたのが「学ラン」の表現です。『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』の学ランの描き方はとても秀逸で、その魅力をいかにしてモデルに取り込むか試行錯誤を重ねました。

全体のシルエットへのこだわり

全体のシルエットを魅力的に見せるため、細部にわたる調整を行いました。特に注力したのは以下の点です。

• 肩まわり
  肩パッドの形状を本物の学ランのように表現することで力強く見せました。
• 腕とズボン
  「ただの筒」にならないようアニメの設定画や実際の学ランを参考に、自然なシワやラインを何度も微調整しリアリティを追求しました。

動きで魅せるシワの表現

学ランを着用したキャラクターが腕を曲げたり上げたりする際のシワ表現にもこだわりました。

• 補助ボーン
  腕の関節部分に補助ボーンを組み込むことで腕を動かしたときに意図的にシワが寄るようにしました。これにより、キャラクターが動いても学ランのシルエットが崩れることなく、常に格好良く見える工夫を凝らしています。

アニメのような陰影表現

ライティングだけではアニメのようなメリハリのある影を表現するのが難しかったため以下の手法で解決しました。

• テクスチャでの影入れ
  影を意図的に強調するためにテクスチャを調整しました。
• 法線方向の調整
  設定画に描かれた影のつき方に近づけるため、ズボンのタックの法線の方向を細かく調整しました。これによってライトを当てたときに部分的に影が固定され、設定画で見られるような学ランの印象に近づけました。

これらの工夫により、『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』で描かれる魅力的な学ランを、ゲームでも最大限に引き出せるようなモデル作りに挑戦しました。

モーション編

開発効率を最大化するモデル制作の工夫

本プロジェクトはアニメSeason 2放送と同時期リリースで作品の盛り上がりの最大化を目指していたため、モデルが完成する前からモーション制作を進める必要があり、いかに開発を効率的に進めるかを模索しました。その解決策として以下の2点に注力しました。

骨格の統一化と身長差の再現

通常、モデルごとに骨格が異なるとモーション制作もモデルごとに調整が必要になります。しかし、今回は「骨格の統一化」を前提に設計しました。全てのキャラクターに共通の骨格を採用することで、モデルが完成していない段階でも、先行してモーションを作成することができました。さらに、Unity上でRoot（ルート）にスケールを自動で適用するコンポーネントをモデルに組み込みました。これにより、共通のモーションを流用しながら、ゲーム内でキャラクターごとの身長差を正確に再現できる仕組みを実現しました。

この工夫により、モデルが揃うのを待つことなく、モーション制作を先行して進めることが可能となり、効率的な開発に大きく貢献しました。

エフェクト編

ケンカのエフェクト表現

『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』のバトルは、ステゴロの近接戦を基本としています。TeamCaravanで作った過去のアニメIP作品群のノウハウを継承しつつ、ファンタジー的演出に頼らない表現を目指すべくエフェクトの方向性を根本から見直しました。

画面に「厚み」を加える視覚効果

魔法やSFに頼るのではなく、背景の表現を工夫することでアクションの勢いを最大限に引き出す手法を試しました。具体的には以下の要素を組み合わせることで画面に情報量と迫力を加える「絵作り」を行っています。

• 背景のぼかし（被写界深度）
  キャラクターに焦点を合わせることで背景がボケ、アクションの躍動感を引き立てます。
• ブラー
  スピード感を視覚的に表現し、パンチやキックの重みを強調します。
• 二値化・シルエット
  攻撃が敵に決まった瞬間や感情の高ぶるシーンで背景をモノクロにしたり、キャラクターのシルエットを出すことで、リッチな印象やコミカルな演出など表現に幅を持たせられるようにしました。

3D MAP編

高品質なMAPが描く『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』の世界

『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』という作品は街の人たちとの交流やつながりというものを大事にしており、ゲームでもバトルを楽しむだけでなく作品に登場する商店街や学校といったファンにとって馴染み深い場所を実際に歩けるようにする要素を取り入れました。広大な情報量を持つ街をゲーム内で作品に忠実に再現することは、データの軽量化という全てのゲームが抱える課題と相反するため、幾度もの試行錯誤を要しました。

アニメの追体験

ゲームのチュートリアルでは、アニメ第一話の流れを踏襲しました。プレイヤーさんにはゲームを始めた瞬間に、桜 遥と同じように物語の世界に足を踏み入れたという体験をしてもらえていたら幸いです。

最適なカメラワークの探求

当初、カメラは桜 遥の背中を追う視点を試していました。しかしそれでは画面を占める情報が「道路」や「商店街の果て」主体になってしまい、本来見せたかった「商店街の風景」が画面の端に押しやられ世界観が十分に伝わらないという問題がありました。そこで横からのカメラワークに切り替え、よりキャラクターと街並みが一体となった絵作りへとなりました。

UI編

世界観とUIデザインの融合

ゲームのUIデザインを考える上で、システム上に世界観をいかに反映するかにもこだわりました。当初ランクアップに必要なアイテムは「巻物」はどうかというアイディアが出ていましたが、もちろんアニメの『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』の世界にそういった要素はありません。巻物は日本が舞台のゲームで強化に使うアイテムとしてはよくある表現ですが世界観としてはマッチしていません。デザイナーとしてもどう説得力を持たせるか難しい状況でした。

そこで作品内での描写に着目しました。主人公である桜たちが街の人々を助けたお礼として、パンやたい焼きといった食べ物を受け取るシーンが繰り返し描かれています。人を助けてお礼をもらう。それはゲームにおける人を助けて（バトルをして）強くなっていく描写に重なります。そこからランクアップの素材は食べ物に変更されました。

この方針により世界観にマッチしたアイテムを考えられるようになり、それぞれの強化アイテムのデザインにもコンセプトが生まれました。ポトスでもらえるアイテムは登場キャラのことはが作っていそうなおしゃれなカフェメニューに。駄菓子屋は実際の駄菓子屋さんにありそうなものを作品内に登場しそうなデザインに調整しています。精肉店は食べ盛りの高校生が喜びそうなホットスナックなども取り入れています。

アイコンひとつでもウィンヒロを通して『𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥』の世界を体験できるよう目指していますので、ぜひ着目してください。

2Dイラスト編

現代劇IPの実在感と空気の表現について

「現代劇IPの実在感」と「空気感」をイラスト表現を通じていかにして引き出すか、という課題に真摯に向き合ってきました。

空気感を醸成する「光」と「影」の演出

時間帯や場所によって細かく色味など細かな調整によって、それぞれのイラストが持つ個性を際立たせ、彼らが生きる世界の空気感をより深く描き出しています。こちらの兎耳山のイラストは梅雨の雲の切れ間と猫を傘に入れる様子に兎耳山の心境の変化を表現した一枚です。画面全体のトーンはしっとりとした寒色系で統一し、雨の湿った空気感を出しています。ですが雲の間からさす光源を暖色にすることで、兎耳山の表情も相まって暗い雰囲気ではなく温かみと希望に満ちた空気に昇華させています。

さいごに

本日ご紹介したように、私たちは「𝗪𝗜𝗡𝗗 𝗕𝗥𝗘𝗔𝗞𝗘𝗥 不良たちの英雄譚」のゲーム開発において作品の世界観を深く掘り下げ、いかにゲーム体験として落とし込むかを追求してまいりました。我々アートチームは常に「より良くするための探求」を続けています。IPの魅力を最大限に引き出しファンの皆様の期待を超えるために、日々研究と試行錯誤を重ねています。

もしご興味を持っていただけたら、ぜひ採用ページもご覧ください。