커스텀 카운트다운 타이머 만들기

카운트다운 타이머를 실행하는 타이머 장치를 사용해도 되지만, Verse에서 카운트다운 타이머를 직접 만들면 필요에 따라 행동을 커스터마이징할 수 있습니다.

이 튜토리얼에서는 Verse로 타이머를 직접 만들고 카운트다운에 시간이 추가될 때 콜아웃을 사용하는 방법을 알아봅니다. 간단하게 시작한 뒤 프로젝트를 진행하면서 개선할 방법을 배울 것입니다.

사용된 Verse 언어 기능

• if: if 표현식을 사용해 조건을 테스트하고 실패 가능한 값에 액세스합니다.

• block: 이 예시에서는 block 표현식을 사용해 카운트다운 타이머가 생성되었을 때 UI를 초기화합니다.

• loop: loop 표현식으로 UI를 업데이트하고 카운트다운이 0까지 내려가면 종료합니다.

• spawn: spawn 표현식은 어떤 컨텍스트에서든 비동기 표현식을 시작합니다.

• message: message 타입은 텍스트를 현지화할 수 있다는 의미이며, message 변수를 초기화하는 string이 message의 기본 텍스트 및 언어가 됩니다.

• 클래스: 이 예시에서는 카운트다운을 관리하고 화면에 표시하는 Verse 클래스를 생성합니다.

• 생성자: 생성자는 관련 클래스의 인스턴스를 생성하는 특수 함수입니다.

• 액세스 지정자: 액세스 지정자를 사용해 코드의 액세스 레벨을 설정할 수 있습니다.

사용된 Verse API

• Sleep: Sleep() API를 사용해 UI 업데이트 주기를 설정할 수 있습니다.

• 이벤트: Verse에서 나만의 이벤트를 생성하고 이벤트 발생 시의 커스텀 기능을 추가할 수 있습니다.

• Verse UI: 커스텀 게임 내 UI를 제작하여 플레이어와 게임에 대한 정보를 표시합니다.

인스트럭션

다음 단계에 따라 나만의 커스텀 타이머를 만드는 방법을 학습하세요. 완성된 스크립트가 이 가이드 끝에 참고용으로 포함되어 있습니다.

레벨 구성하기

이 예시에서는 다음과 같은 사물과 장치를 사용합니다.

• 버튼 장치(1): 플레이어가 이 장치와 상호작용하면 카운트다운에 시간이 추가됩니다.

• 게임 종료 장치(1): 카운트다운이 끝나면 이 장치가 게임을 종료합니다.

레벨을 구성하려면 다음 단계를 따릅니다.

1. 레벨에 버튼 장치(Button Device)와 게임 종료 장치(End Game Device)를 추가합니다.

2. Verse 익스플로러를 사용해 새 Verse 장치를 생성하고 countdown_timer_example로 명명합니다. 단계별 과정은 Verse를 사용하여 나만의 장치 만들기를 참고하세요.

3. countdown_timer_example에 버튼 장치의 편집 가능 레퍼런스를 추가하고 AddMoreTimeButton으로 명명합니다. 단계별 과정은 장치 프로퍼티 커스터마이징을 참고하세요.

   Verse

        countdown_timer_example := class(creative_device):
   		
            @editable
            AddMoreTimeButton : button_device = button_device{}
   

   Copy full snippet(4 lines long)

4. countdown_timer_example에 게임 종료 장치의 편집 가능 레퍼런스를 추가하고 EndGame으로 명명합니다.

   Verse

        countdown_timer_example := class(creative_device):
   		
            @editable
            AddMoreTimeButton : button_device = button_device{}
   		        
            @editable
            EndGame : end_game_device = end_game_device{}
   

   Copy full snippet(7 lines long)

5. Verse 파일을 저장하고 UEFN 메인 메뉴에서 Verse > Verse 코드 빌드(Build Verse Code)를 선택하여 레벨 내 장치를 업데이트하고 장치의 디테일(Details) 패널에서 변경사항을 확인합니다.

카운트다운 시작하기

이 예제에서는 고유한 UI를 그리고 카운트다운을 관리하는 Verse 클래스를 만들어 보겠습니다.

다음 단계에 따라 커스텀 카운트다운 타이머를 만듭니다.

1. 빈 Verse 파일을 생성하고 countdown_timer.verse로 명명합니다.

2. 파일 상단에 다음 Verse 모듈을 추가합니다.

   Verse

        using { /UnrealEngine.com/Temporary/UI }
        using { /UnrealEngine.com/Temporary/SpatialMath }
        using { /Fortnite.com/UI }
        using { /Verse.org/Colors }
        using { /Verse.org/Simulation }
   

   Copy full snippet(5 lines long)

3. 클래스를 생성하고 countdown_timer로 명명한 뒤 다음 변수를 추가합니다.

   • float 변수 RemainingTime을 추가하고 0.0으로 초기화합니다.

     Verse

                               var RemainingTime : float = 0.0
     

     Copy full snippet(1 line long)

   • 캔버스 위젯 변수 Canvas를 추가합니다.

     Verse

       var Canvas : canvas = canvas{}
     

     Copy full snippet(1 line long)

   • 텍스트 위젯 RemainingTimeWidget을 추가하고 기본 텍스트 컬러를 흰색으로 설정합니다.

     Verse

       RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
     

     Copy full snippet(1 line long)

   • integer 파라미터를 받고 message를 반환하여 RemainingTime으로 표현되는 값을 표시하는 함수 RemainingTimeText를 추가합니다.

     Verse

       RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
     

     Copy full snippet(1 line long)

   • 플레이어 UI 옵션 MaybePlayerUI를 추가하고 false로 초기화합니다.

     Verse

       MaybePlayerUI : ?player_ui = false
     		
     

     Copy full snippet(2 lines long)

4. 생성한 클래스는 다음과 같아야 합니다.

   Verse

        countdown_timer := class:
            MaybePlayerUI : ?player_ui = false
            var RemainingTime : float = 0.0
               var Canvas : canvas = canvas{}
               RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
               RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
   

   Copy full snippet(6 lines long)

5. block 표현식을 추가하여 화면 상단 중앙에 시간을 표시하는 UI를 생성합니다. 클래스 정의의 block 표현식은 해당 클래스가 인스턴스화될 때만 실행되므로 이 block 표현식에 들어가면 UI를 생성할 수 있습니다.

   Verse

        countdown_timer := class:
            block:
                set Canvas = canvas:
                    Slots := array:
                        canvas_slot:
                            Anchors := anchors:
                                Minimum := vector2{X := 0.5, Y := 0.05}
                                Maximum := vector2{X := 0.5, Y := 0.05}
                            Alignment := vector2{X := 0.5, Y := 0.0}
                            Offsets := margin{Top := 0.0, Left := 0.0, Bottom := 0.0, Right := 0.0}
   
   Expand code Copy full snippet(18 lines long)

6. UI를 표시하는 함수 StartCountdown()을 추가합니다.

   Verse

        StartCountdown() : void =
            Print("Starting countdown")
   		
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.AddWidget(Canvas)
   

   Copy full snippet(5 lines long)

7. countdown_timer_example.verse에 플레이어 UI 및 초기 카운트다운 시간의 레퍼런스를 사용하여 countdown_timer 인스턴스를 생성합니다. OnBegin()에서 StartCountdown()을 호출해 게임이 시작되자마자 카운트다운이 표시되도록 만듭니다.

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
   
        countdown_timer_example := class(creative_device):
   
            @editable
            AddMoreTimeButton : button_device = button_device{}
   
            @editable
            EndGame : end_game_device = end_game_device{}
   
   Expand code Copy full snippet(23 lines long)

8. 지금 플레이테스트하면 카운트다운이 시작되어도 UI에 남은 시간이 표시되지 않으므로, countdown_timer.verse에 UI의 현재 카운트다운 값을 업데이트하는 함수를 생성하고 UpdateUI()로 명명합니다. StartCountdown()에서 UpdateUI()를 호출합니다.

   Verse

        StartCountdown() : void =
            Print("Starting countdown")
   		
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.AddWidget(Canvas)
   		            
                # Update the UI when we start the timer to see the initial RemainingTime on screen
                UpdateUI()
   		
        UpdateUI() : void =
   
   Expand code Copy full snippet(12 lines long)

9. 이제 UI에 초기 카운트다운 시간이 표시되지만, 아직 값이 1초마다 업데이트되지 않습니다. 이렇게 하려면 다음 단계를 따릅니다.

   • 몇 초마다 UI를 업데이트할지 나타내는 float 변수 TimerTickPeriod를 추가합니다. 이 예시에서는 1초로 설정합니다.

     Verse

                               TimerTickPeriod : float = 1.0 # The timer "precision": how often, in seconds, it ticks.
     

     Copy full snippet(1 line long)

   • suspends 지정자가 있는 함수를 생성하고 RunCountdown()으로 명명한 다음 StartCountdown()에서 호출합니다. UI를 업데이트하기 전에 RunCountdown()에서 TimerTickPeriod를 기다리게 하고 loop에서 이 과정을 반복합니다. 카운트다운이 0.0에 도달하면 루프가 종료되고 UI에서 카운트다운 시간이 사라지도록 설정합니다.

     Verse

       StartCountdown() : void =
           Print("Starting countdown")
     
           if (PlayerUI := MaybePlayerUI?):
               PlayerUI.AddWidget(Canvas)
     
               # Update the UI when we start the timer to see the initial RemainingTime on screen
               UpdateUI()
     
               spawn:
     
     Expand code Copy full snippet(24 lines long)

10. 플레이테스트하면 카운트다운이 30에서 시작해 매초 업데이트되고, 타이머가 0이 되면 UI에서 카운트다운 시간이 사라집니다.

시간 추가하기

이 카운트다운 타이머에서는 시간을 추가하는 방법을 직접 구현하고 추가된 시간을 나타내는 콜아웃을 표시할 것입니다. 이 예시에서는 플레이어가 버튼 장치와 상호작용했을 때 카운트다운에 시간을 추가하고 추가된 시간을 표시하는 방법을 학습합니다.

다음 단계에 따라 플레이어가 버튼 장치와 상호작용했을 때 카운트다운 타이머에 시간을 추가합니다.

1. countdown_timer.verse에 새 함수 AddRemainingTime()을 생성합니다. 이 함수는 RemainingTime 변수를 float 파라미터 Time 내 함수에 전달된 값으로 업데이트한 다음, 새로 계산된 남은 시간을 표시하도록 UI를 업데이트합니다.

   Verse

        AddRemainingTime(Time : float) : void =
            set RemainingTime += Time
   		
            # Immediately update the UI for better player feedback when time is added.
            UpdateUI()
   

   Copy full snippet(5 lines long)

2. countdown_timer_example.verse에서 버튼 장치의 InteractedWithEvent에 등록하고 플레이어가 버튼 장치와 상호작용할 때마다 AddRemainingTime()을 호출합니다.

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
   
        countdown_timer_example := class(creative_device):
   
            @editable
            AddMoreTimeButton : button_device = button_device{}
   
            @editable
            EndGame : end_game_device = end_game_device{}
   
   Expand code Copy full snippet(29 lines long)

3. countdown_timer 클래스에 위젯을 추가하여 플레이어가 버튼과 상호작용했을 때 카운트다운에 시간이 얼마나 추가되었는지 콜아웃합니다.

   Verse

        AddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} 
        AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"
   

   Copy full snippet(2 lines long)

4. AddedTimeWidget에는 RemainingTime 위젯과 동일한 위치 값을 사용하되, 다음 값을 변경하여 카운트다운 타이머의 우측 상단에 콜아웃 시간을 표시합니다.

   • AddedTimeWidget의 오프셋에서 왼쪽 여백을 50.0으로 설정합니다.

   • RemainingTimeWidget의 오프셋에서 상단 여백을 25.0으로 설정합니다.

     Verse

                               countdown_timer := class:
                                   <# This block runs for each instance of the countdown_timer class.
                                   We can setup the canvas once here. #>
                                   block:
                                       set Canvas = canvas:
                                           Slots := array:
                                               canvas_slot:
                                                   Anchors := anchors:
                                                       Minimum := vector2{X := 0.5, Y := 0.05}
                                                       Maximum := vector2{X := 0.5, Y := 0.05}
     
     Expand code Copy full snippet(22 lines long)

5. AddedTimeWidget의 값을 업데이트하고 콜아웃을 2초 동안 표시한 후 위젯을 숨기는 새 함수 AddedTimeCallout()을 생성합니다. AddRemainingTime()에서 AddedTimeCallout()을 호출합니다.

   Verse

        AddRemainingTime(Time : float) : void =
            set RemainingTime += Time
   		
            # Immediately update the UI for better player feedback when time is added.
            UpdateUI()
   		
            # Fire a simple callout to show the time being added.
            spawn:
                AddedTimeCallout(Time)
   		
   
   Expand code Copy full snippet(19 lines long)

6. 플레이테스트하면 카운트다운이 30에서 시작해 매초 업데이트되고, 타이머가 0이 되면 UI에서 카운트다운 시간이 사라집니다. 플레이어가 버튼과 상호작용하면 카운트다운에 20초가 추가되고, 추가된 시간을 나타내는 콜아웃이 2초 동안 표시됩니다.

카운트다운 타이머 종료 신호 보내기

이 튜토리얼의 앞부분에서는 버튼 장치의 InteractedWithEvent를 사용하여 플레이어가 버튼을 누르는 것을 탐지하고 카운트다운 타이머에 시간을 추가했습니다. 커스텀 이벤트를 직접 생성해서 코드에 특정 이벤트가 발생했다는 것을 알릴 수도 있습니다.

이 예시에서는 커스텀 이벤트의 다음 행동을 사용하는 방법을 학습합니다.

• Signal(): 이벤트를 기다리는 코드에 이벤트가 발생했다고 알리는 함수입니다.

• Await(): 이벤트 신호가 오기 전까지 이 함수를 감싼 컨텍스트의 실행을 막는 비동기 함수입니다.

이 예시에서는 게임 종료 장치를 활성화할 수 있도록 카운트다운이 종료되었다는 신호를 보내는 이벤트를 카운트다운 타이머에 추가합니다.

다음 단계에 따라 카운트다운 종료 이벤트를 추가합니다.

1. countdown_timer 클래스에 이벤트 필드 CountdownEndedEvent를 추가합니다.

   Verse

        CountdownEndedEvent : event() = event(){}
   

   Copy full snippet(1 line long)

   event()는 파라미터 타입이므로 값 또는 오브젝트 인스턴스가 아니라 클래스 또는 인터페이스를 반환합니다. 따라서 타입을 event()로 선언하고 클래스를 인스턴스화하는 것처럼 상수 CountdownEndedEvent를 event(){}로 초기화해야 합니다.

2. RunCountdown()이 루프에서 탈출하기 전에 CountdownEndedEvent 신호를 보내 다른 코드에 카운트다운 종료를 알리도록 업데이트합니다.

   Verse

        RunCountdown()<suspends> : void =
            # We loop with the TimerTickPeriod.
            # The UI is also updated each time.
            loop:
                Sleep(TimerTickPeriod)
                set RemainingTime -= TimerTickPeriod
                UpdateUI()
   
                # Timer End
                if (RemainingTime <= 0.0):
   
   Expand code Copy full snippet(14 lines long)

3. countdown_timer_example.verse에서 CountdownTimer와 연결된 CountdownEndedEvent에 Await을 걸고 이후에 게임 종료 장치를 활성화합니다. 이벤트가 발생할 때 카운트다운이 종료되기 때문입니다.

   Verse

        OnBegin<override()<suspends> : void =
            AddMoreTimeButton.InteractedWithEvent.Subscribe(OnButtonInteractedWith)
            if:
                FirstPlayer := Self.GetPlayspace().GetPlayers()[0]
                PlayerUI := GetPlayerUI[player[FirstPlayer]]
            then:
                set CountdownTimer = countdown_timer{MaybePlayerUI := option{PlayerUI}, RemainingTime := InitialCountdownTime}
   		        
                CountdownTimer.StartCountdown()
                CountdownTimer.CountdownEndedEvent.Await()
   
   Expand code Copy full snippet(14 lines long)

4. 플레이테스트하면 카운트다운이 30에서 시작해 0이 될 때까지 매초 업데이트됩니다. 카운트다운이 종료되면 즉시 UI에서 카운트다운 시간이 사라지고 게임이 종료됩니다. 플레이어가 버튼과 상호작용하면 카운트다운에 20초가 추가되고, 추가된 시간을 나타내는 콜아웃이 2초 동안 표시됩니다.

클래스를 다른 코드에서도 활용할 수 있도록 준비하기

지금까지 커스텀 카운트다운 타이머 클래스를 직접 생성하고 Verse로 제작된 장치를 사용해 타이머를 인스턴스화하고 제어했습니다.

어떤 코드에서든 커스텀 클래스를 직접 생성했다면 어떤 코드에서 액세스할 수 있는지 명시하는 것이 중요합니다. 예를 들어, 카운트다운 타이머의 UI는 카운트다운 타이머에서만 생성하고 변경할 수 있어야 합니다. Verse에서는 액세스 지정자를 사용하여 코드의 액세스 레벨을 설정할 수 있습니다.

다른 코드에서 액세스할 수 있게 만들려면 식별자에 public 지정자를 추가합니다. public으로 선언하면 어디서든 해당 식별자에 액세스할 수 있습니다. 이 예시에서는 countdown_timer_example 장치에서 사용하는 다음 식별자가 public 액세스 레벨을 가져야 합니다.

• CountdownEndedEvent<public> : event() = event(){}

• StartCountdown<public>() : void =

• AddRemainingTime<public>(Time : float) : void =

다른 코드에서 액세스할 수 없게 만들려면 식별자에 private 지정자를 추가합니다. private으로 선언하면 해당 식별자는 이 예시의 countdown_timer 클래스처럼 식별자를 현재 바로 감싸고 있는 스코프에서만 액세스할 수 있습니다.

이 예시에서는 다음 식별자가 private 액세스 레벨을 가져야 합니다.

• RemainingTimeWidget<private> : text_block = text_block{DefaultTextColor := NamedColors.White}

• AddedTimeWidget<private> : text_block = text_block{DefaultTextColor := NamedColors.White}

• AddedTimeText<localizes><private>(AddedTime : int) : message = " +{AddedTime}!"

• RemainingTimeText<localizes><private>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"

• var Canvas<private> : canvas = canvas{}

• TimerTickPeriod<private> : float = 1.0

• RunCountdown<private>()<suspends> : void =

• AddedTimeCallout<private>(Time : float)<suspends> : void =

• UpdateUI<private>() : void =

생성자를 사용하여 클래스의 변수를 노출하지 않으면서도 새 클래스 인스턴스의 초기 값을 설정할 수 있습니다. 생성자는 관련 클래스의 인스턴스를 생성하는 특수 함수입니다.

RemainingTime 변수와 MaybePlayerUI 변수를 업데이트하는 countdown_timer 클래스의 생성자를 만듭니다.

MakeCountdownTimer<constructor><public>(MaxTime : float, InPlayer : agent) := countdown_timer:
    RemainingTime := MaxTime
    MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}

생성자 안에서 설정된 RemainingTime 변수와 MaybePlayerUI 변수는 public 액세스 레벨을 가져서는 안 되지만, 생성자 안에서 설정되었다면 private 액세스 레벨을 가져서도 안 됩니다. 따라서 현재 바로 감싸고 있는 모듈에서만 액세스할 수 있도록 internal 지정자를 사용합니다.

• MaybePlayerUI<internal> : ?player_ui = false

• var RemainingTime<internal> : float = 0.0

완성된 코드

다음 코드는 커스텀 카운트다운 타이머를 만드는 완성된 코드입니다.

이 예시에는 생성된 Verse 파일이 2개 있습니다.

countdown_timer.verse

using { /UnrealEngine.com/Temporary/Diagnostics }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /Verse.org/Simulation }
using { /Fortnite.com/UI }

MakeCountdownTimer<constructor><public>(MaxTime : float, InPlayer : agent) := countdown_timer:
    RemainingTime := MaxTime
    MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}

countdown_timer_example.verse

using { /Verse.org/Simulation }
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/UI }

countdown_timer_example := class(creative_device):

    @editable
    AddMoreTimeButton : button_device = button_device{}

    @editable

직접 해보기

이 가이드를 통해 커스텀 카운트다운 타이머를 만드는 방법을 학습했습니다.

여기에서 배운 것을 활용하여 다음과 같은 작업을 해보세요.

• 타이머의 틱 속도를 변경하고 틱마다 발생하는 이벤트를 추가하기

• 타이머에 일시정지, 재개, 재시작 기능 추가하기