유니티 5장(Fadein, FadeOut, 페이드효과, 알파값 조절, image, Ui)

728x90

▣ 안녕하세요. 
오늘은 게임 씬에서 게임 씬으로 넘어갈 때 
페이드인 페이드아웃 효과로 자연스럽게 화면을 넘어가는 효과를 만들어보려고 합니다.


▣ 이 방법은 여러 방법 중에 하나입니다. 
정답이라고 생각하시지 마시고 이 방법을 공부한 후에 어려 분들만에 
방법으로 공부해 보세요.

 

▣ 먼저 새 프로젝트를 만들어주세요.
그리고 UI에서 Panel을 생성해 주세요.

 

▣ 그럼 이렇게 Canvas안에 Panel이 생성된 걸 확인할 수 있습니다.
Panel을 클릭하셔서 image에서 Color에서 RGB 모두 0으로 맞춰주시고요.
A 알파 값은 255로 맞춰주세요.
RGB은 각각 색을 의미하고, A알파는 투명도를 의미합니다. 

 

▣ 그런 다음에 GameManager을 생성해 주시고 그 안에 GameManager라는 스크립트를 넣어주세요.

 

▣ 그런 다음에 Button을 하나 생성해 주세요. 
이 게임 시작 버튼을 클릭하면 페이드 효과가 나오고 다음 씬으로 넘어가게 만들어 볼 겁니다.

 

▣ 그리고 여기서 중요한 개념이 있는데 게임 오브젝트 순서에 따라 이미지가
보이는 순서가 정해진다라는 것입니다. 
페이드 효과가 나오면 버튼을 당연히 안 보여야겠죠?
그래서 이렇게 버튼을 패널 위로 위치를 변경하였습니다. 
그런데 버튼이 안 보여서 문제가 되죠?
이건 하나하나 스크립트 코딩을 하면서 해결해 보겠습니다.

 

▣ 먼저 맨 위에 using으로 유니티 엔진에 UI를 선언해 주시고요.
public으로 Image와 GameObject를 선언해 주세요. 
using으로 UI를 선언하지 않으면 image를 선언할 수 없습니다. 이점 꼭 기억해 주세요.


▣ 그리고 버튼을 클릭하면 실행하는 함수를 하나 만들어주겠습니다.
여기서 button.SetActive(false)를 해서 왜 버튼을 비활성화할까라는 의문이 드실 수 있으실 겁니다.
아까 보여드린 것처럼 버튼을 앞에 두고 페이드인을 하면 
버튼에 위치가 더 앞에 보이기 때문에 패널 앞에 버튼을 위치해서 
버튼이 계속 보이게 됩니다.
그래서 비활성화를 했습니다.
다른 방법으로도 할 수 있지만 저는 이런 방법을 선택했습니다.
이게 꼭 정답은 아닙니다.

 

▣ 그리고 밑에 코 루틴으로 패널에 알파 값을 점점 나오게 할 겁니다.
그런데 여기서 중요한 건 알파 값에 최솟값은 0, 최댓값은 1.0이라는 겁니다. 
우리가 봤던 0~255 값이 아닌 
0(off), 1(on) 기계어에 원리처럼 코딩을 해야 합니다. 
그렇기 때문에 저는 whlie문으로 fadeCount라는 변수가 1이 될 때까지 반복하게 했습니다.


▣그리고 image.color라고 놓게 되면 이렇게 변수를 선언하게 되는데,
처음 값을 r, g, b, a 이렇게 순서대로 적용하는 걸 볼 수 있습니다.
색을 변화를 줄 필요는 없기 때문에 이렇게 진행했습니다. 

 

▣ 그리고 다시 패널에 가서 알파 값을 0으로 수정해 주시고 
버튼 위치도 원래 위치로 넣어줍니다.

 

▣ 그리고 게임 매니저 스크립트에 각각 패널과 버튼을 넣어주고

 

▣ 버튼을 눌러서 실행을 하면 이렇게 페이드 효과가 나오는 걸 확인할 수 있습니다.
그런 다음에 페이드 효과가 끝나면 다른 게임 씬으로 로드하게 하면 되겠죠?


▣ 자 오늘은 여기까지 페이드 효과에 대해 공부해 보았습니다.
제가 버튼을 비활성화한 것, 페이드 효과를 while문과 코 루틴으로 사용한 것 
모두 하나에 방법이니 여러분만에 방법으로 다시 도전해 보세요.
그리고 버튼에 위치 패널에 위치도 한번 연구해 보시면 많은 공부가 될 겁니다.
질문 있으시면 댓글 남겨주세요.
다음장에서 뵙겠습니다. 

▣포기하지 마세요!!! 저도 했습니다.!!! 파이팅!!!