UI obrolan teks khusus

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 menetapkan properti ChatWindowConfiguration.Enabled dan ChatInputBarConfiguration.Enabled ke false di jendela Properti Studio.

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

   1. Buat ScreenGui dan berikan kepada StarterGui .

   2. Buat TextBox dan berikan kepada yang baru ScreenGui , kemudian reposisi dan ubah ukuran sesuai keinginan.

   3. Buat LocalScript dan berikan kepada anak baru TextBox.

   4. Tambahkan kode berikut ke LocalScript :

      Pelanggan
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral adalah channelpublik 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("Failed to send message")
      		end
      
      		-- Pengguna mengharapkan kotak input dihapus setelah mengirim pesan
      		textBox.Text = ""
      	end
      end)

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

   1. Buat yang baru lagi ScreenGui dan berikan kepada StarterGui .

   2. Buat ScrollingFrame dan berikan kepada ScreenGui , kemudian reposisi dan ubah ukuran sesuai keinginan.

   3. Buat UIListLayout dan berikan kepada orangtuanya ke ScrollingFrame.

   4. Buat LocalScript dan berikan kepada orangtuanya ke ScrollingFrame.

   5. Tambahkan kode berikut ke LocalScript :

      Pelanggan
      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 masuk
      TextChatService.MessageReceived:Connect(addMessageGui)

      Saat 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 pengalaman Anda dengan mengirim pesan di bilah input obrolan.Anda harus melihat pesan muncul di jendela obrolan.Anda kemudian dapat memperluas contoh ini dengan menambahkan fitur seperti memfokuskan TextBox ketika tombol ditekan atau menambahkan tag obrolan .