ปรับแต่งหน้าต่างการแชท

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

ระบบ การแชทในเกม ที่ขับเคลื่อนโดย TextChatService ช่วยให้ผู้เล่นสามารถสื่อสารและเข้าสังคมกับผู้อื่นในเกมแบบสดได้อย่างง่ายดาย นอกเหนือจากการรองรับการแชทข้อความเริ่มต้นแล้ว คุณสามารถ ปรับแต่ง ส่วนติดต่อผู้ใช้ด้านหน้าได้

การตั้งค่าหน้าต่างการแชท

หน้าต่างการแชทโดยรวมประกอบด้วย:

  • หน้าต่างการแชท
  • แถบป้อนข้อมูล
  • แท็บช่อง (ไม่บังคับ)
ส่วนประกอบหลักของหน้าต่างการแชทข้อความ.

แท็บช่องจะถูกปิดใช้งานตามค่าเริ่มต้น และแต่ละส่วนสามารถเปิดหรือปิดใน Studio หรือผ่านการเขียนสคริปต์ได้:

ในหน้าต่าง Explorer ให้ขยายสาขา TextChatService และเลือก ChatWindowConfiguration ChatInputBarConfiguration หรือ ChannelTabsConfiguration จากนั้นเปิดหรือปิดส่วนในหน้าต่าง Properties

เมื่อ ChannelTabsConfiguration ถูกเปิดใช้งาน แชนแนลภายใต้ TextChannel ที่ตั้งค่าภายใต้จะปรากฏในแท็บตามที่ระบุในตารางต่อไปนี้ นอกจากนี้ แต่ละ TextChannel ที่กำหนดเองจะสร้างแท็บที่สอดคล้องกับ Name ของช่อง

ช่องเริ่มต้นชื่อแท็บ
RBXGeneralทั่วไป
RBXSystemทั่วไป (รวมเข้าด้วยกันในแท็บเดียวกับ RBXGeneral)
RBXTeamทีม
RBXWhisperชื่อผู้ใช้งานของผู้เล่นคนอื่น

ลักษณะของหน้าต่าง

ลักษณะของหน้าต่างการแชททั้งหมดสามารถปรับแต่งได้โดยใช้ ChatWindowConfiguration

ภูมิศาสตร์ของ ChatWindowConfiguration ใน Explorer.
คุณสมบัติคำอธิบายค่าเริ่มต้น
BackgroundColor3สีพื้นหลังของหน้าต่างการแชทใน Color3[25, 27, 29]
BackgroundTransparencyระดับความโปร่งแสงของพื้นหลังหน้าต่างการแชท0.3
Enabledกำหนดว่าจะให้แสดงหน้าต่างการแชทเริ่มต้นหรือไม่ ตั้งเป็น false เพื่อซ่อนtrue
FontFaceฟอนต์ใน Font ของข้อความในหน้าต่างการแชทBuilderSansMedium
TextColor3สีของข้อความใน Color3 ของหน้าต่างการแชท[255, 255, 255]
TextSizeขนาดของข้อความในหน้าต่างการแชท14
TextStrokeColor3สีของการขีดเส้นขอบใน Color3 สำหรับข้อความในหน้าต่างการแชท[0, 0, 0]
TextStrokeTransparencyระดับความโปร่งแสงของการขีดเส้นขอบสำหรับข้อความในหน้าต่างการแชท0.5
HorizontalAlignmentการจัดแนวในแนวนอนของหน้าต่างการแชทLeft
VerticalAlignmentการจัดแนวในแนวตั้งของหน้าต่างการแชทTop
HeightScaleสัดส่วนความสูงของหน้าต่างการแชทเมื่อเปรียบเทียบกับขนาดหน้าจอ1
WidthScaleสัดส่วนความกว้างของหน้าต่างการแชทเมื่อเปรียบเทียบกับขนาดหน้าจอ1

ลักษณะของแถบป้อนข้อมูล

ลักษณะของแถบป้อนข้อมูลของการแชทสามารถปรับแต่งได้โดยใช้ ChatInputBarConfiguration

ภูมิศาสตร์ของ ChatInputBarConfiguration ใน Explorer.
คุณสมบัติคำอธิบายค่าเริ่มต้น
BackgroundColor3สีพื้นหลังของแถบป้อนข้อมูลใน Color3[25, 27, 29]
BackgroundTransparencyระดับความโปร่งแสงของพื้นหลังแถบป้อนข้อมูล0.2
FontFaceฟอนต์ใน Font ของข้อความที่ป้อนในแถบป้อนได้BuilderSansMedium
PlaceholderColor3สีของข้อความที่ใช้แทนใน Color3 ของแถบป้อนข้อมูล[178, 178, 178]
TextColor3สีของข้อความที่ผู้เล่นป้อนได้ใน Color3[255, 255, 255]
TextSizeขนาดของข้อความในแถบป้อนข้อมูล14
TextStrokeColor3สีของการขีดเส้นขอบใน Color3 สำหรับข้อความที่ป้อนในแถบป้อนข้อมูล[0, 0, 0]
TextStrokeTransparencyระดับความโปร่งแสงของการขีดเส้นขอบสำหรับข้อความในแถบป้อนข้อมูล0.5
AutocompleteEnabledกำหนดว่า ระบบแชทข้อความจะแสดงตัวเลือกการเติมอัตโนมัติสำหรับอีโมจิและ คำสั่ง. อีโมจิจะถูกเติมอัตโนมัติโดยการพิมพ์ : ตามด้วยอักขระที่ไม่ใช่ช่องว่าง ขณะที่คำสั่งจะถูกเติมอัตโนมัติด้วยการพิมพ์ /true
KeyboardKeyCodeคีย์เพิ่มเติมที่ผู้เล่นสามารถกดเพื่อเรียกฟังก์ชันโฟกัสไปยังแถบป้อนข้อมูลการแชทเริ่มต้นSlash

ลักษณะของแท็บช่อง

ลักษณะของ แท็บช่อง สามารถปรับแต่งได้ผ่าน ChannelTabsConfiguration

ภูมิศาสตร์ของ ChannelTabsConfiguration ใน Explorer.
คุณสมบัติคำอธิบายค่าเริ่มต้น
BackgroundColor3สีพื้นหลังของแท็บช่องใน Color3[25, 27, 29]
BackgroundTransparencyระดับความโปร่งแสงของพื้นหลังแท็บช่อง0
HoverBackgroundColor3สีพื้นหลังของแท็บเมื่อเลื่อนเมาส์ข้ามใน Color3[125, 125, 125]
FontFaceฟอนต์ใน Font สำหรับข้อความในแท็บช่องBuilderSansBold
TextColor3สีของข้อความในแท็บที่ไม่ได้เลือกใน Color3[175, 175, 175]
SelectedTabTextColor3สีของข้อความในแท็บที่เลือกใน Color3[255, 255, 255]
TextSizeขนาดของข้อความในแท็บช่อง18
TextStrokeColor3สีของการขีดเส้นขอบใน Color3 สำหรับข้อความในแท็บช่อง[0, 0, 0]
TextStrokeTransparencyระดับความโปร่งแสงของการขีดเส้นขอบสำหรับข้อความในแท็บช่อง1

ปรับแต่งข้อความ

คุณสามารถปรับแต่งรูปลักษณ์ของเนื้อหาข้อความแชทและคำนำโดยใช้ ChatWindowMessageProperties และ TextChatService.OnChatWindowAdded โดยไม่ต้องเขียนทับ UI ที่มีอยู่ ตัวเลือกการปรับแต่งจะช่วยให้คุณเปลี่ยนแปลงรูปลักษณ์ของข้อความแชทให้ตรงกับธีมเกมของคุณ และคุณยังสามารถจัดเรียงหรือเน้นข้อความจากกลุ่มผู้ใช้ที่แตกต่างกันโดยการเปลี่ยนสีคำนำหรือเพิ่ม แท็กแชท

สีของชื่อผู้ใช้

เมื่อผู้ใช้ส่งข้อความแชท DisplayName ของพวกเขาจะแสดงเป็นส่วนของคำนำในข้อความ โดยค่าเริ่มต้น ชื่อของผู้ใช้แต่ละคนจะเปลี่ยนสีตาม Player.TeamColor แต่คุณสามารถเปลี่ยนสีของชื่อแชทได้โดยใช้ ChatWindowMessageProperties และ OnChatWindowAdded ตัวอย่าง LocalScript ใน StarterPlayerScripts จะกำหนดสีให้กับผู้ใช้แต่ละคน โดยเลือกแบบสุ่มจากตารางของสี RGB

ชื่อผู้ใช้ที่มีสีในหน้าต่างการแชท.
LocalScript - สีชื่อผู้ใช้แบบสุ่ม

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

การปรับแต่งข้อความแบบรูปแบบพิเศษ

แท็ก [สีฟอนต์] (../ui/rich-text.md#supported-tags) แบบรูปแบบพิเศษสามารถใช้เพื่อเพิ่มรูปแบบให้กับข้อความแชท ซึ่งมีประโยชน์หากคุณต้องการให้การจัดรูปแบบเป็นไปตามบางส่วนที่เฉพาะเจาะจงของข้อความ หมายเหตุว่าการปรับแต่งแบบรูปแบบพิเศษไม่รองรับการไล่สี แต่ตัวอย่างโค้ดต่อไปนี้จะแสดงวิธีการย้ายชื่อของผู้ใช้ (ที่เก็บไว้ใน 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

ข้อความจากแหล่งที่ไม่ใช่ผู้เล่น

เมื่อ TextChatService.CreateDefaultTextChannels เป็น true หนึ่งในช่องข้อความเริ่มต้นคือช่อง RBXSystem สคริปต์แชทเริ่มต้นจะแสดงข้อความของระบบโดยอัตโนมัติในช่องนี้ คุณสามารถปรับแต่งรูปลักษณ์ของข้อความเหล่านี้ได้โดยใช้ TextChannel.OnIncomingMessage callback

คุณอาจต้องการปรับแต่งหรือเปลี่ยนแปลงข้อความของระบบที่ถูกส่งออกโดยอัตโนมัติจากระบบแชท เนื่องจากข้อความของระบบเริ่มต้นนั้นมีการแปลสำหรับผู้ใช้ ดังนั้น คุณควรอ้างอิงโดยใช้ TextChatMessage.Metadata ใน การเรียกคืนข้อความแชท หากคุณต้องการปรับแต่งรูปลักษณ์ ตัวอย่างเช่น คุณสามารถใช้ Metadata เพื่อระบุข้อความของระบบ ข้อความแสดงข้อผิดพลาด หรือข้อความจากระบบเฉพาะในเกมของคุณ

ระบบ

เพื่อส่งข้อความของระบบถึงผู้เล่นท้องถิ่น เช่น "คำพูด" จากระบบประกาศสาธารณะ เรียก DisplaySystemMessage() จากช่อง RBXGeneral ที่เป็นค่าเริ่มต้น พร้อมคำทั่วไปก่อนชื่อแสดงของผู้เล่น

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 = "[คู่มือ] ยินดีต้อนรับ "
-- ส่ง "ข้อความของระบบ" ไปยังผู้เล่นที่มีชื่อแสดงของพวกเขาแนบ
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)
ภาพที่แสดงข้อความระบบพื้นฐานในหน้าต่างการแชท.

NPC/วัตถุ

คุณสามารถเพิ่มลักษณะให้กับการสนทนาที่ไม่ใช่ผู้เล่นและเพิ่ม ฟองการแชท เพื่อทำให้ดูเหมือนว่ามีข้อความถูกส่งมาจาก NPC หรือวัตถุภายในโลก 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")
-- ตรวจสอบข้อความระบบที่มีเมตาดาต้า
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 = "ยินดีต้อนรับ! ฉันจะเป็นไกด์ของคุณ."
local speakerName = "อัศวินโบราณ"
generalChannel:DisplaySystemMessage(message, speakerName)
ภาพที่แสดงอัศวินรูปปั้น NPC ส่งข้อความไปยังหน้าต่างการแชท พร้อมฟองการแชทเหนือหัวของมัน.
©2026 Roblox Corporation. Roblox, โลโก้ Roblox และ Powering Imagination เป็นส่วนหนึ่งของเครื่องหมายการค้าที่จดทะเบียน และไม่ได้จดทะเบียนของเราในสหรัฐฯ และประเทศอื่นๆ