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

エクスペリエンスチャットシステムは、TextChatService によって、プレイヤーがライブエクスペリエンスで簡単にコミュニケーションし、交流できます。デフォルトのテキストチャットをサポートするだけでなく、フロントエンドユーザーインターフェースをカスタマイズできます。

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

全体のチャットウィンドウは、チャットウィンドウ、入力バー、およびオプションのチャンネルタブで構成されています。

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

スタジオの エクスプローラ ウィンドウに直接、 TextChatService ブランチを拡張し、 ChatWindowConfiguration 、 2>Class.ChatInputBarConfiguration2> 、または 5>Class.ChannelTabsConfiguration5> を選択します。その後、 8>Properties

Class.ChannelTabsConfiguration が有効になると、各 デフォルト TextChannel が次の表に示すようにタブに表示されます。さらに、各 1>カスタム1> 4> Class.TextChannel4> は、チャンネルの 7> Class.Instance

ウィンドウの外観

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

インプットバーの見た目

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

チャンネルタブの見た目

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

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

Class.ChatWindowMessageProperties および TextChatService.OnChatWindowAdded コールバックを使用して、既存の UI をオーバーライドせずにチャットメッセージの外観をカスタマイズできます。カスタマイズオプションは、エクスペリエンスのテーマに合わせてチャットメッセージの

ユーザー名に色付け

ユーザーがチャットメッセージを送信すると、DisplayName

ローカルスクリプト - ランダムなユーザー名の色
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

Class.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

チャットタグを追加する

エク状況ペリエンスに VIP ステータスなどの特別な 属性 を持つユーザーがいる場合は、 チャットタグ をブラックフレームにラップしてユーザーメッセージの前に付けることで

チャットタグを追加する
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

local chatWindowConfiguration = TextChatService.ChatWindowConfiguration

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

	if message.TextSource then
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)
		if player:GetAttribute("IsVIP") then
			properties.PrefixText = "[VIP] " .. message.PrefixText

			properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
			properties.PrefixTextProperties.TextColor3 = Color3.fromRGB(255, 125, 50)
		end
	end

	return properties
end

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

リッチテキスト フォントカラータグ は、メッセージの内容をフォーマットするのに使用されるリッチテキストタグです。フォーマットを 特定のパーツのメッセージに適用する場合、注意リッチテキストはグラデードをサポートしていませんが、次のコードサンプルで示すよう

リッチテキストのカスタマイズ
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

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

特定のデザインシナリオでは、公開アドレスシステムからの「スピーチ」など、プレイヤーでないキャラクターからのチャットウィンドウに非プレイヤーダイアログを表示したい場合があります。

システム

ローカルプレイヤーにスタイル化されていないシステムメッセージを提供するには、デフォルトの Class.TextChannel:DisplaySystemMessage()|DisplaySystemMessage() チャンネルから、プレイヤーのディスプレイ表示名の前に付く Class.TextChannel:DisplaySystemMessage()|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)

NPC/オブジェクト

非プレイヤーダイアログをスタイリッシュにし、チャットバブルを追加して、3D 世界内の NPC またはオブジェクトからメッセージが来ているように見えるようにします。

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

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)