Unity でタップ跡のエフェクトを表示する

※ これは 2021/01/22 時点の Unity 2020.2.2f1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

前回はマウスクリックした場所にねこキャラが移動するようにしたけど、そのままだとマウスカーソルが表示されないスマホなどだとタップ位置がわからない問題を改善したい

というわけでクリック位置に下記のようなアニメーションのタップ跡エフェクトを表示する

f:id:matatabi_ux:20210205220538g:plain — タップ跡アニメ

スポンサードリンク

とりあえず上記のアニメーションを設定した GameObject で TapEffect という名前の下記のような Prefab を作る

f:id:matatabi_ux:20210205221632p:plain — TapEffect プレハブ

最前面に表示されるように SpriteRenderer の Additional Settings を適切に設定するのがポイント

f:id:matatabi_ux:20210205223238p:plain — 最前面に表示させる

オーバーレイ用の Sorting Layer とか追加してもいいけど、とりあえず Order in Layar を他の Sprite より大きめの数値にすれば大丈夫なはず

次に Cat.cs を変更・・・ほんとは OverlayLayer みたいな画面共通のものに分けた方がいいかもしれない

using UnityEngine;
using UnityEngine.InputSystem;

public class Cat : MonoBehaviour
{
    [SerializeField]
    private GameObject tapEffect = null;

    private Animator animator = null;
    private Vector2 target = Vector2.zero;

    public void Awake()
    {
        this.animator = this.GetComponent<Animator>();
        this.target = (Vector2)this.transform.position;
    }

    public void Update()
    {
        var direction = this.target - (Vector2)this.transform.position;
        if (direction != Vector2.zero)
        {
            var normalized = new Vector3(Mathf.Round(direction.normalized.x), Mathf.Round(direction.normalized.y), 0);

            // 斜め方向も許容
            if (normalized != Vector3.zero)
            {
                this.animator.SetFloat("x", normalized.x);
                this.animator.SetFloat("y", normalized.y);
            }
            this.transform.Translate(direction.normalized * Time.deltaTime * 3f);
        }
    }

    public void OnFire(InputAction.CallbackContext context)
    {
        this.target = Camera.main.ScreenToWorldPoint(Mouse.current.position.ReadValue());

        // タップ跡を表示
        var effect = Instantiate(this.tapEffect, this.target, Quaternion.identity, this.transform.parent);

        // １秒後に消滅
        Destroy(effect, 1f);
    }
}