Tùy chỉnh cửa sổ trò chuyện

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Hệ thống trò chuyện văn bản trong game, được hỗ trợ bởi TextChatService, cho phép người chơi dễ dàng giao tiếp và xã hội hóa với nhau trong các trò chơi trực tiếp. Ngoài việc hỗ trợ trò chuyện văn bản mặc định, bạn có thể tùy chỉnh giao diện người dùng phía trước.

Cấu hình cửa sổ trò chuyện

Cửa sổ trò chuyện tổng thể bao gồm:

  • Cửa sổ trò chuyện
  • Thanh nhập
  • Thẻ kênh (tùy chọn)
Các thành phần cơ bản của cửa sổ trò chuyện văn bản.

Các thẻ kênh được tắt theo mặc định và mỗi thành phần có thể được bật hoặc tắt trong Studio hoặc thông qua lập trình:

Trong cửa sổ Khám Phá, mở rộng nhánh TextChatService và chọn ChatWindowConfiguration, ChatInputBarConfiguration, hoặc ChannelTabsConfiguration. Sau đó, bật hoặc tắt thành phần trong cửa sổ Thuộc Tính.

Khi ChannelTabsConfiguration được bật, mỗi TextChannel mặc định sẽ xuất hiện trong một thẻ như được mô tả trong bảng sau. Ngoài ra, mỗi TextChannel tùy chỉnh sẽ tạo một thẻ tương ứng với thuộc tính Name của kênh.

Thẻ kênh mặc địnhTên thẻ
RBXGeneralChung
RBXSystemChung (gộp thành một thẻ với RBXGeneral)
RBXTeamĐội
RBXWhisperTên người dùng của người chơi khác

Diện mạo cửa sổ

Diện mạo của cửa sổ trò chuyện tổng thể có thể tùy chỉnh thông qua ChatWindowConfiguration.

Thể hiện ChatWindowConfiguration trong cấu trúc Explorer.
Thuộc tínhMô tảMặc định
BackgroundColor3Màu nền Color3 của cửa sổ trò chuyện.[25, 27, 29]
BackgroundTransparencyĐộ trong suốt của nền cửa sổ trò chuyện.0.3
EnabledLiệu có hiển thị cửa sổ trò chuyện mặc định hay không. Đặt là false để ẩn.true
FontFaceFont của văn bản trong cửa sổ trò chuyện.BuilderSansMedium
TextColor3Color3 của văn bản trong cửa sổ trò chuyện.[255, 255, 255]
TextSizeKích thước của văn bản trong cửa sổ trò chuyện.14
TextStrokeColor3Color3 của viền cho văn bản trong cửa sổ trò chuyện.[0, 0, 0]
TextStrokeTransparencyĐộ trong suốt của viền cho văn bản trong cửa sổ trò chuyện.0.5
HorizontalAlignmentCăn lề ngang của cửa sổ trò chuyện.Left
VerticalAlignmentCăn lề dọc của cửa sổ trò chuyện.Top
HeightScaleThang đo chiều cao của cửa sổ trò chuyện so với kích thước màn hình.1
WidthScaleThang đo chiều rộng của cửa sổ trò chuyện so với kích thước màn hình.1

Diện mạo thanh nhập

Diện mạo của thanh nhập trò chuyện có thể tùy chỉnh thông qua ChatInputBarConfiguration.

Thể hiện ChatInputBarConfiguration trong cấu trúc Explorer.
Thuộc tínhMô tảMặc định
BackgroundColor3Màu nền Color3 của thanh nhập trò chuyện.[25, 27, 29]
BackgroundTransparencyĐộ trong suốt của nền thanh nhập trò chuyện.0.2
FontFaceFont của văn bản trong thanh nhập.BuilderSansMedium
PlaceholderColor3Color3 của văn bản nhập liệu mẫu trong thanh nhập.[178, 178, 178]
TextColor3Color3 của văn bản trò chuyện do người chơi nhập.[255, 255, 255]
TextSizeKích thước của văn bản trong thanh nhập.14
TextStrokeColor3Color3 màu viền của văn bản trong thanh nhập.[0, 0, 0]
TextStrokeTransparencyĐộ trong suốt của viền văn bản trong thanh nhập.0.5
AutocompleteEnabledLiệu hệ thống trò chuyện văn bản có hiển thị tùy chọn tự động hoàn thành cho emoji và lệnh hay không. Emoji được tự động hoàn thành bằng cách gõ : theo sau là các ký tự không phải khoảng trắng, trong khi các lệnh được tự động hoàn thành bằng cách gõ /.true
KeyboardKeyCodePhím bổ sung mà người chơi có thể nhấn để kích hoạt việc tập trung vào thanh nhập trò chuyện mặc định.Slash

Diện mạo thẻ kênh

Diện mạo của thẻ kênh có thể tùy chỉnh thông qua ChannelTabsConfiguration.

Thể hiện ChannelTabsConfiguration trong cấu trúc Explorer.
Thuộc tínhMô tảMặc định
BackgroundColor3Màu nền Color3 của các thẻ kênh.[25, 27, 29]
BackgroundTransparencyĐộ trong suốt của nền các thẻ kênh.0
HoverBackgroundColor3Màu nền Color3 của các thẻ khi di chuột qua chúng.[125, 125, 125]
FontFaceFont cho văn bản trong các thẻ kênh.BuilderSansBold
TextColor3Color3 của văn bản trong một thẻ chưa được chọn.[175, 175, 175]
SelectedTabTextColor3Color3 của văn bản trong một thẻ được chọn.[255, 255, 255]
TextSizeKích thước của văn bản trong các thẻ kênh.18
TextStrokeColor3Color3 màu viền của văn bản trong các thẻ kênh.[0, 0, 0]
TextStrokeTransparencyĐộ trong suốt của viền cho văn bản trong các thẻ kênh.1

Tùy chỉnh tin nhắn

Bạn có thể tùy chỉnh diện mạo của nội dung tin nhắn trò chuyện và tiền tố bằng cách sử dụng ChatWindowMessageProperties và các callback TextChatService.OnChatWindowAdded mà không ghi đè giao diện hiện có. Các tùy chọn tùy chỉnh cho phép bạn thay đổi diện mạo của các tin nhắn trò chuyện để phù hợp với chủ đề trò chơi của bạn, và bạn cũng có thể phân loại hoặc làm nổi bật thông điệp từ các nhóm người dùng khác nhau bằng cách tô màu tiền tố hoặc thêm thẻ trò chuyện.

Màu tên người dùng

Khi một người dùng gửi một tin nhắn trò chuyện, DisplayName của họ sẽ hiển thị như một phần của tiền tố trong tin nhắn. Mặc định, tên của mỗi người dùng được tô màu theo Player.TeamColor, nhưng bạn có thể thay đổi màu sắc của tên trò chuyện bằng cách sử dụng ChatWindowMessagePropertiesOnChatWindowAdded. Và đây là LocalScript trong StarterPlayerScripts gán một màu xác định trước cho mỗi người dùng, chọn ngẫu nhiên từ một bảng màu RGB.

Tên người dùng có màu trong cửa sổ trò chuyện.
LocalScript - Màu Tên Người Dùng Ngẫu Nhiên

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

Bạn cũng có thể áp dụng màu sắc và độ trong suốt cho gradient để tô màu các tiền tố tin nhắn bằng cách sử dụng UIGradient.

Tên người dùng gradient trong cửa sổ trò chuyện.
Màu Tên Người Dùng Gradient

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

Tùy chỉnh văn bản phong phú

Các thẻ màu sắc phông chữ văn bản phong phú có thể được sử dụng để định dạng các tin nhắn trò chuyện, rất hữu ích nếu bạn muốn áp dụng định dạng cho những phần rất cụ thể của tin nhắn. Lưu ý rằng văn bản phong phú không hỗ trợ gradient, nhưng mẫu mã sau đây cho thấy cách bạn có thể di chuyển tên người dùng (được lưu trữ trong TextChatMessage.PrefixText) vào nội dung tin nhắn và sau đó áp dụng thẻ phong phú chỉ cho phần tên.

Tùy chỉnh văn bản phong phú của tên người dùng trong cửa sổ trò chuyện.
Tùy Chỉnh Văn Bản Phong Phú

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

Tin nhắn từ các nguồn không phải người chơi

Khi TextChatService.CreateDefaultTextChannelstrue, một trong những kênh văn bản mặc định là kênh RBXSystem. Các script chat mặc định tự động hiển thị tin nhắn hệ thống trong kênh này. Bạn có thể tùy chỉnh diện mạo của những tin nhắn này bằng cách sử dụng callback TextChannel.OnIncomingMessage.

Bạn có thể muốn tùy chỉnh hoặc thay đổi các tin nhắn hệ thống mà được phát tự động bởi hệ thống trò chuyện. Vì các tin nhắn hệ thống mặc định được địa phương hóa cho người dùng, bạn nên tham chiếu chúng bằng TextChatMessage.Metadata trong các callback trò chuyện văn bản nếu bạn muốn tùy chỉnh diện mạo của chúng. Ví dụ, bạn có thể sử dụng Metadata để xác định các tin nhắn hệ thống, tin nhắn lỗi, hoặc các tin nhắn từ các hệ thống cụ thể trong trò chơi của bạn.

Hệ thống

Để gửi một tin nhắn hệ thống đến người chơi địa phương, chẳng hạn như "thông báo" từ một hệ thống phát thoại công cộng, gọi DisplaySystemMessage() từ kênh RBXGeneral mặc định với một tiền tố trước tên hiển thị của người chơi.

Client Script

local Players = game:GetService("Players")
local TextChatService = game:GetService("TextChatService")
local player = Players.LocalPlayer
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral
local PREFIX = "[Hướng dẫn] Chào mừng "
-- Gửi "tin nhắn hệ thống" đến người chơi với tên hiển thị của họ được thêm vào
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)
Hình ảnh cho thấy một tin nhắn hệ thống cơ bản trong cửa sổ trò chuyện.

NPC/đối tượng

Bạn cũng có thể tạo kiểu cho các thoại không phải người chơi và thêm bong bóng trò chuyện để làm cho nó trông như thể các tin nhắn đang đến từ một NPC hoặc đối tượng trong thế giới 3D.

Client Script

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")
-- Kiểm tra các tin nhắn hệ thống có chứa siêu dữ liệu
if not textChatMessage.TextSource and textChatMessage.Metadata ~= "" then
-- Thêm tiền tố để làm cho tin nhắn trông như thể nó được gửi bởi một người chơi
properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "#50C999", textChatMessage.Metadata)
-- Thêm bong bóng trò chuyện
TextChatService:DisplayBubble(Workspace.Statue, textChatMessage.Text)
end
return properties
end
local message = "Chào mừng! Tôi sẽ là người hướng dẫn của bạn."
local speakerName = "Kị Sĩ Cổ Đại"
generalChannel:DisplaySystemMessage(message, speakerName)
Hình ảnh cho thấy một bức tượng kị sĩ NPC phát tán một tin nhắn trò chuyện đến cửa sổ trò chuyện, cùng với một bong bóng trò chuyện ở trên đầu nó.
©2026 Roblox Corporation. Roblox, logo Roblox và Powering Imagination là các nhãn hiệu đã đăng ký và chưa đăng ký của chúng tôi tại Hoa Kỳ và các quốc gia khác.