ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity - 2D Animation:イラストにボーンをいれてアニメーションをつくる

初めに

 本記事では、2D Animation パッケージを使って、レイヤーに分けられた画像にボーンを入れ、アニメーションを作る方法をまとめます。


前提知識

 レイヤーに分けられた画像を Unity に取り込むには、2D PSD Importer が必要になります。本記事では、レイヤーに分けられた画像にボーンを入れます。レイヤーに分けられた画像を Unity 内に取り込む方法が分からない場合は下の記事をご覧ください。

fineworks-fine.hatenablog.com

 レイヤーごとに分けられた画像が取り込めると、下の画像にようになります。


2D Animation のインストール

 Window > Package Manager から 2D Animation を選び、インストールをクリックします。
 Unity で Project を新規作成する際に「2D」テンプレートを選択すると、はじめからインストールされているはずです。

画像にボーンを入れて、アニメーションを作る

手順

 次の手順でアニメーションを作っていきます。

  1. 画像に Bone(ボーン)を入れる
  2. Geometry の設定をする
  3. Weights の設定をする
  4. アニメーションを作る

画像に Bone(ボーン)を入れる

 Sprite Editor からボーンを入れることができます。

 ボーンを入れたい画像を選択し、Sprite Editor をクリックします。

 Skinning Editor を開きます。

 Bone(ボーン)の設定をしていきます。

機能 説明
Preview Pose ボーンを動かしたり、回転させたりしたときのポーズを確認できる
Edit Bone 作成済みのBoneを調節
Create Bone 新規Bone作成
Split Bone Boneを2つに分ける

 設定が終わったら、Apply をクリックすることで、設定を適応することができます。また、Revert をクリックすることで設定を元に戻すことができます。


Geometry の設定をする

 Geometry とは、直訳では「形状、形」を意味します。画像をレイヤーごとに三角形分割してメッシュを作ります。

※Weights を与えるまでは画像のようにカラフルではなく、透明です。

機能 説明
Auto Geometry 自動生成
Edit Geometry Geometryの編集
Create Vertex 頂点の作成
Create Edge 線の作成
Split Edge 線の分割

 基本的には、最初に Auto Geometry を使い、他の4つの機能を使って微調整をしていきます。頂点ごとに Bone(ボーン) への Weight(重み)を設定できるので、頂点が多いほど細かい動きを設定できます。

 Auto Geometry 選択時に次のようなメニューが表示されます。Geometry をどのように自動生成するか、調整できます。

機能 説明
Outline Detail アウトラインの精度
値が大きいほど輪郭に沿ったアウトラインになる
Alpha Tolerance α値の閾値
この数値よりα値の小さいピクセルは透明と判断される
Subdivide 数値が大きいほど分割数が多くなる
Weights Bone に設定される Weight
Generate For Selected/Generate For All Visible 生成
Weights の設定をする

 Bone を動かしたとき、どの程度 Geometry に影響を与えるかを Weight(重み)という形で設定します。

機能 説明
Auto Weights 自動設定
Weight slider スライダーを使って Weight を調整
weight Brush ブラシを使って Weight を調整
Bone Influence スプライトに影響を与えるボーンを選択
Sprite Influence ボーンによって影響を受けるスプライトを選択
※ver7.0以降

 Auto Geometry 選択時に次のようなメニューが表示されます。どのように Weight を自動設定するか、調整できます。

機能 説明
Associate Bones チェックを入れるとスプライトに重なった Bone が自動的に関連付けられる
Generate/Generate All 選択されたスプライトの Weight を生成
なにも選択していない場合はすべてのスプライトについて Weight を生成
Normalize 選択したスプライトの Weight を正規化

なにも選択していない場合はすべてのスプライトについて正規化
Clear 選択したスプライトの Weight をクリアする
なにも選択していない場合はすべてのスプライトについて Weight をクリアする

 Weight Slider や Weight Blush を使って頂点ごとに Weight やモードを選択することができます。

 Weight のモードは3種類あります。

Mode 説明
Add And Subtract すべてのスライダーが選択したボーンの周りのすべての頂点に影響を与える
Grow And Shrink すべてのスライダーが選択したボーンによって既に影響を受けている頂点のみに影響を与える
Smooth すべての頂点の重みを隣接する頂点と平均して、すべての頂点に均一な重みを与える

 Bone Influence を選択した状態でスプライトを選ぶと、そのスプライトに影響を与えるボーンが確認できます。

 Bone を選択した状態で + を押すと追加、- を押すと削除することができます。

Visibility ツール

 Skinning Editor には Visibility ツールがついています。Visibility ボタンをクリックすることで開くことができます。

 各レイヤーごとにスプライトの表示・非表示を選択したり、ボーンの表示・非表示を選択したりできます。

アニメーションを作る

 ボーンを入れ、Weight の設定をしたらアニメーションを作っていきます。

 先ほどのスプライトを Hierarchy にドラッグ&ドロップし、生成します。Scene ビューで Gizmos をオンにして確認すると、ボーンが入っていることが分かります。

 Window > Animation > Animation からアニメーションウィンドウを開きます。Hierarchy にあるスプライトを選択した状態で Create New Clip をクリックします。

 あとはアニメーションウィンドウの赤丸ボタンを押し、どのキーフレームのときにどのポーズをとってほしいか設定していきます。

 ボーンはシーンビューからツールバーを使って設定できます。Inspector の Transform の値を直接変更することも可能です。

youtu.be

最後に

  • 次の手順でアニメーションを作る
    1. 画像に Bone(ボーン)を入れる
    2. Geometry の設定をする
    3. Weights の設定をする
    4. アニメーションを作る
  • 公式ドキュメントにバージョンごとに詳細な説明があります