4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Unity #3Advent Calendar 2020

Day 11

【Unity】2Dモデルでアニメーションを共有する・スキンエディットを実装する

Last updated at Posted at 2020-12-10

 Unityでは3Dモデルのタイプをヒューマノイドに指定することでモデル間でのアニメーションの共有ができる。しかし、2Dに関して言えば標準機能ではアニメーションに関する設定がない。アセットやlive 2Dなどの外部ツールなどを使うことで、以前のような全ての動きを描くほどの作業は不要になったが、それでも個別にアニメーションを作成するのは根気が必要だ。
 そこでパッケージマネージャーからインポートできる無料アセットを使ってアニメーションを共通利用する方法を紹介する。なお、ここで作成できるモデルは2DSpriteモデルであり、Canvas上で動くUI Imageではないことに注意してほしい。
環境:Unity2019.4.13f
必要なもの
アセット:2D Animation、2D IK、2D PSD Importer
その他:モデル用のPSBファイル
EC08F6A4-8612-4F95-92D9-3466424552D3.gif
※製作中のゲームをサンプルに使っているので動画やここでは一部のみしか変更していないが、犬とライオン、人間とロボット等見た目が違うものでもアニメーションを共有できる。
企業が2Dアニメーションを利用している例

必要なものを準備する

 2D Animation、2D IK、2D PSD Importerを利用することで2D spriteにボーンを設定して、アニメーションが作成できるようになる。インポートはUPMから行う。
FC48632D-4258-49BA-9E15-328048E1BF81.png

  Photoshopで作成できるpsbファイル(一定以上のサイズだとpsdはなくpsbになる)が必要なので、お絵描きツール等でpsdファイルを出力し、拡張子をpsbに書き換える。その後上記アセットがあれば、psbをインポートすると自動でオブジェクト化される。

 通常であれば使用するモデルを直接取り込むが、アニメーション共有するために汎用的なモデル(以下、骨格モデル)を用意する。ここでは骨格のような絵にしたが実際は棒人間でもいい。注意点としてはscaleを変更することでそれぞれの部位の長さを変更できるが、それぞれ取得して変更する必要があるので頭身を変える場合は作業数が増える。なるべく全キャラクターで利用できる骨格モデルを用意した方がいい。頭身さえ同じであればobjectのサイズを変えるだけで大きさは変更できる。

 この上にスキンを乗せるため、あらかじめイメージ図を描いておくのがいいかもしれない(図の灰色部分)。スキンで隠れるため正確にレイヤー分けする必要もないが、レイヤー分けしておくとスキンを描く際に各パーツがどの程度の大きさか判断でき、また最初のモデルを作成する時に少し楽になる。あとからの作業を厭わないのであれば隠れる部分なのでレイヤー分けは不要。
9960C495-64C8-4151-8918-911305593DDE.png

ボーンとメッシュの設定

 psbファイルをエディタにインポートすると自動でレイヤーごとに分割されたオブジェクトができる。オブジェクトのsprint editからボーンの設定ができる。Skinning Editorに変更し、Create Boneからボーンを設定する。このボーンを元にアニメーションを作成するため、骨格を想定して設定するのがいい。

2A3C16E9-D8A1-4E99-A6F2-01AA07E3686A.jpeg

9815623A-D189-49DB-A27D-8482F9ED528A.jpeg
 ボーンを作成し終わったらジオメトリを設定する。Auto Geometery、Generate For All Visible でモデルが自動的に分割される。メッシュは画面上に表示されないため、雑に削ってもいい。
詳しい説明は 【Unity】2Dモデルをアニメーションさせる を参照

##スキンの用意
 スキンはpng等で用意する。骨格モデルの方は画面に表示されないためレイヤーを分けなくても良かったが、スキンはレイヤー分けが必要になる。境目は多少はみ出て書いておくとアニメーションさせた時に自然に見える
DBFCCF0D-C057-41F0-B0F9-8B9F717B053B.jpeg
 容量節約のためにマルチSpriteを使っているが、スライスされた時にそれぞれの部位が同じ大きさでなければスキンを変更する時に配置の調整が必要になる。羽を生やしたい、角を生やしたいなど分割された枠よりも大きくはみ出ることが予想される部位は個別にpngで用意して上下左右にあらかじめ余白を作っておくのがいい。余白を作る場合は身体や頭の中心点は常に同じぐらいにする必要がある。(おそらく顔なら顎の位置が同じぐらいなら全く別の輪郭に変更しても自然に見える)
034387F8-8EE9-4EEF-BEE1-61D156BCBE27.jpeg

スキンの設定

 ここからがアニメーションを共有する方法の本題になる。スキンの乗せ方にはやや癖がある。まず、ボーンを設定したオブジェクトをヒエラルキー上にドラッグする。そして、子オブジェクトを開き、ボーンではなく骨格モデルのsprintが格納されているオブジェクトを右クリックして、子オブジェクトに2D sprintを追加する。骨格モデルを追加していた場合は各オブジェクト下にsprintを追加していくだけでいいが、レイヤー分けしていなかった場合は自分で位置や角度を調整していく。

712E523D-3E8B-46F5-9005-9A9F3202B641.png

 ボーンは骨格モデルだけを制御するので、この状態ではアニメーションがスキンに反映されない。そのため、これらのスキンを対応する各ボーンオブジェクト下に配置していく必要がある。全てのSpriteを移動させたら2Dモデルが完成する。この完成したオブジェクトはオリジナルのPrefab化しておくといい。

26C6B979-4F66-4A0C-AD4E-682E0E4916EA.png

 スキンを変更する場合はボーン下にあるスキンオブジェクトのSpriteを他のスキンに入れ替える。各Sprite Rendererを取得してスクリプトから入れ替えることもできる。キャラ数が少ないアクションゲーム等ならスキンを入れ替えたものをそれぞれPrefab化して利用してもいいかもしれない。

※スキン変更の例
B3DE54AD-7934-4FC6-86F0-CD8948D8DA7E.gif
これはUI Imageでモデルを作り直して変更している。スクリプトからやる場合は大体こんな感じでスキン変更できる。

まとめ

 仕組みとしてはアニメーションがボーンと骨格モデルのセットで登録されることを利用している。スキンはボーンオブジェクトの子としてアニメーションさせることで、スキンを変更してもボーンと骨格モデルだけが結びついているアニメーションには影響がないので共有できる。

 多少手間はあるが最初のモデルさえ作ればあとはあとは同じサイズのpngにスキンの絵を描いてSpriteを作るだけでアニメーションの共有とスキン機能を実装できる。完全無料でアニメーションの共有ができるので2Dゲームを作るならばぜひとも試してほしい。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?