Personalizar el chat burbuja

Con TextChatService, puedes usar el chat burbuja para mostrar burbujas de chat de voz personalizables sobre los avatares de los usuarios y los NPCs. El chat burbuja puede hacer que tu juego sea más visualmente inmersivo y ayudar a los usuarios a identificar fácilmente los mensajes y sus hablantes de una manera contextualmente relevante. Esta función es especialmente útil para juegos donde los usuarios necesitan concentrarse en el contenido mientras se comunican con otros de una manera menos intrusiva.

Habilitar el chat burbuja

Para habilitar el chat burbuja en tu juego:

1. En la ventana Explorer, selecciona BubbleChatConfiguration bajo TextChatService.

   

2. En la ventana Properties, marca la casilla BubbleChatConfiguration.Enabled.

   

Personalización de burbujas

Después de habilitar el chat burbuja, puedes personalizar la apariencia y el comportamiento de tus burbujas de chat para que coincidan con el tema de tu juego. Usa la ventana Properties de BubbleChatConfiguration para cambios básicos como el color del texto y el espaciado, o implementa personalizaciones avanzadas para imágenes de fondo de burbujas y otros ajustes visuales.

Alternativamente, agrega un LocalScript en StarterPlayerScripts con todas tus configuraciones de personalización. Esto permite que el motor aplique tus personalizaciones durante la ejecución, sobrescribiendo las configuraciones en Studio. Es útil para agregar efectos especiales a las burbujas de chat cuando los usuarios activan ciertos eventos o condiciones.

Personalización básica

La siguiente tabla muestra propiedades comunes de personalización del chat burbuja. Para obtener una lista completa de propiedades de personalización, consulta BubbleChatConfiguration.

Personalización avanzada

Para personalizar de manera avanzada tu burbuja, agrega objetos de UI que representen ciertos aspectos de la apariencia de la burbuja como hijos bajo BubbleChatConfiguration, incluyendo:

• ImageLabel para configuraciones de imagen de fondo.
• UIGradient para configuraciones de degradado de fondo.
• UICorner para la forma de las esquinas de las burbujas.
• UIPadding para el espacio de relleno entre el texto y los bordes de la burbuja, relativo al tamaño normal del padre.

Después de agregar estos objetos, puedes modificar propiedades de estos objetos aplicables a las burbujas de chat para una personalización avanzada de burbujas. El siguiente ejemplo de LocalScript agrega una imagen de fondo y esquinas afiladas a las burbujas:

Personalización Avanzada de Burbujas
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

Las siguientes tablas describen los GuiObject disponibles y los hijos de módificador de apariencia junto con sus propiedades de personalización válidas:

Personalización por burbuja

Puedes estilizar y modificar individualmente los comportamientos de las burbujas de chat según condiciones específicas para anular tu configuración general. Por ejemplo, puedes usar burbujas de chat para diferenciar entre NPCs y usuarios, resaltar el estado crítico de salud, y aplicar efectos especiales a los mensajes con palabras clave predefinidas.

Para establecer la personalización por burbuja, agrega un LocalScript del lado del cliente utilizando BubbleChatMessageProperties, que anula propiedades coincidentes de BubbleChatConfiguration, y el callback TextChatService.OnBubbleAdded para especificar cómo personalizar cada burbuja. El callback te suministra la propiedad TextChatMessage así como el adornee, para que puedas aplicar la personalización según atributos asociados con usuarios, el contenido del texto del chat, las propiedades del personaje del usuario y cualquier condición especial que desees definir.

Las siguientes propiedades básicas de personalización están disponibles para la personalización por burbuja:

El siguiente ejemplo agrega una apariencia especial a las burbujas de chat de usuarios VIP al comprobar si el remitente de un mensaje de chat tiene el atributo IsVIP:

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

-- Controlador de eventos para cuando se agrega una nueva burbuja de chat al juego
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Verifica si el mensaje de chat tiene un TextSource (remitente) asociado
	if message.TextSource then
		-- Crea una nueva instancia de BubbleChatMessageProperties para personalizar la burbuja de chat
		local bubbleProperties = Instance.new("BubbleChatMessageProperties")

		-- Obtiene el usuario que envió el mensaje de chat basado en su UserId
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		if player:GetAttribute("IsVIP") then
			-- Si el jugador es VIP, personaliza las propiedades de la burbuja 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 las opciones de personalización avanzada están disponibles para la personalización por burbuja. De manera similar a la personalización avanzada para burbujas generales, agrega instancias que deseas personalizar como hijos de BubbleChatMessageProperties. El siguiente ejemplo agrega un efecto de degradado especial junto con otras propiedades a las burbujas de chat de usuarios con bajo estado de salud al comprobar la propiedad Humanoid.Health de los personajes que envían mensajes de chat:

Burbujas de Baja Salud
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

-- Controlador de eventos para cuando se agrega una nueva burbuja de chat al juego
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Verifica si el mensaje de chat tiene un TextSource (remitente) asociado
	if message.TextSource then
		-- Obtiene el usuario que envió el mensaje de chat utilizando su UserId
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		-- Encuentra el humanoide en el carácter del usuario
		local humanoid = player.Character:FindFirstChildWhichIsA("Humanoid")

		if humanoid and humanoid.Health < 25 then
			-- Crea una nueva instancia de BubbleChatMessageProperties para personalizar la burbuja de chat
			local bubbleProperties :BubbleChatMessageProperties = Instance.new("BubbleChatMessageProperties")

			-- Personaliza las propiedades de la burbuja de chat para la condición de baja salud
			bubbleProperties.BackgroundColor3 = Color3.fromRGB(245, 245, 245)
			bubbleProperties.TextColor3 = Color3.fromRGB(234, 51, 96)
			bubbleProperties.TextSize = 20
			bubbleProperties.FontFace = Font.fromEnum(Enum.Font.DenkOne)

			-- Agrega un UIGradient como hijo para personalizar el degradado
			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

Mostrar burbujas manualmente

Es posible que desees mostrar una burbuja de chat cuando los jugadores no han enviado un mensaje, como con los NPCs. Usa el método TextChatService:DisplayBubble() para mostrar manualmente una burbuja de chat.

La personalización de estas burbujas es la misma que la personalización de las burbujas que se muestran automáticamente cuando los jugadores envían mensajes a través de TextChannels utilizando el callback TextChatService.OnBubbleAdded.

Burbujas de NPC

Muestra burbujas de chat para personajes no jugadores (NPCs) llamando a TextChatService:DisplayBubble(character, message), con el personaje NPC y el mensaje como parámetros. Estas burbujas son personalizables utilizando el callback TextChatService.OnBubbleAdded al igual que cualquier otra burbuja de chat.

TextChatService:DisplayBubble() solo funciona en scripts del lado del cliente, así que asegúrate de usar un Script con RunContext configurado en Enum.RunContext.Client, o un LocalScript en un contenedor apropiado, como StarterPlayerScripts. Si adjuntas un ProximityPrompt a un NPC, un script para mostrar una burbuja de chat podría verse así:

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, "¡Hola mundo!")
end)