[Unity]ボタンから複数のボタンを出現させるオシャレなアニメーション

動画のようなボタンを押すと中から複数のボタンを出現させるアニメーションの作り方を解説していきます。

オープニング画面やメニュー画面などで使用できるのでぜひ活用してください。

ボタンを作る

・では解説していきます。解説には新しく作ったプロジェクトを使っていきますが、皆さんは自身のゲームからで大丈夫です。

・作り方としてはボタンを複数作り、一つ一つにアニメーションを付けていきます。

・ヒエラルキーからボタンを生成します。

・Imageの「ソース画像」の項目をクリックしてその中にある「Knob」をクリックします。これでボタンが丸い形になりました。

・形と文字を設定して自分で気に入った形にします。そうしたらボタンを複製し、テキストだけを変えて作りたいボタンを増やしていきます(画像の赤丸の部分)。

・画像だとスタートをクリックしたら「ストーリー」「オンライン」「設定」「スコア」の4つのボタンを表示されるようにしたいので、まずは「ストーリー」のボタンを作ります。

・複製したボタンをわかりやすいように名前を変えてテキストを「ストーリー」にします。

アニメーション

・アニメーションをつけるボタンを選択した状態にし、上の項目から「ウィンドウ」→「アニメーション」→「アニメーション」とクリックしていきます(画像ではスタートとストーリーの二つのボタンがあり、ストーリーのボタンにアニメーションを付けたいのでストーリーのボタンをクリックした状態にします)。

・すると以下の画面になります。アニメーションはこの画面から作っていきます。

・真ん中の「作成」をクリックします。

・クリックしたら左上に「プロパティーを追加」というボタンが出てくるのでそれをクリックします。

・するとボタンをどう動かすのか選択する項目が出てきます。今回はボタンの位置を移動させたいので一番上の「Rect Transform」をクリックして「Anchored Position」の横にある「＋」をクリックします。

・すると「Anchored Position」が追加されます。「Anchored Position」の左にある三角をクリックするとx軸とy軸の値が出現し、右側は画像のようになります。

・右側は時間を表しており、左側の0:00は開始時で♦︎型のマークが下にありますね。右側にも同じマークが付いているところがあります。右側の♦︎マークはアニメーションの終了時間を表しています。

・右側の♦︎マークをクリックして水色にします。この状態で「Anchored Position」のx軸とy軸を移動させたい位置になるように数値を入力します。

・この状態で左上のプレビューから4つめの開始マークをクリックするとゲームの画面で実際にボタンが動いているのが確認できます。

・もう一つボタンを戻すアニメーションも作っておきます。ボタンが出ている状態でスタートボタンを押すと戻るようなアニメーションも必要です。

・左上の「New Animation」→「新しいグリップを作成」とクリックします。

・今度は開始時の0:00に移動先の数値を入力します。

動画のように再生したらスタートボタンに戻るような動きをすればOKです。

アニメーション設定

・確認できたらプロジェクトにアニメーションができていると思います。今の段階だとアニメーションがループする形になっていると思います。

・ループはアニメーションをクリックしてそこから「ループ時間」という項目のチェックを外すとループしなくなります。

・アニメーションは完成なので次にスタートボタンをクリックするとアニメーションが開始するようにします。アニメーションをつけたボタンをクリックして右上の「アニメーション」をクリックします。

・出てきた画面を見ると「Entry」というブロックから作ったアニメーションに矢印が出ています。このブロックは「ステート」といい、このステートとアニメーションを矢印で繋いでいってアニメーションを行う順番を決めることができます。

・この「Entry」からアニメーションに直接矢印が繋がっている場合はすぐにアニメーションを行うので一旦別のステートを作りそれに矢印を繋げます。

・ステートがないなにもないところで左クリックして「ステートの作成」→「空」とクリックしていきます。

・すると新しく空のステートが作成されます。そのステートを左クリックして「レイヤーデフォルトステートとして設定する」をクリックします。すると矢印が空のステートに向きます。

・この状態だと一旦アニメーションを行わなくなります。

・さらに空のステートを左クリックして「遷移を作成」をクリックします。すると矢印が出現するのでそれをアニメーションに指します。

・これで空のステートの後にアニメーションを行うようにしますが、このままだとまたすぐにアニメーションを行うのでここに条件を入れます。左上の「レイヤー」のとなりにある「パラメーター」をクリックしてそこにある「＋」マークをクリック、さらにその中から「Bool」をクリックします。

・「Bool」をクリックすると新しく「New Bool」が出現し、チェックを付けられるようになります。空のステートから出した矢印をクリックして右側にある「終了時間あり」のチェックを外し、下の「Conditions」から「＋」マークをクリックします。

・するとさっきつくった「New Bool」が出現し、右側から「true」か「false」を選択できます。trueはチェックが入っているという意味があり、falseはチェックが外れているという意味があります。この項目をtrueにしておきます。

・これでNew Boolにチェックが入っている時にアニメーションを行うようになりました。

・ここでボタンを戻すアニメーションを追加し、画像のようにボタンを出現させるアニメーションと戻すアニメーションをお互いに矢印で指します。

・二つの矢印の「終了時間あり」のチェックを外し、ボタンを戻すアニメーションから出ている矢印は「New Bool」をtrueに、ボタンを出現させる矢印には「New Bool」をfalseにします。

・あとはスタートボタンを押した時に「New Bool」にチェックが入ったり外れたりするようにします。

スクリプト

・ここからはスクリプトをいじっていきます。プロジェクトの「＋」マークから「C#スクリプト」をクリックします。

・スクリプトは以下のようにします。コピー＆ペーストでOKです。

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

public class NewBehaviourScript : MonoBehaviour
{

    private bool Switch = false;
    [SerializeField]
    private Animator animator;
    // Start is called before the first frame update
    void Start()
    {
        animator = gameObject.GetComponent<Animator>();
    }

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

    }

    public void story()
    {
        if (Switch == false)
        {
            Switch = true;
            animator.SetBool("New Bool", true);
        }
        else
        {
            Switch = false;
            animator.SetBool("New Bool", false);
        }
    }
}

スクリプトの解説をしますが、必要ない場合は飛ばしてOKです。

8行目にはBool変数、10行目にはアニメーションを追加しています。

25行目にはBool変数Switchがfalseの時に、28行目にはアニメーションの「New Bool」をtrueにするコードが書いてあります。

30行目にはBool変数Switchがtrueの時に、33行目にはアニメーションの「New Bool」をfalseにするコードが書いてあります。

これで関数storyが読み込まれるたびに「New Bool」のチェックがついたり外れたりします。

・スクリプトができたら移動させるボタン(画像の場合はストーリーのボタン)にスクリプトを入れます。

・そうしたらボタンにスクリプトが追加されるので「アニメーター」の項目にボタンをいれます。