Niestandardowy interfejs czatu tekstowego

Ten przykład pokazuje jak użyć klasy TextChatService, aby zaprojektować swój własny interfejs użytkownika. Wykorzystuje on domyślne kanały tekstowe z CreateDefaultTextChannels i jest bardzo prosty w porównaniu do domyślnego interfejsu użytkownika.

1. Wyłącz domyślny interfejs użytkownika, który przychodzi z TextChatService, ustawiając właściwości ChatWindowConfiguration.Enabled i ChatInputBarConfiguration.Enabled na false w oknie Właściwości Studia.

2. Stwórz zamiennik dla paska wprowadzania czatu. To jest pole tekstowe, które emituje wiadomości, gdy użytkownik naciśnie Enter.

   1. Utwórz ScreenGui i umieść go w StarterGui.

   2. Utwórz TextBox i umieść go w nowym ScreenGui, następnie przesuń i zmień rozmiar według potrzeb.

   3. Utwórz LocalScript i umieść go w nowym TextBox.

   4. Dodaj następujący kod do LocalScript:

      Klient
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral to domyślny publiczny kanał
      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("Nie udało się wysłać wiadomości")
      		end
      
      		-- Użytkownicy oczekują, że pole wprowadzania zostanie wyczyszczone po wysłaniu wiadomości
      		textBox.Text = ""
      	end
      end)

3. Stwórz zamiennik dla okna czatu. To jest ScrollingFrame, które wyświetla wiadomości, gdy są one odbierane z TextChatService.MessageReceived. Ten krok również tworzy UIListLayout, aby automatycznie układać wiadomości.

   1. Utwórz kolejny nowy ScreenGui i umieść go w StarterGui.

   2. Utwórz ScrollingFrame i umieść go w ScreenGui, następnie przesuń i zmień rozmiar według potrzeb.

   3. Utwórz UIListLayout i umieść go w ScrollingFrame.

   4. Utwórz LocalScript i umieść go w ScrollingFrame.

   5. Dodaj następujący kod do LocalScript:

      Klient
      local TextChatService = game:GetService("TextChatService")
      
      -- Funkcja do tworzenia nowej etykiety tekstowej dla każdej wiadomości odebranej
      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
      
      -- Rozpocznij nasłuchiwanie na przychodzące wiadomości
      TextChatService.MessageReceived:Connect(addMessageGui)

      Podczas używania zdarzenia TextChatService.MessageReceived, ważne jest, aby sprawdzić, czy wiadomość już istnieje w oknie czatu. To zdarzenie jest wywoływane raz podczas wysyłania i raz, gdy wiadomość jest odbierana z serwera.

4. Przetestuj swoją grę, wysyłając wiadomości w pasku wejściowym czatu. Powinieneś zobaczyć wiadomości pojawiające się w oknie czatu. Możesz następnie rozwijać ten przykład, dodając funkcje, takie jak fokusowanie TextBox, gdy naciśniesz klawisz lub dodając tagi czatu.