Aangepaste tekstchat UI

Dit voorbeeld laat zien hoe je de TextChatService klasse kunt gebruiken om je eigen frontend te ontwerpen. Het hergebruikt de standaard tekstkanalen van CreateDefaultTextChannels en is zeer eenvoudig in vergelijking met de standaard UI.

1. Schakel de standaard UI die bij de TextChatService wordt geleverd uit door de eigenschappen ChatWindowConfiguration.Enabled en ChatInputBarConfiguration.Enabled in het Eigenschappen venster van Studio op false te zetten.

2. Maak een vervanging voor de chatinvoerbalk. Dit is het tekstvak dat berichten verzendt wanneer de gebruiker op Enter drukt.

   1. Maak een ScreenGui en maak deze een kind van StarterGui.

   2. Maak een TextBox en maak deze een kind van de nieuwe ScreenGui, en herpositioneer en verander de grootte zoals gewenst.

   3. Maak een LocalScript en maak deze een kind van de nieuwe TextBox.

   4. Voeg de volgende code toe aan de LocalScript:

      Client

      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral is het standaard openbare kanaal
      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("Verzenden van bericht mislukt")
      		end
      
      		-- Gebruikers verwachten dat het invoervak wordt leeggemaakt na het verzenden van een bericht
      		textBox.Text = ""
      	end
      end)

3. Maak een vervanging voor het chatvenster. Dit is de ScrollingFrame die berichten weergeeft zodra ze worden ontvangen van TextChatService.MessageReceived. Deze stap maakt ook een UIListLayout aan om de berichten automatisch te rangschikken.

   1. Maak een andere nieuwe ScreenGui en maak deze een kind van StarterGui.

   2. Maak een ScrollingFrame en maak deze een kind van de ScreenGui, en herpositioneer en verander de grootte zoals gewenst.

   3. Maak een UIListLayout en maak deze een kind van de ScrollingFrame.

   4. Maak een LocalScript en maak deze een kind van de ScrollingFrame.

   5. Voeg de volgende code toe aan de LocalScript:

      Client

      local TextChatService = game:GetService("TextChatService")
      
      -- Functie om een nieuw tekstlabel te maken voor elk ontvangen bericht
      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
      
      -- Begin met luisteren naar binnenkomende berichten
      TextChatService.MessageReceived:Connect(addMessageGui)

      Bij het gebruik van het TextChatService.MessageReceived evenement is het belangrijk om te controleren of het bericht al bestaat in het chatvenster. Dit evenement wordt eenmaal aangeroepen bij het verzenden en eenmaal wanneer het bericht van de server wordt ontvangen.

4. Test je spel door berichten te verzenden in de chatinvoerbalk. Je zou de berichten in het chatvenster moeten zien verschijnen. Je kunt dit voorbeeld vervolgens uitbreiden door functies toe te voegen, zoals het focussen op de TextBox wanneer een toets wordt ingedrukt of het toevoegen van chat-tags.