[Unity] Particle Effect For UGUI 기능 소개 / Particle(파티클) scene에서 보이는데 게임에서 안 보일 때, Particle(파티클)이 알아서 부모를 안 따라올 때 오류 해결 방법 + Particle asset 추천

 

유니티 FX 작업하다가 찾은 여러 정보 때문에 글을 작성해봅니다.

먼저 2D FX 작업은 매우 번거로운데요. 하는 방법을 찾아보면 보통은 카메라를 2개 만들어서 다루는 방식으로 합니다. 하지만, 그 외에도 좋은 방법이 있습니다.

 

Particle Effect For UGUI API 기능 소개

 

바로 Particle Effect For UGUI API 입니다.

나름 유명해서 개발 좀 해보신 분들은 다들 쓰시는 것 같습니다.

 

깃허브 링크 : https://github.com/mob-sakai/ParticleEffectForUGUI

GitHub - mob-sakai/ParticleEffectForUGUI: Render particle effect in UnityUI(uGUI). Maskable, sortable, and no extra Camera/Rende

 

먼저, 관련 깃허브 링크 남겨드립니다. 이를 사용하면 따로 카메라라 렌러딩 텍스처 등 필요없이 FX 를 UI 최상단에 올리거나 원하는 위치에 정렬할 수 있습니다. 설치 방법은 Package MAnager 들어가셔서 + 버튼 누르고 깃허브 URL : https://github.com/mob-sakai/ParticleEffectForUGUI.git#4.9.0 로 추가하셔도 됩니다.

 

깃허브 페이지에 자세한 설치 방법 및 어떤 기능들을 제공하는지 적혀 있으니 참고 바랍니다. 간단한 사용 방법은 GameObejct 상단 탭 > UI > Particle System (Empty) 누르면 오브젝트가 생기는데 해당 오브젝트를 배치하는 위치에 따라 UI 레이아웃이 결정된다고 생각하면 됩니다.

 

 

1번째 사진처럼 배치하면 ClearObject에 가려지는 거고 2번째처럼 배치하면 아무 UI에도 안 가려지는 것 입니다.

 

 

그리고 위와 같은 component가 붙어있는데 제가 많이 쓰는 걸로 대충 설명 드리자면,

• 그래픽 마스크 여부
• 파티클 크기 조절
• 애니메이션 속성
• 메시 공유

• 위치 모드
  • Relative : 각 Particle 위치에서 실행
  • Absolute : 이 UIParticle 위치에서 실행 (못 벗어남)
• 자동 크기 조정 모드
• 사용자 지정 보기 사용
• 시간 척도 배수
• 렌더링 순서

 

이곳에는 위와 같이 모든 파티클을 넣어주셔야 제대로 렌더링 됩니다. 위 기능을 사용했는데 화면에 안 나타난다면 이 부분도 한번 체크가 필요합니다.

 

이를 사용하면서 생긴 오류들

1. Scene 에서는 보이는데 game에서 안 보이는 경우

• 변환 좌표의 문제일 수 있습니다. localPosition 값을 바꿨는지 확인해봐야 합니다.

아래는 제가 파티클 활용하면서 잘 이용했던 코드들을 공유합니다.

 

현재 마우스 위치로 파티클을 위치 시키고 싶을 때

• PointerEventData는 사용자가 UI 상에서 입력한 마우스, 터치, 또는 포인터 관련 정보를 포함하는 객체인데, 그 중 position 속성은 이벤트가 발생한 화면의 2D 좌표를 제공 / 이 값은 일반적으로 스크린 좌표로, 화면의 왼쪽 하단을 (0,0)으로 하고, 오른쪽 상단으로 갈수록 x와 y 값이 증가하는 형식
• 스크린 좌표에서 UI 요소(RectTransform)의 로컬 좌표로 변환

public void OnDrag(PointerEventData eventData)
{
	if(isEraser){
        Vector2 localPoint;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(this.targetRectTransform, eventData.position, eventData.pressEventCamera, out localPoint);
        earaserFX.gameObject.transform.localPosition = new Vector3(localPoint.x, localPoint.y, 0);
        if(earaserFX.isPlaying == false){
             earaserFX.Play();
        }
   }
}

 

 

 

현재 오브젝트 위치로 파티클을 위치 시키고 싶을 때

• 현재 위치 좌표를 스크린 좌표로 바꿔주고
• 스크린 좌표에서 UI 요소(RectTransform)의 로컬 좌표로 변환

Vector3 screenPosition = Camera.main.WorldToScreenPoint(transform.position);
Vector2 localPoint;
RectTransformUtility.ScreenPointToLocalPointInRectangle(targetRectTransform, screenPosition, eventData.pressEventCamera, out localPoint);
PlayClearPuzzlePartFX(localPoint);

part_FX.gameObject.transform.localPosition = new Vector3(localPoint.x, localPoint.y, 0);
part_FX.Play();

 

 

2. Particle(파티클)이 알아서 부모를 안 따라올 때 오류

 

 

안 따라오는 파티클 게임 오브젝트를 클릭한 다음 component > simulation Space 확인 

이때, World 로 설정되어 있으면 부모 객체 따라서 안 움직이게 됩니다. 

 

 

이를 위에처럼 Local 로 바꿔주시면 코드 상 위치로 바꿨을 때도 잘 따라오게 됩니다.

여기까지 간단하게 UI FX 를 쉽게 적용하고 오류랑 해결 방법을 알아보았습니다.

 

마지막으로 제가 잘 사용했던 Particle Asset 을 소개해드릴까 합니다.

 

Asset Store 링크 : Cartoon VFX Deluxe

 

싼 가격은 아니지만 500개 이상의 VFX 프리팹이 있고 모바일에서 사용하기에도 적합하게 VFX가 애니메이션을 처리하기 위해 셰이더에 의존하거나 소수의 애니메이션 프레임에 의존해 매우 가볍다고 하니 최적화가 잘 되어있는 것 같습니다. 실제 사 놓고 여러군데에서 잘 사용하고 있어 만족스러워 추천드리게 되었습니다.

 

여기까지 도움이 되시길 바라며 글 읽어주셔서 감사합니다.