チャットウィンドウをカスタマイズする

経験中のテキストチャットシステム、 powered by 、プレイヤーがライブエクスペリエンスで簡単にコミュニケーションし、お互いに交流できるようにします。デフォルトのテキストチャットをサポートするとともに、フロントエンドユーザーインターフェイスをカスタマイズできます。

チャットウィンドウの構成

全体のチャットウィンドウは次のようになっています：

• チャットウィンドウ
• 入力バー
• チャンネルタブ (オプション)

チャンネルタブはデフォルトで無効になっており、各コンポーネントはスタジオまたはスクリプトでオンとオフを切り替えることができまスクリプト作成：

エクスプローラー ウィンドウで、 ブランチを拡張し、 、 、または を選択します。次に、プロパティ ウィンドウでコンポーネントを有効化または無効化します。

When ChannelTabsConfiguration が有効になっていると、デフォルトの TextChannel が次の表に示すようにタブに表示されます。また、それぞれのカスタム TextChannel は、チャネチャンネルの Name プロパティに対応するタブを作成します。

ウィンドウの表外見

全体のチャットウィンドウの外観は、ChatWindowConfiguration を通じてカスタマイズ可能です。

入力バーの表外見

チャット入力バーの外観は ChatInputBarConfiguration でカスタマイズ可能です。

チャンネルタブの表外見

チャンネルタブ の外観は、ChannelTabsConfigurationを通じてカスタマイズ可能です。

メッセージをカスタマイズ

既存の UI をオーバーライドせずに ChatWindowMessageProperties および TextChatService.OnChatWindowAdded コールバックを使用して、チャットメッセージ体とプレフィックスの外観をカスタマイズできます。カスタマイズオプションでは、チャットメッセージの外観をカスタマイズして、エクスペリエンスのテーマに合わせることができ、プレフィックスの色付けや チャットタグの追加 で、異なるユーザーグループからメッセージを並べ替えたり強調したりすることもできます。

ユーザー名の色

ユーザーがチャットメッセージを送信すると、DisplayName がメッセージのプレフィックス部分として表示されます。デフォルトでは、各ユーザーの名前はそれぞれの Player.TeamColor に従って色付けされますが、ChatWindowMessageProperties と OnChatWindowAdded を使用してチャット名の色を変更できます。次の により、各ユーザーに事前に決められた色を割り当て、RGB 色のテーブルからランダムに選択します。

ローカルスクリプト - ランダムユーザー名の色
local TextChatService = game:GetService("TextChatService")

local chatWindowConfiguration = TextChatService.ChatWindowConfiguration

local nameColors = {
	Color3.fromRGB(255, 0, 0),
	Color3.fromRGB(0, 255, 0),
	Color3.fromRGB(0, 0, 255),
	Color3.fromRGB(255, 255, 0),
}

TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
	local properties = chatWindowConfiguration:DeriveNewMessageProperties()

	local textSource = message.TextSource
	if textSource then
		local index: number = (textSource.UserId % #nameColors) + 1
		local randomColor: Color3 = nameColors[index]

    	properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
		properties.PrefixTextProperties.TextColor3 = randomColor
	end

	return properties
end

UIGradient を使用して、色と透明度のグラデーションを色メッセージのプレフィックスに適用できます。

グラデーションユーザー名カラー
local TextChatService = game:GetService("TextChatService")

local chatWindowConfiguration = TextChatService.ChatWindowConfiguration

local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
	ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
	ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 255, 0)),
	ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 255))
}

TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
	local properties = chatWindowConfiguration:DeriveNewMessageProperties()

	local textSource = message.TextSource
	if textSource then
    	properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
		gradient:Clone().Parent = properties.PrefixTextProperties
	end

	return properties
end

リッチテキストのカスタマイズ

リッチテキスト フォントカラータグ は、メッセージのフォーマットを設定したい場合、メッセージの非常に特定の部分にフォーマットを適用したい場合に便利です。リッチテキストはグラデーションをサポートしていませんが、次のコードサンプルでは、ユーザー名 (保存されている TextChatMessage.PrefixText ) をメッセージ体に移動し、その後リッチテキストタグを名前のみに適用する方法を示しています。

リッチテキストのカスタマイズ
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

local chatWindowConfiguration = TextChatService.ChatWindowConfiguration

local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
	ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
	ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 255, 0)),
	ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 255))
}

TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
	local properties = chatWindowConfiguration:DeriveNewMessageProperties()

	if message.TextSource then
		properties.PrefixText = "[VIP]"
		properties.Text = string.format("<font color='#00ffff'>%s</font>", message.PrefixText) .. " " .. message.Text

		properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
		gradient:Clone().Parent = properties.PrefixTextProperties
	end

	return properties
end

プレイヤー以外のソースからメッセージを送信する

時々、公開アドレスシステムからの「スピーチ」や非プレイヤーキャラクターからの「会話」など、チャットウィンドウに非プレイヤー対話を表示したい場合があります。

システム

システムメッセージをローカルプレイヤーに配信するには、プレイヤーの表示名の前にプレフィックスを付けて、デフォルトの RBXGeneral チャネルから DisplaySystemMessage() を呼び出します。

クライアントスクリプト
local Players = game:GetService("Players")
local TextChatService = game:GetService("TextChatService")

local player = Players.LocalPlayer
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral

local PREFIX = "[Guide] Welcome "

-- 表示名を付けたプレイヤーに「システムメッセージ」を送信
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)

システムメッセージの外観をカスタマイズする方法の詳細なガイドについては、システムメッセージのカスタマイズ を参照してください。

デフォルトシステムメッセージ

When TextChatService.CreateDefaultTextChannels が true であるとき、デフォルトのテキストチャンネルの 1つは RBXSystem チャンネルです。デフォルトのチャットスクリプトは、このチャネルにシステムメッセージを自動表示します。これらのメッセージの外観をカスタマイズできるのは、TextChannel.OnIncomingMessage コールバックを使用しています。

チャットシステムによって自動的に送信されるシステムメッセージをカスタマイズまたは変更したい場合があります。デフォルトシステムメッセージはユーザーのためにローカライズされているので、外外見をカスタマイズしたい場合は TextChatMessage.Metadata で テキストチャットコールバック に参照してください。

以下は、チャットシステムによって発行されるデフォルトシステムメッセージの参照です：

NPC/オブジェкт

非プレイヤー対話をスタイル化し、チャットバブル を追加して、3D ワールド内の NPC またはオブジェクトからメッセージが来ているように見せることもできます。

クライアントスクリプト
local TextChatService = game:GetService("TextChatService")
local Workspace = game:GetService("Workspace")

local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral

TextChatService.OnIncomingMessage = function(textChatMessage: TextChatMessage)
	local properties = Instance.new("TextChatMessageProperties")

	-- メタデータを含むシステムメッセージをチェックする
	if not textChatMessage.TextSource and textChatMessage.Metadata ~= "" then

		-- プレフィックスを追加して、メッセージをプレイヤーが送信したように見せる
		properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "#50C999", textChatMessage.Metadata)

		-- バブルチャットを追加
		TextChatService:DisplayBubble(Workspace.Statue, textChatMessage.Text)
	end

	return properties
end

local message = "Welcome! I will be your guide."
local speakerName = "Ancient Knight"
generalChannel:DisplaySystemMessage(message, speakerName)