Antarmuka obrolan teks kustom

Contoh ini menunjukkan cara menggunakan kelas TextChatService untuk merancang frontend Anda sendiri. Ini menggunakan kembali saluran teks default dari CreateDefaultTextChannels dan sangat sederhana dibandingkan dengan UI default.

1. Nonaktifkan UI default yang datang dengan TextChatService dengan mengatur properti ChatWindowConfiguration.Enabled dan ChatInputBarConfiguration.Enabled ke false di jendela Properties Studio.

2. Buat pengganti untuk bilah input obrolan. Ini adalah kotak teks yang mengirimkan pesan ketika pengguna menekan Enter.

   1. Buat ScreenGui dan tempatkan di StarterGui.

   2. Buat TextBox dan tempatkan di ScreenGui yang baru, kemudian ubah posisi dan ukuran sesuai keinginan.

   3. Buat LocalScript dan tempatkan di TextBox yang baru.

   4. Tambahkan kode berikut ke LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral adalah saluran publik default
      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("Gagal mengirim pesan")
      		end
      
      		-- Pengguna mengharapkan kotak input dikosongkan setelah mengirim pesan
      		textBox.Text = ""
      	end
      end)

3. Buat pengganti untuk jendela obrolan. Ini adalah ScrollingFrame yang menampilkan pesan saat diterima dari TextChatService.MessageReceived. Langkah ini juga membuat UIListLayout untuk secara otomatis menyusun pesan.

   1. Buat ScreenGui baru dan tempatkan di StarterGui.

   2. Buat ScrollingFrame dan tempatkan di ScreenGui, kemudian ubah posisi dan ukuran sesuai keinginan.

   3. Buat UIListLayout dan tempatkan di ScrollingFrame.

   4. Buat LocalScript dan tempatkan di ScrollingFrame.

   5. Tambahkan kode berikut ke LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Fungsi untuk membuat label teks baru untuk setiap pesan yang diterima
      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
      
      -- Mulai mendengarkan pesan yang masuk
      TextChatService.MessageReceived:Connect(addMessageGui)

      Ketika menggunakan acara TextChatService.MessageReceived, penting untuk memeriksa apakah pesan sudah ada di jendela obrolan. Acara ini dipanggil sekali saat mengirim dan sekali saat pesan diterima dari server.

4. Uji permainan Anda dengan mengirim pesan di bilah input obrolan. Anda akan melihat pesan muncul di jendela obrolan. Anda kemudian dapat mengembangkan contoh ini dengan menambahkan fitur seperti memfokuskan TextBox saat tombol ditekan atau menambahkan tag obrolan.