Giao diện trò chuyện văn bản tùy chỉnh

Ví dụ này cho thấy cách sử dụng lớp TextChatService để thiết kế giao diện trước của riêng bạn.Nó tái sử dụng các kênh văn bản mặc định từ CreateDefaultTextChannels và rất đơn giản so với UI mặc định.

1. Vô hiệu hóa giao diện mặc định đi kèm với TextChatService bằng cách đặt các thuộc tính ChatWindowConfiguration.Enabled và ChatInputBarConfiguration.Enabled về false trong cửa sổ Tính năng của Studio .

2. Tạo một thay thế cho thanh nhập trò chuyện. Đây là hộp văn bản phát ra tin nhắn khi người dùng nhấn Enter .

   1. Tạo một ScreenGui và gán nó cho StarterGui .

   2. Tạo một TextBox và cha nó cho mới ScreenGui , sau đó di chuyển lại và thay đổi kích thước như mong muốn.

   3. Tạo một LocalScript và cha nó cho mới TextBox .

   4. Thêm mã sau vào LocalScript :

      Khách hàng
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral là kênh công cộng mặc định
      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("Failed to send message")
      		end
      
      		-- Người dùng mong đợi hộp nhập sẽ được xóa sau khi gửi tin nhắn
      		textBox.Text = ""
      	end
      end)

3. Tạo một thay thế cho cửa sổ trò chuyện.Đây là ScrollingFrame mà hiển thị tin nhắn như chúng được nhận từ TextChatService.MessageReceived .Bước này cũng tạo ra một UIListLayout để tự động bố trí các tin nhắn.

   1. Tạo một mới khác ScreenGui và gán nó cho StarterGui .

   2. Tạo một ScrollingFrame và cha nó cho ScreenGui , sau đó di chuyển lại và thay đổi kích thước như mong muốn.

   3. Tạo một UIListLayout và gán nó cho ScrollingFrame .

   4. Tạo một LocalScript và gán nó cho ScrollingFrame .

   5. Thêm mã sau vào LocalScript :

      Khách hàng
      local TextChatService = game:GetService("TextChatService")
      
      -- Chức năng tạo nhãn văn bản mới cho mỗi tin nhắn được nhận
      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
      
      -- Bắt đầu lắng nghe các tin nhắn đến
      TextChatService.MessageReceived:Connect(addMessageGui)

      Khi sử dụng sự kiện TextChatService.MessageReceived, quan trọng là kiểm tra xem tin nhắn có tồn tại trong cửa sổ trò chuyện hay chưa.Sự kiện này được gọi một lần khi gửi và một lần khi tin nhắn được nhận từ máy chủ.

4. Thử trải nghiệm của bạn bằng cách gửi tin nhắn trong thanh nhập trò chuyện.Bạn nên thấy các tin nhắn xuất hiện trong cửa sổ trò chuyện.Bạn có thể mở rộng ví dụ này bằng cách thêm các tính năng như tập trung vào TextBox khi nhấn phím hoặc thêm thẻ trò chuyện .