プライベートチャットUIの追加 - プライベートチャット - (Unreal Engineモジュール)
注釈:本資料はAI技術を用いて翻訳されています。
メニュー
このチュートリアルでは、プライベートチャットの表示と送信に使用するウィジェットの準備方法を学びます。ウィジェットはリソースセクションで入手でき、以下が含まれます:
-
PrivateChatWidget_Starter: チャットメッセージの表示と送信に使用されるC++クラス。- ヘッダーファイル:
/Source/AccelByteWars/TutorialModules/Social/PrivateChat/UI/PrivateChatWidget_Starter.h - CPPファイル:
/Source/AccelByteWars/TutorialModules/Social/PrivateChat/UI/PrivateChatWidget_Starter.cpp - Blueprintウィジェット:
/Content/TutorialModules/Social/PrivateChat/UI/W_PrivateChat_Starter.uasset
- ヘッダーファイル:
-
ChatWidget:PrivateChatWidget_Starter内で使用され、すべてのチャットエントリを表示し、送信するメッセージのユーザー入力を受け取るC++クラス。- ヘッダーファイル:
/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.h - CPPファイル:
/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.cpp - Blueprintウィジェット:
/Content/TutorialModules/Social/ChatEssentials/UI/W_Chat.uasset
- ヘッダーファイル:
-
ChatWidgetEntry:ChatWidget内で使用され、個々のチャットメッセージエントリを表示するC++クラス。- ヘッダーファイル:
/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidgetEntry.h - CPPファイル:
/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidgetEntry.cpp - Blueprintウィジェット:
/Content/TutorialModules/Social/ChatEssentials/UI/W_ChatEntry.uasset
- ヘッダーファイル:
これらのウィジェットの構成方法の詳細については、以下のセクションを参照してください。
プライベートチャットウィジェット
このウィジェットは主にW_Chat Blueprintウィジェットで構成されており、チャットの入力と表示の両方を処理します。ここでW_Chatを操作して、実際のチャットメッセージを表示および送信します。

ウィジェットコンポーネントはヘッダーファイルで宣言されています:
protected:
// ...
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UChatWidget* W_Chat;
チャットウィジェット
このウィジェットにはAccelByteWarsWidgetSwitcherが含まれており、これは事前定義された状態を持つカスタムWidget Switcherです。チャット入力用の編集可能なテキストボックス、チャットメッセージエントリを表示するリストビュー、メッセージを送信するボタンが含まれています。

ウィジェットコンポーネントはヘッダーファイルで宣言されています:
private:
// ...
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UAccelByteWarsWidgetSwitcher* Ws_ChatMessage;
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UEditableText* Edt_ChatMessage;
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UListView* Lv_ChatMessage;
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UCommonButtonBase* Btn_Send;
このウィジェットには、他のウィジェットが表示内容を制御し、プレイヤーの入力を受け取ることができるいくつかの関数とデリゲートが含まれています。これらの関数とデリゲートはヘッダーファイルで宣言されています:
public:
// ...
void AppendChatMessage(UChatData* ChatData) const;
// ...
void ClearChatMessages() const;
// ...
void ClearInput() const;
// ...
void SetWidgetState(const EAccelByteWarsWidgetSwitcherState State, const FText& StateMessage = FText::GetEmpty()) const;
// ...
int32 GetMaxChatHistory() const { return MaxChatHistory; }
// ...
FChatOnSubmit OnSubmitDelegates;
AppendChatMessage: チャットエントリを追加します。ClearChatMessages: 現在表示されているチャットエントリをクリアします。ClearInput: 入力編集可能テキストをクリアします。SetWidgetState: ウィジェットの状態をloading、error、empty、またはnot emptyに設定し、チャットエントリと入力テキストの表示を決定します。GetMaxChatHistory: 事前定義されたMaxChatHistory値を取得します。OnSubmitDelegates: プレイヤーがメッセージを入力中にEnterキーを押すか、Sendボタンをクリックしたときに呼び出されるデリゲート。
また、これらの変数にも注意してください:
protected:
UPROPERTY(EditDefaultsOnly, BlueprintReadOnly)
int32 MaxChatHistory = 10000;
UPROPERTY(EditDefaultsOnly, BlueprintReadOnly)
float SendChatCooldown = 1.0f;
// Based on the default value of chat character limit on Admin Portal
UPROPERTY(EditDefaultsOnly, BlueprintReadOnly)
int32 MaxMessageLength = 500;
MaxChatHistory: これは後でバックエンドから取得するチャット数を制限するために使用されます。SendChatCooldown: プレイヤーがチャットを送信した後、編集可能テキストと送信ボタンが無効になる時間を制御し、ゲームクライアントからのメッセージスパムを防ぎます。MaxMessageLength: 送信できるメッセージの最大長を制御します。これはバックエンドでも設定でき、後で説明します。
チャットエントリウィジェット
このウィジェットは、チャット送信者の名前とメッセージを表示するテキストで構成されています。

上記のコンポーネントはヘッダーファイルで宣言されています:
protected:
// ...
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UTextBlock* Tb_Sender;
UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UTextBlock* Tb_Message;
UIの準備
このセクションでは、前述のウィジェットを準備する方法を学び、チュートリアルに従うことができます。
-
PrivateChatWidget_Starterクラスのヘッダーファイルを開きます。次に、以下の関数を宣言します。protected:
// ...
void AppendChatMessage(const FChatMessage& Message) const;
UFUNCTION()
void SendPrivateChatMessage(const FText& MessageText);
void OnSendPrivateChatComplete(FString UserId, FString MsgBody, FString RoomId, bool bWasSuccessful);
void OnPrivateChatMessageReceived(const FUniqueNetId& UserId, const TSharedRef<FChatMessage>& Message);
void GetLastPrivateChatMessages() const; -
PrivateChatWidget_StarterクラスのCPPファイルを開き、AppendChatMessage()関数を定義して、表示するチャットメッセージを追加します。void UPrivateChatWidget_Starter::AppendChatMessage(const FChatMessage& Message) const
{
// ...
if (!ensure(GetOwningPlayer()))
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot append a private chat message to display. PlayerController is not valid."));
return;
}
const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
if (!ensure(LocalPlayer))
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot append a private chat message to display. LocalPlayer is not valid."));
return;
}
const FUniqueNetIdAccelByteUserRef SenderABId = StaticCastSharedRef<const FUniqueNetIdAccelByteUser>(Message.GetUserId());
if (!SenderABId.Get().IsValid())
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot append a private chat message to display. Sender User Id is invalid."));
return;
}
// Construct chat message.
UChatData* ChatData = NewObject<UChatData>();
ChatData->Message = Message.GetBody();
// ...
// If the sender doesn't have display name, then use the default display name.
ChatData->Sender = Message.GetNickname();
if (ChatData->Sender.IsEmpty() || SenderABId.Get().GetAccelByteId().Equals(ChatData->Sender))
{
ChatData->Sender = UTutorialModuleOnlineUtility::GetUserDefaultDisplayName(Message.GetUserId().Get());
}
// Display chat message.
W_Chat->AppendChatMessage(ChatData);
} -
引き続きCPPファイルで、
SendPrivateChatMessage()関数を定義します。この関数を使用してチャットメッセージを送信します。今のところ、セーフガードとしてこのコードを追加します:void UPrivateChatWidget_Starter::SendPrivateChatMessage(const FText& MessageText)
{
// ...
if (!ensure(GetOwningPlayer()))
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot send private chat message. PlayerController is not valid."));
return;
}
const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
if (!ensure(LocalPlayer))
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot send private chat message. LocalPlayer is not valid."));
return;
}
// ...
} -
次に、
OnSendPrivateChatComplete()関数を定義します。この関数は、新しいチャットメッセージが送信されたときのコールバックとして使用します。この関数は、新しいメッセージを表示するために追加します。void UPrivateChatWidget_Starter::OnSendPrivateChatComplete(FString UserId, FString MsgBody, FString RoomId, bool bWasSuccessful)
{
// Abort and push a notification if failed.
if (!bWasSuccessful)
{
if (PromptSubsystem)
{
PromptSubsystem->PushNotification(SEND_CHAT_FAILED_MESSAGE);
}
return;
}
// Display the chat if success.
UChatData* ChatData = NewObject<UChatData>();
ChatData->Message = MsgBody;
ChatData->bIsSenderLocal = true;
W_Chat->AppendChatMessage(ChatData);
} -
OnPrivateChatMessageReceived()関数を定義します。この関数は、新しいチャットメッセージが受信されたときのコールバックとして使用します。この関数は、新しいメッセージを表示するために追加します。void UPrivateChatWidget_Starter::OnPrivateChatMessageReceived(const FUniqueNetId& UserId, const TSharedRef<FChatMessage>& Message)
{
// Show the received chat message.
AppendChatMessage(Message.Get());
} -
最後に、
GetLastPrivateChatMessages()関数を追加します。この関数は、プレイヤーがチャットメニューにいないときに受信したメッセージを取得するために使用します。今のところ、このセーフガードコードを追加します:void UPrivateChatWidget_Starter::GetLastPrivateChatMessages() const
{
// ...
if (!ensure(GetOwningPlayer()))
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot get last private chat messages. PlayerController is not valid."));
return;
}
const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
if (!ensure(LocalPlayer))
{
UE_LOG_PRIVATECHAT(Warning, TEXT("Cannot get last private chat messages. LocalPlayer is not valid."));
return;
}
// ...
} -
プロジェクトをビルドし、Unreal Editorで開きます。
-
エディターで、コンテンツブラウザから
/Content/TutorialModules/Social/PrivateChat/に移動し、DA_PrivateChatデータアセットを開きます。Is ActiveとIs Starter Mode Activeオプションを有効にし、データアセットを保存します。これにより、準備したウィジェットがアクティブになります。 -
エディターでゲームをプレイします。ログインし、Social > Friends >任意のフレンドを選択> Chatに移動して、プライベートチャットウィジェットを開くことができるはずです。
リソース
-
このチュートリアルセクションで使用されるファイルは、Unreal Byte Wars GitHubリポジトリで入手できます。
- AccelByteWars/Content/TutorialModules/Social/PrivateChat/UI/W_PrivateChat_Starter.uasset
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/PrivateChat/UI/PrivateChatWidget_Starter.h
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/PrivateChat/UI/PrivateChatWidget_Starter.cpp
- AccelByteWars/Content/TutorialModules/Social/ChatEssentials/UI/W_Chat.uasset
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.h
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.cpp
- AccelByteWars/Content/TutorialModules/Social/ChatEssentials/UI/W_ChatEntry.uasset
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatEntryWidget.h
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatEntryWidget.cpp