UE4+SpriteStudioの魅力

Category : CGTips, UE4 · by 12月 5th, 2015

この記事はUnreal Engine 4 (UE4) Advent Calendar 2015 5日目の記事です。

http://qiita.com/advent-calendar/2015/ue4

イラストがそのまま動き出したかのようなグラフィックのゲーム

ヴァニラウェアのゲームに代表されるようにイラストがそのまま動き出したかのようなグラフィックのゲームが存在します。
UnrealEngineでこのような表現を手助けしてくれるSpriteStudioとそのプラグインについて書きます。

まずは上の動画を見てください。…凄すぎてちょっと何が起きているのかわからないですね…でもよく見ると3Dで作られたゲームに比べ、やや平面的な動きをしているのがわかると思います。


同じくヴァニラウェアのゲームですが、キャラクター単体の動きをTwitterで公開してくださっているのでそれをよく見てみましょう。
(ほかにもたくさんのキャラクターが公開されているので気になる人はフォローしましょう)

大きく動きが変わる部分は絵を差し替えていますが、左側のトロルがくしゃみをして下を向くアクションは、くしゃみをする前のポーズを傾けて表現していることがわかります。すべての絵を1コマづつ描くと作業量もデータ量も膨大になってしまうので、イラストに近い表現を行う場合には多くは「平面的に動いても大丈夫な変化はパーツのトランスフォーム」「奥行きを伴った動きのパーツは別の絵を描く」といった方法をとることになります。なるべくワンオフで絵を描く枚数を減らすことで、その時間をリッチな描き込みに使えるからです(とはいってもヴァニラウェアのゲームは膨大な絵を描いていますが…)

イラストを動かす表現手段

パーツのトランスフォームと、パーツの置き換え、という2つの動きが基本ですが、これをUE4で行うには大きく2つの方法があります。

  • Mayaなどの3Dソフトで動かす
  • SpriteStudioなどの2Dを動かすことに特化したツールを使う

SpriteStudio OPTPiX SpriteStudio はスプライトアニメーションデータを制作する際の煩雑な手間を削減することで、制作効率を大幅に改善します。 OPTPiX SpriteStudio を使えば、スプライトアニメーションデータの制作をデザイナー単独の作業で完結できるようになります。 また制作されるデータは、あらゆるゲームシーンで利用できる「超汎用」データで、使用展開が思いのまま。 Windows 、Mac OSに対応し、英語モードも搭載しています。 (公式サイトより)

  3Dソフトを使用した場合の表現力は、オブジェクトをスケルタルメッシュにするかどうかで変わってきます。スケルタルにした場合は、パーツの板を細分化してウエイトをつけることでスムーズな関節や歪めるような表現も可能です。パーツの置き換えという機能はないのですが、瞬間的にスケールを0にして置き換えるメッシュのスケールを1にすることで代用できます。(ほかにもUVスクロールでパーツを差し替えるということも考えられます。大きさが同じ場合限定ですので、目パチなどによく使われる処理です) 一方、パーツの置き換えに関しては、SpriteStudioにはパーツの差し替え機能というものが備わっています。 この2つの方法ですが、大雑把に言って以下の様なメリット・ディメリットがあると思います。

  • Mayaなどの3Dソフトで動かす
    モデル制作効率 △ UV配置をして切り分けるので手間が多いです。
    モーション制作効率 △~◎ データの使い回しができるのがおおきいです。場合によってはMelで作業工程短縮を図れるかも。ツールの知識の度合いで効率はかなり変わります。
    特殊効果 ☓ 通常合成以外の合成方法ではUE4でシェーダーを作成する必要があります。
  • SpriteStudioを使う モデル制作効率
    ◎ Photoshopなどから自動的にパーツ化してくれる外部ツールがあります(後述)
    モーション制作効率 ◯ 3Dソフトに慣れていないスタッフでも扱いやすいです。
    特殊効果 ◯ ツール側に加算など合成方法があります。

 

このSpriteStudioですが、手前味噌ですが第4回ぷちコンで使ってみました。 動くものは(一部のパーティクルを除いて)すべてSpriteStudioで作成しています。

SpriteStudioで得意なこと

特殊効果の項目で少し触れましたが、3Dソフト+UE4では難しいけれどSpriteStudioを使えば簡単になることがいくつかあります。

2015-12-01_23-42-45パーツの差し替え

パーツの差し替えを3Dソフトで行う場合には、スケールを使う方法が一般的です。 しかし、可変フレームでゲームが動いている場合、スケールをかける瞬間が見えることがあるので、実装には注意が必要です。 SpriteStudioには参照セルを差し替える機能があるため、アニメーションの途中で絵を差し替えるということが非常に簡単にできます。

2015-12-01_23-39-25透過

透過もアニメーションと連動して行うのが難しい表現です。 3Dソフトだけを経験していると気が付きませんが、透過はマテリアルの範疇であり一般的なゲームのモーションとは無関係で、そもそもFBXのデータとしては書きだされません。アニメーションの一部に透過を使いたい場合、専用に用意したヌルにキーを打ち(3Dソフトでマテリアルの透過とドリブンして)FBXデータにも反映できるようにして、そのヌルのアニメーションをBlueprintで拾ってダイナミックマテリアルインスタンスを通してマテリアルの透過に渡す、といった処理を書く必要があります。  

2015-12-01_23-35-04頂点変形

板ポリをそのまま動かす場合は頂点変形を制御するのは難しいです。(マテリアルのワールドポジションオフセットを使えばできそうですが、コントロールが大変そうです…) スケルタルメッシュを使用した場合は、頂点ごとに対応したジョイントを用意して変形することができます。自由に形状を分割できるため、自由度が高くなります。 SpriteStudioは四隅の頂点位置をアニメートすることができます。

2015-12-01_23-35-45カラーブレンド

透過と同じくマテリアルの範疇なので、アニメーションとの同期は手間がかかります。

SpriteStudio+UE4で更なる魅力

UE4のSpriteStudioプラグインは非常に優秀なので、SpriteStudio単体では難しい表現をUE4で補うことができます。 その中の一つがオフスクリーンレンダリングを行う機能です。

Sprite Studio Render Settings > OffScreenPlane

SpriteStudioのアセットをOffScreenPlaneにすると、一旦オフスクリーンレンダリングし、そのレンダーターゲットを板ポリに貼り付けて描画することができます。それにより、UE4のマテリアルの機能をフル活用できます。 例えば、ワールドポジションオフセットを使ってなびかせることもできますし、ゲーム中の処理に合わせで色を変化させるなんてこともできます。

2015-12-01_23-21-29SpriteStudioの支援ツール

  GitHubにSpriteStudioを更に便利にするツールが公開されています。  

PSDtoSS

このツールを使えば、なんとPSDレイヤーをセルマップにパーツを自動で配置してくれます! Photoshopのほか、Illustrator、GIMPにも対応しています。 ~ 試しに使ってみました ~ パーツを切り出したPhotoshopファイルを用意します。 (右図ではわかりやすいようにガイド枠を表示しています) 通常であればここからパーツが重ならないように並べかえて、SpriteStudioでセルマップに登録し、SpriteStudioのアニメーションで元の位置になるようにパーツを配置する必要があります。地味な作業ですが結構な手間です。(元の位置がわからなくなってしまうことも…;) セルマップの名前のちゃんと設定しておかないと、アニメーションするときに何がなんだかわからなくなってしまいます。これも地味に手間です。

PSDtoSSを使用する場合、まずはPhotoshopのスクリプトを実行します。 スクリプトを実行するとPSDファイルと同じ階層に各パーツのPNGデータと、配置情報の書かれたテキストファイルが書きだされます。

書きだされたテキストファイルをPSDtoSSの実行ファイルのウィンドウにドラッグし、出力の設定(テクスチャサイズと出力フォルダ)を登録して、コンバート開始を押します。 するとSpriteStudioのプロジェクトファイル、セルの登録ファイル、アニメーションファイル(元のPSDと同じ位置に配置した情報)が出力されます!

2015-12-01_23-30-03ファイルを開いてみるとこの通り! セルマップは非常にきっちりと並んでいて、Photoshopのレイヤー名がそのままセルの名前になっています。 Photoshopの配置通りにパーツが並んでいるので、(セルの原点を直せば)すぐにでもアニメーションをつけることができます。

ぷちコンの制作時に知っておきたかった!(笑)

SpriteStudioは動画を見ればすぐに使えるほどお手軽でありながら、とても優秀な機能を持っています。 UE4との連携もとてもいいのでぜひ使ってみましょう!

ちなみにインディーライセンスは無料です!

明日はもんしょさんでGBufferのネタということです。楽しみです!

SHARE :

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です