[unity]canvas 위에 보이는 클릭/터치 이펙트 구현 - 2

유튜브 영상을 보고 따라하면, 나오는 결과

 

파란색 배경은, 카메라 - solid color고 Canvas를 만들고, UI 이미지(흰색을 추가하면)

하이러라키 창에 Clone으로 이펙트 프리팹이 생성되는 건 보이지만.. 이미지에 가려져서 보이지 않는다 

 

영상보고 따라한 코드

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

public class TouchEffect : MonoBehaviour
{
    public GameObject effectPrefab;

    private float spawnTime;
    public float zOffset = 15f;
    public float defaultTime = 0.05f;
    public float effectLifeTime = 2f;

    void Update()
    {
        spawnTime += Time.deltaTime;
        
        if (Input.GetMouseButton(0) && spawnTime >= defaultTime)
        {
            CreateEffect();
            spawnTime = 0;
        }
    }

    void CreateEffect()
    {
        Vector3 mousePosition = Input.mousePosition;
        mousePosition.z = zOffset; // 카메라 조정
        
        Vector3 worldPosition = Camera.main.ScreenToWorldPoint(mousePosition);
        worldPosition.z = 0;

        Debug.Log($"Screen Position: {mousePosition}, World Position: {worldPosition}, Camera Position: {Camera.main.transform.position}");
        
        //Instantiate(effectPrefab, worldPosition, Quaternion.identity);
        GameObject effectInstance = Instantiate(effectPrefab, worldPosition, Quaternion.identity);

        Destroy(effectInstance, effectLifeTime);
    }
}

 

 

 

그러면 Canvas에 프리팹이 생성되게 하면 되지 않아? 라고 생각했고, 이게 해결 방법이 맞았지만 또 다른 문제점이 있었다 

Canvas에서 생성되게 하려면 RectTransform이 필요....! 

 

https://discussions.unity.com/t/how-to-convert-touch-position-to-canvas-position/216237/3

코드를 참조해서 수정했다 

 

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

public class ImageEffect : MonoBehaviour
{
    //public GameObject squarePrefab;
    public GameObject particlePrefab;
    private float spawnsTime;
    public float defaultTime = 0.05f;
    public float effectLifeTime = 2f;
    
    public Canvas canvas;
    
    void Update()
    {
        if (Input.GetMouseButton(0) && spawnsTime >= defaultTime)
        {
            StarCreate();
            spawnsTime = 0;
        }

        spawnsTime += Time.deltaTime;
    }

    void StarCreate()
    {
        
        // Get the mouse position in screen space
        Vector3 mousePosition = Input.mousePosition;

        // Instantiate the UI element as a child of the Canvas
        GameObject uiElement = Instantiate(particlePrefab, canvas.transform);

        // Convert screen space to Canvas space
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, mousePosition, canvas.worldCamera, out Vector2 localPoint);

        // Set the UI element's position
        RectTransform rectTransform = uiElement.GetComponent<RectTransform>();
        rectTransform.localPosition = localPoint;

        Debug.Log("Mouse Position: " + Input.mousePosition + " Local Position: " + localPoint);
    }
}

파티클을 사용할 수 없는 건, 이전과 마찬가지지만

캔버스에 자식으로 생성돼서 이미지 위에도 뜰 수 있게 되었다!