유니티 방치형 프로젝트 - Render Texture 활용 하기 (#2 페이드 인아웃)

구현할 내용  

여러 UI에서 사용할 공용 페이드 인아웃 함수 제작

커밋 3079b44eb20b9020f3fac20edefc41b8f9b64bb0

공부하면서 배운 것 

1. 러프 개념에 대한 이해를 다시 한 번 하였다.

2. 공용 함수 제작 시 bool 타입에 따라 다양한 연출을 할 수 있다는 것을 알게 되었다.

구조 간단 요약

러프 하게 구조를 작성해 봄..

구현할 것 단계적으로 나누기 

1. 버튼 클릭

Base_Canvas

✅요약

• 기존에는 하이어라키의 OnClick 이벤트를 사용해서 메서드를 호출했는데 매게변수가 2개 이상 사용 되어야 하다 보니 내가 누를 영웅 아이콘 오브젝트의 부모중에서 스크립트를 가진 Base_Canvas 스크립트에 heroBtn 이름의 버튼 변수를 하나 추가하고 클릭할 때 GetUI 메서드가 실행되도록 클릭 이벤트를 연결
• 첫 번째 인자 #Heros는 Resources 폴더에서 가져올 프리팹 이름 이고 
• 두 번쨰 인자는 true로 해야 화면이 검은색으로 변함

 

 

2. 어떤식으로 요청할 것인지 ?

Base_Canvas.cs

✅요약

• 음 우선 fade를 위에서 true로 보내긴 하는데  if문을 통과하면  또 FadeInOut 메서드의 매게변수 세개를 작성해야 한다.
• 첫 번째 인자는 true는 Fade Out 이고 false가 Fade In 효과이다 우리는 FadeIn효과가 필요하므로  첫 번째 매게변수에 False를 적었다.
• 두 번째 매게변수는 전체 화면을 덮을건지 일부만 덮을건지 인데 True로 해야 전체 화면이 덮힌다 
• 세 번째 매게변수는 콜백함수이다. Fade In/Out효과 종료 후 콜백함수가 Invoke 되면서 팝업을 열게하기 위해 콜백함수를 전달하였다. 
• 결론은 원래는 FadeInOut메서드 없이 바로 GetPopUI 가 실행되어 바로 팝업창을 가져와 열었는데 이 과정을 콜백으로 넣어 전달하여 FadeInOut 효과가 끝난 뒤 실행되도록 하였다.

---

Fade In Out 효과 연출 하기

공용 함수 제작

MainUI

✅요약

• sibling이 falase면 UI는 유지하고 화면만 가려지고 true면 전체 화면이 가려진다.(가리는 이미지를 캔버스 오브젝트의 자식 중에서 마지막에 배치 시키기 때문)

공용 코루틴 제작

✅요약

• 레이케스트 true 설정 해놓는 이유는 화면 전환시에 기존 기능들 터치 방지 하기 위해
• 3항 연산자 사용하여 FadeIn/Out 여부 결정
• while의 percent <1.0은 percent가 1이 될 때 까지 돌리겠다는 의미 이며 1초동안만 돌리겠다는 의미가 아니다.
• current: 지금까지 흐른 시간 (초)
• fadeDutration: 페이드 효과가 얼마나 걸릴지 설정한 시간 (예: 1초)
• percent: 전체 시간 중 얼마나 지났는지를 비율(0~1)로 나타낸 값

👉 즉, 나누기를 통해 전체 시간(fadeDuration) 중 현재 몇 % 진행됐는지를 구하는 것이다.

예를 들어 페이드 지속시간이 2초이고 0.5초가 지났다면

percent = 0.5 / 2.0 = 0.25
25% 진행된 거니까 투명도도 25%만큼 변화함

 

여러 방식으로 호출

영웅 팝업이 열릴 때에도 FadeOut 효과가 필요하다

왜냐하면 하얀 화면이 검은 화면으로 되는 페이드 인 효과가 끝나서 영웅 팝업이 딱 나타나면 먼가 부자연스럽다

페이드 인을 하면 페이드 아웃도 같이 되어야 한다 그래서 어차피 페이드인 하고 영웅 팝업 열 때 아래 Init에서 페이드 아웃을 해버리면 자연스럽다.

 

매게변수는 페이드 아웃이니 true 이고 전체 적용이니 true이고 콜백함수 없으니 null 인 것이다.

 

아래와 같이 영웅 팝업의 닫기 버튼을 누를 때에는

페이드인이 끝나면 호출 될 콜백을 페이드 아웃을 호출하도록 하면 된다.