Personalizar el chat de burbujas

Con TextChatService, puedes usar el chat de burbujas para mostrar burbujas de chat personalizables sobre los avatares de los usuarios y los NPC.El chat de burbujas puede hacer que tu experiencia sea más inmersiva visualmente y ayudar a los usuarios a identificar fácilmente mensajes y sus oradores de manera contextualmente relevante.Esta característica es especialmente útil para las experiencias en las que los usuarios necesitan centrarse en el contenido mientras se comunican con otros de una manera menos intrusiva.

Habilitar chat de burbujas

Para habilitar el chat de burbujas en tu experiencia:

1. En la ventana Explorador , seleccione debajo de >.

   

2. En la ventana Propiedades, compruebe la casilla de verificación BubbleChatConfiguration.Enabled.

   

Personalización de burbujas

Después de habilitar el chat de burbujas, puedes personalizar la apariencia y el comportamiento de tus burbujas de chat para que coincidan con el tema de tu experiencia.Utilice la ventana Propiedades de BubbleChatConfiguration para cambios básicos como el color del texto y el espacio, o implemente personalización avanzada para imágenes de fondo de burbujas y otros ajustes visuales.

Alternativamente, agregue un LocalScript en StarterPlayerScripts con todas sus configuraciones de personalización.Esto permite que el motor aplique sus personalizaciones durante el tiempo de ejecución, anulando 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 las propiedades de personalización de chat de burbujas comunes. Para obtener una lista completa de propiedades de personalización, consulte BubbleChatConfiguration .

Personalización avanzada

Para una personalización avanzada de tu burbuja, añade objetos de interfaz de usuario que representan ciertos aspectos de la apariencia de la burbuja como hijos bajo BubbleChatConfiguration, incluyendo:

• ImageLabel para la configuración de la imagen de fondo.
• UIGradient para la configuración de gradiente de fondo.
• UICorner para la forma de esquina de las burbujas.
• UIPadding para el espacio de relleno entre los bordes del texto y la burbuja, en relación con el tamaño normal del padre.

Después de agregar estos objetos, puedes modificar las propiedades de estos objetos aplicables a burbujas de chat para una personalización avanzada de burbujas.El siguiente ejemplo LocalScript añade 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 resumen los modificadores de apariencia disponibles GuiObject y hijos junto con sus propiedades de personalización válidas:

Personalización por burbuja

Puedes estilizar y modificar individualmente el comportamiento de las burbujas de chat en función de condiciones específicas para anular tus configuraciones generales.Por ejemplo, puedes usar burbujas de chat para diferenciar NPCs y usuarios, resaltar el estado de salud crítico, y aplicar efectos especiales a mensajes con palabras clave predefinidas.

Para establecer la personalización por burbuja, agregue un lado del cliente LocalScript usando BubbleChatMessageProperties, que reemplaza las propiedades coincidentes de BubbleChatConfiguration , y la llamada de devolución TextChatService.OnBubbleAdded para especificar cómo personalizar cada burbuja.La llamada de devolución te proporciona la propiedad TextChatMessage con la decoración, por lo que puedes aplicar la personalización basada en atributos asociados con los usuarios, el contenido del texto del chat, las propiedades del personaje del usuario y cualquier condición especial que quieras definir.

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

El siguiente ejemplo añade una apariencia especial a las burbujas de chat de los usuarios VIP comprobando si un remitente de mensajes de chat tiene el atributo IsVIP:

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

-- Manejador de eventos para cuando se agrega una nueva burbuja de chat a la experiencia
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Compruebe si el mensaje de chat tiene una fuente de texto (remitente) asociada a él
	if message.TextSource then
		-- Crea una nueva instancia de BubbleChatMessageProperties para personalizar la burbuja de chat
		local bubbleProperties = Instance.new("BubbleChatMessageProperties")

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

		if player:GetAttribute("IsVIP") then
			-- Si el jugador es un 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.Al igual que la personalización avanzada para burbujas generales, añade instancias que quieras personalizar como hijos de BubbleChatMessageProperties .El siguiente ejemplo agrega un efecto degradado especial junto con otras propiedades para burbujas de chat de usuarios con bajo estado de salud verificando la propiedad Humanoid.Health de los personajes de los enviadores de mensajes de chat:

Burbujas de salud baja
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

-- Manejador de eventos para cuando se agrega una nueva burbuja de chat a la experiencia
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Compruebe si el mensaje de chat tiene una fuente de texto (remitente) asociada a él
	if message.TextSource then
		-- Obtén al usuario que envió el mensaje de chat usando su ID de usuario
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		-- Encuentra al humanoide en el personaje 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")

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

			-- Añade un UIGradient como hijo para personalizar el 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

Mostrar burbujas manualmente

Quizás quieras mostrar una burbuja de chat cuando los jugadores no hayan enviado un mensaje, como con los NPC.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 canales de texto usando el TextChatService.OnBubbleAdded llamada de devolución de llamada.

Burbujas de NPC

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

TextChatService:DisplayBubble() solo funciona en scripts del lado del cliente, así que asegúrese de usar un Script con RunContext establecido a Enum.RunContext.Client , o un LocalScript en un contenedor apropiado , como StarterPlayerScripts .Si le adjuntas un ProximityPrompt a un PNJ, 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, "Hello world!")
end)