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 người dùng 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 giao diện 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 thiết lập thuộc tính ChatWindowConfiguration.Enabled và ChatInputBarConfiguration.Enabled thành false trong cửa sổ Thuộc tính của Studio.

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

   1. Tạo một ScreenGui và làm cha cho nó là StarterGui.

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

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

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

      Client
      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("Gửi tin nhắn không thành công")
      		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 hiển thị các tin nhắn khi chúng được nhận từ TextChatService.MessageReceived. Bước này cũng tạo một UIListLayout để tự động sắp xếp các tin nhắn.

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

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

   3. Tạo một UIListLayout và làm cha cho nó là ScrollingFrame.

   4. Tạo một LocalScript và làm cha cho nó là ScrollingFrame.

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

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Hàm để tạo một nhãn văn bản mới cho mỗi tin nhắn nhận được
      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, điều quan trọng là kiểm tra xem tin nhắn đã tồn tại trong cửa sổ trò chuyện 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. Kiểm tra trò chơi của bạn bằng cách gửi tin nhắn trong thanh nhập văn bản trò chuyện. Bạn sẽ thấy các tin nhắn xuất hiện trong cửa sổ trò chuyện. Sau đó, 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 một phím được nhấn hoặc thêm thẻ trò chuyện.