ログインメニューを追加する - デバイスIDでログインする - (Unreal Engine モジュール)

Last updated on February 4, 2026

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

メニューの内容​

このチュートリアルでは、後で AccelByte Gaming Services (AGS) にログインリクエストを送信するために使用できる、シンプルなログインメニューウィジェットを準備する方法を学びます。

ログインメニューのファイルは リソース セクションで入手でき、以下で構成されています:

  • LoginWidget_Starter - 実装の大部分を保持します。
    • Header ファイル: /Source/AccelByteWars/TutorialModules/Access/AuthEssentials/UI/LoginWidget_Starter.h
    • CPP ファイル: /Source/AccelByteWars/TutorialModules/Access/AuthEssentials/UI/LoginWidget_Starter.cpp
  • W_Login_Starter - エンジンに組み込まれている Unreal Motion Graphics (UMG) を使用して作成および設計されています。
    • Widget Blueprint ファイル: /Content/TutorialModules/Access/AuthEssentials/UI/W_Login_Starter.uasset
備考

UMG の詳細については、UMG UI Designer を参照してください。

ログインメニューには3つの状態があります:

  • Default: 利用可能なログイン方法を表示します。
  • Logging In: ログインリクエストが AGS に送信され、レスポンスを待機しています。
  • Failed Login: ログインレスポンスが失敗し、ウィジェットはリトライまたはゲームを終了するオプションを表示します。

ログインレスポンスの結果が成功した場合、ゲームはユーザーをメインメニューに誘導します。

状態の変更は、ログインに含まれる Widget Switcher コンポーネントを使用して可能になります。各状態の UI コンポーネントは、Widget Switcher の子として Vertical Box コンポーネントの下にグループ化されています。これはタブコントロールのように機能し、その子を切り替えます。

以下は、C++ ヘッダーファイルでの Widget Switcher コンポーネントの宣言です。

public:
// ...
	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UWidgetSwitcher* Ws_LoginState;

Widget Switcher を使用して状態を変更できるようにするには、以下のヘルパー関数を使用します。コントローラーのフォーカスは、選択されたアクティブなウィジェットの下にあるボタンに設定されます。以下のコードには FTUE 関連の関数が含まれていますが、これらは Byte Wars 固有の First Time User Experience ダイアログを処理する関数であり、このチュートリアルでは無視できます。

void ULoginWidget_Starter::SetLoginState(const ELoginState NewState) const
{
	UWidget* WidgetToActivate;

	switch (NewState)
	{
	case ELoginState::Default:
		WidgetToActivate = Vb_LoginOptions;
		Btn_LoginWithDeviceId->SetUserFocus(GetOwningPlayer());
		InitializeFTUEDialogues(true);
		break;
	case ELoginState::LoggingIn:
		WidgetToActivate = Vb_LoginLoading;
		DeinitializeFTUEDialogues();
		HideFTUEDevHelpButton();
		break;
	case ELoginState::Failed:
		WidgetToActivate = Vb_LoginFailed;
		Btn_RetryLogin->SetUserFocus(GetOwningPlayer());
		DeinitializeFTUEDialogues();
		break;
	default:
		WidgetToActivate = Vb_LoginOptions;
		Btn_LoginWithDeviceId->SetUserFocus(GetOwningPlayer());
		InitializeFTUEDialogues(true);
		break;
	}

	Ws_LoginState->SetActiveWidget(WidgetToActivate);
}
備考

Widget Switcher の詳細については、Unreal Engine API Reference を参照してください。

Default 状態​

Default 状態は、Btn_LoginWithDeviceId というログインボタンを表示し、C++ 親クラスにバインドされています。ボタンタイプとして Common Button Base を使用します。

以下のコードは、ヘッダーファイルクラスでのボタン宣言です:

private:
// ...
	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UCommonButtonBase* Btn_LoginWithDeviceId;

以下は、デフォルト状態のウィジェットブループリントプレビューです。

Widget blueprint preview default menu state

Logging In 状態​

Logging In 状態は、ログインリクエストが進行中のときにテキストとスピナーを表示します。

Logging in state menu preview

Failed 状態​

Failed 状態は、ログインが失敗したときにエラーメッセージを表示し、Btn_RetryLogin と Btn_QuitGame ボタンが配置されています。また、AGS OSS から送られてくるエラーメッセージを表示するための Text Block コンポーネントもあります。

private:
// ...
	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UCommonButtonBase* Btn_RetryLogin;

	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UCommonButtonBase* Btn_QuitGame;

	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UTextBlock* Tb_FailedMessage;

Text block component preview image

UI を準備する​

このセクションでは、AGS OSS ログイン統合のために UI を準備します。

  1. IDE を使用して AccelByteWars.sln を開きます。ソリューションエクスプローラーから、LoginWidget_Starter クラスの CPP ファイルを開きます。次に、以下のコードを OnLoginWithDeviceIdButtonClicked() 関数に追加します。このコードは、ログイン状態を Logging In に設定し、デバイス ID でのリトライログインにデリゲートをバインドします。

    void ULoginWidget_Starter::OnLoginWithDeviceIdButtonClicked()
    {
    	SetLoginState(ELoginState::LoggingIn);
    	OnRetryLoginDelegate.AddUObject(this, &ThisClass::OnLoginWithDeviceIdButtonClicked);
    // ...
    }

  2. 次に、AccelByteWars プロジェクトをビルドし、Unreal Editor で開きます。

  3. Content Browser から、/Content/TutorialModules/Access/AuthEssentials/UI/ に移動し、W_Login_Starter を開きます。UMG エディターに新しいメニューが表示されます。Bind Widgets タブですべてのウィジェットが適切にバインドされていること、および Widget Blueprint の Parent class が LoginWidget_Starter に設定されていることを確認してください。

    Bind widgets with the UMG editor in Unreal

  4. Content Browser から、Content/TutorialModules/Access/AuthEssentials/DA_AuthEssentials.uasset を開き、Is Starter Mode Active を有効にして、Data Asset を保存します。

    Enable Is Starter Mode Active and Save the data asset

  5. エディターでゲームをプレイします。Login with Device ID をクリックすると、状態が "Logging In" に変わります。

リソース​

に最終更新
On this page