Interfaccia utente personalizzata per la chat testuale

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

1. Disabilita l'interfaccia utente predefinita fornita con il TextChatService impostando le proprietà ChatWindowConfiguration.Enabled e ChatInputBarConfiguration.Enabled su false nella finestra Proprietà di Studio.

2. Crea un sostituto per la barra di input della chat. Questa è la casella di testo che emette messaggi quando l'utente preme Invio.

   1. Crea un ScreenGui e parentalo a StarterGui.

   2. Crea un TextBox e parentalo al nuovo ScreenGui, quindi riporta in posizione e ridimensiona come desiderato.

   3. Crea un LocalScript e parentalo al nuovo TextBox.

   4. Aggiungi il seguente codice al LocalScript:

      Client
      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("Invio del messaggio fallito")
      		end
      
      		-- Gli utenti si aspettano che la casella di input venga svuotata dopo aver inviato un messaggio
      		textBox.Text = ""
      	end
      end)

3. Crea un sostituto per la finestra della chat. Questo è il ScrollingFrame che visualizza i messaggi man mano che vengono ricevuti da TextChatService.MessageReceived. Questo passaggio crea anche un UIListLayout per disporre automaticamente i messaggi.

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

   2. Crea un ScrollingFrame e parentalo al ScreenGui, quindi riporta in posizione e ridimensiona come desiderato.

   3. Crea un UIListLayout e parentalo al ScrollingFrame.

   4. Crea un LocalScript e parentalo al ScrollingFrame.

   5. Aggiungi il seguente codice al LocalScript:

      Client
      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 ad ascoltare i messaggi in arrivo
      TextChatService.MessageReceived:Connect(addMessageGui)

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

4. Testa il tuo gioco inviando messaggi nella barra di input della chat. Dovresti vedere i messaggi apparire nella finestra della chat. Puoi quindi espandere questo esempio aggiungendo funzionalità come mettere a fuoco il TextBox quando viene premuto un tasto o aggiungendo tag per la chat.