しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

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

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

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

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

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

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

スポンサードリンク

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

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

最前面に表示されるように SpriteRendererAdditional 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);

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

SerializeField 経由で TapEffectPrefab を参照し、クリックされたときにこの Prefab を生成して1秒後に消す処理を入れるだけ

最後に Hierarchy 上の Cat に忘れずに TapEffectPrefab を設定する

f:id:matatabi_ux:20210205222441p:plain
TapEffect を設定

これでお試し

f:id:matatabi_ux:20210205222714g:plain
タップ跡を表示

すばやく連打してもダダダッと複数表示された!

スポンサードリンク