自訂聊天窗口

*此內容是使用 AI(Beta 測試版)翻譯,可能含有錯誤。若要以英文檢視此頁面,請按一下這裡

經驗內的文字聊天系統,由 提供支持,可讓玩家在實時體驗中簡單地交流和社交。除了支持預設文字聊天外,您還可以自定義前端使用者介面。

聊天窗口配置

總體聊天窗口包括:

  • 聊天窗口
  • 輸入欄
  • 通道標籤(可選)
Core components of the text chat window.

通道標籤預設為停用狀態,每個組件可以在 Studio 或通過腳本開啟和關閉:

檢索器 窗口中,擴展 TextChatService 分支並選擇 ChatWindowConfigurationChatInputBarConfigurationChannelTabsConfiguration 。然後在 屬性 窗口中啟用或禁用組件。

ChannelTabsConfiguration 啟用時,每個預設 TextChannel 會出現在下列表中。此外,每個自訂 TextChannel 創建一個對應通道的 Name 屬性的標籤。

預設通道選項卡名稱
RBXGeneral 一般
RBXSystem 一般 (結合成單一標籤與 RBXGeneral )
RBXTeam 團隊
RBXWhisper其他玩家的使用者名稱

窗口外觀

整個聊天窗口的外觀可通過 ChatWindowConfiguration 自定義。

ChatWindowConfiguration instance in Explorer hierarchy.
屬性說明預設
BackgroundColor3Color3聊天窗口的背景顏色。[25, 27, 29]
BackgroundTransparency聊天窗口背景的透明度。0.3
FontFaceFont 聊天窗口文字。BuilderSansMedium
TextColor3Color3 聊天窗口文字。[255, 255, 255]
TextSize聊天窗口文字的大小。14
TextStrokeColor3Color3 的衝程用於聊天窗口文字。[0, 0, 0]
TextStrokeTransparency聊天窗口文字的輪廓透明度。0.5
HorizontalAlignment聊天窗口的水平對齊。Left
VerticalAlignment聊天窗口垂直對齊。Top
HeightScale聊天窗口與畫面尺寸相對的高度比例。1
WidthScale聊天窗口與畫面尺寸相對的寬度比例。1

輸入欄外觀

聊天輸入欄的外觀可通過 ChatInputBarConfiguration 自定義。

ChatInputBarConfiguration instance in Explorer hierarchy.
屬性說明預設
BackgroundColor3Color3聊天輸入欄的背景顏色。[25, 27, 29]
BackgroundTransparency聊天輸入欄的背景透明度。0.2
FontFaceFont 的聊天輸入文字。BuilderSansMedium
PlaceholderColor3Color3 暫時聊天輸入文字的位置。[178, 178, 178]
TextColor3Color3 玩家輸入的聊天輸入文字。[255, 255, 255]
TextSize聊天輸入文字的大小。14
TextStrokeColor3Color3 聊天輸入文字的stroke顏色。[0, 0, 0]
TextStrokeTransparency聊天輸入文字的輪廓透明度。0.5
AutocompleteEnabled文字聊天系統是否顯示有關表情符號和 指令 的自動完成選項。使用 : 輸入非空白字符後跟隨非空白字符完成表情符號,而指令使用 / 輸入完成指令。true
KeyboardKeyCode額外的關鍵玩家可以按下以刺激關注預設聊天輸入欄。Slash

通道標籤外觀

通道標籤 的外觀可通過ChannelTabsConfiguration來調整。

ChannelTabsConfiguration instance in Explorer hierarchy.
屬性說明預設
BackgroundColor3Color3 通道標籤的背景顏色。[25, 27, 29]
BackgroundTransparency通道標籤背景的透明度。0
HoverBackgroundColor3Color3 懸停在標籤上時的背景顏色。[125, 125, 125]
FontFaceFont 對於通道標籤中的文字。BuilderSansBold
TextColor3Color3 在未選擇標籤的文字。[175, 175, 175]
SelectedTabTextColor3Color3 選擇的標籤中的文字。[255, 255, 255]
TextSize通道標籤中文字的大小。18
TextStrokeColor3Color3 通道標籤中文字的stroke顏色。[0, 0, 0]
TextStrokeTransparency通道標籤中文字的輪廓透明度。1

自訂訊息

您可以使用 ChatWindowMessagePropertiesTextChatService.OnChatWindowAdded 回呼來自定義聊天訊息體和前缀的外觀,而不會覆蓋現有的使用者介面。自訂選項讓您修改聊天訊息的外觀,以符合體驗主題,您也可以通過上色前缀或添加 聊天標籤 來排序或標示不同使用者群組的訊息。

顏色使用者名稱

當使用者傳送聊天訊息時,其 DisplayName 會顯示為訊息的前缀部分。預設每個使用者的名稱會依照其 Player.TeamColor 而變色,但您可以使用 ChatWindowMessagePropertiesOnChatWindowAdded 來變更聊天名稱的顏色。下列 LocalScriptStarterPlayerScripts 為每個使用者指定預設顏色,隨機從 RGB 顏色表中選擇。

Colored user name in the chat window.
本地腳本 - 隨機用戶名顏色

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 將顏色和透明度傾向應用到顏色訊息前缀上。

Gradient user name in the chat window.
傾斜使用者名稱顏色

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 )移至訊息體,然後應用豐富文字標籤只於名稱部分。

Rich text customization of user name in the chat window.
豐富文字自訂

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

來自非玩家來源的訊息

TextChatService.CreateDefaultTextChannelstrue 時,預設文字通道之一是 RBXSystem 通道。預設聊天腳本會自動在此通道中顯示系統訊息。您可以使用 TextChannel.OnIncomingMessage 回呼來自定義這些訊息的外觀。

您可能想自定義或更改聊天系統自動發出的系統訊息。因為預設系統訊息是為使用者本地化的,因此如果您想自定义其外觀,您應該在 TextChatMessage.Metadata 中以 引用 它們。例如,您可以使用 Metadata 來識別系統訊息、錯誤訊息或經驗中特定系統的訊息。

系統

若要將系統訊息傳送給本地玩家,例如來自公共地址系統的「語言」,請從預設 DisplaySystemMessage() 通道使用前缀傳送到玩家顯示名稱前的 RBXGeneral 通道。

客戶端腳本

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)
Image showing a basic system message in the chat window.

NPC/對象

您也可以為非玩家對話添加 聊天泡泡 來讓它看起來像來自 NPC 或 3D 世界內的物體。

客戶端腳本

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)
Image showing a knight statue NPC broadcasting a chat message to the chat window, along with a chat bubble above its head.