Interface de bate-papo de texto personalizado

Este exemplo mostra como usar a classe TextChatService para projetar seu próprio frontend.Ele reutiliza os canais de texto padrão de CreateDefaultTextChannels e é muito simples em comparação com a interface padrão.

1. Desabilite a interface padrão que vem com o TextChatService desativando as propriedades ChatWindowConfiguration.Enabled e ChatInputBarConfiguration.Enabled para false na janela Propriedades do Studio .

2. Crie uma substituição para a barra de entrada de chat. Esta é a caixa de texto que emite mensagens quando o usuário pressiona Enter .

   1. Crie um ScreenGui e associá-lo a StarterGui .

   2. Crie um TextBox e associá-lo ao novo ScreenGui , então reposicione-o e redimensione-o como desejado.

   3. Crie um LocalScript e associá-lo ao novo TextBox.

   4. Adicione o seguinte código ao LocalScript :

      Cliente
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral é o canal público padrão
      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
      
      		-- Os usuários esperam que a caixa de entrada seja limpa após enviar uma mensagem
      		textBox.Text = ""
      	end
      end)

3. Crie uma substituição para a janela de chat.Este é o ScrollingFrame que exibe mensagens conforme são recebidas de TextChatService.MessageReceived.Este passo também cria um UIListLayout para organizar automaticamente as mensagens.

   1. Crie outro novo ScreenGui e associá-lo a StarterGui .

   2. Crie um ScrollingFrame e associá-lo ao ScreenGui , então reposicione-o e redimensione-o como desejado.

   3. Crie um UIListLayout e associá-lo ao ScrollingFrame.

   4. Crie um LocalScript e associá-lo ao ScrollingFrame.

   5. Adicione o seguinte código ao LocalScript :

      Cliente
      local TextChatService = game:GetService("TextChatService")
      
      -- Função para criar uma nova etiqueta de texto para cada mensagem recebida
      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
      
      -- Comece a ouvir mensagens recebidas
      TextChatService.MessageReceived:Connect(addMessageGui)

      Ao usar o evento TextChatService.MessageReceived, é importante verificar se a mensagem já existe na janela de chat.Este evento é chamado uma vez ao enviar e uma vez ao receber a mensagem do servidor.

4. Teste sua experiência enviando mensagens na barra de entrada de chat.Você deve ver as mensagens aparecerem na janela de chat.Você pode então expandir esse exemplo adicionando recursos como focar o quando uma tecla é pressionada ou adicionando tags de bate-papo .