【Unity】クリッカーゲーム(2)アニメーションと効果音【Game A Week】

ヒエラルキーのSushiオブジェクトを選択した状態でメニューの「Window > Animation > Animation」を選択します。

Animationウインドウが開くので「Create」ボタンをクリック。「SushiAnimation」と名前をつけて保存します。

これでAssetsフォルダにアニメーションクリップとアニメーターが作成されます。また、SushiオブジェクトにはAnimatorコンポーネントが追加されます。

Animationウインドウの「Add Property > Rect Transform > Scale の +」をクリックして、プロパティを追加します。Scaleはオブジェクトの拡大/縮小をすることができるプロパティです。

とりあえずアニメーションの長さを0:30に、途中の0:15あたりで x, y の値を2にしてみます。で、再生ボタンをクリックすると、ちゃんと寿司が動きました。

これだと動きが大きすぎるので、x, y は 1.2 に、長さは 0:20 にしました。

アニメーションをループさせないようにします。AssetsフォルダのSushiAnimationを選択し、インスペクターで「Loop Time」のチェックを外します。

ヒエラルキーのSushiオブジェクトを選択した状態でメニューの「Window > Animation > Animator」を選択します。

Animatorタブが開きます。Animatorはアニメーションをコントロールするための仕組みです。

「Parameters」タブをクリックして、「+」から「Trigger」を追加します。「New Trigger」という名前のトリガーが追加されるので「SushiClick」に名前を変更します。

あとで、このトリガーを使って寿司がクリックされたときにアニメーションするようにします。

Animatorタブの右側の図を見ると「Entry」から「SushiAnimation」に矢印がつながっています。これだと、ゲームが開始した途端にSushiAnimationが実行されてしまうので、次のように変更します。

1. 「Any State」を右クリックして「Make Transition」を選択。
2. 矢印を「SushiAnimation」につなげる。
3. 今つなげた矢印を選択してインスペクターの下のほう「Conditions」の「+」をクリックしてトリガー「SushiClick」を設定。
4. Animatorのなにもないところで右クリックして「Create State > Empty」を選択。「New State」が作成されます。
5. 「Entry」を右クリックして「Set StateMachine Default State」をクリック。矢印を「New State」につなげる。

以下のようになります。

スクリプトを修正します。

public class SushiClicker : MonoBehaviour, IPointerClickHandler
{
    ...省略...
    public Animator sushiAnimator; // Animatorコンポーネント
    ...省略...

    // 巨大寿司をクリックしたとき
    public void OnPointerClick(PointerEventData eventData)
    {
        ...省略...
        if (sushiAnimator != null)
            sushiAnimator.SetTrigger("SushiClick"); // クリック時アニメーションを再生
    }
    ...省略...
}

sushiAnimator変数にはUnity上でSushi(Animator)を紐つけておきます。

小さい寿司を流すためのレーンを「UI > Panel」で作ります。これは大きい寿司オブジェクト(Sushi)と同じ階層に作ります。そして大きい寿司オブジェクトよりも上に配置します。

大きい寿司オブジェクトよりも上に配置するの大事。ヒエラルキーの兄弟オブジェクト（同じ階層にあるオブジェクト）は、上にあるものが後ろ、下にあるものが前に表示されます。

SushiLane1の下にImageオブジェクトを作成して「RunningSushi」と名付けます。

インスペクターでオブジェクト名の横のチェックを外します。これでオブジェクトが非アクティブになりました。

非アクティブにするのは、ゲーム画面ではこのオブジェクト自体を使わないからです。このオブジェクトから作成したプレハブを元に新しく作成するオブジェクトを使います（ややこしい）。

RunningSushiのアニメーションを作成します。プロパティは「Rect Transform > Anchored Position」を使います。8秒かけて左から右へ流れていくアニメーションを作りました。

このとき、Position.xの値を数値で指定しただけではうまくいきませんでした。一定の速度で移動させたいのに、最初はゆっくりで徐々に加速し減速して止まるという動きになってしまいます。これで半日悩みました。

答えはAnimationウインドウの下にある「Curves」をクリックしたところにありました。

ベジェ曲線みたいなのが表示されました。横軸が時間で縦軸が座標です。ハンドルをいじってこの曲線が直線になるようにすると一定の速度でオブジェクトが移動するようになります。

RunningSushiオブジェクトをプレハブ化します。Assetsフォルダの下にPrefabsフォルダを作成し、ヒエラルキーのRunningSushiオブジェクトをPrefabsフォルダにドラッグ&ドロップします。

逆方向に流れる寿司を作ります。

1. SushiLane2の下にImageオブジェクトを作成して「RunningSushiReverse」と名付けます。
2. アニメーションを作ります。
3. プレハブ化します。

もしかしたら、RunningSushiオブジェクトを元にして逆方向に流れる寿司を作ることができるかもしれませんが、方法が思いつかなかったのでこうなりました。

スクリプトを書きます。スクリプトでは次のことをしています。

• コルーチンを使って1秒おきに1つプレハブを元に新しい寿司オブジェクトを生成する。
• 奇数の寿司レーンでは左から右へ、偶数の寿司レーンでは右から左へ流れるオブジェクトを生成する。
• おしながきレベルに応じて寿司画像を変更する。
• 流れる寿司が画面から消えたら削除する。

public class SushiClicker : MonoBehaviour, IPointerClickHandler
{
    ...省略...
    public GameObject[] sushiLanes; // 寿司レーンを格納する配列
    public GameObject runningSushiPrefab; // 流れる寿司画像のプレハブ
    public GameObject runningSushiReversePrefab; // 逆に流れる寿司画像のプレハブ
    ...省略...
    private int runningSushiCount = 0; // 流れる寿司の生成数をカウントする変数

    void Start()
    {
        ...省略...
        StartCoroutine(CreateRunningSushi()); // 流れる寿司のコルーチンを開始
    }

    ...省略...

    // 流れる寿司を作成するコルーチン
    IEnumerator CreateRunningSushi()
    {
        while (true)
        {
            yield return new WaitForSeconds(1f); // 1秒待つ

            if (roboCurrentUpgradeIndex >= 1) // 寿司ロボのレベルが1以上ならば
            {
                for (int i = 0; i < sushiLanes.Length; i++)
                {
                    // プレハブを元に新しいオブジェクトを作成
                    GameObject newSushi = Instantiate(
                        i % 2 == 0 ? runningSushiPrefab : runningSushiReversePrefab,
                        Vector3.zero,
                        Quaternion.identity,
                        sushiLanes[i].transform
                    );
                    // Imageコンポーネントを取得し、Spriteを変更
                    Image image = newSushi.GetComponent<Image>();
                    if (image != null)
                    {
                        int spriteIndex = runningSushiCount % (menuCurrentLevel + 1);
                        image.sprite = sushiSprites[spriteIndex];
                    }
                    // 寿司のアクティブ化と削除
                    newSushi.SetActive(true);
                    Destroy(newSushi, 8f);
                }
                // カウントを増加
                runningSushiCount++;
            }
        }
    }
}