メインコンテンツまでスキップ

最近のプレイヤーメニューを追加 - 最近のプレイヤー - (Unreal Engine モジュール)

Last updated on February 4, 2026

注釈:本資料はAI技術を用いて翻訳されています。

メニューの内容

このチュートリアルでは、最近のプレイヤーリストとゲームセッションプレイヤーリストを表示するために使用するウィジェットについて学習します。ウィジェットはリソースセクションで利用可能で、以下のクラスで定義されています。

  • RecentPlayersWidget_Starter: 最近のプレイヤーリストを表示する関数を呼び出すために使用するC++クラスです。
    • ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Social/RecentPlayers/UI/RecentPlayersWidget_Starter.h
    • CPPファイル: /Source/AccelByteWars/TutorialModules/Social/RecentPlayers/UI/RecentPlayersWidget_Starter.cpp
    • Blueprintウィジェット: /Content/TutorialModules/Social/RecentPlayers/UI/W_RecentPlayers_Starter.uasset
  • PlayersListWidget_Starter: 実行中のゲームセッションのプレイヤーリストを表示する関数を呼び出すために使用するC++クラスです。
    • ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Social/RecentPlayers/UI/PlayersListWidget_Starter.h
    • CPPファイル: /Source/AccelByteWars/TutorialModules/Social/RecentPlayers/UI/PlayersListWidget_Starter.cpp
    • Blueprintウィジェット: /Content/TutorialModules/Social/RecentPlayers/UI/W_PlayersList_Starter.uasset
  • FriendWidgetEntry: 最近のプレイヤーとゲームセッションプレイヤーリストのエントリを表示するために使用するC++クラスです。
    • ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Social/FriendsEssentials/UI/FriendWidgetEntry.h
    • CPPファイル: /Source/AccelByteWars/TutorialModules/Social/FriendsEssentials/UI/FriendWidgetEntry.cpp
    • Blueprintウィジェット: /Content/TutorialModules/Social/FriendsEssentials/UI/W_FriendEntry.uasset

これらのウィジェットがどのように構築されているかの詳細を見てみましょう。

最近のプレイヤーウィジェット

このウィジェットは、最近一緒にゲームセッションをプレイしたプレイヤーを含む最近のプレイヤーリストを表示します。リクエストステータスの各状態を表すいくつかの状態があります:空、読み込み中、エラー、空でない(最近のプレイヤーリストを表示)。これらの状態は、カスタムWidget Switcher: UAccelByteWarsWidgetSwitcherを使用して実現されます。リスト自体は、エントリウィジェットクラスを受け取り、エントリを動的に生成するTile Viewを使用して作成されます。以下はW_RecentPlayers_Starter Blueprintウィジェットのプレビューです。

Recent players widget Unreal Byte Wars recent players

最近のプレイヤーリストを表示するUIコンポーネントは、RecentPlayersWidget_Starterクラスのヘッダーファイルで定義されています。

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

UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UTileView* Tv_RecentPlayers;

ゲームセッションプレイヤーリストウィジェット

このウィジェットは、実行中のゲームセッションのプレイヤーリストを表示します。リクエストステータスの各状態を表すいくつかの状態があります:空、読み込み中、エラー、空でない(最近のプレイヤーリストを表示)。これらの状態は、カスタムWidget Switcher: UAccelByteWarsWidgetSwitcherを使用して実現されます。リスト自体は、エントリウィジェットクラスを受け取り、エントリを動的に生成するTile Viewを使用して作成されます。以下はW_PlayersList_Starter Blueprintウィジェットのプレビューです。

Game session player list widget Unreal Byte Wars recent players

最近のプレイヤーリストを表示するUIコンポーネントは、PlayersListWidget_Starterクラスのヘッダーファイルで定義されています。

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

UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UTileView* Tv_PlayersList;

プレイヤーエントリウィジェット

フレンド関連のチュートリアルモジュールでW_FriendEntryウィジェットを使用しました。このモジュールでは、このウィジェットを再利用して、表示名やプレイヤーステータスを含む個々の最近のプレイヤーとゲームセッションプレイヤー情報を表示します。以下はウィジェットのプレビューです。

Player entry widget Unreal Byte Wars recent players

UIの準備

このセクションでは、モジュールの残りの部分に従うことができるようにウィジェットを準備します。

  1. RecentPlayersWidget_Starterクラスのヘッダーファイルを開き、以下の関数とデリゲートを宣言します。

    protected:
    // ...
    void InitRecentPlayersList();
    void OnRecentPlayerEntryClicked(UObject* Item);
    // ...
    FDelegateHandle OnRecentPlayersListUpdatedDelegateHandle;
    private:
    void OnQueryRecentPlayerComplete(const FUniqueNetId& UserId, const FString& Namespace, bool bWasSuccessful, const FString& Error);
    FOnQueryRecentPlayersCompleteDelegate OnQueryRecentPlayersCompletedDelegate;
  2. RecentPlayersWidget_StarterクラスのCPPファイルを開きます。次に、InitRecentPlayersList()を定義します。この関数を使用して、ウィジェットが表示されたときに最近のプレイヤーを取得して表示します。今のところ、関数は空のままにしておくことができます。

    void URecentPlayersWidget_Starter::InitRecentPlayersList()
    {
    // ...
    }
  3. 次に、以下のコードを追加してOnRecentPlayerEntryClicked()を定義します。この関数を使用して、エントリウィジェットがクリックされたときにプレイヤー詳細メニューを開きます。プレイヤー詳細メニューでは、フレンドとして招待したり、パーティーに招待したりするなど、他のチュートリアルモジュールで実装したアクションを実行できます。

    void URecentPlayersWidget_Starter::OnRecentPlayerEntryClicked(UObject* Item) 
    {
    if (!Item)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. The recent player entry's object item is not valid."));
    return;
    }

    UFriendData* FriendData = Cast<UFriendData>(Item);
    if (!FriendData)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. The recent player entry's friend data is not valid."));
    return;
    }

    UAccelByteWarsBaseUI* BaseUIWidget = Cast<UAccelByteWarsBaseUI>(GameInstance->GetBaseUIWidget());
    if (!BaseUIWidget)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. Base UI widget is not valid."));
    return;
    }

    UFriendDetailsWidget* DetailsWidget = Cast<UFriendDetailsWidget>(BaseUIWidget->PushWidgetToStack(EBaseUIStackType::Menu, RecentPlayerDetailsWidgetClass));
    if (!DetailsWidget)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. Recent player details widget is not valid."));
    return;
    }

    DetailsWidget->InitData(FriendData);
    }
  4. OnQueryRecentPlayerComplete()関数を定義します。この関数を使用して、ウィジェット上の最近のプレイヤーリストを更新します。この関数は、最近のプレイヤーリストがクエリされるたびに呼び出されます。後で、ゲームセッションが終了したときに最近のプレイヤーをクエリします。今のところ、関数は空のままにしておくことができます。

    void URecentPlayersWidget_Starter::OnQueryRecentPlayerComplete(const FUniqueNetId& UserId, const FString& Namespace,
    bool bWasSuccessful, const FString& Error)
    {
    // ...
    }
  5. 次に、事前定義されたNativeOnActivated()関数を見つけます。この関数は、ウィジェットが表示されたときに呼び出されます。この関数で、以下のコードを追加してUIコンポーネントを初期化します。

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

    Btn_Back->OnClicked().AddUObject(this, &ThisClass::DeactivateWidget);

    // Reset widgets.
    Ws_RecentPlayers->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Loading);
    Tv_RecentPlayers->ClearListItems();

    Tv_RecentPlayers->OnItemClicked().AddUObject(this, &ThisClass::OnRecentPlayerEntryClicked);
    // ...
    }
  6. 次に、事前定義されたNativeOnDeactivated()関数を見つけます。この関数は、ウィジェットが非アクティブ化されたときに呼び出されます。この関数で、以下のコードを追加してUIコンポーネントを非初期化します。

    void URecentPlayersWidget_Starter::NativeOnDeactivated()
    {
    Btn_Back->OnClicked().Clear();
    Tv_RecentPlayers->OnItemClicked().Clear();
    // ...
    Super::NativeOnDeactivated();
    }
  7. 次に、PlayersListWidget_Starterクラスのヘッダーファイルを開き、以下の関数とデリゲートを宣言します。

    protected:
    // ...
    void InitGameSessionPlayersList();
    void OnPlayersListEntryClicked(UObject* Item);
    #if ENGINE_MAJOR_VERSION >= 5 && ENGINE_MINOR_VERSION >= 5
    void OnSessionParticipantsJoined(FName SessionName, const FUniqueNetId& User);
    #else
    void OnSessionParticipantsChanged(FName SessionName, const FUniqueNetId& User, bool bJoined);
    #endif
  8. PlayersListWidget_StarterクラスのCPPファイルを開きます。次に、InitGameSessionPlayersList()を定義します。この関数を使用して、ウィジェットが表示されたときにゲームセッションプレイヤーリストを取得して表示します。今のところ、関数は空のままにしておくことができます。

    void UPlayersListWidget_Starter::InitGameSessionPlayersList()
    {
    // ...
    }
  9. 次に、以下のコードを追加してOnPlayersListEntryClicked()を定義します。この関数を使用して、エントリウィジェットがクリックされたときにプレイヤー詳細メニューを開きます。プレイヤー詳細メニューでは、フレンドとして招待するなど、他のモジュールで実装したアクションを実行できます。

    void UPlayersListWidget_Starter::OnPlayersListEntryClicked(UObject* Item)
    {
    if (!Item)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. The recent player entry's object item is not valid."));
    return;
    }

    UFriendData* FriendData = Cast<UFriendData>(Item);
    if (!FriendData)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. The recent player entry's friend data is not valid."));
    return;
    }

    UAccelByteWarsBaseUI* BaseUIWidget = Cast<UAccelByteWarsBaseUI>(GameInstance->GetBaseUIWidget());
    if (!BaseUIWidget)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. Base UI widget is not valid."));
    return;
    }

    UFriendDetailsWidget* DetailsWidget = Cast<UFriendDetailsWidget>(BaseUIWidget->PushWidgetToStack(EBaseUIStackType::InGameMenu, PlayersListDetailsWidgetClass));
    if (!DetailsWidget)
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Unable to handle recent player entry on-click event. Recent player details widget is not valid."));
    return;
    }

    DetailsWidget->InitData(FriendData);
    }
  10. 以下のコードを追加して、OnSessionParticipantsJoined()OnSessionParticipantsChanged()関数を定義します。この関数を使用して、ウィジェット上のゲームセッションプレイヤーリストを更新します。後で、ゲームセッションメンバーが変更されるたびに呼び出されるように、この関数をバインドします。

    #if ENGINE_MAJOR_VERSION >= 5 && ENGINE_MINOR_VERSION >= 5
    void UPlayersListWidget_Starter::OnSessionParticipantsJoined(FName SessionName, const FUniqueNetId& User)
    {
    if (SessionName.IsEqual(NAME_GameSession))
    {
    if (!Tv_PlayersList->GetListItems().ContainsByPredicate([&User](UObject* Object)
    {
    UFriendData* PlayerData = StaticCast<UFriendData*>(Object);
    if (PlayerData)
    {
    return User == *PlayerData->UserId.Get();
    }
    return false;
    }))
    {
    Tv_PlayersList->ClearListItems();
    InitGameSessionPlayersList();
    }
    }
    else
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Player list not game session"));
    }
    }
    #else
    void UPlayersListWidget_Starter::OnSessionParticipantsChanged(FName SessionName, const FUniqueNetId& User, bool bJoined)
    {
    if(SessionName.IsEqual(NAME_GameSession))
    {
    if(!Tv_PlayersList->GetListItems().ContainsByPredicate([&User](UObject* Object)
    {
    UFriendData* PlayerData = StaticCast<UFriendData*>(Object);
    if(PlayerData)
    {
    return User == *PlayerData->UserId.Get() ;
    }
    return false;
    }))
    {
    Tv_PlayersList->ClearListItems();
    InitGameSessionPlayersList();
    }
    }
    else
    {
    UE_LOG_RECENTPLAYERS(Warning, TEXT("Player list not game session"));
    }
    }
  11. 次に、事前定義されたNativeOnActivated()関数を見つけます。この関数は、ウィジェットが表示されたときに呼び出されます。この関数で、以下のコードを追加してUIコンポーネントを初期化します。

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

    Btn_Back->OnClicked().AddUObject(this, &ThisClass::DeactivateWidget);

    // Reset widgets.
    Ws_PlayersList->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Loading);
    Tv_PlayersList->ClearListItems();

    InitGameSessionPlayersList();

    SetInputModeToUIOnly();
    }
  12. 次に、事前定義されたNativeOnDeactivated()関数を見つけます。この関数は、ウィジェットが非アクティブ化されたときに呼び出されます。この関数で、以下のコードを追加してUIコンポーネントを非初期化します。

    void UPlayersListWidget_Starter::NativeOnDeactivated()
    {
    Super::NativeOnDeactivated();

    Btn_Back->OnClicked().Clear();
    }
  13. プロジェクトをビルドし、Unreal Engine Editorで開きます。エディターで、/Content/TutorialModules/Social/RecentPlayers/に移動します。そこに、DA_RecentPlayersというデータアセットがあります。それを開き、Is Starter Mode Activeを有効にします。次に、データアセットを保存します。これにより、ゲームをプレイするときにウィジェットをナビゲートできるようにウィジェットがアクティブ化されます。

  14. エディターでゲームをプレイし、ログインして、以下をテストします。

    • 最近のプレイヤーリストメニューを開くには、メインメニューからSocial > Recent Playersに移動します。そこに空のリストが表示されます。

    • ゲームセッションプレイヤーリストメニューを開くには、Byte Warsのマッチをプレイする必要があります。ゲームプレイレベルで、ポーズメニューを開き、Player Listに移動します。そこに空のリストが表示されます。

リソース