Benutzerdefiniertes Text-Chat-UI

Dieses Beispiel zeigt, wie man die TextChatService-Klasse verwendet, um ein eigenes Frontend zu gestalten. Es verwendet die standardmäßigen Textkanäle von CreateDefaultTextChannels und ist im Vergleich zur Standard-UI sehr einfach.

1. Deaktivieren Sie die standardmäßige UI, die mit dem TextChatService geliefert wird, indem Sie die Eigenschaften ChatWindowConfiguration.Enabled und ChatInputBarConfiguration.Enabled im Eigenschaftenfenster von Studio auf false setzen.

2. Erstellen Sie einen Ersatz für die Chat-Eingabezeile. Dies ist das Textfeld, das Nachrichten sendet, wenn der Benutzer Enter drückt.

   1. Erstellen Sie ein ScreenGui und fügen Sie es StarterGui hinzu.

   2. Erstellen Sie ein TextBox und fügen Sie es dem neuen ScreenGui hinzu, und positionieren und ändern Sie die Größe nach Wunsch.

   3. Erstellen Sie ein LocalScript und fügen Sie es dem neuen TextBox hinzu.

   4. Fügen Sie den folgenden Code in das LocalScript ein:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral ist der standardmäßige öffentliche 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("Nachricht konnte nicht gesendet werden")
      		end
      
      		-- Benutzer erwarten, dass das Eingabefeld nach dem Senden einer Nachricht geleert wird
      		textBox.Text = ""
      	end
      end)

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

   1. Erstellen Sie ein weiteres neues ScreenGui und fügen Sie es StarterGui hinzu.

   2. Erstellen Sie ein ScrollingFrame und fügen Sie es dem ScreenGui hinzu, und positionieren und ändern Sie die Größe nach Wunsch.

   3. Erstellen Sie ein UIListLayout und fügen Sie es dem ScrollingFrame hinzu.

   4. Erstellen Sie ein LocalScript und fügen Sie es dem ScrollingFrame hinzu.

   5. Fügen Sie den folgenden Code in das LocalScript ein:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Funktion zum Erstellen eines neuen Text-Labels 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
      
      -- Beginnen Sie, auf eingehende Nachrichten zu hören
      TextChatService.MessageReceived:Connect(addMessageGui)

      Beim Verwenden des TextChatService.MessageReceived-Ereignisses ist es wichtig zu überprüfen, ob die Nachricht bereits im Chat-Fenster vorhanden ist. Dieses Ereignis wird einmal beim Senden und einmal beim Empfangen der Nachricht vom Server aufgerufen.

4. Testen Sie Ihr Spiel, indem Sie Nachrichten in der Chat-Eingabezeile senden. Sie sollten die Nachrichten im Chat-Fenster erscheinen sehen. Sie können dieses Beispiel dann erweitern, indem Sie Funktionen hinzufügen, wie das Fokussieren des TextBox, wenn eine Taste gedrückt wird, oder das Hinzufügen von Chat-Tags.