Interface utilisateur de chat texte personnalisée

Cet exemple montre comment utiliser la classe TextChatService pour concevoir votre propre frontend. Il réutilise les canaux de texte par défaut de CreateDefaultTextChannels et est très simple par rapport à l'interface utilisateur par défaut.

1. Désactivez l'interface utilisateur par défaut qui accompagne le TextChatService en définissant les propriétés ChatWindowConfiguration.Enabled et ChatInputBarConfiguration.Enabled sur false dans la fenêtre Propriétés de Studio.

2. Créez un remplacement pour la barre d'entrée de chat. C'est la zone de texte qui émet des messages lorsque l'utilisateur appuie sur Enter.

   1. Créez un ScreenGui et placez-le en tant qu'enfant de StarterGui.

   2. Créez un TextBox et placez-le dans le nouveau ScreenGui, puis repositionnez et redimensionnez selon vos besoins.

   3. Créez un LocalScript et placez-le dans le nouveau TextBox.

   4. Ajoutez le code suivant au LocalScript :

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral est le canal public par défaut
      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("Échec de l'envoi du message")
      		end
      
      		-- Les utilisateurs s'attendent à ce que la zone de saisie soit vidée après l'envoi d'un message
      		textBox.Text = ""
      	end
      end)

3. Créez un remplacement pour la fenêtre de chat. C'est le ScrollingFrame qui affiche les messages au fur et à mesure qu'ils sont reçus de TextChatService.MessageReceived. Cette étape crée également un UIListLayout pour organiser automatiquement les messages.

   1. Créez un autre nouveau ScreenGui et placez-le en tant qu'enfant de StarterGui.

   2. Créez un ScrollingFrame et placez-le dans le ScreenGui, puis repositionnez et redimensionnez selon vos besoins.

   3. Créez un UIListLayout et placez-le dans le ScrollingFrame.

   4. Créez un LocalScript et placez-le dans le ScrollingFrame.

   5. Ajoutez le code suivant au LocalScript :

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Fonction pour créer une nouvelle étiquette de texte pour chaque message reçu
      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
      
      -- Commencez à écouter les messages entrants
      TextChatService.MessageReceived:Connect(addMessageGui)

      Lors de l'utilisation de l'événement TextChatService.MessageReceived, il est important de vérifier si le message existe déjà dans la fenêtre de chat. Cet événement est appelé une fois lors de l'envoi et une fois lorsque le message est reçu du serveur.

4. Testez votre jeu en envoyant des messages dans la barre d'entrée de chat. Vous devriez voir les messages apparaître dans la fenêtre de chat. Vous pouvez ensuite développer cet exemple en ajoutant des fonctionnalités telles que le focus sur le TextBox lorsqu'une touche est enfoncée ou en ajoutant des tags de chat.