After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例 | GameBusiness.jp

After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例

IMAGICA Lab.は、言わずと知れた映像ポストプロダクションスタジオ。モバイルゲーム向けのエフェクト制作に「Adobe After Effects」と「OPTPiX SpriteStudio」の合わせ技のワークフローを開発したと聞き、開発体制とAEのゲーム事業での活用方法についてお話を伺いました。

ゲーム開発 ゲームエンジン
After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
  • After EffectsからSpriteStudioへコンバート!? 映像制作会社ならではの SpriteStudio利用事例
IMAGICA Lab.は、言わずと知れた映像ポストプロダクションスタジオです。

https://www.imagicalab.co.jp/

数々の映画やテレビなどでハイクオリティな映像を生み出ている映像会社ですが、ゲーム業界においても、プリレンダームービーの製作や各種3D/2Dアセットの制作担当として活躍しています。

そのなかで、モバイルゲーム向けのエフェクト制作に「Adobe After Effects」と「OPTPiX SpriteStudio」の合わせ技のワークフローを開発したと聞き、開発体制とAEのゲーム事業での活用方法についてお話を伺いました。

【インタビュー・ライティング】:株式会社ヘッドハイ 一條貴彰

――本日はよろしくお願いいたします。まずは自己紹介をお願いします。


武者氏イメージワークス事業本部デジタルコンテンツ制作部、プロデューサーの武者顕志といいます。今回のゲームエフェクト制作事業ではディレクションと、社内ツールの開発を行いました。


加藤氏同部署のVFXチーフデザイナーを務めています、加藤律昭と申します。私はAfter Effects上での作業フローの設計と、実際にエフェクトを作るチームの統括を行いました。

――After Effectsでゲーム用のリアルタイムエフェクト用データを作る、というのはかなり珍しい事例ですね。

武者氏ゲーム内に使うリアルタイムエフェクトデータの製作にAfter Effectsを使うケースはあまり聞かないと思うのですが、今回は色々と条件が重なって実現できました。

少し前にお手伝いしたモバイルゲームのプロジェクトにて、映像会社としてやれることの一つに「高品質なエフェクトの制作」という提案をしました。私たちは映像を主事業にしているということもあって、After Effects使いが大勢在籍しています。彼らは映像制作と共に遊技機系の映像オーサリングなども担当しているのですが、そこで培ったノウハウをモバイルゲームの仕事に展開できればと考えていたためです。

その提案のなかで、モバイルゲーム開発のクライアントさんから開発ツールとしてSprite Studioを使っているということがわかり、当社で受注したエフェクトデータ制作についてもそのシステムで使用できないかというお話が持ち上がりました。

最初はPhotoshopで素材を作ってSpriteStudioで組む計画だったのですが、エフェクトのプリミティブ制作などは使い慣れたAfter Effectsプラグインを活用した方が圧倒的にできることが多いことは分かっていました。


加藤氏完全に新しいツール、しかもリアルタイムで描画する系のツールをチーム全員に覚えてもらうのは敷居の高い部分がありました。

単純な理由として、After Effectsには光モノやパーティクルなどのバリエーションを簡単に作れるプラグインがたくさんあり、これまでの業務でもそれを活用していたので、ノウハウ活用をしたいと考えていました。

しかしながら、After Effectsの最終出力は動画です。連番静止画として書き出してSprite Studio上でアニメーションさせるか、という案もあったのですが、このやり方はテクスチャ解像度の制約を受けやすい欠点があります。クライアントさんからエフェクトのクオリティは高いところを求められていたので、この方式は難しいなと。


武者氏いろいろ調べていくうちに、SpriteStudioのツールデータの中身はxmlファイルだということが分かり、ある程度コンバーターが作れてしまうのでは?と思い立ちました。

私は以前IT業界におりまして、そのときはグラフィクスライブラリを作っていたので、技術についても知見がありました。そこで思い切ってコンバーターを開発することにしました。

1か月ぐらいかかりましたが、After Effects上で作ったアニメーションをSpriteStudioにコンバートする仕組みを用意することができました。SpriteStudioのデータ形式の上に、After Effectsのキーデータをすべて入れ込むような形です。

――SpriteStudioのデータ形式というのは、アニメーションファイル(.ssae)でしょうか?

武者氏そうです。一度、SpriteStudio上で空のアニメーションを作成して、それをガワとして利用した格好になります。

とは言え、After Effectsのアニメーションを全て再現できたわけではないので、使用するアトリビュートは変形・回転・加算などの限られた機能のみです。それでも、このワークフローによってかなりディティールアップにつながりましたし、SpriteStudioの練度が低いチームであっても、プロジェクトの冒頭から一定以上のクオリティを出すことができました。

After Effects活用で発注者の確認もスムーズに


――エフェクトの制作開始から納品までのワークフローを教えてください。

加藤氏まずはAfter Effectsを使った素材作りです。プラグインを活用してエフェクトのパーツを作り、それをキーフレームアニメーションで動かしてエフェクトを作ります。

そこでクライアントさんにルック(見た目部部分)の動作確認はすべてAfter Effects上か、そこから出力した動画データで行います。OKがでたら、Sprite Studioで再生できるデータに調整して、コンバーターを使ってデータを移植します。

武者氏「こういうエフェクトでどうですか」というイメージを作りつつ、同じデータをSpriteStudio側にもっていき、実機上で使えるものとしてエフェクトが再現できるのがありがたかったですね。


武者氏リアルタイムで動かすためにはデータが重くなるといけませんので、クライアントさんからレイヤー数の上限などの指定がありました。

プロジェクト開始時はレイヤー制限数が30でしたが、後半になって200レイヤーまで拡張されました。最終的には330個ぐらいのレイヤー数を使った派手なエフェクトも作ってゲーム側で使用していました。あとから頂点変形なども盛り込めるようになりましたが、プロジェクトの終盤だったのであまり使っていません。

加藤氏テクスチャの仕様としては、ゲーム中の小さなエフェクトは512x512ピクセル。全画面エフェクトでは1024x1024ピクセルにするようにクライアントから指定がありました。

そこで、After Effects内でテクスチャを一つにまとめるアトラスパッキングのようなシステムを用意し、この解像度内にパーツをうまく収めていきます。位置と回転のアニメーションだけでいかにコピペ感のないパーティクルを作れるか、が腕の見せ所ですね。


武者氏コンバーターを作ったと言っても、完全自動化ができたわけではありません。After EffectsとSpriteStudioではパーツ同士の親子関係の構造が違うので、まずAfter Effectsでnullを作って親子関係を作るなど、SpriteStudioに流し込む前提でルールを決めて運用していました。


加藤氏制約はあるものの、After Effectsで作っていくことで、絵作りにしっかり注力できます。エフェクト1つは長くても1~2秒で、1つのエフェクトを作るのはおおむね3~4日をかけました。2日間+αぐらいをAfter Effects上で作業して、SpriteStudioへの流し込みと調整に1日、というペースです。1年半のプロジェクトのなか、途中で追加発注を受けつつ、このワークフローで250種類ぐらいのエフェクトを量産できました。




After Effectでリファレンスを作って、SpriteStudioで可能な限り再現


――After Effectのプラグインは、基本的にプリレンダーで使われることが前提の作りになっていると思います。そのようなエフェクトを使いたい場合はどうだったのでしょうか?

加藤氏霧などの複雑なエフェクトについては、まずはパーツ分割を考えず、プラグインの機能を使って動画で作ってしまいます。

たとえば、After Effectsのパーティキュラーで「全画面の吹雪」のような派手なエフェクトを作ります。それはリファレンスとしてムービー素材にしておきつつ、画像パーツを切り出して、小さい画像とその位置・回転アニメーションと透明度の変化を使って動きをトレースするような作業を行いました。

アニメーションデータについては、最初は全フレームにすべての動きをベイクしていました。しかしスマートフォン実機での動作が重くなってしまう恐れがあったため、キーを減らしつつ緩急つけたいところはキーを残して調整していきました。Tween的な、イーズイン・アウトのようになめらかに見えるように調整を行っています。他にも色々なテクニックを駆使して、立体感が出るように調整しています。

加藤氏SpriteStudioのツール側にコンバーターでデータを持ってきた後はほとんど調整していないのですが、一部の加算レイヤーのブレンドは操作しています。黒のブレンド具合が黒く濁って見えることがあったので、そのあたりの調整ですね。そういうときに、SpriteStudioはリアルタイム動作前提なだけあって、プレビュー機能が使いやすかったですね。

プロジェクトの後半で頂点変形がクライアントさんの指定により使えるようになったので、それについてはSpriteStudio側で実装しています。最終的には台形変形を駆使してアニメーションを作りました。カラーのブレンド機能については今回使用していませんが、これも使えたらよりバリエーションが増やせると思います。

SpriteStudioは映像制作とモバイルゲームの橋渡し


――実際にコンバーターを介したワークフローでの作業はいかがでしたか。


加藤氏今回の仕組みができたことで、生産性のアップを実感しました。私はずっとAfter Effectsを使っていますが、そういった映像系のデザイナーは多くいます。彼らが使いやすいツールで組み立てたエフェクトを、SpriteStudioはリアルタイムのゲームに持ってけるところがメリットですね。

SpriteStudioを仲介することによって、豊富なAfter Effectsのプラグインを元にした高品質なエフェクトを実機でも動かせる、という良い所取りができます。

武者氏冒頭に申し上げたように、社内に持つデザイナーのスキル流用ができたことが大きかったですね。

これまでの映像系の業務で培ったAfter Effectsのレイヤーコンポジットスキル(合成や色作り)とプラグインを使ったプリミティブ制作力、これらを活用することでリッチな表現を作ることができたと思います。

映像系の皆様には、SpriteStudioでゲームエフェクトの業務に入ってくることができますよ!ということを伝えたいですね。

――ありがとうございました。

After Effectsコンバート用のSDKをgithubで公開中!


今回ヒアリングしたIMAGICA Lab.の事例では、SpriteStudioへのコンバーターを独自開発した事例になりますが、SpriteStudio SDKを公開しているgithubアカウントにて、同様のコンバーターを自作できるキットを公開しています。

映像制作、あるいは遊技機の演出等で鳴らしたAfter Effects使いの皆さん。今回の事例を参考に、お手持ちの表現力とご経験を、コンシューマ・モバイルゲーム向けに活用してみてはいかがでしょうか。以下のURLを、ぜひチェックしてみてくださいね。

■OPTPiX SpriteStudio : https://www.webtech.co.jp/spritestudio/
■SpriteStudio GitHub : https://github.com/SpriteStudio
■株式会社ウェブテクノロジ : http://www.webtech.co.jp/




株式会社ウェブテクノロジでは、「クリエイターを笑顔に」をモットーに、開発メンバーを募集しています。お気軽にご応募ください。

ウェブテクノロジ キャリア採用ページ
《一條貴彰》

関連ニュース

特集

人気ニュースランキングや特集をお届け…メルマガ会員はこちら