【Unity】2Dモデルをアニメーションさせる

 2D Animationを使うとUnityエディター上で2Dスプライトにボーンを入れてアニメーションを作成することができる。公式アセットを使うので無料

  1. PSBファイルを作成
  2. アセットのインポート
  3. ボーンとウェイト設定
  4. アニメーション作成

PSBファイルを作成する

 Photoshopで出力できるファイルには、画像情報に加えてレイヤーやパスの情報も含まれるPSDファイルというものがある。そして、大きさが2GBを超える、あるいは縦・横どちらかが30000pxを超えるファイルは本来Photoshopで扱うことが想定されていないためPSBファイルとして出力される。

 今回使うアセットでPSBファイルが必要になるので、PhotoshopでPSBファイルを作成するか、PSDで出力した後ディレクトリ上で拡張子をpsbに書き換える。 なお、大きく動かしたい部分は別のレイヤーに分けて描き背景を透過しておく。


アセットをインポートする

 Unityエディター上のWindow/Package Managerから2D Animation2D IK2D PSD Importerをインポートする。初期状態で表示されていない場合はAll Packageをクリックする。


ボーンの設定

 PSBファイルをUnity内にインポートすると2D PSD Importerによりレイヤー情報を維持したオブジェクトに変換される。そのオブジェクトをSprite Editor上で編集してボーンを設定する。

 まずSprite Editorを開いて、画像がレイヤーごとに切り分けられてることを確認する。Skinning Editorに変更し、Create Boneからボーンを設定する。このボーンを元にアニメーションを作成するため、骨格を想定して設定するのがいい。

 ボーンを作成し終わったらジオメトリを設定する。Auto GeometeryGenerate For All Visible でモデルが自動的に分割される。Edit Geometryで分割されたメッシュのラインを編集を、Create Bertexで中点で分割して新たなメッシュを作成することができる。

 メッシュに分割した際にボーンがメッシュを動かすウェイトも自動で設定される。ボーンの色と同じ部分がボーンとともに動くメッシュの範囲であり、これはWeight Brushから変更することができる。 三つのモードがあるが、ADDでウェイトをつけていくのがいい。ボーンをダブルクリックすることで各レイヤーごとのウェイトが表示される。 ウエイトを増やしたいボーンをクリックもしくはサブウインドウのBoneで選び右クリックしながらメッシュの頂点をなぞって塗っていく



アニメーションを作成する

 ボーンを設定したオブジェクトにアニメーションをつける。オブジェクトをGameWindow上に表示させた後、Window/AnimationよりAnimatioウインドウを表示する。

 Createをクリックして、animファイルに名前を付けて保存する。これでモーションを作成することができる。Add Propertyからアニメーションさせるボーンを選択し、各ボーンをクリックした後右クリックで追加していく。

 上部の赤丸を押したあと、右側の0:00上で画像上の二重丸ボタンを押して初期状態を登録する。その後、同様に白いバーを動かし、実際にボーンを移動させて二重丸を押してアニメーションを登録していく。一通り登録し終わったら再び赤丸を押して録画を終える。

 複数アニメーションを作りたい場合はNew Animationから新たなモーションを作成することができる。作成したアニメーションはAnimator上から利用することができる。


参考

Introduction | Package Manager UI website
Skeletal Animation with Anima2D – Unity Learn
【Unity】2D Animation(v2)でボーンベースで動くキャラクターを作る – テラシュールブログ
【Windows10版】ファイル拡張子の変更方法
PSD Importer? – Unity Forum
【Photoshop】拡張子.psbのPSBファイルとPSDファイルの違いとは? – Jill Tone Blog