テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】2D Animation(v2)でボーンベースで動くキャラクターを作る

f:id:tsubaki_t1:20181226215612j:plain

今回は Anima 2Dの後継、Unity 2D Animation(V2)でボーンベースで動くキャラクターを作成してみます。
なお今回は長くなりすぎたのでIk周りはやりません。セットアップまでです。

スケルタルベースのキャラクター表現

最近のゲームでよく見るスタイルの、スケルタル(骨格)ベースのキャラクター表現です。スプライトを差し替えるスプライトアニメーションと比較して、高解像度なスプライトで高フレームレートなアニメーションを実現出来るのが特徴です。

f:id:tsubaki_t1:20181226220521g:plain
ボーンベースを動かして対応するスプライトを動かす

この表現を行う為のツールとしてAnima2Dがありましたが、Unityに吸収されUnity 2D AnimationパッケージとUnity 2D IKパッケージという形で統合されました。

tsubakit1.hateblo.jp

で、今回 Unity 2D AnimationがVersion 2にアップデートされたので、使い方を見てみます。*1

パッケージの導入

パッケージはPackage Managerから導入出来ます。GUIで変更可能で、JSONを書き換える必要はありません。

今回の操作ではPSD Importerも使用します。これはスプライトのレイアウトを云々するのを楽にしてくれます。

f:id:tsubaki_t1:20181226221204j:plain
導入するパッケージ一覧

PSBをインポート

最初にPSDをPSBにしてインポートします。
PSDはパーツごとにレイヤーを統合しておきます。全て統合しても利用は可能ですが、可動部が非常に大きいパーツ(例えば腕や足、頭)は分割してあるのが良さそうです。

f:id:tsubaki_t1:20181226221523g:plain
PSDのレイヤー情報

レイヤーをまとめたら、PSDではなくビッグデータ(PSB)フォーマットで出力し、Unityプロジェクトへインポートします。PSD Importerが導入されていれば、これでスプライトは自動的にスライスされ、分割で配置されます。

f:id:tsubaki_t1:20181226222057j:plain
インポート時に自動的にレイヤー単位で分割配置される

なお今回のアプローチではCharacter Rigが必ず必要です。

f:id:tsubaki_t1:20181226221939j:plain
Character Rig

tsubakit1.hateblo.jp

場合によってはPivotの位置をキャラクターの足元になるように(目分量で)調整して、次はスプライトのセットアップです。

スキンのセットアップ

スプライトエディターからSkinning Editorを開きます。この項目がない場合は2D Animationパッケージが多分無いです。

f:id:tsubaki_t1:20181226222227j:plain
Skinning Editorを開く

ボーンのセットアップ

最初にボーンをセットアップします。

Create Boneでボーンを作っていきます。このボーンが、まさにキャラクターの骨になります。

ボーンはボーンの先端から少し離して配置することも出来ます。例えば肩や足、髪の毛など、腰の影響を受けるが接触はしていないというパーツは、一旦離して配置します。この場合、最後にクリックしたボーンの影響下になります。

f:id:tsubaki_t1:20181226223541g:plain
ボーンをセットアップ

なおボーンを設定すべきスプライトが影に隠れて見えにくい場合は、右上の項目からスプライトを個別に表示することも可能です。他にもダブルクリックでメッシュを表示したりもできます(上では自分はダブルクリックで腕を表示しています)

f:id:tsubaki_t1:20181226224844j:plain
スプライトを個別表示

ジオメトリのセットアップ

次にスプライトを変形させるために、メッシュを作成します。これは自動で作ることが出来ます。

Auto Geometoryを選択後、Generate For All Visibleでメッシュが自動的に生成されます。ついでにボーンに紐付いたウェイトも自動的に設定されます。 自動生成が気に入らなければ(変形するメッシュの密度が足りないようなら)手動で調整することも出来ますが、今回はしません。

f:id:tsubaki_t1:20181226224407j:plain
メッシュの自動生成

ウェイトのセットアップ

メッシュとウェイトを自動生成すると、予想外のボーンに対してウェイトがかかっていたりします。例えば腕のボーンが体にかかっていたり、その逆だったり。これを放置すると、ボーンを動かした時にメッシュが奇妙な変形を起こす事になります。

例えば下の図の場合、腰のボーンの影響を受けているため二の腕がたるんでしまっています。

f:id:tsubaki_t1:20181226225912g:plain
予想外のボーンの影響を受けて予想外のタルみを見せる二の腕

なのでメッシュが影響を受けるボーンを限定します。

ボーンの影響はBone Influenceでメッシュ毎に設定することが出来ます。これでメッシュが影響すべきボーンを限定してやれば、上のような問題は起こらなくなります。またブラシでボーンの影響の強度を調整したりもします。

f:id:tsubaki_t1:20181226225420j:plain
Bone Influenceでメッシュが影響するボーンを減らす

f:id:tsubaki_t1:20181226232425g:plain
ウェイトがちゃんとしてれば、変な影響を受けない

キャラクターを配置

セットアップが完了したら、シーンに配置します。

PSBでインポートしたファイルをそのままシーンに配置すれば、ボーンの設定されたキャラクターとして配置して、FKで各パーツを動かせます。

なおキャラクターが大きすぎたり、キャラクターの中心位置が微妙な場合、大きさはPixel Per Unit、中心位置はPivotで調整します。

f:id:tsubaki_t1:20181226231308g:plain
セットアップしたキャラクターをシーンに配置

感想

スプライトの配置や描画順がサクッと出来て、実際のレイアウトを確認しながらボーンを調整してジオメトリとウェイトが自動でできるのは楽で良いです。次はキャラクターを動かしたりアニメーションさせたりします。

なお「試したいけどPSBなんて持ってないよ!」という場合は、下のプロジェクトからサンプルを入手出来ます。

github.com

しかし何故PSBなんでしょう。PSDだったら多くのツールで編集が可能なのに

関連

tsubakit1.hateblo.jp

PSD Importerが使えない場合

blogs.unity3d.com

*1:まぁVersion 2でもPreviewな訳ですが