Interfaz de usuario de chat de texto personalizada

Este ejemplo muestra cómo utilizar 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. Desactiva la interfaz de usuario predeterminada que viene con el TextChatService configurando las propiedades ChatWindowConfiguration.Enabled y ChatInputBarConfiguration.Enabled en false en la ventana 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 agrégalo a StarterGui.

   2. Crea un TextBox y agrégalo al nuevo ScreenGui, luego reposiciona y cambia el tamaño según desees.

   3. Crea un LocalScript y agrégalo al nuevo TextBox.

   4. Agrega el siguiente código al LocalScript:

      Client
      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("Error al enviar el mensaje")
      		end
      
      		-- Los usuarios esperan que la caja de entrada se limpie después de enviar un mensaje
      		textBox.Text = ""
      	end
      end)

3. Crea un reemplazo para la ventana de chat. Este es el ScrollingFrame que muestra los mensajes a medida que son recibidos desde TextChatService.MessageReceived. Este paso también crea un UIListLayout para organizar automáticamente los mensajes.

   1. Crea otro nuevo ScreenGui y agrégalo a StarterGui.

   2. Crea un ScrollingFrame y agrégalo al ScreenGui, luego reposiciona y cambia el tamaño según desees.

   3. Crea un UIListLayout y agrégalo al ScrollingFrame.

   4. Crea un LocalScript y agrégalo al ScrollingFrame.

   5. Agrega el siguiente código al LocalScript:

      Client
      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
      
      -- Comenzar a escuchar mensajes entrantes
      TextChatService.MessageReceived:Connect(addMessageGui)

      Al utilizar 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 cuando el mensaje es recibido del servidor.

4. Prueba tu juego 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 añadiendo características como enfocar el TextBox cuando se presiona una tecla o agregar etiquetas de chat.