<< 春のクワガワ | main | Googleリーダーからの引越し >>

Unityで2Dボーンアニメーション

 Unityで2Dのボーンアニメーション(スキンメッシュアニメーション)を試してみた。

標準の"Animation"でも一応アニメーションは可能だが、多関節を動かすのはかなり気合が必要なので、以下のようなツールを使う方が現実的みたい。
  ・SmoothMoves:$75
  ・EasyMotion2D:$55
  ・OPTPiX SpriteStudio:99,750円

SpriteStudioは独立したWindowsアプリで、日本語化されているし実績もあり使い勝手が良さそう。cocos2dなどにも使える。ただ、アトラス化の機能が無い(既存のアトラス画像を読み込んで手作業でパーツ分けする必要がある)ことと、とても高価なことがネックだ。
それに比べてSmoothMovesとEasyMotion2DはどちらもUnityのAssetStoreで購入できて、比較的安価。このうち評価が良かったSmoothMovesを使うことにした。

大まかな手順は、
  1.パーツ画像をまとめたアトラス画像を作成
  2.アニメーションを作成
  3.シーンへ配置
という流れ。

まずはアトラス作成。
メニュー"SmoothMoves"→"Create Asset"→"Texture Atlas Data"で、Projectウインドウ内にアトラスデータを作成する。そのデータを選択してInspectorに表示されている"Open Atlas Editor"をクリックすると、エディタが起動する。そこに事前にUnityに取り込んで置いたpngなどのパーツ画像をまとめてドロップ。それぞれのパーツの関節の位置を指定する。

"Rebuild Atlas"をクリックするとアトラスのテクスチャとマテリアルが作成される。画像が汚くなる場合は、テクスチャのFormatを"Compressed"から変更すると良い。


次にアニメーション作成。
メニュー"SmoothMoves"→"Create Asset"→"Bone Animation Data"で、Projectウインドウ内にアニメーションデータを作成する。そのデータを選択してInspectorに表示されている"Open Animation Editor"をクリックすると、エディタが起動する。同時に開かれるWelcomeウインドウはすぐ閉じていい。

最初は何をやるのか全く分からないけど、慣れると簡単。
まず左下のボーンヒエラルキーでボーンの空データを作成する。次に右下のAnimation Clipsで新規クリップを作成する。ここで初めてタイムラインが表示され、0フレーム目に空のキーフレームが作成される。
このキーフレームをクリックすると上にボーンの情報が表示される。まだテクスチャと紐付けされていない。左上で、Typeを"Transform Only"から"Image"に変更して、Atlasに先ほど作成したアトラスを指定すると、すぐ右側にテクスチャリストが表示されるので選択する。そして右側で大きさ、位置、回転、前後関係(Depth)などを調整する。この作業をボーン数分行う。

ここからアニメーション付け作業。今回は、0フレーム:棒立ち、10フレーム:バンザイ、20フレーム:棒立ち、というシンプルなアニメーションを作る。
0フレームは既に出来ているので、10フレーム目の縦一列を選択して、右クリックで表示される"Duplicate First Keyframes"を実行。すると0フレームがコピーされるので、各ボーンの位置や回転などを操作して動きを付ける。20フレームにも0フレームをコピーする。

Animation Clipsの"Once"を"Loop"に変更して、画面上の三角の再生ボタンで動きを確認する。問題なければ画面を閉じて終了。

最後にシーンへの配置。
サンプルアプリを見ると凄く複雑な構成で悩むけど、実はすごく簡単。
メニュー"SmoothMoves"→"Create GameObject"→"Bone Animation"でHierarchyウインドウ内にアニメーションを配置する。InspectorのAnimation Dataに先ほど作成したアニメーションをドロップする。そして"Open Control Panel"を押して一回SmoothMovesのコントロールパネルを開いてすぐ閉じる。なんかこれをやっておかないと駄目みたい。

この状態ではまだ空のGameObjectだけど、最初の実行時に自動的に何かの処理が走って配下に色々なオブジェクトやコンポーネントが作成される。これで完了。アニメーションが大きすぎる場合は、スケールを変えるかカメラの位置やサイズを調整する。

ちなみにこのGameObjectは標準のAnimationコンポーネントを持っているので、以下のようなコードで任意のタイミングで再生したりアニメーションを変更できる。
    gameObject.animation.Play("Walk");

動作するWebサンプルはこちら

問題点。
全て同じマテリアルなのに何故かDrawCallがキャラクタ数分になっている。どうやらスキンメッシュはDynamicバッチが効かないらしい。1つのアニメーションで複数のアトラスを使用する場合はさらに増大することになるので、注意が必要だ。


コメント
参考にさせて頂きました!
ところで、SmoothMovesでは加算合成は出来ないのでしょうか?
  • Hoge
  • 2013/09/11 10:31 PM
>Hoge様
デフォルトでは普通のアルファ合成(Particles/Alpha Blended)が使われているようです。シェーダーを自作すれば他のブレンドモードが使えると思いますが、アニメーションの一部に適用するようなことは難しそうですね。
あ、自作しなくても Particles/Additive とかそのまま使えそうなシェーダーがありました。
とても分かり易いです!
しかし、実際にやってみたところ、
素材となる画像の方に透明化処理をちゃんとしているにもかかわらず、モーションを作成する画面で、キャラのパーツの周りに白い淵がついてしまいます。どうすればよいでしょう?
  • foobar
  • 2013/10/23 6:02 PM
>foobar様
ここ↓によるとpngを書き出すツールによって違いがあるらしいです。
http://www.atsuhiro-me.net/unity/dev/transparent
またここ↓のブログによると、Unity4.2からそれらを軽減するオプションが
追加されてますね。
http://d.hatena.ne.jp/nakamura001/20130722/1374499269
コメントする









この記事のトラックバックURL
トラックバック
calendar
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>
selected entries
categories
archives
recent comment
others
mobile
qrcode