[Unity][HandiLab] UI카메라와 Fade 효과

항생제 내성 실험에서 배지를 세균배양기에 넣은 후 1일을 기다리는 장면을 연출해야 했다.

시계가 돌아가는 애니메이션과 함께 fade in/out 효과를 주기로 했다.

 

1. UI에 3D Object 올리기

시계와 '1일 후' 텍스트(블렌더로 제작함)는 3d오브젝트인데 UI캔버스에 올리기 위해서 Layer를 UI로 설정했다.

그리고 UI만 찍는 UI카메라를 하나 만들어 주고 Clear Flags를 Depth only, Culling Mask에서 UI만 남겨줬다.

그런 다음 Depth를 ARSessionOrigin의 ARCamera의 Depth보다 크게 설정해서 위로 올라오도록 해줬다.

fadeOut에 쓰일 Image, 시계, 3d텍스트가 담긴 Canvas의 Render Mode를 Screen Space - Camera로 설정해주고,

아까 만든 UICamera를 Render Camera로 설정해주었다. (Canvas의 Layer역시 UI)

 

2. Fade 효과

검은색 Image 하나를 추가해준다. Image의 투명도는 0이다. 투명도를 올림으로써 fadeOut효과를 준다.

맨 처음 이 코루틴이 호출되면 alpha에 대입된 panel.color는 말했던대로 0이다.

alpha.a의 최댓값인 1보다 투명도가 작은 동안에는 서서히 투명도를 올려주는 코드이다.

Mathf.Lerp메소드를 이용해서 alpha.a를 0부터 1까지 currentTime씩 서서히 올려주었다.

fadeIn효과는 이와 반대로 alpha.a > 0인 조건동안 Mathf.Lerp(1,0, currentTime)로 설정해주면 된다.