Unity
Anima2D
itemstore

夏の自由研究!無料のUnityアセット・Anima2Dでアイちゃんを動かす!

今回は Anima2D を使って画像からアニメーションを制作する手順を紹介します。
具体的には itemstore 公式キャラクターのアイちゃんが手を振るアニメーションを制作していきます。

000

この記事は、itemstore BLOGに掲載している
「夏の自由研究!無料のAnima2Dでアイちゃんを動かす!」
の補足なので、併せて読まれることをおすすめします。

キーボード・マウスの操作については Windows 環境における説明になりますので、他の環境の方は適宜置き換えてお読みください。

Anima2D をインポートする

Anima2DUnity のアセットストアから無料で利用できます。

100
引用:https://www.assetstore.unity3d.com/jp/#!/content/79840

ダイアログの import ボタンを押すと、プロジェクトに Anima2D がインポートされます。

101

インポートが成功すると Project ウィンドウに次のようにフォルダが作成されます。

102

フォルダの中には、いくつかのサンプルが含まれているので参考にしてみましょう。

画像から SpriteMesh を作る

Anima2D では、画像から作った SpriteMesh を Bone と連結させて画像を変形させたり動かしたりします。

SpriteMesh を作るには元となるスプライトなどの画像を Project ウィンドウで選択したあと右クリックして、ポップアップメニュー[Create]→[Anima2D]→[SpriteMesh]を選びます。

200

画像の Pixel Per Unit などは SpriteMesh を作る前に設定しておきましょう。

SpriteMesh は画像に対して自動的に頂点を割り当てメッシュを形成します。
これは SpriteMesh アセットを選択したときに Inspector ウィンドウに表示される Edit Sprite Mesh ボタンを左クリックすると表示される SpriteMesh Editor ウィンドウで確認・編集できます。

201

ためしに、アイちゃんの頭の画像から作った SpriteMesh を見てみると大雑把に頂点(水色の丸)が割り振られメッシュが形成されていました。

202

Slice による自動整形

SpriteMesh Editor ウィンドウの左上にある Slice tool でパラメータを調整して Apply ボタンを押すとより正確に頂点が割り振られます。

203

それでも完全に頂点を割り振ることは難しいと思います。
あとは、手動で微調整をしましょう。
ここでは、編集方法をいくつか紹介します。

頂点の選択と削除

不要な頂点がある場合、頂点を左クリックなどで選択して delete キーで削除できます。
頂点の選択は左クリックだけではなく次のように複数選択もできます。

マウスで矩形選択をすると範囲内の頂点が選択され、その後 delete キーで削除できます。

204

さらに頂点を追加選択したい場合は、 ctrl キーを押しながら左クリックした頂点を追加することができ、一括して delete キーで削除できます。

205

矩形選択や ctrl キーによる追加選択は他の操作でも利用できます。

頂点の移動

頂点の位置を修正したい場合は、対象の頂点を選択後にその頂点をマウスでドラッグ&ドロップすることで別の位置に移動できます。

206

頂点の追加

頂点を追加したい場合は、shift キーを押しながら追加したい場所で左クリックします。
頂点と頂点を結ぶ辺に新たに頂点を追加したい場合は、辺の上でshift キーを押しながら左クリックします。

207

辺の削除

辺を左クリックで選択してから delete キーを押すと辺を削除できます。

208

辺の追加

頂点を選択して shift キーを押しながら、つなげるもう一方の頂点で左クリックすることで頂点と頂点の間に辺を追加できます。

209

SpriteMesh をシーンに配置する

SpriteMesh は Project ウィンドウから Scene ウィンドウにドラッグ&ドロップすることで現在開いているシーンに配置できます。

今回は他のサンプルに習い AiChan という空の GameObject の下位に、 SpriteMesh という空の GameObject を作り、その下に SpriteMesh の GameObject を配置しました。
ちなみに後述する Bone は AiChan の下位の Bone という空の GameObject の下に配置するようにします。

300

SpriteMesh 同士の重なり順は、 Inspector ウィンドウに表示されている SpriteMeshInstance コンポーネントの Order in Layer で設定できます。
値が大きい SpriteMesh のほうが手前に表示されます。

301

今回は2つの画像だけですが、正確にパーツごとに配置するのは大変かもしれません。
その不便さを解消するためのエディタ拡張を作ってみましたので、もしよろしければご覧ください。

描いた絵を Unity の Anima2D でぴたっと配置するための我流メモ - Qiita

302

Bone を追加配置する

シーンに配置された SpriteMesh は関連付けた Bone を動かすことによって変形させたり動かすことができます。

400

シーンへの追加

Bone は Hierarchy ウィンドウで右クリックし、ポップアップメニュー[2D Object]→[Bone]を選択すると追加されます。
上位の Bone のところで右クリックして追加した Bone は上位の Bone の Child フィールドに登録され親子関係が設定されます。
例えば、右腕を構成する上腕と前腕の 2 つの Bone にも次のように親子関係があります。

401

親子関係をつけずに、 Transform の親子関係だけ設定したい場合は Child フィールドで None を選択します。

Bone の位置や角度などはシーン上で移動ツールなどを使って変更できます。

402

Bone の大きさは Bone コンポーネントの Length フィールドで調整できます。

403

SpriteMesh へ Bone を設定する

Bone は SpriteMeshInstance コンポーネントの Bones のリストに設定することで SpriteMesh に設定されます。

404

親子関係にある Bone 群を一括してリストに設定したい場合は、もっとも上位の Bone を Set Bones フィールドに設定すると便利です。

SpriteMesh Editor ウィンドウ上での適用

Bone を SpriteMesh の Bones フィールドに設定しただけでは、警告がでているようにまだ関連付けは済んでいません。
関連付けたい SpriteMesh を Scene ウィンドウや Hierarchy ウィンドウで選択すると、SpriteMesh Editor ウィンドウに画像やメッシュのほかに Bone があわせて表示されるようになります。

405

SpriteMesh Editor ウィンドウで Bind ボタン → Apply ボタンを押すと、 Bone が SpriteMesh に関連付けられます。

406

この状態で、 Scene ウィンドウのボーンを動かすと SpriteMesh の画像も連動して動くようになります。

Bone とメッシュの関連性の割り当て

Bone が SpriteMesh のどの範囲までどの程度の割合で影響を与えるかを調整することで、Bone に連動してほしい部分とそうでない部分を調整できます。

Bone ごとの影響範囲は、SpriteMesh Editor ウィンドウの右下にある Weight tool の Overview で見ることができます。

このときに表示される色は Bone の色に対応していて、この場合は左から中央部分までは赤い色の中央の Bone に連動することがわかります。

407

また、 Weight tool の Pies のチェックをいれると、次のように頂点ごとにどの Bone がどの程度影響しているのかを円グラフで表示してくれます。

408

重み付けの設定は左下の Inspector で設定できます。

Spring Bone の設定

髪をゆらしたりするときに使うコンポーネントが Spring Bone です。

409

これは Bone を追加したあと、その Inspector ウィンドウの Add Component ボタンから検索して追加します。

410

Transform としては上位の Bone ですが、つなげずに別の位置に配置するため、上位の Bone の Child フィールドを None にして Bone としての親子関係はなしにしています。

411

最後に、Bone や SpriteMesh 群の上位のゲームオブジェクトに Spring Manager コンポーネントを追加して、Spring Bone を登録すれば、実行時に Spring Bone にあわせて SpriteMesh が揺れるようになります。

412

揺れてほしくない部分、例えば髪ではなく顔まで揺れてしまう場合は、髪と顔で画像を分けたり、SpriteMesh Editor ウィンドウの Weight tool などを使い、先ほど紹介した重み付けの調整をしましょう。

Bind済みのSpriteMeshにBoneを追加する場合は一度 Unbind する

SpriteMesh に Bone を Bind したあとは、それに対応する SpriteMeshInstance に Bone を追加できなくなります。

Bind したあとは、 Set Bones フィールドが消え、 Bones リストへの要素の追加・削除のボタンが消えます。

413

Bone をさらに追加したい場合は一度 SpriteMesh Editor ウィンドウで Unbind ボタン → Apply ボタンを押します。

414

これで、再び Inspector ウィンドウの SpriteMeshInstance の Bones に Bone を追加で設定できます。

415

設定が終わったら、再び SpriteMesh Editor ウィンドウで Bind を適用しましょう。

IK で多関節を一括して動かす

複数の Bone が親子関係でつながっている場合、IK を使い一括して動かすことで編集を楽に行うことができます。

例えば、下のように上腕と前腕の 2 個の Bone の多関節の場合は、先端の Bone を右クリックしてポップアップメニュー [2D Object]→[IK Limb] を選びます。
そうすると、下の図のように緑色の円が現れます。
これを移動させると、関節の曲がる方向などを意識しながら自動的に 2 つの Bone を動かせます。

416

しかし、右腕と左腕では曲がる方向が反対になるので、不自然な動きになることがあります。

417

その場合は、 Ik Limb 2D コンポーネントの Flip プロパティにチェックをいれましょう。

418

腕や脚とは異なる動きをする関節や、3つ以上の Bone の多関節には IK CCD を選ぶようにしましょう。

Animation ウィンドウでアニメーションを作成

Scene ウィンドウで Bone や IK を動かすことで SpriteMesh を動かせるようになりました。
ここからは、 Bone や IK の動きをフレーム単位で記録させてアニメーションを作成します。

Animation ウィンドウをメニューの [Window]→[Animation]から表示させましょう。
その後、Bone や SpriteMesh を持つ上位の GameObject を Hierarchy
ウィンドウで選択すると、 Animation Window に Create ボタンが表示されるので、左クリックして Animation Clip を作ります。

500

その後、録画ボタンを押し、記録させたいフレームごとに、それぞれの Bone の位置や角度を記録させていきます。

501

502

再生ボタンを押すことで、動きを確認できます。
※Spring Bone の揺れる動きを確認するには Unity エディタを実行する必要があります。

実行

すでに Animation Clip を作った時点で Bone や SpriteMesh の上位の GameObject にアニメーションに必要な Animator コンポーネントが追加され、 Animation Clip が再生されるように設定されています。

600

アニメーションを実行したいだけならば、特にコンポーネントを変えずに実行ボタンを押すだけで次のようにアニメーションを確認できます。

601

参照リンク

itemstore(アイテムストア) - アプリ内課金[In-App Purchase]を簡単実装
itemstore BLOG
Unity
Anima2D

注意点

この記事では、ご意見やご質問などのコメントには対応できないことを何卒ご理解ください。