Personnaliser la fenêtre de chat

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)

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.

Apparence de la fenêtre

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

Apparence de la barre d'entrée

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

Apparence des onglets de canal

L'apparence des onglets de canal est personnalisable via .

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.

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 .

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.

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)

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)