Personalizar bate-papo de bolhas

Com Serviço de Chat de Texto, você pode usar o bate-papo de bolhas para exibir bolhas de chat personalizáveis acima de avatares de usuários e NPCs.O bate-papo de bolhas pode tornar sua experiência mais visualmente imersiva e ajudar os usuários a identificar facilmente mensagens e seus oradores de maneira contextualmente relevante.Essa característica é especialmente útil para experiências em que os usuários precisam se concentrar no conteúdo, enquanto se comunicam com outros de uma maneira menos intrusiva.

Ativar bate-papo de bolhas

Para habilitar o bate-papo de bolhas em sua experiência:

1. Na janela Explorer, selecione BubbleChatConfiguration sob TextChatService.

   

2. Na janela Propriedades, verifique a caixa de seleção BubbleChatConfiguration.Enabled.

   

Personalização de bolhas

Depois de ativar o bate-papo de bolhas, você pode personalizar a aparência e o comportamento de suas bolhas de bate-papo para combinar com o tema da sua experiência.Use a janela Propriedades de BubbleChatConfiguration para mudanças básicas como cor de texto e espaçamento, ou implemente personalização avançada para imagens de fundo de 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 tempo de execução, substituindo as configurações no Studio.É útil para adicionar efeitos especiais às bolhas de bate-papo quando os usuários acionam determinados eventos ou condições.

Personalização básica

A tabela a seguir mostra as propriedades de personalização de bate-papo de bolhas comuns. Para uma lista completa de propriedades de personalização, veja BubbleChatConfiguration.

Personalização avançada

Para personalização avançada da sua bolha, adicione objetos de interface representando certos aspectos da aparência da bolha como crianças sob BubbleChatConfiguration, incluindo:

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

Depois de adicionar esses objetos, você pode modificar as propriedades desses objetos aplicáveis às bolhas de bate-papo para personalização avançada de bolhas.O seguinte exemplo LocalScript adiciona uma imagem de fundo e cantos afiados às bolhas:

Personalização avançada de 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 seguintes tabelas descrevem os modificadores de aparência disponíveis GuiObject e crianças junto com suas propriedades de personalização válidas:

Personalização por bolha

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

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

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

O seguinte exemplo adiciona uma aparência especial às bolhas de chat de usuários VIP verificando se um remetente de mensagens de chat tem o atributo IsVIP:

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

-- Manuseador de eventos para quando uma nova bolha de chat é adicionada à experiência
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Verifique se a mensagem de bate-papo tem uma Fonte de Texto (enviador) associada a ela
	if message.TextSource then
		-- Crie uma nova instância de BubbleChatMessageProperties para personalizar a bolha de chat
		local bubbleProperties = Instance.new("BubbleChatMessageProperties")

		-- Obtenha o usuário que enviou a mensagem de bate-papo com base em seu UserId
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		if player:GetAttribute("IsVIP") then
			-- Se o jogador for VIP, personalize 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 avançadas de personalização estão disponíveis para personalização por bolha.Semelhante à personalização avançada para bolhas gerais, adicione instâncias que você deseja personalizar como filhos de BubbleChatMessageProperties .O seguinte exemplo adiciona um efeito de gradiente especial junto com outras propriedades para bolhas de chat de usuários com baixo status de saúde verificando a propriedade Humanoid.Health dos personagens dos enviadores de mensagens de chat:

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

-- Manuseador de eventos para quando uma nova bolha de chat é adicionada à experiência
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Verifique se a mensagem de bate-papo tem uma Fonte de Texto (enviador) associada a ela
	if message.TextSource then
		-- Obtenha o usuário que enviou a mensagem de bate-papo usando seu UserId
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

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

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

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

			-- Adicione 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 bate-papo quando os jogadores não enviaram uma mensagem, como com 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 Canais de Texto usando o TextChatService.OnBubbleAdded callback .

Bolhas de PNJ

Exibir bolhas de chat para personagens não jogadores (NPCs) ao chamar TextChatService:DisplayBubble(character, message), com o personagem NPC e a mensagem como parâmetros.Essas bolhas são personalizáveis usando o TextChatService.OnBubbleAdded retorno de chamada, 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 para Enum.RunContext.Client , ou um LocalScript em um recipiente apropriado, como StarterPlayerScripts.Se você anexar um ProximityPrompt a um NPC, um script para exibir uma bolha de chat pode parecer com isso:

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, "Hello world!")
end)