🦁

[初心者向け]Unityの2Dキャラクターのセットアップその1

2024/01/20に公開

Unity

tech

unityの"Creator Kit: RPG"のチュートリアルを終えたあたりの人が、次のステップとして自分で用意したキャラクターをセットアップして動かしたりアニメーションをしたりするやり方を書きます。

スプライトのインポート

もし"Unity Asset Store"にあるアセットを使用したい場合のインポート方法を説明します。
ひとまず解説用として、この戦士キャラクターを使います。

まずUnityエディタを起動してください。
次に、ページに飛んで、青色の"Add to My Assets"ボタンを押して、その後、"Open in Unity"を押してください。

UnityでPackage Managerウィンドウが開くので、右上の"Download"を押し、その後、"Import"を押してください。

すると、このような画面が出るので、右下の"Import"を押して、素材のインポートを実行してください。

インポートが完了すると、
"Assets/Hero Knight - Pixel Art"に素材がインポートされていることが確認できます。
その中で、
"Assets/Hero Knight - Pixel Art/Sprites/HeroKnight"にスプライトが入っています。

このスプライトはすでに分割設定がされており、
▶
をクリックして展開させると、分割されていることが確認できます。

スプライトの分割方法

戦士のスプライトはすでに分割されていましたが、ネットにある素材サイトからダウンロードしたものの中には、一枚絵の状態で配布されているものがほとんどです。
その場合は手動でUnityに分割設定する必要があります。

例えば、こちらのサイトにある、"RPGキャラ基本セット"をダウンロードしてください。

その中には、このような画像が入っています。

それを、UnityエディタのProjectの空いているところにドラッグ&ドロップしてください。

この素材の規格は、1ブロック32pxであることがサイトから確認できます。

では、Unityでその画像を選択し、以下のように設定して、一番下の"Apply"を押して設定を反映してください。

設定箇所は3つです。
・Sprite Mode
　→分割する場合はMultipleです。
・Pixel Per Unit
　→画像の1ブロックの大きさ(この場合は32px)を指定してください。
・Filter Mode
　→Point(no filter)にすると、画像がくっきりします。ドット絵などはこれを指定します。

"Apply"後、"Sprite Editor"を押してください。

このようなウィンドウが表示されます。

左上の"Slice"を押し、"Type"を"Grid By Cell Size"に変更し、素材の規格である32pxを入力してください。

そして少し下にある"Slice"ボタンを押してください。

"Slice"後、右上の"Apply"を押して、反映を確定してください。

そうすると、Projectビューで、スプライトが分割されていることを確認できます。

アニメーションの作成

先ほどのスプライトを選択し、Hierarchyビューにドラッグ&ドロップしてください。
そうすると、画面上にスプライトが表示されます。

Hierarchyに生成されたアセットを選択して、Inspectorの下にある、"Add Component"を押してください。

"Animator"と入力してコンポーネントをアタッチします。

これはアニメーションを実行するコンポーネントですが、アニメーションの設定ファイルがまだ出来ていないので作ります。

Projectビューで空いてるところを右クリックし、"Create"->"Animator Controller"を作成します。

作成した"Animator Controller"アセットをダブルクリックすると、このような画面になります。

この画面でアニメーションデータの管理ができるのですが、まだアニメーションデータが無いので作ります。

Projectビューで空いてるところを右クリックし、"Create"->"Animation"を作成します。

作成したAnimationアセットをダブルクリックすると、以下のようなAnimationウィンドウが開きます。

"Animation Controller"のアセットを、Animatorコンポーネントの"Controller"にセットして、また、そのAnimatorウィンドウの中に、先ほど作成したAnimationアセットを入れます。

そうするとAnimationウィンドウで、アニメーションの作成ができるようになります。
試しに、分割したスプライトの一つをAnimationウィンドウへドラッグ&ドロップしてください。

すると、一枚登録することができました。

この要領で歩行スプライトを置いていき、最後に最初のスプライトをもう一度置きます。
自分はこのようになりました。

Animationビューの左上の再生ボタンをクリックすると、ゲーム画面上で歩行アニメーションをする姿を確認できます。

複数のアニメーションを使用する

同じ要領で上下左右のアニメーションを作成しました。

これらを、Animatorに追加します。

現状では、"Entry"から"Dog Down Animation"に矢印が伸びているだけなので、下の歩行アニメしか再生されません。

アニメーション遷移(せんい)の矢印を作るために、"Dog Down Animation"を右クリックして、"Make Transition"を選択してください。

そのまま、"Dog Right Animation"までマウスを持って行って、クリックすると矢印がくっつきます。

同じ要領で全て繋げてしまいます。

現状だとアニメーション遷移図はできましたが、遷移条件が未設定なため、まだ変化はありません。
そこで、左上の"Paramaters"タブをクリックし、+マークを押し、"bool"を選択してください。

名前を"MoveRight"にしました。

同じ要領で、"MoveLeft","MoveUp","MoveDown"も作ります。

次に矢印をクリックし、InspectorにあるConditionで+を押してください。

先ほど作ったboolが選択欄に出て設定できることが確認できます。

ついでに"Has Exit Time"のチェックも外してください。これは、「アニメーションが遷移条件を満たした時に、今のアニメーションが最後まで再生された後に遷移する」というもので、これにチェックが入っているとすぐにアニメーションが切り替わりません。

この矢印の設定を、全ての遷移で行っていきます。

さて、これで「MoveRightフラグがOnになったら"Dog Right Animation"が再生される」ようになったはずです。確認してみましょう。

ゲームを起動して、"Animator"の"Paramaters"の"MoveRight"をOnにしてください。
右向きの歩行アニメに切り替わることが確認できます。

あとは、スクリプトでこのフラグの操作をすればアニメーション部分は完成しそうです。

スクリプトでフラグ切り替えをする

スクリプトファイルを作成します。
Projectビューの空いているところを右クリックし、"Create"->"C# Script"を選択します。

名前は"DogAnimationControl"にしました。
スクリプトファイルをダブルクリックして、エディタを開きます。

まずは、Animatorのコンポーネントを取得します。
下記のように記述します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DogAnimationControl : MonoBehaviour
{
    Animator animator;

    // Start is called before the first frame update
    void Start()
    {
        animator = GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

取得したら、毎フレーム入力をチェックして、押された方向のフラグを立てて、他のフラグを下ろします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DogAnimationControl : MonoBehaviour
{
    Animator animator;

    // Start is called before the first frame update
    void Start()
    {
        animator = GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.UpArrow))
        {
            animator.SetBool("MoveUp", true);
            animator.SetBool("MoveDown", false);
            animator.SetBool("MoveRight", false);
            animator.SetBool("MoveLeft", false);
        }
        else if (Input.GetKeyDown(KeyCode.DownArrow))
        {
            animator.SetBool("MoveUp", false);
            animator.SetBool("MoveDown", true);
            animator.SetBool("MoveRight", false);
            animator.SetBool("MoveLeft", false);
        }
        else if (Input.GetKeyDown(KeyCode.LeftArrow))
        {
            animator.SetBool("MoveUp", false);
            animator.SetBool("MoveDown", false);
            animator.SetBool("MoveRight", false);
            animator.SetBool("MoveLeft", true);
        }
        else if (Input.GetKeyDown(KeyCode.RightArrow))
        {
            animator.SetBool("MoveUp", false);
            animator.SetBool("MoveDown", false);
            animator.SetBool("MoveRight", true);
            animator.SetBool("MoveLeft", false);
        }
    }
}

書き終わったら、DogAnimationControlスクリプトをキャラクターにアタッチします。

ゲーム実行して、アニメーションが移動キーで切り替わることを確認してください。

一瞬で切り替わるように改良する

動作確認していると、アニメーションの切り替わりに微妙にラグがあることがわかると思います。
これは、初期設定だと「アニメが滑らかに切り替わる」ようになっているため、2Dスプライトだと意味が無いのですが、内部的には滑らかに切り替わる時間が発生しているためです。

なので、Animatorビューの矢印をクリックして、補完を無しにします。
・Fixed Durationのチェックを外す
・Transition Durationを0にする
を、全ての矢印で行ってください。

ゲームを実行して、アニメーションがすぐに切り替わることが確認できます。

次回

宣伝

「１か月間 Unityの学習サポート」をするサービスを自分はココナラでしているので、もし興味のある方はチェックして頂けると嬉しいです。
https://coconala.com/services/3027818