Interfaz de chat de texto personalizado

Este ejemplo muestra cómo usar la clase TextChatService para diseñar tu propio frontend.Reutiliza los canales de texto predeterminados de CreateDefaultTextChannels y es muy simple en comparación con la interfaz de usuario predeterminada.

1. Desactive la interfaz de usuario predeterminada que viene con el al configurar las propiedades y a en la ventana de propiedades de Studio.

2. Crea un reemplazo para la barra de entrada de chat. Esta es la caja de texto que emite mensajes cuando el usuario presiona Enter .

   1. Crea un ScreenGui y hazlo padre de StarterGui .

   2. Crea un TextBox y hazlo padre del nuevo ScreenGui , luego reposiciona y redimensiona como desees.

   3. Crea un LocalScript y hazlo padre del nuevo TextBox.

   4. Añade el siguiente código al LocalScript :

      Cliente
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral es el canal público predeterminado
      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
      
      		-- Los usuarios esperan que la caja de entrada se limpie después de enviar un mensaje
      		textBox.Text = ""
      	end
      end)

3. Crea una sustitución para la ventana de chat.Este es el ScrollingFrame que muestra mensajes como se reciben de TextChatService.MessageReceived .Este paso también crea un UIListLayout para distribuir automáticamente los mensajes.

   1. Crea otro nuevo ScreenGui y hazlo padre de StarterGui .

   2. Crea un ScrollingFrame y hazlo padre del ScreenGui , luego reposiciona y redimensiona como desees.

   3. Crea un UIListLayout y hazlo padre del ScrollingFrame.

   4. Crea un LocalScript y hazlo padre del ScrollingFrame.

   5. Añade el siguiente código al LocalScript :

      Cliente
      local TextChatService = game:GetService("TextChatService")
      
      -- Función para crear una nueva etiqueta de texto para cada mensaje recibido
      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
      
      -- Comience a escuchar mensajes entrantes
      TextChatService.MessageReceived:Connect(addMessageGui)

      Al usar el evento TextChatService.MessageReceived, es importante verificar si el mensaje ya existe en la ventana de chat.Este evento se llama una vez al enviar y una vez al recibir el mensaje del servidor.

4. Prueba tu experiencia enviando mensajes en la barra de entrada de chat.Deberías ver los mensajes aparecer en la ventana de chat.Luego puedes expandir este ejemplo agregando funciones como enfocar el cuando se presiona una tecla o agregando etiquetas de chat .