【Unity】キャラチップをskinningEditorで動かす

はじめに

前回の2.5Dぽいマップを作るの続き。
3Dを使えない人間がスプライトゴリ押しで3Dゲーム作るぞって記事です。

👉 前の記事　【Unity】3D出来ない人が2.5Dっぽいゲームマップを作る

私はキャラは3Dで作ってるけど、単純に3方向描くのがめんどくさい+影自動で付けてくれるから楽ってだけで、ドット絵とかイラストとかでいいとは思います。
私3Dでキャラ作った後に細かい装飾を加筆したり、髪揺らすアニメーションつけたりするんで、ほんとにベースって形で使ってます。

こんなやつでも別にいいと思う。昔描いたドット絵だけど、丁寧に描いてんな、私。

画像準備

ということで、使いたい画像をレイヤー分けして.psdで保存します。

この時、横向きにした時の腕とか、別でゆらしたい髪とかあればそこもレイヤー分けちゃうといいです。あんまり細かくレイヤー分けるのは良くないけど。
ジャンプとかした時に影も一緒に動くとちょっと変なので、アクションによっては影は分けた方がいいですね。これはテスト用画像なので分けてないけど。

私はクソ古いPhotoshop使ってるんですけど、レイヤー分けしてpsdで保存さえ出来ればいいから、saiでもクリスタでもなんでもいいです。

skinningEditorを使うには、パッケージマネージャーのUnityレジストリから2D PSD Importerを入れてください。
ファイルは [ .psb ] に変更して、アセットフォルダに突っ込めば準備OKです。

動かす準備

ファイルを突っ込んだら、インスペクターからopen sprite Editorを選んでください。

この時、レイヤー名変え忘れちゃったり、ポジションが変だったりする場合は右上のロックを外せば編集が出来るようになります。
大丈夫そうなら左のプルダウンメニューからskinningEditorを選択。

CreateBoneで適当にボーンを入れて、AutoGeometryでボーンを適用させます。
右下にあるgenerate For Selectedってボタンを押すとレイヤーがそのボーンの適用範囲の色になります。まぁ灰色じゃなくなってれば適用されてるなと思ってOK。
横向きとか腕とかは手のボーンは変わると思うので、適用させたくないボーンは非表示にしてレイヤー毎に適用させていきます。

待機アニメーションを作る

動かす準備が出来たら、適当なシーンに配置してアニメーションを作っていきます。
ここで、画像切り替えのコマアニメにしてもいいんですけど、やっぱり多少カクカクして3Dマップ上では違和感があるので、ボーンを動かして多少滑らかさを付けてあげましょうって話になります。

配置したファイルを選択して、アニメーションウィンドウを開き、アニメーション作成を選択。
録画ボタンを押します。ボーンが表示されてなかったら、右上のギズモ表示ボタンを押す。

うにょうにょ動く。
動かしてみてOKなら、録画ボタンをもう一度押して、アニメーション録画を終了します。

歩行アニメーションを作る

新しいクリップを選択して、歩行アニメーションも作っていきます。

コマアニメだとカクカク。
ボーンを動かしてフレーム補完していきます。

このgifで伝わるかは謎ですが、うにょうにょ動きます。
コマアニメ1に切り替わるときに少し下に画像を動かし、左斜めに傾ける感じ、2に切り替えるときも下に動かして、今度は右斜めに傾ける感じにボーンを動かしてます。
あんまりボーンは派手に動かすと変になると思うので、少しずつ動かすとちょっと自然に見えるかも。

レイヤーの階層を変える

この状態だと、レイヤーの階層を変えてないので、全部デフォルトレイヤーに表示されます。
レイヤー一つ一つに手を加えていきます。（ここが面倒なので、極力必要なければレイヤー分けたくない）

ソートレイヤーを変更していきます。レイヤー全部にだよ！！
これだけだと、そのレイヤーに表示されるわけですが、キャラが手前の時は手前に、キャラが奥の時はレイヤーの順序を下にしたいんですね。

スクリプトを付けていきます。これもレイヤー全部にです。

using UnityEngine;

[RequireComponent(typeof(SpriteRenderer))]
public class SpriteSortByY : MonoBehaviour
{
    SpriteRenderer sr;

    void Awake()
    {
        sr = GetComponent<SpriteRenderer>();
    }

    void LateUpdate()
    {
        sr.sortingOrder =
        Mathf.RoundToInt(-(transform.position.z) * 100);
    }
}

キャラのZ軸によってレイヤーの順序を変えますよっていうスクリプトです。
草のソートレイヤも変えて、スクリプトを付けてあげます。

いい感じになりました。

ということで、3D出来なくてもスプライトごり押しで3Dゲーム作ろうぜっていう記事でした。