アニメーションを作ろう の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• アニメーションを作ろう へ行く。

アニメーション関係をかいていきます。
#contents
*はじめに [#n1cc2566]
[[カメラ・背景の設定をしよう]]の続きです。
基本的に今までのことでゲームは作れますが、アニメーションがないと&color(,#FBB){反応が薄い、無機質なゲームになってしまいます};。
アニメーションをつけることによってゲームの触り心地がよくなりもっと面白いゲームを作ることができます。
*画像のインポート [#tef7bab9]
まずアニメーションの素材となる画像をいれていきましょう。
今までの羊の画像から２点の画像を追加します。今までの羊もあわせて３つ貼っておきます。
（ひとつめの画像は今までと同じ画像なので既に使っている人は入れなくてもいいです）
#download(hitsuji_dot.png)
#download(hitsuji_run1.png)
#download(hitsuji_run2.png)
#br
このインポートした画像のPixcel per Unitを今までの画像と同じように32にしておきます。
今までと同じように Assetsフォルダ の中に入れておけばいいのですが、そろそろいろんなものが入ってきてフォルダの中が乱雑になってきました。
基本的に、&color(,#FBB){スクリプトはスクリプトフォルダの中、画像なら画像フォルダの中と分けておくと見やすくて作業もスムーズに進みます};。
試しに、上の画像は Characters フォルダというものを作って、その中に入れておきましょう。
#br
#ref(スクリーンショット (1160).png,,768x432)
#br
*コンポーネントをつける [#qe0fa7a4]
まずアニメーションを作る前に羊に ''Animator'' のコンポーネントを付けましょう。
いつも通り AddComponent から、今回は Animator というコンポーネントを付けてください。
#br
#ref(スクリーンショット (1159).png,,768x432)
#br
このコンポーネントは後ほど作る ''Animation controller''というものを制御してくれるものです。

*Animation [#u00f7c18]
#br
それではアニメーションを作っていきましょう。
画面上部から Window > Animation > Animation でアニメーションタブを開くことができます。
#br
#ref(スクリーンショット (1154).png,,768x432)
#br
この画面では&color(,#FBB){画像をパラパラ漫画のようにつなぎ合わせキャラクターを動かしているようなもの};を作ることができます。
Hierarchy で羊をクリックした状態で Animation タブを押すと新しく「create」というボタンが出てくると思います。
Animation タブを触るときは基本的に&color(,#FBB){そのアニメーションを作りたいオブジェクトを選択状態にしておくことが必要です};。
そして create をクリックし、名前を「run」にして保存してください。その後、このような画面になると思います。
#br
#ref(スクリーンショット (1155).png,,768x432)
#br
この時間の部分に画像をドラッグ＆ドロップしていきます。
入れる画像の順番は hitsuji_dot → hitsuhi_run1 → hitsuji_dot → hitsuhi_run2 → hitsuji_run2 としてください。
最後の hitsuji_run2 を２枚入れているのは不思議な感じがしますが、4枚だけだと最後のコマが一瞬で終わってしまいます。
最後の hitsuji_run2 を２枚入れているのは不思議な感じがしますが、4枚だけだと&color(,#FBB){最後のコマが一瞬で終わってしまいます};。
最後のコマの表示時間を稼ぐためにもう一枚入れているという感じです。
#br
#ref(スクリーンショット (1174).png,,768x432)
#br
これで移動のアニメーションを作ることができました。
さて、アニメーションを作った時に勝手に新しく何かができていないでしょうか。
#br
#ref(スクリーンショット (1161).png,,768x432)
#br
これが AnimationController です。これから AnimationController をいじっていきましょう。
*AnimationController [#wf2957e2]
#br
#ref(スクリーンショット (1158).png,,768x432)
#br
AnimationControler では&color(,#FBB){アニメーションをフローチャートのように組み立てることができます};。
ちなみに、今の状態でゲームを起動すると何もしていない状態が走っている状態になります。
移動しているときだけ走っている状態にしたいので、もう一つ立っている状態のアニメーションを作りましょう。
**デフォルトアニメーション [#g79fa047]
羊を選択した状態にして Animation タブを開いてください。
そして、「create new crip」を押すと、新しくアニメーションを作ることができます。
#br
#ref(スクリーンショット (1161).png,,768x432)
#br
このアニメーションの名前を「stand」という名前にして保存しておきます。
この stand には hitsuji_dot という画像一つを付けておきましょう。これで立ち絵の完成です。
そしてまた AnimationController に戻ると新しく「stand」が追加されていると思います。
追加されていない場合、アニメーションを AnimationController にドラッグ＆ドロップすると追加することができます。
さて、stand を右クリックして、「set as layer default state」を押してください。
#br
#ref(スクリーンショット (1162).png,,768x432)
#br
これでゲームを起動すると何もしていない状態ではただ立っている状態になると思います。
次は、移動を行ったときに run にアニメーションが移動するように設定します。
#br
**アニメーションの移行 [#e9007aff]
#br
移動部分を作っていきます。
stand アニメーションを右クリックし、「Make transition」を押し、run に矢印を伸ばしてください。
こうすることでアニメーションを stand → run と移行します。
また、&color(,#FBB){操作が終わった時 run から stand に移行させておきたい};ので、run から stand へも→を設定しておきましょう。
#br
#ref(スクリーンショット (1165).png,,768x432)
#br
次はこの移行の詳細な設定をしていきましょう。
矢印を左クリックしてください。左クリックすると、新たにアニメーションの設定画面が Inspector に現れます。
#br
#ref(スクリーンショット (1166).png,,768x432)
#br
まず、この画面で ''has exit time'' というチェックボックスを外してください。
また、Setting の隣の▷を押し、出てきた項目の ''Transition Duration'' の値を0にしておいてください。
#br
#ref(スクリーンショット (1167).png,,768x432)
#br
''has exit time'' は&color(,#FBB){そのアニメーションが終わってから移行する};という設定なので、
&color(,#FBB){ボタンを押してすぐ反応させたい場合はこのチェックを外す必要があります};。
そして ''Transition Duration'' は&color(,#FBB){アニメーションとアニメーションを合成する設定};です。
今回は合成させても意味ないので値は0にしておきます。
この設定を run から stand への矢印にも設定しておいてください。
そして下のほうには conditions というものがあります。
#br
#ref(スクリーンショット (1168).png,,768x432)
#br
この画面にある conditions は&color(,#FBB){どのタイミングでアニメーションを移行させるかを設定できるものです};。
この設定は Animator の中の ''Parameters'' という場所で作ることができます。
**Parameters [#d1e56031]
''Parameters'' で設定を作っていきましょう。「＋」を押すと、どの条件（Float、Int、Bool、Triger）かを選べると思います。
今回は&color(,#FBB){ボタンを押している間だけ移行する};という設定にしたいので「Bool」を選んでください。
名前は何でもいいですが、わかりやすいように run という名前にしておきます。
#br
#ref(スクリーンショット (1169).png,,768x432)
#br
そしてこれを矢印に設定します。
先ほどと同じように、矢印を左クリックし、Inspector に現れた画面から conditions のところの＋を押してください。
そうすると左側に parameters の名前、右側にそのパラメータがいつ起こるかというものを設定するものが現れます。
#br
#ref(スクリーンショット (1170).png,,768x432)
#br
今回は parmeters をひとつしか作っていないので勝手に run が追加されています。
このパラメータを run から stand への矢印にも設定します。
そして、stand から run への矢印の bool 値を true 、run から stand への矢印の bool 値を false に設定しておいてください。
#br
#ref(スクリーンショット (1172).png,,768x432)
#br
この parameters の値はスクリプトから制御していきます。

* スクリプトから制御[#ge32a386]
移動に関するアニメーションなので、MoveSheap に書いていこうと思います。
#br
#geshi(csharp,number){{
public class MoveSheep : MonoBehaviour
{
 
    private Rigidbody2D rigidBody = null;
    private GroundCheck groundCheck = null;
    private SpriteRenderer spriteRenderer = null;
    private Animator anim = null;
    public float speed;
    public float jump;

    // Start is called before the first frame update
    void Start()
    {
    
        rigidBody = this.GetComponent<Rigidbody2D>();
        groundCheck = this.GetComponentInChildren<GroundCheck>();
        spriteRenderer = this.GetComponent<SpriteRenderer>();
        anim = this.GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
    
        Vector2 pos = rigidBody.position;
    
        if (Input.GetKey (KeyCode.A)) {
            anim.SetBool("Run", true);
            spriteRenderer.flipX = false;
            pos += new Vector2(-speed * Time.deltaTime, 0.0f);
        }
      
        if (Input.GetKey (KeyCode.D)) {
            anim.SetBool("Run", true);
            spriteRenderer.flipX = true;
            pos += new Vector2(speed * Time.deltaTime, 0.0f);
        }
        //AもDも入力していない時
        if(!Input.GetKey (KeyCode.A) && !Input.GetKey (KeyCode.D)) {
            anim.SetBool("Run", false);
        }

　　～略～
}}
スクリプト載せます
#br
コンポーネントを取得するので、いつも通り変数を定義して GetComponent で取得します。
そして Bool 値を True に変更するには&color(,#FBB){SetBool("parametersの名前", true)} と書きます。
また、操作していないときは stand の状態にしたいので、A と D を押していない時、Run というパラメータを false にするという条件を追加しました。
これで移動中は走り、移動していないときは立った状態のアニメーションが作れましたね。
}}