Personnaliser la fenêtre de chat

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

Le système de chat de texte en expérience , alimenté par , permet aux joueurs de communiquer et de socialiser facilement les uns avec les autres dans des expériences en direct.En plus de prendre en charge le chat texte par défaut, vous pouvez personnaliser l'interface utilisateur front-end.

Configuration de la fenêtre de chat

La fenêtre de chat globale se compose de :

  • Fenêtre de chat
  • Barre d'entrée
  • Onglets de canal (facultatif)
Core components of the text chat window.

Les onglets de canal sont désactivés par défaut et chaque composant peut être activé et désactivé dans Studio ou via le scripting :

Dans la fenêtre Explorateur, étendez la branche TextChatService et sélectionnez ChatWindowConfiguration , ChatInputBarConfiguration ou ChannelTabsConfiguration .Ensuite, activez ou désactivez le composant dans la fenêtre propriétés.

Lorsque ChannelTabsConfiguration est activé, chaque valeur par défaut TextChannel apparaît dans un onglet comme indiqué dans la table suivante.En outre, chaque personnalisation TextChannel crée une rubrique correspondant à la propriété du canal Name.

Chaîne par défautNom de l'onglet
RBXGeneral Général
RBXSystem Général (combiné en une seule colonne avec RBXGeneral )
RBXTeam Équipe
RBXWhisperNom d'utilisateur de l'autre joueur

Apparence de la fenêtre

L'apparence de la fenêtre de chat globale est personnalisable via ChatWindowConfiguration.

ChatWindowConfiguration instance in Explorer hierarchy.
PropriétéAvertissementPar défaut
BackgroundColor3Color3 couleur de fond de la fenêtre de chat.[25, 27, 29]
BackgroundTransparencyTransparence du fond de la fenêtre de chat.0.3
FontFaceFont du texte de la fenêtre de chat.BuilderSansMedium
TextColor3Color3 du texte de la fenêtre de chat.[255, 255, 255]
TextSizeTaille du texte de la fenêtre de chat.14
TextStrokeColor3Color3 de la trace pour le texte de la fenêtre de chat.[0, 0, 0]
TextStrokeTransparencyTransparence du trait pour le texte de la fenêtre de chat.0.5
HorizontalAlignmentAlignement horizontal de la fenêtre de chat.Left
VerticalAlignmentAlignement vertical de la fenêtre de chat.Top
HeightScaleÉchelle de hauteur de la fenêtre de chat par rapport à la taille de l'écran.1
WidthScaleÉchelle de largeur de la fenêtre de chat par rapport à la taille de l'écran.1

Apparence de la barre d'entrée

L'apparence de la barre de saisie de chat est personnalisable via ChatInputBarConfiguration.

ChatInputBarConfiguration instance in Explorer hierarchy.
PropriétéAvertissementPar défaut
BackgroundColor3Color3 couleur de fond de la barre d'entrée de chat.[25, 27, 29]
BackgroundTransparencyTransparence du fond de la barre de saisie de chat.0.2
FontFaceFont du texte d'entrée de chat.BuilderSansMedium
PlaceholderColor3Color3 du texte d'entrée de chat de remplacement.[178, 178, 178]
TextColor3Color3 du texte d'entrée de chat entré par le joueur.[255, 255, 255]
TextSizeTaille du texte d'entrée de chat.14
TextStrokeColor3Color3 couleur du contour du texte d'entrée de chat.[0, 0, 0]
TextStrokeTransparencyTransparence du trait pour le texte d'entrée de chat.0.5
AutocompleteEnabledSi le système de chat texte affiche des options d'autocomplétion pour les emojis et les commandes de.Les emojis sont autocomplétés en tapant : suivi de caractères non blancs, tandis que les commandes sont autocomplétées en tapant /.true
KeyboardKeyCodeLes joueurs clés supplémentaires peuvent appuyer pour déclencher la concentration sur la barre d'entrée de chat par défaut.Slash

Apparence des onglets de canal

L'apparence des onglets de canal est personnalisable via .

ChannelTabsConfiguration instance in Explorer hierarchy.
PropriétéAvertissementPar défaut
BackgroundColor3Color3 couleur de fond des onglets de canal.[25, 27, 29]
BackgroundTransparencyTransparence du fond des onglets de canal.0
HoverBackgroundColor3Color3 couleur de fond des onglets lorsqu'on survole dessus.[125, 125, 125]
FontFaceFont pour le texte dans les onglets de canal.BuilderSansBold
TextColor3Color3 du texte dans un onglet non sélectionné.[175, 175, 175]
SelectedTabTextColor3Color3 du texte dans un onglet sélectionné.[255, 255, 255]
TextSizeTaille du texte dans les onglets de canal.18
TextStrokeColor3Color3 couleur du contour du texte dans les onglets de chaîne.[0, 0, 0]
TextStrokeTransparencyTransparence du trait pour le texte dans les onglets de canal.1

Personnaliser les messages

Vous pouvez personnaliser l'apparence des corps de message de chat et des préfixes en utilisant les rappels ChatWindowMessageProperties et TextChatService.OnChatWindowAdded sans remplacer l'interface utilisateur existante.Les options de personnalisation vous permettent de modifier l'apparence des messages de chat pour correspondre au thème de votre expérience, et vous pouvez également trier ou mettre en évidence les messages de différents groupes d'utilisateurs en colorant les préfixes ou en ajoutant des balises de chat.

Noms d'utilisateur couleur

Lorsqu'un utilisateur envoie un message de chat, sa partie préfixe du message s'affiche comme DisplayName.Par défaut, le nom de chaque utilisateur est coloré selon son Player.TeamColor mais vous pouvez modifier les couleurs des noms de chat en utilisant ChatWindowMessageProperties et OnChatWindowAdded .Le suivant LocalScript dans StarterPlayerScripts attribue une couleur prédéterminée à chaque utilisateur, choisissant au hasard parmi une table de couleurs RGB.

Colored user name in the chat window.
LocalScript - Couleurs de nom d'utilisateur aléatoires

local TextChatService = game:GetService("TextChatService")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration
local nameColors = {
Color3.fromRGB(255, 0, 0),
Color3.fromRGB(0, 255, 0),
Color3.fromRGB(0, 0, 255),
Color3.fromRGB(255, 255, 0),
}
TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
local properties = chatWindowConfiguration:DeriveNewMessageProperties()
local textSource = message.TextSource
if textSource then
local index: number = (textSource.UserId % #nameColors) + 1
local randomColor: Color3 = nameColors[index]
properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
properties.PrefixTextProperties.TextColor3 = randomColor
end
return properties
end

Vous pouvez également appliquer des gradients de couleur et de transparence aux préfixes de message de couleur en utilisant UIGradient .

Gradient user name in the chat window.
Couleurs du nom d'utilisateur graduées

local TextChatService = game:GetService("TextChatService")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration
local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 255, 0)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 255))
}
TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
local properties = chatWindowConfiguration:DeriveNewMessageProperties()
local textSource = message.TextSource
if textSource then
properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
gradient:Clone().Parent = properties.PrefixTextProperties
end
return properties
end

Personnalisation du texte enrichi

Les balises de couleur du texte enrichi peuvent être utilisées pour former des messages de chat, utiles si vous voulez appliquer une mise en forme à des parties très spécifiques du message.Notez que le texte enrichi ne prend pas en charge les gradients, mais l'exemple de code suivant montre comment vous pouvez déplacer le nom de l'utilisateur (stocke dans TextChatMessage.PrefixText ) dans le corps du message et appliquer ensuite une balise de texte enrichi uniquement à la partie du nom.

Rich text customization of user name in the chat window.
Personnalisation du texte enrichi

local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration
local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 255, 0)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 255))
}
TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
local properties = chatWindowConfiguration:DeriveNewMessageProperties()
if message.TextSource then
properties.PrefixText = "[VIP]"
properties.Text = string.format("<font color='#00ffff'>%s</font>", message.PrefixText) .. " " .. message.Text
properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
gradient:Clone().Parent = properties.PrefixTextProperties
end
return properties
end

Messages provenant de sources non joueurs

Lorsque TextChatService.CreateDefaultTextChannels est true, l'un des canaux de texte par défaut est le canal RBXSystem.Les scripts de chat par défaut affichent automatiquement les messages du système dans ce canal.Vous pouvez personnaliser l'apparence de ces messages en utilisant le rappel TextChannel.OnIncomingMessage.

Vous pouvez vouloir personnaliser ou modifier les messages du système émis automatiquement par le système de chat.Puisque les messages système par défaut sont localisés pour les utilisateurs, vous devez les référencer par TextChatMessage.Metadata dans vos appels de chat texte si vous souhaitez personnaliser leur apparence.Par exemple, vous pouvez utiliser Metadata pour identifier les messages du système, les messages d'erreur ou les messages de systèmes spécifiques dans votre expérience.

Système

Pour transmettre un message système au joueur local, comme « discours » d'un système d'adresses publiques, appelez DisplaySystemMessage() du canal par défaut RBXGeneral avec un préfixe avant le nom d'affichage du joueur.

Script du client

local Players = game:GetService("Players")
local TextChatService = game:GetService("TextChatService")
local player = Players.LocalPlayer
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral
local PREFIX = "[Guide] Welcome "
-- Envoyer le « message du système » au joueur avec son nom d'affichage ajouté
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)
Image showing a basic system message in the chat window.

NPC/objet

Vous pouvez également styliser le dialogue non joueur et ajouter bulles de chat pour faire paraître que les messages proviennent d'un PNJ ou d'un objet dans le monde 3D.

Script du client

local TextChatService = game:GetService("TextChatService")
local Workspace = game:GetService("Workspace")
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral
TextChatService.OnIncomingMessage = function(textChatMessage: TextChatMessage)
local properties = Instance.new("TextChatMessageProperties")
-- Vérifier les messages du système qui contiennent des métadonnées
if not textChatMessage.TextSource and textChatMessage.Metadata ~= "" then
-- Ajouter un préfixe pour faire en sortir que le message a été envoyé par un joueur
properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "#50C999", textChatMessage.Metadata)
-- Ajouter le chat à bulles
TextChatService:DisplayBubble(Workspace.Statue, textChatMessage.Text)
end
return properties
end
local message = "Welcome! I will be your guide."
local speakerName = "Ancient Knight"
generalChannel:DisplaySystemMessage(message, speakerName)
Image showing a knight statue NPC broadcasting a chat message to the chat window, along with a chat bubble above its head.