Personalize a janela de chat

O sistema de bate-papo de texto na experiência, alimentado por TextChatService, permite que os jogadores se comuniquem e socializem facilmente uns com os outros em experiências ao vivo.Além de suportar o chat de texto padrão, você pode personalizar a interface de usuário front-end.

Configuração da janela de chat

A janela de chat geral consiste em:

• Janela de chat
• Barra de entrada
• Abas de canal (opcional)

As abas de canal são desativadas por padrão e cada componente pode ser ativado e desativado no Studio ou através de scripts:

Na janela Explorer, expanda a ramificação TextChatService e selecione ChatWindowConfiguration , ChatInputBarConfiguration ou ChannelTabsConfiguration.Então ative ou desative o componente na janela Propriedades.

Quando ChannelTabsConfiguration é habilitado, cada padrão TextChannel aparece em uma aba como descrito na seguinte tabela.Além disso, cada personalizado TextChannel cria uma aba correspondente à propriedade do canal Name.

Aparência da janela

A aparência da janela de chat geral é personalizável através de ChatWindowConfiguration .

Aparência da barra de entrada

A aparência da barra de entrada de chat é personalizável através de ChatInputBarConfiguration .

Aparência das abas de canal

A aparência das abas do canal é personalizável através de .

Personalizar mensagens

Você pode personalizar a aparência de corpos de mensagens de chat e prefixos usando ChatWindowMessageProperties e TextChatService.OnChatWindowAdded chamadas de retorno sem substituir a UI existente.As opções de personalização permitem que você modifique a aparência das mensagens de bate-papo para combinar com o tema da sua experiência e você também pode classificar ou destacar mensagens de diferentes grupos de usuários colorindo prefixos ou adicionando tags de bate-papo.

Nomes de usuários coloridos

Quando um usuário envia uma mensagem de bate-papo, sua DisplayName é exibida como a parte do prefixo da mensagem.Por padrão, o nome de cada usuário é colorido de acordo com seu Player.TeamColor mas você pode alterar as cores dos nomes de chat usando ChatWindowMessageProperties e OnChatWindowAdded .O seguinte LocalScript em StarterPlayerScripts atribui uma cor predeterminada a cada usuário, escolhendo aleatoriamente de uma tabela de cores RGB.

LocalScript - Cores de Nome de Usuário Aleatórias
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

Você também pode aplicar gradientes de cor e transparência a prefixos de mensagens de cores usando UIGradient.

Cores de Nome de Usuário Gradiente
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

Personalização de texto rico

As etiquetas de cores de texto rico podem ser usadas para formatar mensagens de chat, úteis se você quiser aplicar formatação a partes muito específicas da mensagem.Observe que o texto rico não suporta gradientes, mas o seguinte exemplo de código mostra como você pode mover o nome do usuário (armazenado em TextChatMessage.PrefixText ) para o corpo da mensagem e depois aplicar a etiqueta de texto rico apenas à parte do nome.

Personalização de Texto Rico
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

Mensagens de fontes não jogadoras

Quando TextChatService.CreateDefaultTextChannels é true, um dos canais de texto padrão é o canal RBXSystem.Os scripts de chat padrão exibem automaticamente mensagens do sistema neste canal.Você pode personalizar a aparência dessas mensagens usando o TextChannel.OnIncomingMessage retorno de chamada.

Você pode querer personalizar ou alterar as mensagens do sistema que são emitidas automaticamente pelo sistema de chat.Como as mensagens padrão do sistema são localizadas para os usuários, você deve referenciá-las por TextChatMessage.Metadata em seus chamados de chat de texto se quiser personalizar sua aparência.Por exemplo, você pode usar Metadata para identificar mensagens do sistema, mensagens de erro ou mensagens de sistemas específicos em sua experiência.

Sistema

Para entregar uma mensagem do sistema para o jogador local, como "discurso" de um sistema de endereçamento público, chame DisplaySystemMessage() do canal padrão RBXGeneral com um prefixo antes do nome de exibição do jogador.

Script do Cliente
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 "

-- Envie "mensagem do sistema" para o jogador com o nome de exibição anexado
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)

NPC/objeto

Você também pode estilizar diálogo não-jogador e adicionar bolhas de chat para fazer parecer que as mensagens estão vindo de um NPC ou objeto dentro do mundo 3D.

Script do Cliente
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")

	-- Verifique mensagens do sistema que contenham metadados
	if not textChatMessage.TextSource and textChatMessage.Metadata ~= "" then

		-- Adicione o prefixo para fazer a mensagem parecer que foi enviada por um jogador
		properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "#50C999", textChatMessage.Metadata)

		-- Adicionar bate-papo de bolhas
		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)