유니티 UI(Button)과 RayCast가 동시에 일어나는 문제 해결

UI 버튼을 클릭하면 클릭과 함께 RayCast 상호작용도 동시에 일어난다.

 

유니티 씬 내에서 RayCast를 이용한 상호작용 기능이 있을때, UI 버튼을 누르면 그 아래에도 Ray가 적용되어 의도하지 않은 결과가 나타난 문제가 발생하였습니다. 이것을 검색해보니 적절한 자료가 있었습니다.

 

Block raycast through the UI

UI를 뚫고 레이캐스트가 진행되는 같은 문제로 질문이 있었는데, 해당 답변들 중 다음의 코드를 레이캐스트 함수에 넣으라고 있었네요.

 

if(EventSystem.current.IsPointerOverGameObject()) return;

현재 레이의 포인터가 EventSystem의 게임오브젝트라면 리턴을 시킵니다.

 

 

using UnityEngine.EventSystems;

위 함수를 사용하기 위해서는 EventSystems를 스크립트 내에 포함시켜야합니다.

 

 

    void Update()
    {
        ...
 
 
        if (Input.GetMouseButton(0) && mClickReady)  // 마우스가 클릭 되면
        {
            //클릭시 UI라면 리턴한다.
            if(EventSystem.current.IsPointerOverGameObject()) return;
 
            Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
            RaycastHit hit;
 
            if (Physics.Raycast(ray, out hit))
            {
                if(hit.transform.tag == "Water")
                {
                    hit.transform.GetComponent<WaterRipple>().RunRipple(hit.point);
                    mWaterParticlePool.GetFromPool().transform.position = hit.point;
 
                    mClickReady = false;
                }
            }
 
 
            ...
 
 
        }
    }

제 스크립트에 적용한 예시입니다. Input이 있어 레이를 쏠때, 그 전에 검사를 해주어 UI에 닿았다면 리턴을 해줍니다.

 

추가로, 해당 스크립트를 추가하여 이용하기위해서는 버튼 오브젝트에 Graphics Raycaster을 추가해야합니다.

 

 

 

스크립트를 추가하고 간단한 작업을 거치니 UI와 RayCast가 동시에 일어나지 않는다.

 

 

08/22 추가

> 버튼같은 UI는 UI뒤에 레이캐스트를 막도록 설정했지만, 텍스트 등 막을 필요가 없는 UI가 레이캐스트를 막는 문제를 발견하였다. 이것을 해결하기 위해서는 Canvas Group을 설정해주자.

Text Area를 두고 텍스트필드 영역을 클릭하면 레이가 막혀버린다.

 

텍스트 필드는 레이캐스트를 막지 않기때문에 Block Raycasts를 비활성화 시켜준다.

그렇게 하면 텍스트 필드 영역을 클릭해도 레이가 막히지 않아 의도한 마우스 클릭 이벤트가 나타난다.

 

캔버스 그룹을 추가하고, Block Raycast를 꺼준 상태에서는 텍스트 영역을 클릭해도 마우스 레이 이벤트가 정상적으로 작동한다.