リーダーボードメニューの概要 - 毎週のリーダーボード - (Unity モジュール)
注釈:本資料はAI技術を用いて翻訳されています。
メニューの内容
このチュートリアルでは、定期的なリーダーボードを表示するために使用するメニューの準備方法を学びます。これらのメニューは、前のモジュールの全期間リーダーボードで使用したものと同じなので、すでに馴染みがあるかもしれません。メニューはリソースセクションで利用可能で、以下のファイルで構成されています:
-
LeaderboardsMenu: Byte Wars のゲームモード(シングルプレイヤー、エリミネーション、チームデスマッチ)に基づいてリーダーボードタイプを選択するボタンを表示する C# クラスです。このクラスを使用して、表示するリーダーボードを選択します。
- C# ファイル:
Assets/Resources/Modules/Engagement/LeaderboardEssentials/Scripts/UI/LeaderboardsMenu.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/LeaderboardEssentials/Prefabs/LeaderboardsMenu.prefab
- C# ファイル:
-
LeaderboardPeriodMenu: リーダーボードの期間を選択するボタンを表示する C# クラスです。
- C# ファイル:
Assets/Resources/Modules/Engagement/LeaderboardEssentials/Scripts/UI/LeaderboardPeriodMenu.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/LeaderboardEssentials/Prefabs/LeaderboardPeriodMenu.prefab
- C# ファイル:
-
PeriodicLeaderboardMenu_Starter: 定期的なリーダーボードのランキングを表示するために使用される C# クラスです。
- C# ファイル:
Assets/Resources/Modules/Engagement/PeriodicLeaderboard/Scripts/UI/PeriodicLeaderboardMenu_Starter.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/PeriodicLeaderboard/Prefabs/PeriodicLeaderboardMenu_Starter.prefab
- C# ファイル:
-
LeaderboardEntry: プレイヤーのランクやスコアなど、個々のプレイヤーのリーダーボード情報を表示するために使用される C# クラスです。
- C# ファイル:
Assets/Resources/Modules/Engagement/LeaderboardEssentials/Scripts/UI/LeaderboardEntry.cs - Prefab ファイル:
Assets/Resources/Modules/Engagement/LeaderboardEssentials/Prefabs/LeaderboardEntry.prefab
- C# ファイル:
リーダーボードメニュー
以下は LeaderboardsMenu プレハブのプレビューです。このメニューは、Byte Wars のゲームモード(シングルプレイヤー、エリミネーション、チームデスマッチ)に基づいてリーダーボードタイプを選択するボタンを表示します。

上記のボタンは LeaderboardsMenu クラスで宣言されています:
[SerializeField] private Button singlePlayerButton;
[SerializeField] private Button eliminationButton;
[SerializeField] private Button teamDeathmatchButton;
これらのボタンのいずれかがクリックされると、以下のプロパティが設定されます。このプロパティは、リーダーボードのランキングを取得するリクエストを送信する際に、選択されたゲームモードを判断するために使用できます:
public static InGameMode SelectedGameMode { get; private set; }
リーダーボード期間メニュー
以下は LeaderboardPeriodMenu プレハブのプレビューです。このメニューは、リーダーボードの期間を選択するボタンを表示します。リーダーボードの期間には、全期間とサイクルの2種類があります。このチュートリアルでは、毎週のリーダーボード期間を実装します。

いずれかのボタンがクリックされると、以下のプロパティが設定されます。このプロパティは、リーダーボードのランキングを取得するリクエストを送信する際に、選択された期間を判断するために使用できます:
public static StatisticCycleType SelectedPeriod { get; private set; }
定期的なリーダーボードメニュー
このメニューは、リーダーボードの期間に基づいて、プレイヤーの表示名とスコアを含む個々のリーダーボードランキングを表示します。個々のエントリは LeaderboardEntry プレハブを使用して表示されます。リストには、限られた数のリーダーボードランキング(例:上位10人のプレイヤー)のみが表示されます。現在ログインしているプレイヤーが上位リストに含まれていない場合、そのランキングはメニューの下部に表示されます。以下は PeriodicLeaderboardMenu_Starter プレハブのプレビューです。

上記のコンポーネントは PeriodicLeaderboardMenu_Starter クラスで宣言されています:
[SerializeField] private LeaderboardEntry leaderboardEntryPrefab;
[SerializeField] private LeaderboardEntry playerLeaderboardEntry;
[SerializeField] private AccelByteWarsWidgetSwitcher widgetSwitcher;
[SerializeField] private Transform leaderboardListPanel;
widgetSwitcherは、メニューの状態(デフォルト、読み込み中、エラー)を切り替えるために使用されるヘルパーコンポーネントです。leaderboardListPanelは、リーダーボードエントリが表示されるコンテナです。leaderboardEntryPrefabは、個々のエントリをインスタンス化するために使用されるLeaderboardEntryプレハブへの参照です。playerLeaderboardEntryは、現在ログインしているプレイヤーのリーダーボードランクを表示するために使用されます。
リーダーボードエントリ
以下は LeaderboardEntry プレハブのプレビューです。プレイヤーの表示名、ランク、スコアを含む個々のリーダーボードランキングを表示します。

上記のコンポーネントは LeaderboardEntry クラスで宣言されています:
[SerializeField] private TMP_Text rankText;
[SerializeField] private TMP_Text displayNameText;
[SerializeField] private TMP_Text scoreText;
ランキング情報を設定するために、LeaderboardEntry クラスは以下のメソッドを提供します:
public void SetRankingDetails(string userId, int rank, string displayName, float score)
{
displayNameText.text = displayName;
rankText.text = $"{rank}";
scoreText.text = $"{score}";
}
表示された情報をリセットするために、LeaderboardEntry クラスは以下のメソッドを提供します:
public void Reset()
{
displayNameText.text = LeaderboardEssentialsModels.UnrankedMessage;
rankText.text = "?";
scoreText.text = "";
}
UI の準備
このセクションでは、定期的なリーダーボードの統合を開始するために、前述のメニューを準備します。
-
PeriodicLeaderboardMenu_Starterクラスを開き、以下の関数を作成します。この関数は後で定期的なリーダーボードのランキングを取得するリクエストを送信するために使用します。今のところ、以下のコードを追加してメニューを読み込み状態に切り替えます:private void DisplayRankingList()
{
widgetSwitcher.SetWidgetState(AccelByteWarsWidgetSwitcher.WidgetState.Loading);
} -
次に、現在ログインしているプレイヤーのリーダーボードランクを設定する以下の関数を作成します:
private void DisplayPlayerRanking(UserCycleRanking playerCycleRanking)
{
// If current logged-in player is not ranked, display empty entry. Else, display the rank.
if (playerCycleRanking == null)
{
playerLeaderboardEntry.Reset();
return;
}
playerLeaderboardEntry.SetRankingDetails(
GameData.CachedPlayerState.PlayerId,
playerCycleRanking.Rank,
LeaderboardEssentialsModels.RankedMessage,
playerCycleRanking.Point);
} -
次に、事前定義された
OnEnable()関数に、メニューが表示されたときにDisplayRankingList()を呼び出す以下のコードを追加します:private void OnEnable()
{
DisplayRankingList();
} -
Unity エディタで、
Assets/Resources/Modules/Engagement/PeriodicLeaderboardに移動し、PeriodicLeaderboardAssetConfig.assetファイルを開きます。Is Active と Is Starter Active の両方のチェックボックスにチェックを入れて、スターターモードでモジュールを有効化してください。 -
エディタでゲームをプレイします。メインメニュー > リーダーボードに移動し、ゲームモードと期間を選択すると、読み込み状態のリストメニューが表示されます。
リソース
-
このチュートリアルで使用されるファイルは、Unity Byte Wars GitHub リポジトリで利用可能です。
- Assets/Resources/Modules/Engagement/LeaderboardEssentials/Scripts/UI/LeaderboardsMenu.cs
- Assets/Resources/Modules/Engagement/LeaderboardEssentials/Prefabs/LeaderboardsMenu.prefab
- Assets/Resources/Modules/Engagement/LeaderboardEssentials/Scripts/UI/LeaderboardPeriodMenu.cs
- Assets/Resources/Modules/Engagement/LeaderboardEssentials/Prefabs/LeaderboardPeriodMenu.prefab
- Assets/Resources/Modules/Engagement/PeriodicLeaderboard/Scripts/UI/PeriodicLeaderboardMenu_Starter.cs
- Assets/Resources/Modules/Engagement/PeriodicLeaderboard/Prefabs/PeriodicLeaderboardMenu_Starter.prefab
- Assets/Resources/Modules/Engagement/LeaderboardEssentials/Scripts/UI/LeaderboardEntry.cs
- Assets/Resources/Modules/Engagement/LeaderboardEssentials/Prefabs/LeaderboardEntry.prefab