スマホアプリで大活躍 汎用2Dアニメツール「SpriteStudio」×「Unity」

白井です。
今回は弊社がスマホゲームアプリ開発の際に採用した汎用2Dアニメーション作成ソフト
「SpriteStudio」のご紹介をいたします。


SpriteStudioを使ったアニメーション見本。ワンテンガー

●SpriteStudioとは?
簡潔に説明すると2Dアニメーション機能の乏しい環境でもキーフレームアニメーションを作成、実装することができるツールです。習得コストも低く使いやすいです。詳しくは公式ページよりご覧いただければと思います。
「SpriteStudio」公式ページへ

●SpriteStudioを採用するまでの経緯
ゲームアプリ開発当時Unityには2Dアニメーションの作成機能がなく途方にくれていた際メンバーが発見し急遽検証。問題なさそうだったので即採用という流れでした。

●アニメーション製作から実装までの流れ
基本的にはSpriteStudioでアニメーション製作、Unity内プラグインでアニメーションを読み込み
確認後エラーがなければ実装メンバーにパス。という流れです。

ss_ss_workflow

●アニメーションの雰囲気、できることできないこと ※2014年11月時点
できることは基本的には簡単な親子付けによるパペットアニメです。AEのパペットツールのように
1つの画像をぐにっと曲げるなどはできません。(パーツを囲った四角形の変形はサポート)
なので移動、スケール、回転がメイン。詰めないと相当チープな物になるのでパペット感を隠すため
イージングインアウト、溜め、のこし、など意識しいろいろ手を尽くす必要があります。
ちなみに加算が使えます。これは汎用性が高くすばらしいです。
Unityにもっていってもきちんと加算として描画されます。

ss_ss_transform

●実演
・テクスチャ製作
まず、パペットキャラクターの元絵を準備します。動かす際問題が起こらないよう
見えない部分もレイヤーわけしてきちんと用意しておきます。

ss_ss_sozai

そしてアニメーションさせるため部品を敷き詰めて背景を透明にします。
これがSpriteStudio内でもUnity内でもテクスチャとして扱われます。

ss_ss_tex

今回使用したテクスチャ

・SpriteStudioでアニメート
テクスチャを読み込んでその中からパペットのパーツになる部分を登録し配置、親子付け。
これだけで基本的なアニメーョンを作ることができます。

ss_ss_ui

ss_ss_ui

・Unityで確認、実装
公式のプラグインを介して書き出したデータをunityに持ってくると自動でプレハブ化されてアセット内に
現れます。これを再生してみるとスプライトスタジオ内のアニメとほぼ同じものが再生され、
スクリプトで切り替えればゲーム内でアニメ-ションを使えます。

ss_ss_unity

弊社のケースではキャラ以外にも文字をアニメーションさせたり、イベントシーン、
攻撃エフェクトなどでも使用しており、なかなか幅広い可能性を持っています。
機能の開発も積極的に進められているようで今後にも期待ですね。
では。


related article