unityでキャラクターの2Dアニメーションを作成する #1 お絵描きImport編
Unityを使って ２Dアニメーションを作ります。
備忘メモも兼ねて、記事に起こそうと思います。
お絵描きImport編
今回はキャラクターの絵をUnityに取り込むところまでを説明します。
お絵描きする
まず元となる画像を作成します。
IpadのProcreateを使用してお絵描きしますが、基本どんなアプリでもOKです。
今回はこちらのけいこちゃんにアニメーションつけていこうと思います。
Procreateは直感的に操作できるのでイラスト初心者にはオススメです
レイヤーを調整する
キャラクターを描くパーツに分けてレイヤーを作成します。
別々に稼働する箇所はレイヤーを分けるイメージです。
表情なんかも別レイヤーで保存しておくと後々使えます。複数キャラ作成する場合はレイヤー数を揃えておくとちょっと便利です。
レイヤーの順番はそのままUnityでの画面表示順となります
表情に関して
瞬きや驚いた時などの特殊な表情は上からレイヤーを被せることで表現します。
目玉と瞼のレイヤーを分けると色々遊べます。
滑らかに視線を動かしたいときはこの方法がいいかも
関節部に関して
関節部はパーツを分けた方が後々仕上がりがよくなります。
上腕と前腕、腿と脛などでレイヤーを分けた方が綺麗に曲げることができますが、めんどいので今回は一個にしてます。(後の工程で多分なんとかなります)
とはいえこんな感じで分けるのが理想です。
関節部はエッジ線をなくし丸みを持たせるといいらしいです
関節部のレイヤーを分けないと曲げた時の動きが不自然になりがちです。
今回は気合いでなんとかする予定ですが、この辺りはトライアンドエラーです。
パーツの繋ぎ目は調整がだるいので他のパーツで繋ぎ目を隠したりして誤魔化してます。
ここでいうと腰パーツで足の根本を隠してる。
PSDにする（実質PSB）
UnityはPSBファイルのレイヤーを取得できます。
ProcreateはPSBが出せないのでPSDで出力して、後からPSBに拡張子を変えます。エクセルの拡張子をZIPにすると展開できるみたいなアレです。
よくわからんがうまくいくのでヨシ！
UnityにImportする
Unityはこの辺りのPackageが入っていればOKです。
PSBをドラッグアンドドロップでImportしましょう。
Importするとこんな感じになります。
Sprite Editorから中身を確認してみましょう。
Sprite Mode Multipleになっていることを確認
Import成功！
レイヤーの情報が読み込まれ、それぞれ別のSpriteとなっています。
（成功と言いつつ、こっそり髪飾りとか腰のベルトとかレイヤー分けてます）
各パーツバラバラだと、見ちゃいけないものを見た気分になります。
全体像を見てみます。左上のドロップダウンからSkinning Editorを選択します。
ちょっとだけ表示レイヤーを選択して、、、
きちんとキャラクターの形にImportできたことが分かります。
Import編は以上になります。
最後までお読み頂きありがとうございました。
アドバイス、お役立ち情報などコメント頂けると大変嬉しいです。ぜひ気軽によろしくお願いいたします。
次回→
Discussion