コロプラ・ベアーズ 面白いものを作りたい仲間が集まるベアーズ

『白猫プロジェクト』モーションデザイナーブログ Vol.3
TEAM

『白猫プロジェクト』モーションデザイナーブログ Vol.3

ワクワク

2016年3月中途入社。『白猫プロジェクト』のモーションを作り続けて早4年。『白猫』のキャラクターの魅力を届けるために日々奮闘中、リーダーとしてスケジュールやクオリティ管理もしています。

これまで3D周りの話をしてきた本ブログですが、今回は『白猫プロジェクト(以下、白猫)』で2020年3月から開催されたイベント『ティファレス・オーダー -翠聖の守護者-』のトップ画面でも活かされている2Dアニメーションについて、解説させていただこうと思います。

『白猫』と言えば、3Dアクションのイメージが強いのではないかと思いますが、このゲーム内のトップ画面では、2Dアニメーションツール「Spine」を用いて5人ものキャラクターを動かしています。しかも、比較的短期間で実装できているんですよね。これは2Dキャラクター班と一緒に積み上げて来た様々な仕様面の工夫と、いつもお世話になっている外部協力会社さまとの連携がうまくいったからこそだと思っています。

というわけで今回は、2Dアニメーションツール「Spine」を用いた作成例と運用についてお話ししていきます。少し専門的な話になっていますが、『白猫』では今後もさらにクオリティを追及していきたいと思っているので、2Dアニメーションに強い方にもぜひぜひコロプラのモーションデザイナーの仕事に興味を持っていただければと思います。

2Dも3Dソフトで作っていた『白猫』

『白猫』における2Dアニメーションと言えば、クエスト開始時に流れるUIやお馴染みのバロンやラーレッタさんですが、3DソフトのAutodesk Mayaで動かしておりました。3Dアクションゲームである『白猫』にとって2Dアニメーションにおける比重は高くはないので、リリースからしばらくはMayaでの作成をメインに進めていたんですね。

te_202004010_01_Motion_Designer_BLOG_03_800_558.jpg

Spineへの挑戦

Spineは『帝国戦記II REQUIEM(2018年4月開催)のイベント画面で初めて導入しました。当時巷では2Dキャラクターがガンガン動いていて、コロプラでも『クイズRPG 魔法使いと黒猫のウィズ(以下、黒猫)』のボイスアラームを制作していた時期で、『白猫』でもやってみようということになり、検証が始まりました2Dキャラクター班と二人三脚で2か月、ツールの検証も入れれば3か月程かけて実装しました。帝国戦記 The Undertaker』と見比べていただくとぱっと見同じに見えますが、よくよく見ると動きの密度が増えていたり、胴体に捻りが入っていたりと、表現力の向上と伸びしろを感じることができました。

『白猫』は多くのユーザーさまにプレイいただいている運用タイトルなので、Spineに関しても仕様面を慎重に固めて導入し、今でもそれが運用の基礎として息づいています。『WORLD END』『ST☆RT LINE』『Blooming Blaze!』『The World of Guilty Ⅱ』など様々なイベントで使用し、なるべく多くのメンバーに触ってもらうことで、気軽に活用できるようにしております。
te_202004010_02_Motion_Designer_BLOG_03_800_1488.jpg

ちなみに『黒猫』や『白猫』のボイスアラームは2DソフトのLive2Dで制作されているのですが、『白猫』でSpineを採用したのは、継続して使用した際の費用面にあります。Live2Dは運用ゲームのアプリに組み込んでしまうと継続的にライセンス料が発生してしまうということがあり、『白猫』の場合、それは大きな負担になってしまうなと考え、Spineを選択しました。

良いところ、良くないところ

Spineの良いところは、とにかく機能がシンプルなことです。個人的な見解としてはMayaを触っている人であれば数日で使えるようになるのではないかと思います。モデリングとアニメーションの行き来が容易なのも専用ソフトならではですね。Mayaは機能がいっぱいあるので様々な表現ができますが、『白猫』のモーションを作るにあたり、Mayaの全機能を使うわけではありませんので、Spineのシンプルな機能は快適に感じます。

あと、SpineはZソートがとても優秀です。たとえばMayaの場合、奥行きが近いと描画順が前後してしまうことがありますが、Spineではそのようなことが全くないので、それだけでもすっきり晴れやかな気分です。
te_202004010_03_Motion_Designer_BLOG_03_800_348.jpg
具体的に言うと、完成形(左画像)では帽子をかぶったリルテットが吹き出しの前に描画されていますが、制作画面(右画像)ではキャラが2体とも吹き出しの後ろにいます。キャラはたくさんのパーツが重なってできているので順序が前後しそうなものですが、SpineのZソートを使えば大丈夫です。ちなみにMayaを使う場合は、キャラと吹き出しの距離を離すことで解決できますが、なかなか手間がかかりますので、この負担がなくなるだけでもしみじみ嬉しいと感じます(笑)。

また、個人的に良くないと思うところは、ドープシートでのアニメーション編集になるので、アニメーションカーブの補完具合が感覚的に行えない点と、作成バージョンを間違えるとダウングレードできないのはもちろん、エクスポートもインポートもできないのでそこはちょっと困りました。今後に期待したいなと思っています。

Spineにおけるモーション制作注意点

ノウハウというほどではないですが、制作中に出てきた注意点をご紹介します。制作画面もちらほら載せていきますのでお楽しみいただければと思います。

POINT1 ポーズから可能な可動範囲とテイストを決める

『白猫』のモーションは立ち絵から作ることがほとんどで、手が完全に隠れていたり、足を閉じていて動かせない物も多いです。そういう条件の中でモーションをそのまま作ると、後の作業が大変なことになるので、演技も動き幅も決めてから制作に取り掛かります。

POINT2 パーツ素材の状態について

たとえば次のような2点を2D班に整えてもらった状態でセットアップをすると、パーツのアトラス化(=複数の画像を一つにまとめること)を比較的無駄なくできるようになります。

1.パーツ素材の余白は詰めてもらう。
te_202004010_04_Motion_Designer_BLOG_03_800_336.jpg
2.部位が斜めに描かれてるような大きいパーツは、回転させて余白を抑えてもらう。
te_202004010_05_Motion_Designer_BLOG_03_800_376.jpg

POINT3 ジョイント/メッシュ変形

どちらも増やすほど自由度は高くなりますが、制御する手間も増えるので可能な限り少なくしたいところです。この辺は3Dツールと同じです。

メッシュ変形のアニメーションはボディモーション(骨)がほぼFixしてから付ける手順が好ましいです。同時につけだすと要素が複雑に混ざって修正が難しくなっていきます。

te_202004010_06_Motion_Designer_BLOG_03_800_474.gif

POINT4 目パチ口パク、表情テクスチャの切り替え

表示キーでやるよりColorのアルファでアニメーションさせるとスムーズです。

te_202004010_10_Motion_Designer_BLOG_03_800_360_1.gif

POINT5 Unityへの出力設定

出力はJson(JavaScript Object Notation)かBinaryで行いますが、Binaryの方が読み込み時間やサイズが小さくなります。

te_202004010_08_Motion_Designer_BLOG_03_800_310.jpg

ExtensionはUnityで読み取る必要があるため、Binaryの場合は「.skel.bytes」に変更してください。Jsonの場合はUnityがテキストとして認識するので「.json」のままで問題ありません。

POINT6 使用できる枚数感について

『帝国戦旗Ⅱ REQUIEM』のようなキャラサイズ感でかつ1画面1体の表示であれば、1体あたりのテクスチャ枚数は 1024 × 2枚 を目安にしております。背景画像に関してはバックグラウンドで 1024 × 1枚をレギュレーションとしています。もちろんその都度表現方法が違うので、細部に関してはエンジニアとの相談が必要です。

te_202004010_09_Motion_Designer_BLOG_03_800_376.jpg

以上、今回は少し細かい話になりましたが、『白猫』では今後もさらにクオリティを追及していきたいので、3Dに限らず、2Dの知見がある方にもぜひ『白猫』モーションデザイナーの仕事に興味を持っていただきたいと思っています。募集要項はこちらにまとまっていますので、よろしくお願い致します!