Add challenge menu - Challenge - (Unreal Engine module)

Last updated on June 24, 2025

What's on the menu​

In this tutorial, you will learn how to prepare widgets that are used to display challenges. The widgets are available in the Resources section and consist of the following files:

  • ChallengePeriodWidget_Starter: A C++ widget class for displaying challenge period selections.

    • Header file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengePeriodWidget_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengePeriodWidget_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Engagement/ChallengeEssentials/UI/W_Challenge_StarterPeriod_Starter.uasset

  • ChallengeWidget_Starter: A C++ widget class for displaying a list of challenge goals.

    • Header file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengeWidget_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengeWidget_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Engagement/ChallengeEssentials/UI/W_Challenge_Starter.uasset

  • ChallengeWidgetEntry_Starter: A C++ widget entry class for displaying an individual challenge goal and its rewards.

    • Header file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengeWidgetEntry_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengeWidgetEntry_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Engagement/ChallengeEssentials/UI/W_ChallengeEntry_Starter.uasset

  • ChallengeGoalRewardWidgetEntry: A C++ widget entry class for displaying a reward for an individual challenge goal.

    • Header file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengeGoalRewardWidgetEntry.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Engagement/ChallengeEssentials/UI/ChallengeGoalRewardWidgetEntry.cpp
    • Blueprint widget: /Content/TutorialModules/Engagement/ChallengeEssentials/UI/W_Challenge_StarterGoalRewardEntry.uasset

Take a look at more details on how these widgets are constructed.

Challenge period widget​

Below is a preview of the W_Challenge_StarterPeriod_Starter Blueprint widget. This widget displays buttons that allow the player to select a challenge period in Byte Wars: All Time, Daily, and Weekly. When one of these buttons is clicked, it redirects to the challenge widget to display the corresponding list of goals.

Challenge period widget Unreal Byte Wars challenge

The buttons shown above are declared in the header file of the ChallengePeriodWidget_Starter class.

protected:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Alltime;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Daily;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Weekly;

Challenge widget​

Below is a preview of the W_Challenge_Starter Blueprint widget. This widget displays a list of challenge goals based on the period selected from the W_Challenge_StarterPeriod_Starter widget. Each challenge goal entry is displayed using the W_ChallengeEntry_Starter widget.

Challenge widget Unreal Byte Wars challenge

The UI components shown above are declared in the header file of the ChallengeWidget_Starter class.

protected:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsWidgetSwitcher* Ws_Challenge;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UListView* Lv_Challenge;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_Title;

The selected challenge period from the W_Challenge_StarterPeriod_Starter widget is cached in this local variable.

public:
    EAccelByteModelsChallengeRotation Period = EAccelByteModelsChallengeRotation::NONE;

Challenge entry widget​

Below is a preview of the W_ChallengeEntry_Starter Blueprint widget. This widget displays individual challenge goal information, such as the goal name, progress, remaining time, rewards, and a claim button.

Challenge entry widget Unreal Byte Wars challenge

The components above are declared in the header file of the ChallengeWidgetEntry_Starter class. If the challenge goal is completed, the Ws_Progress component switches the entry to show the claim button. Otherwise, it displays the progress and remaining time. The goal rewards are displayed by the W_Challenge_StarterGoalRewardEntry widget, which is listed by the Lv_Rewards component.

protected:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCheckBox* Cb_ChallengeStatus;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_Goal;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_RemainingTime;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_Progress;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UHorizontalBox* Hb_Progress;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsButtonBase* Btn_Claim;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidgetSwitcher* Ws_Progress;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UDynamicEntryBox* Deb_Reward;

Challenge goal reward entry widget​

Below is a preview of the W_Challenge_StarterGoalRewardEntry Blueprint widget. This widget displays individual challenge goal reward information, such as the quantity and the icon.

Challenge goal entry widget Unreal Byte Wars challenge

The components shown above are declared in the header file of the ChallengeGoalRewardWidgetEntry class.

protected:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_RewardValue;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsAsyncImageWidget* Img_Reward;

Ready the UI​

In this section, you will learn how to prepare the widgets.

  1. Open the ChallengeWidget_Starter class header file and declare the function below.

    protected:
    // ...
        void GetChallengeGoalList();

  2. Open the CPP file of the ChallengeWidget_Starter class and implement the GetChallengeGoalList() function. You will use this function to query the list of challenge goals and display them in a later section of the tutorial. For now, add the code below to show a loading state.

    void UChallengeWidget_Starter::GetChallengeGoalList()
    {
    // ...
        Ws_Challenge->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Loading);
        Lv_Challenge->ClearListItems();
    // ...
    }

  3. Next, replace the pre-defined NativeOnActivated() function with the code below. This code calls the GetChallengeGoalList() function you created earlier and sets the widget title text based on the challenge period selected from the W_Challenge_StarterPeriod_Starter widget.

    void UChallengeWidget_Starter::NativeOnActivated()
    {
        Super::NativeOnActivated();

        FString PeriodStr = FAccelByteUtilities::GetUEnumValueAsString(Period).ToLower();
        if (!PeriodStr.IsEmpty()) 
        {
            PeriodStr[0] = FChar::ToUpper(PeriodStr[0]);
        }
        Tb_Title->SetText(
            Period == EAccelByteModelsChallengeRotation::NONE ? 
            ALLTIME_CHALLENGE_TITLE_LABEL : 
            FText::Format(PERIODIC_CHALLENGE_TITLE_LABEL, FText::FromString(PeriodStr)));
        
        Btn_Back->OnClicked().AddUObject(this, &ThisClass::DeactivateWidget);

        // Reset list.
        Ws_Challenge->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Empty, true);
        Lv_Challenge->ClearListItems();

        GetChallengeGoalList();
    }

  4. Build your project and open it in the Unreal Engine Editor. In the Editor, go to /Content/TutorialModules/Engagement/ChallengeEssentials/. You will find a data asset called DA_ChallengeEssentials. Open it and enable Is Starter Mode Active. Then, save the data asset. This will activate the widgets, allowing you to navigate through them when you play the game.

  5. Play the game in the Editor, log in, and you will be able to navigate from the main menu to Challenges and select the challenge period to open the challenge list. You will see the challenge menu is in the loading state. Later, you will change this behavior to actually load the challenge goal list.

Resources​

Last updated on

On this page