อินเทอร์เฟซการแชทข้อความที่กำหนดเอง

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

1. ปิด UI เริ่มต้นที่มาพร้อมกับ TextChatService โดยการตั้งค่า ChatWindowConfiguration.Enabled และ ChatInputBarConfiguration.Enabled เป็น false ในหน้าต่าง Properties ของ Studio

2. สร้างการแทนที่สำหรับแถบป้อนข้อความแชท ซึ่งก็คือกล่องข้อความที่ส่งข้อความเมื่อผู้ใช้กด Enter

   1. สร้าง ScreenGui และกำหนดให้เป็นผู้ปกครองของ StarterGui

   2. สร้าง TextBox และกำหนดให้เป็นผู้ปกครองของ ScreenGui ใหม่ จากนั้น ปรับตำแหน่ง และ เปลี่ยนขนาด ตามที่ต้องการ

   3. สร้าง LocalScript และกำหนดให้เป็นผู้ปกครองของ TextBox ใหม่

   4. เพิ่มโค้ดต่อไปนี้ลงใน LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral คือช่องสาธารณะเริ่มต้น
      local RBXGeneral = TextChatService:FindFirstChild("TextChannels"):WaitForChild("RBXGeneral")
      
      local textBox = script.Parent
      textBox.FocusLost:Connect(function(enterPressed)
      	local text = textBox.Text
      	if enterPressed and #text > 0 then
      		local success, response = pcall(function()
      			return RBXGeneral:SendAsync(textBox.Text)
      		end)
      
      		if not success then
      			RBXGeneral:DisplaySystemMessage("ไม่สามารถส่งข้อความได้")
      		end
      
      		-- ผู้ใช้คาดหวังว่ากล่องป้อนข้อมูลจะถูกล้างหลังจากส่งข้อความ
      		textBox.Text = ""
      	end
      end)

3. สร้างการแทนที่สำหรับหน้าต่างแชท ซึ่งก็คือ ScrollingFrame ที่แสดงข้อความเมื่อได้รับจาก TextChatService.MessageReceived ขั้นตอนนี้ยังสร้าง UIListLayout เพื่อจัดเรียงข้อความโดยอัตโนมัติ

   1. สร้าง ScreenGui ใหม่อีกหนึ่งตัวและกำหนดให้เป็นผู้ปกครองของ StarterGui

   2. สร้าง ScrollingFrame และกำหนดให้เป็นผู้ปกครองของ ScreenGui จากนั้น ปรับตำแหน่ง และ เปลี่ยนขนาด ตามที่ต้องการ

   3. สร้าง UIListLayout และกำหนดให้เป็นผู้ปกครองของ ScrollingFrame

   4. สร้าง LocalScript และกำหนดให้เป็นผู้ปกครองของ ScrollingFrame

   5. เพิ่มโค้ดต่อไปนี้ลงใน LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- ฟังก์ชันในการสร้างป้ายข้อความใหม่สำหรับข้อความแต่ละข้อความที่ได้รับ
      local function addMessageGui(textChatMessage: TextChatMessage)
      	local isOutgoingMessage = textChatMessage.Status == Enum.TextChatMessageStatus.Sending
      
      	local parent = script.Parent
      
      	local originalLabel = parent:FindFirstChild(textChatMessage.MessageId)
      	if originalLabel then
      		originalLabel.Text = textChatMessage.Text
      		originalLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      	else
      		local textLabel = Instance.new("TextLabel")
      		textLabel.BorderSizePixel = 0
      		textLabel.Font = Enum.Font.BuilderSans
      		textLabel.TextSize = 18
      		textLabel.TextXAlignment = Enum.TextXAlignment.Left
      		textLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      		textLabel.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
      		textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
      		textLabel.Name = textChatMessage.MessageId
      		textLabel.AutomaticSize = Enum.AutomaticSize.XY
      		textLabel.Text = textChatMessage.Text
      		textLabel.Parent = parent
      	end
      end
      
      -- เริ่มฟังข้อความที่เข้ามา
      TextChatService.MessageReceived:Connect(addMessageGui)

      เมื่อใช้เหตุการณ์ TextChatService.MessageReceived เป็นเรื่องสำคัญที่จะต้องตรวจสอบว่าข้อความนั้นมีอยู่ในหน้าต่างแชทแล้วหรือไม่ เหตุการณ์นี้จะถูกเรียกหนึ่งครั้งเมื่อส่งและอีกครั้งเมื่อข้อความถูกส่งมาจากเซิร์ฟเวอร์

4. ทดลองเล่นเกมของคุณโดยการส่งข้อความในแถบป้อนข้อความแชท คุณควรเห็นข้อความปรากฏในหน้าต่างแชท จากนั้นคุณสามารถขยายตัวอย่างนี้โดยการเพิ่มคุณสมบัติเช่นการเน้นที่ TextBox เมื่อกดปุ่มหรือการเพิ่ม แท็กแชท