Add challenge menu - Challenge - (Unity module)

Last updated on July 28, 2025

What's on the menu​

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

  • ChallengePeriodMenu: A C# menu class for displaying challenge period selections.

    • C# file: Assets/Resources/Modules/ChallengeEssentials/Scripts/UI/ChallengePeriodMenu.cs
    • Prefab file: Assets/Resources/Modules/ChallengeEssentials/Prefabs/ChallengePeriodMenu.prefab

  • ChallengeMenu_Starter: A C# menu class for displaying a list of challenge goals.

    • C# file: Assets/Resources/Modules/ChallengeEssentials/Scripts/UI/ChallengeMenu_Starter.cs
    • Prefab file: Assets/Resources/Modules/ChallengeEssentials/Prefabs/ChallengeEntry_Starter.prefab

  • ChallengeEntry_Starter: A C# menu entry class for displaying an individual challenge goal and its rewards.

    • C# file: Assets/Resources/Modules/ChallengeEssentials/Scripts/UI/ChallengeEntry_Starter.cs
    • Prefab file: Assets/Resources/Modules/ChallengeEssentials/Prefabs/ChallengeEntry_Starter.prefab

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

    • C# file: Assets/Resources/Modules/ChallengeEssentials/Scripts/UI/ChallengeGoalRewardEntry.cs
    • Prefab file: Assets/Resources/Modules/ChallengeEssentials/Prefabs/ChallengeGoalRewardEntry.prefab

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

Challenge period menu​

Below is a preview of the ChallengePeriodMenu prefab. This menu 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 menu to display the corresponding list of goals.

Challenge period menu Unity Byte Wars challenge

The buttons shown above are declared in the C# file of the ChallengePeriodMenu class.

[SerializeField] private Button allTimeButton;
[SerializeField] private Button dailyButton;
[SerializeField] private Button weeklyButton;

When the buttons above is clicked, it will store the selected challenge period in this property.

public static ChallengeRotation SelectedPeriod { get; private set; }

Challenge menu​

Below is a preview of the ChallengeMenu_Starter prefab. This menu displays a list of challenge goals based on the period selected from the ChallengePeriodMenu menu. Each challenge goal entry is displayed using the ChallengeEntry_Starter menu.

Challenge menu Unity Byte Wars challenge

The UI components shown above are declared in the C# file of the ChallengeMenu_Starter class.

[SerializeField] private ChallengeEntry_Starter challengeEntryPrefab;
[SerializeField] private AccelByteWarsWidgetSwitcher widgetSwitcher;
[SerializeField] private TMP_Text challengeTitleText;
[SerializeField] private Transform challengeListPanel;

The widgetSwitcher is used to change the menu states, including the default, loading, and error states. The challengeListPanel is where the individual challenge goal entries are displayed by instantiating challengeEntryPrefab instances. Finally, the challengeTitleText refers to the title of the menu so it can be updated based on the selected challenge period.

Challenge entry​

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

Challenge entry Unity Byte Wars challenge

The UI components shown above are declared in the C# file of the ChallengeEntry_Starter class.

[SerializeField] private Transform rewardPanel;
[SerializeField] private ChallengeGoalRewardEntry rewardEntryPrefab;

[SerializeField] private Toggle statusCheckBox;
[SerializeField] private TMP_Text goalText;
[SerializeField] private TMP_Text remainingTimeText;
[SerializeField] private TMP_Text progressText;
[SerializeField] private ButtonAnimation claimButton;

The rewardPanel is where the individual reward entries are displayed by instantiating the rewardEntryPrefab instance. The other components are used to display the challenge goal details, such as the completion status, goal name, and progress.

Challenge goal reward entry​

Below is a preview of the ChallengeGoalRewardEntry prefab. This UI displays individual challenge goal reward information, such as the quantity and the icon.

Challenge goal entry Unity Byte Wars challenge

The components shown above are declared in the C# file of the ChallengeGoalRewardEntry class.

[SerializeField] private AccelByteWarsAsyncImage rewardImage;
[SerializeField] private TMP_Text rewardValueText;

Ready the UI​

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

  1. Open the ChallengeMenu_Starter class and create the function below. 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.

    private void GetChallengeGoalList()
    {
        widgetSwitcher.SetWidgetState(AccelByteWarsWidgetSwitcher.WidgetState.Loading);
    }

  2. Next, replace the pre-defined OnEnable() function with the code below. This code calls the GetChallengeGoalList() function you created earlier and sets the menu title text based on the challenge period selected from the ChallengePeriodMenu menu.

    private void OnEnable()
    {
        // Set menu title based on selected challenge period.
        challengeTitleText.text = 
            ChallengePeriodMenu.SelectedPeriod == ChallengeRotation.None ? 
            AllTimeChallengeTitleLabel : 
            string.Format(PeriodicChallengeTitleLabel, ChallengePeriodMenu.SelectedPeriod.ToString());

        // Get and display challenge goal list.
    	GetChallengeGoalList();
    }

  3. Build your project and open it in the Unity Editor. In the editor, go to Assets/Resources/Modules/ChallengeEssentials and open the ChallengeEssentialsAssetConfig.asset. Then, make sure to activate the module in starter mode by ticking the Is Active checkbox and the Is Starter Active checkbox.

  4. 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