시간 제한이 있는 게임에 커스텀 애니메이션 타이머를 만듭니다. UI 애니메이션을 사용하면 타이머에 펄스 효과를 주거나 사라지게 할 수 있으며, 시계를 둘러싸는 형태의 커스텀 카운트다운 머티리얼을 추가할 수도 있습니다.
이 튜토리얼은 다음과 같은 작업을 수행하는 방법을 보여줍니다.
머티리얼 구성하기
시계문자판에 애니메이션 적용하기
시계 색상 변경하기
UI 팝업 튜토리얼의 안내에 따라 콘텐츠 브라우저에서 사용자 위젯을 생성합니다.
1단계: 위젯 구성하기
사용자 위젯을 생성한 후, 사용자 위젯 섬네일을 더블클릭하여 위젯 에디터를 엽니다.
오버레이(Overlay) 위젯을 위젯 그래프로 드래그하고 우측 하단 모서리를 드래그하여 크기를 1920 x 1080으로 변경합니다. 이 위젯은 UI가 표시될 화면 역할을 합니다.
계층구조 패널에서 오버레이 위젯을 우클릭하고 위젯 이름을 Root로 변경합니다. 이렇게 명명하면 위젯이 화면의 모델 역할을 한다는 것도 알 수 있습니다.
두 번째 오버레이 위젯을 Root 위젯으로 드래그합니다. 이 위젯에는 애니메이션 타이머의 디자인과 기능을 구성하는 모든 위젯이 포함됩니다.
계층구조(Hierarchy) 패널에서 두 번째 오버레이 위젯의 이름을 ParentContainer로 변경합니다.
디테일 패널에서 다음 프로퍼티를 설정합니다.
패딩(Padding) = 25.0
가로 정렬(Horizontal Alignment) = 가운데 가로 정렬(Center Alignment Horizontally)
크기 박스(Size Box) 위젯을 ParentContainer 위젯으로 드래그합니다. 이렇게 하면 자손 위젯의 크기가 정해지고 강제 적용됩니다. 크기 박스의 자손 위젯은 시계 문자판이 됩니다.
계층구조 패널에서 크기 박스 위젯의 이름을 BGSizeBox로 변경합니다.
디테일(Details) 패널에서 가로 정렬 및 세로 정렬(Vertical Alignment)을 가운데 정렬(Center Alignment)로 설정합니다.
최소 원하는 너비(Minimum Desired Width) 및 최대 원하는 높이(Maximum Desired Height)를 선택하여 이 옵션을 켠 후, 프로퍼티를 130.0으로 설정합니다.
아래와 같은 컨테이너가 루트 위젯 안에 배치됩니다.
이미지(Image) 위젯을 BGSizeBox 위젯으로 드래그합니다.
계층구조 패널에서 이미지 위젯의 이름을 Timer로 변경합니다.
디테일(Details) 패널에서 가로 정렬 및 세로 정렬(Vertical Alignment)을 가운데 정렬(Center Alignment)로 설정합니다.
브러시(Brush) > 이미지(Image) 프로퍼티에 머티리얼 인스턴스를 추가합니다. 이 머티리얼을 시간 카운트다운에 사용할 수도 있습니다.
머티리얼이 ParentContainer 위젯 내부의 공간을 채웁니다.
텍스트 박스(Text Box) 위젯을 ParentContainer 위젯으로 드래그합니다.
계층구조 패널에서 텍스트 박스 위젯의 이름을 TimerText로 변경합니다.
디테일 패널에서 텍스트(Text) 프로퍼티를 00:00으로 설정합니다.
타이머 텍스트 위젯은 사용자 위젯의 정중앙에 배치됩니다.
다음으로, 타이머 텍스트 위젯에 애니메이션을 적용하여 긴급 상태일 때 시간을 더욱 동적으로 표현하도록 만들어 보겠습니다.
2단계: 타이머 텍스트에 애니메이션 적용하기
타이머의 마지막 몇 초 동안 긴급 상태로 위험이 임박했다는 느낌을 연출하기 위해, 시계의 시간 표현에 애니메이션을 적용합니다.
아래에 생성된 애니메이션에서는 타이머 텍스트가 확대되고 빨간색으로 변한 후 흐려집니다. 이 애니메이션은 타이머 장치(Timer device)에서 설정된 긴급 모드 지속 시간 동안 반복됩니다.
위젯 에디터 화면 하단의 애니메이션(Animations)을 클릭합니다. 그러면 애니메이션을 생성하고 애니메이션 시퀀스에 위젯을 추가할 수 있는 시퀀서 패널이 열립니다.
+애니메이션(+Animation)을 클릭하여 사용자 위젯에 새 애니메이션 파일을 생성합니다.
애니메이션을 Urgency로 명명합니다. 나중에 사용자 위젯에 바인딩을 추가할 때 이 애니메이션을 설정합니다.
파란색 SELECTED 사각형이 위젯 그래프를 감싸고 있습니다.
+추가(+Add)를 클릭하여 사용자 위젯의 애니메이션에 추가될 수 있는 오브젝트 목록을 엽니다.
계층구조 패널에서 TimerText 위젯을 선택합니다.
목록에서 TimerText를 선택하여 시퀀서 패널에 TimerText를 추가합니다.
TimerText 옆의 + 아이콘을 선택하여 애니메이션을 적용할 수 있는 프로퍼티 목록을 엽니다.
목록에서 트랜스폼(Transform)을 선택합니다. 이렇게 하면 텍스트에 트랜스폼, 즉 이동, 회전, 스케일 조절, 비틀기를 적용할 수 있는 모든 방법이 추가됩니다.
스케일(Scale) 옵션을 열고 + 키프레임 아이콘을 선택하여 타임라인에 키프레임을 추가합니다. X축 및 Y축 옵션은 새 값을 입력할 때 텍스트 크기를 증가 및 감소시킵니다.
타임라인에서 플레이헤드를 0.25초로 옮기고, X축 및 Y축 값을 1.5로 변경한 다음 X축 및 Y축 옵션 옆의 +키프레임 아이콘을 누릅니다. 타임라인에 TimerText의 변화 지점을 표시해 주는 키프레임이 나타납니다.
타임라인에서 플레이헤드를 0.5초로 옮기고, X축 및 Y축 값을 2.0으로 변경한 다음 X축 및 Y축 옵션 옆의 +키프레임 아이콘을 누릅니다. 타임라인에 텍스트의 변화 지점을 표시해 주는 추가 키프레임이 나타납니다.
TimerText 옆의 + 아이콘을 선택한 후 목록에서 컬러 및 오파시티(Color and Opacity)를 선택합니다. 그러면 시퀀서에 빨간색, 녹색, 파란색, 알파 프로퍼티가 추가됩니다.
타임라인에서 플레이헤드를 리셋하고 컬러 및 오파시티 옆의 + 키프레임 아이콘을 선택합니다. 이렇게 하면 타임라인에서 컬러 및 오파시티 프로퍼티 각각에 대한 첫 번째 키프레임이 설정됩니다.
컬러 및 오파시티를 펼쳐 빨간색(R) 값을 1.0으로, 녹색(G) 값을 0.0으로, 파란색(B) 값을 0.0으로 변경합니다. 그러면 빨간색이 생성됩니다.
플레이헤드를 0.25초로 옮긴 뒤, 아래에 각 프로퍼티가 있는 컬러 및 오파시티 옆의 + 키프레임 아이콘을 선택합니다. 그러면 타임라인에 키프레임이 추가됩니다.
플레이헤드를 0.5초로 옮기고 알파(A) 값을 0.0으로 변경한 후 + 키프레임 아이콘을 선택합니다. 애니메이션이 타임라인의 마지막 키프레임에 도달하면 텍스트가 사라집니다.
플레이헤드를 타임라인에서 앞뒤로 이동해 보면 생성한 애니메이션이 위젯 그래프에서 재생되는 모습을 볼 수 있습니다.
다음으로, 뷰 모델 및 뷰 바인딩을 추가하여 타이머 장치를 사용자 위젯으로 대체해 보겠습니다.
3단계: 뷰 바인딩 추가하기
기본 타이머 장치 UI를 대체하기 위해 텍스트 박스 위젯(TimerText)을 타이머 장치의 세팅에 바인딩합니다.
창(Windows) 메뉴에서 뷰모델(Viewmodel)을 선택합니다. 뷰모델 창이 열립니다.
+뷰모델(+Viewmodel)을 클릭한 후 Device - Timer View Model > 선택(Select)을 클릭합니다. 이제 모든 타이머 장치 뷰모델을 사용자 위젯에 바인딩할 수 있습니다.
계층구조 패널에서 TimerText 위젯을 선택합니다.
하단 툴바의 뷰 바인딩(View Bindings)을 클릭하여 뷰 바인딩 패널을 엽니다.
+TimerText 위젯(+TimerText Widget)을 클릭하여 뷰 바인딩 채널에 TimerText 위젯을 추가합니다.
TimerText 필드를 선택하여 위젯 프로퍼티 드롭다운 메뉴를 엽니다.
드롭다운 메뉴에서 TimerText > Text > 선택을 클릭합니다. 이렇게 하면 TimerText 위젯의 텍스트가 바인딩된 프로퍼티로 식별됩니다.
빈 오른쪽 필드를 선택하여 바인딩 드롭다운 메뉴를 엽니다.
바인딩 드롭다운 메뉴에서 TimerText ViewModel > Current Time > 선택을 클릭합니다. 그러면 TimerText 위젯이 타이머 장치의 현재 시간에 바인딩되며, 화면에 현재 시간이 표시됩니다.
다음으로, 뷰모델에 애니메이션을 추가하여 긴급 모드 동안 화면에서 재생되도록 하겠습니다.
4단계: 애니메이션 추가하기
뷰 바인딩 패널에서 TimerText에 바인딩을 추가한 방식과 비슷하게 애니메이션을 추가하게 됩니다.
뷰 바인딩 패널 상단의 +조건 추가(+Add Condition)를 선택합니다. 그러면 뷰 바인딩 패널에 조건 행이 추가됩니다.
뷰모델 드롭다운 메뉴를 열고 사용자 위젯(User Widget) > 선택을 선택합니다. 이렇게 하면 조건에 사용자 위젯이 추가됩니다.
왼쪽 필드를 선택하여 뷰모델 바인딩 드롭다운을 엽니다.
포크리 타이머 뷰모델 > Is Urgency > 선택을 클릭합니다. 이렇게 하면 Is Urgency를 비교 프로퍼티로 사용하여 특정 값과 같은지 확인한 다음, 반환된 값(true/false)을 기준으로 애니메이션을 트리거합니다.
시간 필드를 1.0으로 변경합니다. 이는 Is Urgency가 1.0과 같다는 뜻이며, 값이 true이므로 애니메이션이 재생됩니다.
오른쪽 필드를 선택하여 큐 드롭다운 메뉴를 열고 사용자 위젯 > Queue Play Animation > 선택을 클릭합니다. 생성된 애니메이션이 이제 긴급 모드 여부가 1.0일 때 재생을 위해 큐에 등록됩니다.
인 애니메이션(In Animation) 옆의 바인딩 아이콘을 선택하여 파란색 링크 아이콘으로 바꿉니다.
인 애니메이션 필드를 선택한 후 사용자 위젯 > 애니메이션 이름(Animation name) > 선택을 선택합니다. 선택된 애니메이션이 큐에 등록될 때 재생됩니다.
시작 시간(Start at Time) 값을 10.0으로 커스터마이징합니다. 이 값은 애니메이션이 재생을 시작해야 하는 초/프레임을 나타냅니다. 0.0으로 설정할 경우 애니메이션 0.0초/프레임부터 애니메이션이 재생되기 시작한다는 의미입니다.
재생 속도(Playback Speed)를 0.5로 설정합니다. 그러면 시퀀서에서 애니메이션이 설정된 속도의 절반 속도로 재생됩니다.
컴파일(Compile)을 클릭하여 사용자 위젯을 저장합니다.
5단계: 타이머 장치 추가하기
마지막 단계는 뷰포트에 타이머 장치를 추가하고 세팅을 커스터마이징하는 것입니다.
콘텐츠 브라우저에서 Fortnite > 장치(Devices) 폴더를 선택하여 모든 장치 폴더를 엽니다.
에셋 뷰 검색창에 Timer를 입력하여 타이머 장치를 표시합니다.
타이머(Timer) 장치를 뷰포트로 드래그합니다.
디테일 패널에서 지속 시간(Duration)을 30.0초로 설정합니다.
고급(Advanced) 옵션을 펼쳐 커스텀 위젯 클래스를 표시합니다.
커스텀 위젯 클래스 드롭다운 메뉴에서 사용자 위젯을 선택합니다.
두 번째 고급 옵션 세트에서 다음 세팅을 사용합니다.
상호작용 가능(Can Interact) = 미적용(No)
완료 행위(Completion Behavior) = 초기화(Reset)
게임 중에 표시(Visible During Game) = 숨김(Hidden)
긴급 모드 사용(Enable Urgency Mode) = 선택
긴급 모드 시간(Urgency Mode Time) = 10.0초
이제 플레이어가 장치와 상호작용할 수 없으며, 타이머가 설정된 지속 시간을 넘기면 초기화됩니다. 긴급 모드가 활성화된 상태에서, 이제 커스텀 애니메이션이 큐에 등록되어 긴급 모드 시간에서 설정한 시간 동안 재생됩니다.
변경사항을 저장한 후 프로젝트를 플레이테스트하여 HUD에서 사용자 위젯이 작동하는 것을 확인합니다.
플레이테스트 결과, 커스텀 시간이 기본 타이머 장치를 대체해 지정된 시간 동안 애니메이션을 재생해야 합니다.
직접 해보기
자신의 프로젝트에 맞게 독특한 타이머를 만들 수 있는 몇 가지 방법이 있습니다.
TimerText 주변에 타이머가 다 되어 갈수록 천천히 사라지는 머티리얼을 추가합니다.
TimerText 주변에 시계처럼 생긴 텍스처를 추가합니다.
타이머를 화면 중앙이 아닌 모서리로 이동합니다.