Interfaccia di chat del testo personalizzata

Questo esempio mostra come utilizzare la classe TextChatService per progettare il tuo frontend.Riutilizza i canali di testo predefiniti da CreateDefaultTextChannels e è molto semplice rispetto all'interfaccia utente predefinita.

1. Disabilita l'interfaccia utente predefinita che viene fornita con il TextChatService impostando le proprietà ChatWindowConfiguration.Enabled e ChatInputBarConfiguration.Enabled a false nelle finestre Proprietà di Studio .

2. Crea una sostituzione per la barra di input della chat. Questa è la casella di testo che emette messaggi quando l'utente premere Enter .

   1. Crea un ScreenGui e affidalo a StarterGui.

   2. Crea un TextBox e affidalo al nuovo ScreenGui , quindi riposizionalo e ridimensionalo come desiderato.

   3. Crea un LocalScript e affidalo al nuovo TextBox.

   4. Aggiungi il seguente codice al LocalScript :

      Cliente
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral è il canale pubblico predefinito
      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
      
      		-- Gli utenti si aspettano che la casella di input venga cancellata dopo aver inviato un Messaggio
      		textBox.Text = ""
      	end
      end)

3. Crea una sostituzione per la finestra di chat.Questo è il ScrollingFrame che mostra i messaggi come vengono ricevuti da TextChatService.MessageReceived .Questo passaggio crea anche un UIListLayout per impostare automaticamente i messaggi.

   1. Crea un altro nuovo ScreenGui e affidalo a StarterGui .

   2. Crea un ScrollingFrame e affidalo al ScreenGui , quindi riposizionalo e ridimensionalo come desiderato.

   3. Crea un UIListLayout e affidalo al ScrollingFrame.

   4. Crea un LocalScript e affidalo al ScrollingFrame.

   5. Aggiungi il seguente codice al LocalScript :

      Cliente
      local TextChatService = game:GetService("TextChatService")
      
      -- Funzione per creare una nuova etichetta di testo per ogni messaggio ricevuto
      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
      
      -- Inizia a ascoltare i messaggi in arrivo
      TextChatService.MessageReceived:Connect(addMessageGui)

      Quando si utilizza l'evento TextChatService.MessageReceived, è importante controllare se il messaggio esista già nella finestra di chat.Questo evento viene chiamato una volta quando viene inviato e una volta quando il messaggio viene ricevuto dal Server.

4. Prova la tua esperienza inviando messaggi nella barra di input della chat.Dovresti vedere i messaggi apparire nella finestra di chat.Puoi quindi espandere questo esempio aggiungendo funzionalità come il focus del TextBox quando viene premuta una chiave o aggiungendo tag di chat .