UE4 Chapter 6-6. UI : 인트로 화면, 위젯 애니메이션

Date:     Updated:

카테고리:

태그:

인프런에 있는 황대희님의 언리얼 엔진4 3D 횡스크롤 게임 만들기 강의를 듣고 정리한 필기입니다. 😀
언리얼 엔진 공식 문서 https://docs.unrealengine.com/ko/index.html

🚖 인트로 화면이 될 레벨 만들기

Ctrl + N을 눌러 새 레벨을 만들자. 유형을 아무것도 배치되지 않은, 아무런 액터도 존재하지 않는 공백 레벨로 선택하고 이름은 “Intro”로 설정하자.

  • 공백 레벨로 설정한 이유
    • 인트로는 레벨에 별다른 리소스 없이 로딩을 최소하하여 빨리 불러와야 하기 때문에


🚖 인트로 화면 위젯 블루프린트

인트로 화면 UI 를 만들자. 위젯 블루프린트를 생성하고 이름은 “Intro”

🚩 “Intro” 위젯 블루프린트 디자이너 모드

image

어디를 클릭하든 Start 할 수 있도록 버튼은 거의 화면만하게 크게 만들어주었고 배경은 투명하게 하였다.

🚩 “Intro” 위젯 블루프린트 이벤트 그래프

image

버튼 누르면 MainMenu 레벨 열리게끔.


🚖 위젯 애니메이션

애니메이션 만들기

🚩 “Intro” 위젯 블루프린트 디자이너 모드

“Click to Start” 텍스트가 깜빡깜빡 하는 애니메이션을 만들어보자.

image

먼저, 하단의 애니메이션 탭에서 “Click to Start” 이름의 애니메이션을 추가한다.

image

“Click to Start”라고 적힌 텍스트 블록인 TextBlock_ClickToStart에게 애니메이션을 적용할 것이므로 트랙 추가를 눌러 TextBlock_ClickToStart를 선택해준다.

image

투명도에 변화가 있는 애니메이션을 만들 것이기 때문에 +트랙 을 눌러 Color and Opacity를 선택해준다.

image

  • 0 초(시작) 👉 알파 1.0 에서 시작한다.
  • 첫 번째 Key 👉 알파 0.2
  • 두 번째 Key 👉 알파 0.2
  • 세 번째 Key 👉 알파 1.0
  • 2.15초쯤(끝) 👉 알파 1.0

위와 같은 투명도 값을 가진 Key 들을 추가하여 애니메이션을 만들었다. 0 ~ 2.15초 시간동안 재생되면서 불투명 상태(1.0)에서 시작하여 투명해졌다가(0.2) 다시 불투명(1.0)해지는 애니메이션이 완성되었다


애니메이션 재생

🚩 “Intro” 위젯 블루프린트 이벤트 그래프

image

  • Contruct 👉 이 위젯이 활성화 되면
  • Play Animation 👉 애니메이션을 재생한다.
    • In Animation 에 ClickTostart 애니메이션을 연결해준다.
      • 타겟(self)인 “Intro” 위젯이 ClickTostart 애니메이션을 재생한다.
    • Num Loops to Play 는 0 으로 설정한다.
      • 재생 횟수를 정한다. 0 으로 설정하면 무한 반복 재생한다.
  • 즉 “Intro” 위젯이 활성화되면 ClickTostart 애니메이션이 무한 반복 재생을 시작함


🚖 위젯 블루프린트 띄우기

🚩 Intro 레벨 블루프린트

레벨 블루프린트에서 띄우자.

image

“Intro” 위젯 블루프린트를 생성하고 화면에 띄운다. 마우스 커서도 보이게 한다.



🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

댓글남기기