Tùy chỉnh trò chuyện bong bóng

Với TextChatService, bạn có thể sử dụng trò chuyện bong bóng để hiển thị các bong bóng trò chuyện có thể tùy chỉnh phía trên hình đại diện của người dùng và NPC. Trò chuyện bong bóng có thể làm cho trò chơi của bạn trở nên sống động hơn về mặt trực quan và giúp người dùng dễ dàng xác định các tin nhắn và người nói trong một cách phù hợp với ngữ cảnh. Tính năng này đặc biệt hữu ích cho các trò chơi mà người dùng cần tập trung vào nội dung trong khi giao tiếp với người khác một cách ít gây chú ý hơn.

Bật trò chuyện bong bóng

Để bật trò chuyện bong bóng trong trò chơi của bạn:

1. Trong cửa sổ Explorer, chọn BubbleChatConfiguration dưới TextChatService.

   

2. Trong cửa sổ Properties, đánh dấu chọn vào hộp kiểm BubbleChatConfiguration.Enabled.

   

Tùy chỉnh bong bóng

Sau khi bật trò chuyện bong bóng, bạn có thể tùy chỉnh giao diện và hành vi của các bong bóng trò chuyện của mình cho phù hợp với chủ đề trò chơi. Sử dụng cửa sổ Properties của BubbleChatConfiguration để thực hiện các thay đổi cơ bản như màu chữ và khoảng cách, hoặc thực hiện tùy chỉnh nâng cao cho hình ảnh nền bong bóng và các điều chỉnh hình ảnh khác.

Ngoài ra, hãy thêm một LocalScript vào StarterPlayerScripts với tất cả các cài đặt tùy chỉnh của bạn. Điều này cho phép engine áp dụng các tùy chỉnh của bạn trong suốt thời gian chạy, ghi đè lên các cài đặt trong Studio. Điều này hữu ích cho việc thêm hiệu ứng đặc biệt vào các bong bóng trò chuyện khi người dùng kích hoạt một số sự kiện hoặc điều kiện nhất định.

Tùy chỉnh cơ bản

Bảng sau đây cho thấy các thuộc tính tùy chỉnh bong bóng trò chuyện thường gặp. Để có danh sách đầy đủ các thuộc tính tùy chỉnh, hãy xem BubbleChatConfiguration.

Tùy chỉnh nâng cao

Để tùy chỉnh nâng cao bong bóng của bạn, hãy thêm các đối tượng UI đại diện cho một số khía cạnh của giao diện bong bóng dưới BubbleChatConfiguration, bao gồm:

• ImageLabel cho cài đặt hình ảnh nền.
• UIGradient cho cài đặt gradient nền.
• UICorner cho hình dạng góc của bong bóng.
• UIPadding cho khoảng cách giữa văn bản và các cạnh bong bóng, tương đối với kích thước bình thường của cha.

Sau khi thêm các đối tượng này, bạn có thể sửa đổi các thuộc tính của các đối tượng này áp dụng cho các bong bóng trò chuyện để tùy chỉnh bong bóng nâng cao. Ví dụ sau đây LocalScript thêm một hình ảnh nền và các góc sắc nét cho các bong bóng:

Tùy Chỉnh Bong Bóng Nâng Cao
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

Các bảng sau đây phác thảo các GuiObject và các trẻ em bộ điều chỉnh giao diện có sẵn cùng với các thuộc tính tùy chỉnh hợp lệ của chúng:

Tùy chỉnh theo từng bong bóng

Bạn có thể cá nhân hóa và sửa đổi hành vi của bong bóng trò chuyện dựa trên các điều kiện cụ thể nhằm ghi đè lên các cài đặt chung của bạn. Ví dụ, bạn có thể sử dụng các bong bóng trò chuyện để phân biệt NPC và người dùng, làm nổi bật tình trạng sức khỏe quan trọng, và áp dụng hiệu ứng đặc biệt cho các tin nhắn chứa các từ khóa đã được định nghĩa.

Để thiết lập tùy chỉnh theo từng bong bóng, thêm một LocalScript phía bên client sử dụng BubbleChatMessageProperties, ghi đè các thuộc tính khớp của BubbleChatConfiguration, và callback TextChatService.OnBubbleAdded để chỉ định cách tùy chỉnh từng bong bóng. Callback cung cấp cho bạn thuộc tính TextChatMessage cũng như adornee, vì vậy bạn có thể áp dụng tùy chỉnh dựa trên các thuộc tính liên quan đến người dùng, nội dung văn bản trò chuyện, các thuộc tính nhân vật của người dùng, và bất kỳ điều kiện đặc biệt nào bạn muốn định nghĩa.

Các thuộc tính tùy chỉnh cơ bản sau đây có sẵn cho tùy chỉnh theo từng bong bóng:

Ví dụ sau đây thêm ngoại hình đặc biệt cho các bong bóng trò chuyện của người dùng VIP bằng cách kiểm tra xem người gửi tin nhắn trò chuyện có thuộc tính IsVIP hay không:

Bong Bóng VIP
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

-- Xử lý sự kiện khi một bong bóng trò chuyện mới được thêm vào trò chơi
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Kiểm tra xem tin nhắn trò chuyện có một TextSource (người gửi) liên kết không
	if message.TextSource then
		-- Tạo một phiên bản mới của BubbleChatMessageProperties để tùy chỉnh bong bóng trò chuyện
		local bubbleProperties = Instance.new("BubbleChatMessageProperties")

		-- Lấy người dùng đã gửi tin nhắn trò chuyện dựa trên UserId của họ
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		if player:GetAttribute("IsVIP") then
			-- Nếu người chơi là VIP, hãy tùy chỉnh thuộc tính bong bóng trò chuyện
			bubbleProperties.TextColor3 = Color3.fromHex("#F5CD30")
			bubbleProperties.BackgroundColor3 = Color3.fromRGB(25, 27, 29)
			bubbleProperties.FontFace = Font.fromEnum(Enum.Font.PermanentMarker)
		end
		return bubbleProperties
	end
end

Tất cả các tùy chọn tùy chỉnh nâng cao đều có sẵn cho tùy chỉnh theo từng bong bóng. Tương tự như tùy chỉnh nâng cao cho các bong bóng chung, hãy thêm các phiên bản mà bạn muốn tùy chỉnh làm trẻ em của BubbleChatMessageProperties. Ví dụ sau đây thêm một hiệu ứng gradient đặc biệt cùng với các thuộc tính khác cho các bong bóng trò chuyện của người dùng có trạng thái sức khỏe thấp bằng cách kiểm tra thuộc tính Humanoid.Health của các nhân vật gửi tin nhắn trò chuyện:

Bong Bóng Sức Khỏe Thấp
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")

-- Xử lý sự kiện khi một bong bóng trò chuyện mới được thêm vào trò chơi
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
	-- Kiểm tra xem tin nhắn trò chuyện có một TextSource (người gửi) liên kết không
	if message.TextSource then
		-- Lấy người dùng đã gửi tin nhắn trò chuyện bằng cách sử dụng UserId của họ
		local player = Players:GetPlayerByUserId(message.TextSource.UserId)

		-- Tìm humanoid trong nhân vật của người dùng
		local humanoid = player.Character:FindFirstChildWhichIsA("Humanoid")

		if humanoid and humanoid.Health < 25 then
			-- Tạo một phiên bản mới của BubbleChatMessageProperties để tùy chỉnh bong bóng trò chuyện
			local bubbleProperties :BubbleChatMessageProperties = Instance.new("BubbleChatMessageProperties")

			-- Tùy chỉnh các thuộc tính bong bóng trò chuyện cho tình trạng sức khỏe thấp
			bubbleProperties.BackgroundColor3 = Color3.fromRGB(245, 245, 245)
			bubbleProperties.TextColor3 = Color3.fromRGB(234, 51, 96)
			bubbleProperties.TextSize = 20
			bubbleProperties.FontFace = Font.fromEnum(Enum.Font.DenkOne)

			-- Thêm một UIGradient như một trẻ em để tùy chỉnh gradient
			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

Hiển thị bong bóng thủ công

Bạn có thể muốn hiển thị một bong bóng trò chuyện khi người chơi chưa gửi tin nhắn, chẳng hạn như với các NPC. Sử dụng phương thức TextChatService:DisplayBubble() để hiển thị thủ công một bong bóng trò chuyện.

Việc tùy chỉnh các bong bóng này giống như việc tùy chỉnh các bong bóng được hiển thị tự động khi người chơi gửi tin nhắn qua TextChannels sử dụng callback TextChatService.OnBubbleAdded.

Bong bóng NPC

Hiển thị bong bóng trò chuyện cho nhân vật không phải người chơi (NPC) bằng cách gọi TextChatService:DisplayBubble(character, message), với nhân vật NPC và tin nhắn làm tham số. Các bong bóng này có thể tùy chỉnh bằng cách sử dụng callback TextChatService.OnBubbleAdded giống như bất kỳ bong bóng trò chuyện nào khác.

TextChatService:DisplayBubble() chỉ hoạt động trên các script phía client, vì vậy hãy chắc chắn sử dụng một Script với RunContext được đặt thành Enum.RunContext.Client, hoặc một LocalScript trong một container phù hợp, như StarterPlayerScripts. Nếu bạn gắn một ProximityPrompt vào một NPC, một script để hiển thị một bong bóng trò chuyện có thể trông như thế này:

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)