チャレンジメニューを追加する - チャレンジ - (Unity モジュール)
注釈:本資料はAI技術を用いて翻訳されています。
メニューの内容
このチュートリアルでは、チャレンジを表示するために使用されるメニューを準備する方法を学びます。メニューはリソースセクションで利用可能で、以下のファイルで構成されています:
-
ChallengePeriodMenu: チャレンジ期間の選択を表示するための C# メニュークラス。
- C# ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengePeriodMenu.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengePeriodMenu.prefab
- C# ファイル:
-
ChallengeMenu_Starter: チャレンジゴールのリストを表示するための C# メニュークラス。
- C# ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengeMenu_Starter.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengeEntry_Starter.prefab
- C# ファイル:
-
ChallengeEntry_Starter: 個別のチャレンジゴールとその報酬を表示するための C# メニューエントリークラス。
- C# ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengeEntry_Starter.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengeEntry_Starter.prefab
- C# ファイル:
-
ChallengeGoalRewardEntry: 個別のチャレンジゴールの報酬を表示するための C# メニューエントリークラス。
- C# ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengeGoalRewardEntry.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengeGoalRewardEntry.prefab
- C# ファイル:
これらのメニューがどのように構築されているかの詳細を見てみましょう。
チャレンジ期間メニュー
以下は ChallengePeriodMenu Prefab のプレビューです。このメニューは、Byte Wars でプレイヤーがチャレンジ期間を選択できるボタンを表示します: All Time、Daily、Weekly。これらのボタンのいずれかがクリックされると、対応するゴールのリストを表示するチャレンジメニューにリダイレクトされます。

上記のボタンは、ChallengePeriodMenu クラスの C# ファイルで宣言されています。
[SerializeField] private Button allTimeButton;
[SerializeField] private Button dailyButton;
[SerializeField] private Button weeklyButton;
上記のボタンがクリックされると、選択されたチャレンジ期間がこのプロパティに保存されます。
public static ChallengeRotation SelectedPeriod { get; private set; }
チャレンジメニュー
以下は ChallengeMenu_Starter Prefab のプレビューです。このメニューは、ChallengePeriodMenu メニューから選択された期間に基づいてチャレンジゴールのリストを表示します。各チャレンジゴールエントリーは、ChallengeEntry_Starter メニューを使用して表示されます。

上記の UI コンポーネントは、ChallengeMenu_Starter クラスの C# ファイルで宣言されています。
[SerializeField] private ChallengeEntry_Starter challengeEntryPrefab;
[SerializeField] private AccelByteWarsWidgetSwitcher widgetSwitcher;
[SerializeField] private TMP_Text challengeTitleText;
[SerializeField] private Transform challengeListPanel;
widgetSwitcher は、デフォルト、ローディング、エラー状態を含むメニュー状態を変更するために使用されます。challengeListPanel は、challengeEntryPrefab インスタンスをインスタンス化することで個別のチャレンジゴールエントリーが表示される場所です。最後に、challengeTitleText はメニューのタイトルを参照し、選択されたチャレンジ期間に基づいて更新できるようにします。
チャレンジエントリー
以下は ChallengeEntry_Starter Prefab のプレビューです。この UI は、ゴール名、進捗、残り時間、報酬、クレームボタンなど、個別のチャレンジゴール情報を表示します。

上記の UI コンポーネントは、ChallengeEntry_Starter クラスの C# ファイルで宣言されています。
[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;
rewardPanel は、rewardEntryPrefab インスタンスをインスタンス化することで個別の報酬エントリーが表示される場所です。その他のコンポーネントは、完了ステータス、ゴール名、進捗など、チャレンジゴールの詳細を表示するために使用されます。
チャレンジゴール報酬エントリー
以下は ChallengeGoalRewardEntry Prefab のプレビューです。この UI は、数量やアイコンなど、個別のチャレンジゴール報酬情報を表示します。

上記のコンポーネントは、ChallengeGoalRewardEntry クラスの C# ファイルで宣言されています。
[SerializeField] private AccelByteWarsAsyncImage rewardImage;
[SerializeField] private TMP_Text rewardValueText;
UI を準備する
このセクションでは、メニューを準備する方法を学びます。
-
ChallengeMenu_Starterクラスを開き、以下の関数を作成します。この関数は、チャレンジゴールのリストをクエリし、チュートリアルの後のセクションでそれらを表示するために使用します。今のところ、ローディング状態を表示するために以下のコードを追加します。private void GetChallengeGoalList()
{
widgetSwitcher.SetWidgetState(AccelByteWarsWidgetSwitcher.WidgetState.Loading);
} -
次に、事前定義された
OnEnable()関数を以下のコードに置き換えます。このコードは、先ほど作成したGetChallengeGoalList()関数を呼び出し、ChallengePeriodMenuメニューから選択されたチャレンジ期間に基づいてメニューのタイトルテキストを設定します。private void OnEnable()
{
// 選択されたチャレンジ期間に基づいてメニュータイトルを設定します。
challengeTitleText.text =
ChallengePeriodMenu.SelectedPeriod == ChallengeRotation.None ?
AllTimeChallengeTitleLabel :
string.Format(PeriodicChallengeTitleLabel, ChallengePeriodMenu.SelectedPeriod.ToString());
// チャレンジゴールリストを取得して表示します。
GetChallengeGoalList();
} -
プロジェクトをビルドし、Unity エディターで開きます。エディターで、
Assets/Resources/Modules/Engagement/ChallengeEssentialsに移動し、ChallengeEssentialsAssetConfig.assetを開きます。次に、Is ActiveチェックボックスとIs Starter Activeチェックボックスにチェックを入れて、スターターモードでモジュールをアクティブ化します。 -
エディターでゲームをプレイし、ログインすると、メインメニューから Challenges に移動し、チャレンジ期間を選択してチャレンジリストを開くことができます。チャレンジメニューがローディング状態になっていることがわかります。後で、この動作を変更して、実際にチャレンジゴールリストをロードするようにします。
リソース
-
このチュートリアルセクションで使用されるファイルは、Unity Byte Wars GitHub リポジトリで利用可能です。
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengePeriodMenu.prefab
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengePeriodMenu.cs
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengeMenu_Starter.prefab
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengeMenu_Starter.cs
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengeEntry_Starter.uasset
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengeEntry_Starter.cs
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Prefabs/ChallengeGoalRewardEntry.prefab
- Assets/Resources/Modules/Engagement/ChallengeEssentials/Scripts/UI/ChallengeGoalRewardEntry.cs