Personalizar chat em bolhas

Com o TextChatService, você pode usar o chat em bolhas para exibir bolhas de chat personalizáveis acima dos avatares dos usuários e NPCs. O chat em bolhas pode tornar seu jogo mais imersivo visualmente e ajudar os usuários a identificar facilmente as mensagens e seus remetentes de uma maneira contextualmente relevante. Esse recurso é especialmente útil para jogos onde os usuários precisam se concentrar no conteúdo enquanto se comunicam com outros de maneira menos intrusiva.

Habilitar chat em bolhas

Para habilitar o chat em bolhas em seu jogo:

1. Na janela Explorer, selecione BubbleChatConfiguration sob TextChatService.

   

2. Na janela Properties, marque a caixa BubbleChatConfiguration.Enabled.

   

Personalização de bolhas

Após habilitar o chat em bolhas, você pode personalizar a aparência e o comportamento de suas bolhas de chat para combinar com o tema do seu jogo. Utilize a janela Properties de BubbleChatConfiguration para alterações básicas como cor do texto e espaçamento, ou implemente personalizações avançadas para imagens de fundo das bolhas e outros ajustes visuais.

Alternativamente, adicione um LocalScript em StarterPlayerScripts com todas as suas configurações de personalização. Isso permite que o motor aplique suas personalizações durante a execução, substituindo as configurações no Studio. É útil para adicionar efeitos especiais às bolhas de chat quando os usuários acionam certos eventos ou condições.

Personalização básica

A tabela a seguir mostra as propriedades comuns de personalização do chat em bolhas. Para uma lista completa de propriedades de personalização, consulte BubbleChatConfiguration.

Personalização avançada

Para personalização avançada de sua bolha, adicione objetos de interface do usuário representando certos aspectos da aparência da bolha como filhos sob BubbleChatConfiguration, incluindo:

• ImageLabel para configurações da imagem de fundo.
• UIGradient para configurações de gradiente de fundo.
• UICorner para a forma dos cantos das bolhas.
• UIPadding para o espaço de preenchimento entre o texto e as bordas da bolha, em relação ao tamanho normal do pai.

Após adicionar esses objetos, você pode modificar as propriedades desses objetos que se aplicam às bolhas de chat para uma personalização de bolhas avançada. O seguinte exemplo de LocalScript adiciona uma imagem de fundo e cantos afiados às bolhas:

Personalização Avançada das Bolhas
local TextChatService = game:GetService("TextChatService")

local bubbleChatConfiguration = TextChatService.BubbleChatConfiguration
bubbleChatConfiguration.TailVisible = false
bubbleChatConfiguration.TextColor3 = Color3.fromRGB(220, 50, 50)
bubbleChatConfiguration.FontFace = Font.fromEnum(Enum.Font.LuckiestGuy)

local bubbleUICorner = bubbleChatConfiguration:FindFirstChildOfClass("UICorner")
if not bubbleUICorner then
	bubbleUICorner = Instance.new("UICorner")
	bubbleUICorner.Parent = bubbleChatConfiguration
end
bubbleUICorner.CornerRadius = UDim.new(0, 0)

local bubbleUIPadding = bubbleChatConfiguration:FindFirstChildOfClass("UIPadding")
if not bubbleUIPadding then
	bubbleUIPadding = Instance.new("UIPadding")
	bubbleUIPadding.Parent = bubbleChatConfiguration
end
bubbleUIPadding.PaddingTop = UDim.new(0, 20)
bubbleUIPadding.PaddingRight = UDim.new(0, 10)
bubbleUIPadding.PaddingBottom = UDim.new(0, 15)
bubbleUIPadding.PaddingLeft = UDim.new(0, 10)

local bubbleImageLabel = bubbleChatConfiguration:FindFirstChildOfClass("ImageLabel")
if not bubbleImageLabel then
	bubbleImageLabel = Instance.new("ImageLabel")
	bubbleImageLabel.Parent = bubbleChatConfiguration
end
bubbleImageLabel.Image = "rbxassetid://109157529833093"
bubbleImageLabel.ScaleType = Enum.ScaleType.Slice
bubbleImageLabel.SliceCenter = Rect.new(40, 40, 320, 120)
bubbleImageLabel.SliceScale = 0.5

As tabelas a seguir descrevem os filhos disponíveis de GuiObject e modificadores de aparência junto com suas propriedades de personalização válidas:

Personalização por bolha

Você pode estilizar e modificar individualmente os comportamentos das bolhas de chat com base em condições específicas para substituir suas configurações gerais. Por exemplo, você pode usar bolhas de chat para diferenciar NPCs e usuários, destacar status crítico de saúde e aplicar efeitos especiais a mensagens com palavras-chave pré-definidas.

Para definir a personalização por bolha, adicione um LocalScript do lado do cliente usando BubbleChatMessageProperties, que substitui propriedades correspondentes de BubbleChatConfiguration, e o callback TextChatService.OnBubbleAdded para especificar como personalizar cada bolha. O callback fornece a você a propriedade TextChatMessage assim como o adornee, para que você possa aplicar a personalização com base em atributos associados a usuários, ao conteúdo do texto do chat, propriedades do personagem do usuário e quaisquer condições especiais que você deseje definir.

As seguintes propriedades de personalização básicas estão disponíveis para personalização por bolha:

O exemplo a seguir adiciona uma aparência especial às bolhas de chat de usuários VIP verificando se o remetente de uma mensagem de chat possui o atributo IsVIP:

Bolhas VIP
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

-- Manipulador de eventos para quando uma nova bolha de chat é adicionada ao jogo
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Verifica se a mensagem de chat tem um TextSource (remetente) associado a ela
	if message.TextSource then
		-- Cria uma nova instância de BubbleChatMessageProperties para personalizar a bolha de chat
		local bubbleProperties = Instance.new("BubbleChatMessageProperties")

		-- Obtém o usuário que enviou a mensagem de chat com base em seu UserId
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		if player:GetAttribute("IsVIP") then
			-- Se o jogador é um VIP, personaliza as propriedades da bolha de chat
			bubbleProperties.TextColor3 = Color3.fromHex("#F5CD30")
			bubbleProperties.BackgroundColor3 = Color3.fromRGB(25, 27, 29)
			bubbleProperties.FontFace = Font.fromEnum(Enum.Font.PermanentMarker)
		end
		return bubbleProperties
	end
end

Todas as opções de personalização avançada estão disponíveis para personalização por bolha. Assim como na personalização avançada para bolhas gerais, adicione instâncias que você deseja personalizar como filhos de BubbleChatMessageProperties. O exemplo a seguir adiciona um efeito de gradiente especial junto com outras propriedades às bolhas de chat de usuários com baixo status de saúde, verificando a propriedade Humanoid.Health dos personagens que enviam mensagens de chat:

Bolhas de Baixa Saúde
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

-- Manipulador de eventos para quando uma nova bolha de chat é adicionada ao jogo
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Verifica se a mensagem de chat tem um TextSource (remetente) associado a ela
	if message.TextSource then
		-- Obtém o usuário que enviou a mensagem de chat usando seu UserId
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		-- Encontra o humanoide no personagem do usuário
		local humanoid = player.Character:FindFirstChildWhichIsA("Humanoid")

		if humanoid and humanoid.Health < 25 then
			-- Cria uma nova instância de BubbleChatMessageProperties para personalizar a bolha de chat
			local bubbleProperties :BubbleChatMessageProperties = Instance.new("BubbleChatMessageProperties")

			-- Personaliza as propriedades da bolha de chat para condição de baixa saúde
			bubbleProperties.BackgroundColor3 = Color3.fromRGB(245, 245, 245)
			bubbleProperties.TextColor3 = Color3.fromRGB(234, 51, 96)
			bubbleProperties.TextSize = 20
			bubbleProperties.FontFace = Font.fromEnum(Enum.Font.DenkOne)

			-- Adiciona um UIGradient como filho para personalizar o gradiente
			local uiGradient : UIGradient = Instance.new("UIGradient")
			uiGradient.Color = ColorSequence.new(Color3.fromRGB(110, 4, 0), Color3.fromRGB(0, 0, 0))
			uiGradient.Rotation = 90
			uiGradient.Parent = bubbleProperties

			return bubbleProperties
		end
	end
end

Exibir bolhas manualmente

Você pode querer exibir uma bolha de chat quando os jogadores não enviaram uma mensagem, como no caso de NPCs. Use o método TextChatService:DisplayBubble() para exibir manualmente uma bolha de chat.

A personalização dessas bolhas é a mesma que a personalização das bolhas que são exibidas automaticamente quando os Jogadores enviam mensagens através de TextChannels usando o TextChatService.OnBubbleAdded callback.

Bolhas de NPC

Exiba bolhas de chat para personagens não jogáveis (NPCs) chamando TextChatService:DisplayBubble(character, message), com o personagem NPC e a mensagem como parâmetros. Essas bolhas são personalizáveis usando o callback TextChatService.OnBubbleAdded, assim como qualquer outra bolha de chat.

TextChatService:DisplayBubble() só funciona em scripts do lado do cliente, portanto, certifique-se de usar um Script com RunContext definido como Enum.RunContext.Client, ou um LocalScript em um container apropriado, como StarterPlayerScripts. Se você anexar um ProximityPrompt a um NPC, um script para exibir uma bolha de chat pode parecer assim:

local TextChatService = game:GetService("TextChatService")
local Workspace = game:GetService("Workspace")

local prompt = Workspace.SomeNPC.ProximityPrompt
local head = prompt.Parent:WaitForChild("Head")

prompt.Triggered:Connect(function()
	TextChatService:DisplayBubble(head, "Olá, mundo!")
end)