自定义聊天窗口

*此内容使用人工智能(Beta)翻译,可能包含错误。若要查看英文页面,请点按 此处

体验文本聊天系统 驱动的,由 TextChatService 提供技术支持,玩家可以在实时体验中轻松交流和社交。除了支持默认文字聊天外,你还可以自定义前端用户界面。

聊天窗口配置

整个聊天窗口由以下组成:

  • 聊天窗口
  • 输入栏
  • 通道选项卡(可选)
Core components of the text chat window.

默认情况下,通道选项卡被禁用,每个组件可以在 Studio 或通过脚本开启和关闭:

资源管理器 窗口中,扩展 TextChatService 分支,然后选择 ChatWindowConfiguration , ChatInputBarConfigurationChannelTabsConfiguration .然后在 属性 窗口中启用或禁用组件。

ChannelTabsConfiguration 启用时,每个默认 TextChannel 在下表中列出的选项卡中出现。此外,每个自定义 TextChannel 创建一个与通频道的 Name 属性相对应的选项卡。

默认通频道标签名称
RBX一般 一般
RBX系统 一般 (合并为单个标签 RBXGeneral )
RBX团队 团队
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 聊天输入文本的边框颜色。[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

从非玩家来源发送消息

有时,你可能想在聊天窗口中显示非玩家对话,例如来自公共地址系统或非玩家角色的“语言”。

系统

要向本地玩家发送系统消息,请从默认 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.

了解有关如何自定义系统消息的外观的更详细指南,请参阅自定义系统消息

默认系统消息

TextChatService.CreateDefaultTextChannelstrue 时,默认文本通道之一是 RBXSystem 频道。默认聊天脚本会自动在此频道中显示系统消息。您可以使用 TextChannel.OnIncomingMessage 回调来自定义这些消息的外观。

您可能想自定义或更改聊天系统自动发出的系统消息。由于默认系统消息已为用户本地化,因此如果您想自定义其外观,您应该在 文本聊天回调中引用它们 如果您想自定义其外观。

以下是聊天系统发出的默认系统消息的参考:

元数据描述
Roblox.ChatTranslation.ChatWindow.SystemMessage表示系统可能会为玩家翻译聊天消息
Roblox.Notification.Friend.加入当玩家的朋友之一加入体验时显示
Roblox.MessageStatus.警告arning.Floodchecked当玩家发送的文字聊天消息被服务器限制时显示
Roblox.MessageStatus.警告arning.TextFilter失败当玩家发送的文本聊天消息由于文本过滤问题无法显示时显示
Roblox.MessageStatus.警告arning.InvalidPrivacySettings当玩家的隐私设置阻止他们发送文字聊天消息时显示
Roblox.MessageStatus.警告arning.Message太长当玩家发送含有过长内容的文字聊天消息时显示
Roblox.MessageStatus.警告arning.Unknown显示系统因未知原因无法发送玩家的文字聊天消息时
Roblox.Help.Info显示来自 RBXHelpCommand TextChatCommand 的响应
Roblox.Version.信息显示来自 RBXVersionCommand TextChatCommand 的响应
Roblox.Team.Success.NowInTeam当玩家的团队发生变更时显示
Roblox.Team.Error.不能团队聊天,如果不在团队中当玩家触发 RBXTeamCommand 文本聊天命令时显示,但未在 Team
Roblox.Whisper.Info.成功当玩家成功启动悄悄话聊天时显示
Roblox.Whisper.Welcome.Sent在输入悄悄话通道时显示
Roblox.Whisper.Error.不能向自己喃喃来自 RBXWhisperCommand TextChatCommand 的错误响应
Roblox.Whisper.Error.TargetDoesNotExist来自 RBXWhisperCommand TextChatCommand 的错误响应
Roblox.Whisper.Error.TooManyMatches来自 RBXWhisperCommand TextChatCommand 的错误响应
Roblox.Whisper.Error.未知来自 RBXWhisperCommand TextChatCommand 的错误响应
Roblox.Emote.Error.不存在来自 RBXEmoteCommand TextChatCommand 的错误响应
Roblox.Emote.Error.UserEmotesNotEnabled来自 RBXEmoteCommand TextChatCommand 的错误响应
Roblox.Emote.Error.暂时不可用来自 RBXEmoteCommand TextChatCommand 的错误响应
Roblox.Emote.Error.不支持来自 RBXEmoteCommand TextChatCommand 的错误响应
Roblox.Emote.Error.SwitchToR15来自 RBXEmoteCommand TextChatCommand 的错误响应
Roblox.Emote.Error.动画播放来自 RBXEmoteCommand TextChatCommand 的错误响应
Roblox.Mute.Error.PlayerNotFound来自 RBXMuteCommand 文本聊天命令 的错误响应
Roblox.Mute.Error.MultipleMatches来自 RBXMuteCommand 文本聊天命令 的错误响应
Roblox.Mute.Error.不能静音自己来自 RBXMuteCommand 文本聊天命令 的错误响应
Roblox.Mute.Info.成功来自 RBXMuteCommand TextChatCommand 的成功回应
Roblox.Unmute.Error.PlayerNotFound来自 RBXUnmuteCommand 文本聊天命令 的错误响应
Roblox.Unmute.Error.MultipleMatches来自 RBXUnmuteCommand 文本聊天命令 的错误响应
Roblox.Unmute.Error.CannotMuteSelf来自 RBXUnmuteCommand 文本聊天命令 的错误响应
Roblox.Unmute.Info.成功来自 RBXUnmuteCommand TextChatCommand 的成功回应

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