Benutzerdefinierte Text-Chat-UI

Dieses Beispiel zeigt, wie man die TextChatService-Klasse verwendet, um dein eigenes Frontend zu entwerfen.Es verwendet die Standardtextkanäle von CreateDefaultTextChannels und ist im Vergleich zur Standard-UI sehr einfach.

1. Deaktivieren Sie die Standard-Benutzeroberfläche, die mit der TextChatService mitgeliefert wird, indem Sie die ChatWindowConfiguration.Enabled und ChatInputBarConfiguration.Enabled Eigenschaften auf false im Studio-Fenster Eigenschaften einstellen.

2. Erstellen Sie einen Ersatz für die Chat-Eingabeleiste. Dies ist die Textbox, die Nachrichten aussendet, wenn der Benutzer Enter drückt.

   1. Erstellen Sie ein ScreenGui und überlassen Sie es StarterGui .

   2. Erstellen Sie ein TextBox und überlassen Sie es dem neuen ScreenGui, dann positionieren und skalieren es wie gewünscht.

   3. Erstellen Sie ein LocalScript und überlassen Sie es dem neuen TextBox.

   4. Füge den folgenden Code zum LocalScript hinzu:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral ist der Kanal
      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
      
      		-- Benutzer erwarten, dass die Eingabebox nach dem Versenden einer Nachricht geleert wird
      		textBox.Text = ""
      	end
      end)

3. Erstelle einen Ersatz für das Chat-Fenster.Das ist die ScrollingFrame, die Nachrichten anzeigt, wie sie von TextChatService.MessageReceived empfangen werden.Dieser Schritt erstellt auch ein UIListLayout, um die Nachrichten automatisch anzuordnen.

   1. Erstelle ein weiteres neues ScreenGui und übergebe es als Eltern an StarterGui.

   2. Erstellen Sie ein ScrollingFrame und überlassen Sie es der ScreenGui , dann positionieren Sie es neu und skalieren Sie es wie gewünscht.

   3. Erstellen Sie ein UIListLayout und überlassen Sie es dem ScrollingFrame.

   4. Erstellen Sie ein LocalScript und überlassen Sie es dem ScrollingFrame.

   5. Füge den folgenden Code zum LocalScript hinzu:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Funktion zum Erstellen eines neuen Textlabels für jede empfangene Nachricht
      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
      
      -- Beginne, eingehende Nachrichten zu hören
      TextChatService.MessageReceived:Connect(addMessageGui)

      Wenn du das Ereignis TextChatService.MessageReceived verwendest, ist es wichtig zu überprüfen, ob die Nachricht bereits im Chat-Fenster existiert.Dieses Ereignis wird einmal beim Versenden und einmal beim Empfang der Nachricht vom Server ausgerufen.

4. Teste deine Erfahrung, indem du Nachrichten in der Chat-Eingabeleiste sendest.Du solltest sehen, dass die Nachrichten im Chat-Fenster erscheinen.Du kannst dann auf diesem Beispiel aufbauen, indem du Funktionen wie das Fokussieren von TextBox hinzufügst, wenn eine Taste gedrückt wird, oder Chat-Tags hinzufügst.