Dengan TextChatService, Anda dapat menggunakan obrolan gelembung untuk menampilkan gelembung obrolan yang dapat disesuaikan di atas avatar pengguna dan NPC. Obrolan gelembung dapat membuat permainan Anda lebih imersif secara visual dan membantu pengguna dengan mudah mengidentifikasi pesan dan pembicara mereka dalam konteks yang relevan. Fitur ini sangat berguna untuk permainan di mana pengguna perlu fokus pada konten sambil berkomunikasi dengan orang lain dengan cara yang tidak mengganggu.
Aktifkan obrolan gelembung
Untuk mengaktifkan obrolan gelembung di permainan Anda:
Di jendela Explorer, pilih BubbleChatConfiguration di bawah TextChatService.

Di jendela Properties, centang kotak BubbleChatConfiguration.Enabled.

Kustomisasi gelembung
Setelah mengaktifkan obrolan gelembung, Anda dapat menyesuaikan penampilan dan perilaku gelembung obrolan Anda agar sesuai dengan tema permainan Anda. Gunakan jendela Properties dari BubbleChatConfiguration untuk perubahan dasar seperti warna teks dan jarak, atau terapkan kustomisasi lanjutan untuk gambar latar belakang gelembung dan penyesuaian visual lainnya.

Sebagai alternatif, tambahkan LocalScript di StarterPlayerScripts dengan semua pengaturan kustomisasi Anda. Ini memungkinkan mesin untuk menerapkan kustomisasi Anda selama runtime, menimpa pengaturan di Studio. Ini berguna untuk menambahkan efek khusus pada gelembung obrolan saat pengguna memicu peristiwa atau kondisi tertentu.
Kustomisasi dasar
Tabel berikut menunjukkan properti kustomisasi obrolan gelembung yang umum. Untuk daftar lengkap properti kustomisasi, lihat BubbleChatConfiguration.
| Properti | Deskripsi | Default |
|---|---|---|
| BackgroundColor3 | Warna latar belakang dari gelembung dalam Color3. | [250, 250, 250] |
| FontFace | Font dari teks gelembung. | BuilderSansMedium |
| TextColor3 | Warna teks gelembung dalam Color3. | [57, 59, 61] |
| TextSize | Ukuran teks gelembung. | 16 |
Kustomisasi lanjutan
Untuk kustomisasi lanjutan dari gelembung Anda, tambahkan objek UI yang mewakili aspek tertentu dari penampilan gelembung sebagai anak di bawah BubbleChatConfiguration, termasuk:
- ImageLabel untuk pengaturan gambar latar belakang.
- UIGradient untuk pengaturan gradien latar belakang.
- UICorner untuk bentuk sudut gelembung.
- UIPadding untuk ruang padding antara teks dan tepi gelembung, relatif terhadap ukuran normal induknya.
Setelah menambahkan objek ini, Anda dapat mengubah properti objek ini yang berlaku untuk gelembung obrolan untuk kustomisasi gelembung yang lebih lanjut. Contoh LocalScript berikut menambahkan gambar latar belakang dan sudut tajam pada gelembung:
Kustomisasi Gelembung Lanjutanlocal TextChatService = game:GetService("TextChatService")local bubbleChatConfiguration = TextChatService.BubbleChatConfigurationbubbleChatConfiguration.TailVisible = falsebubbleChatConfiguration.TextColor3 = Color3.fromRGB(220, 50, 50)bubbleChatConfiguration.FontFace = Font.fromEnum(Enum.Font.LuckiestGuy)local bubbleUICorner = bubbleChatConfiguration:FindFirstChildOfClass("UICorner")if not bubbleUICorner thenbubbleUICorner = Instance.new("UICorner")bubbleUICorner.Parent = bubbleChatConfigurationendbubbleUICorner.CornerRadius = UDim.new(0, 0)local bubbleUIPadding = bubbleChatConfiguration:FindFirstChildOfClass("UIPadding")if not bubbleUIPadding thenbubbleUIPadding = Instance.new("UIPadding")bubbleUIPadding.Parent = bubbleChatConfigurationendbubbleUIPadding.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 thenbubbleImageLabel = Instance.new("ImageLabel")bubbleImageLabel.Parent = bubbleChatConfigurationendbubbleImageLabel.Image = "rbxassetid://109157529833093"bubbleImageLabel.ScaleType = Enum.ScaleType.SlicebubbleImageLabel.SliceCenter = Rect.new(40, 40, 320, 120)bubbleImageLabel.SliceScale = 0.5

Tabel berikut merangkum GuiObject dan anak-anak penyunting penampilan yang tersedia beserta properti kustomisasi yang valid:
| Properti | Deskripsi | Default |
|---|---|---|
| Image | ID aset dari gambar latar belakang gelembung. | |
| ImageColor3 | Warna tint dari gambar latar belakang gelembung dalam Color3. | [255, 255, 255] |
| ImageRectOffset | Offset area gambar yang akan ditampilkan dari sudut kiri atas dalam piksel. | (0, 0) |
| ImageRectSize | Ukuran area gambar yang akan ditampilkan dalam piksel. Untuk menampilkan seluruh gambar, setidaknya salah satu dimensinya harus diatur ke 0. | (0, 0) |
| ScaleType | Jenis skala untuk merender gambar saat ukurannya berbeda dari ukuran absolut gelembung. | Stretch |
| SliceCenter | Batas potongan dari gambar jika gambar tersebut adalah gambar yang dipotong dengan 9. Hanya berlaku jika Anda mengatur ScaleType sebagai Slice. | (0, 0, 0, 0) |
| SliceScale | Rasio skala dari tepi potongan jika gambar tersebut adalah gambar yang dipotong dengan 9. Hanya berlaku jika Anda mengatur ScaleType sebagai Slice. | 1 |
| TileSize | Ukuran tiling dari gambar. Hanya berlaku jika Anda mengatur ScaleType sebagai Tile. | (1, 0, 1, 0) |
Kustomisasi per-gelembung
Anda dapat menata dan memodifikasi perilaku gelembung obrolan secara individu berdasarkan kondisi tertentu untuk menimpa pengaturan umum Anda. Misalnya, Anda dapat menggunakan gelembung obrolan untuk membedakan NPC dan pengguna, menyoroti status kesehatan kritis, dan menerapkan efek khusus pada pesan dengan kata kunci yang telah ditentukan.
Untuk mengatur kustomisasi per-gelembung, tambahkan LocalScript sisi-klien menggunakan BubbleChatMessageProperties, yang menimpa properti yang cocok dari BubbleChatConfiguration, dan callback TextChatService.OnBubbleAdded untuk menentukan bagaimana menyesuaikan setiap gelembung. Callback memberikan Anda properti TextChatMessage serta adornee, sehingga Anda dapat menerapkan kustomisasi berdasarkan atribut yang terkait dengan pengguna, konten teks obrolan, properti karakter pengguna, dan kondisi khusus yang ingin Anda tentukan.
Properti kustomisasi dasar berikut tersedia untuk kustomisasi per-gelembung:
| Properti | Deskripsi | Default |
|---|---|---|
| BackgroundColor3 | Warna latar belakang gelembung dalam Color3. | (250, 250, 250) |
| BackgroundTransparency | Transparansi latar belakang gelembung. | 0.1 |
| FontFace | Font dari teks gelembung. | BuilderSansMedium |
| TextColor3 | Warna teks gelembung dalam Color3. | [57, 59, 61] |
| TextSize | Ukuran teks gelembung. | 16 |
Contoh berikut menambahkan tampilan khusus pada gelembung obrolan pengguna VIP dengan memeriksa apakah pengirim pesan obrolan memiliki atribut IsVIP:
Gelembung VIP
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")
-- Penangkap peristiwa ketika gelembung obrolan baru ditambahkan ke permainan
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
-- Periksa apakah pesan obrolan memiliki TextSource (pengirim) yang terkait
if message.TextSource then
-- Buat instance BubbleChatMessageProperties baru untuk menyesuaikan gelembung obrolan
local bubbleProperties = Instance.new("BubbleChatMessageProperties")
-- Dapatkan pengguna yang mengirim pesan obrolan berdasarkan UserId mereka
local player = Players:GetPlayerByUserId(message.TextSource.UserId)
if player:GetAttribute("IsVIP") then
-- Jika pemain adalah VIP, sesuaikan properti gelembung obrolan
bubbleProperties.TextColor3 = Color3.fromHex("#F5CD30")
bubbleProperties.BackgroundColor3 = Color3.fromRGB(25, 27, 29)
bubbleProperties.FontFace = Font.fromEnum(Enum.Font.PermanentMarker)
end
return bubbleProperties
end
end
Semua opsi kustomisasi lanjutan tersedia untuk kustomisasi per-gelembung. Mirip dengan kustomisasi lanjutan untuk gelembung umum, tambahkan instance yang ingin Anda sesuaikan sebagai anak dari BubbleChatMessageProperties. Contoh berikut menambahkan efek gradien khusus bersama dengan properti lain pada gelembung obrolan pengguna dengan status kesehatan rendah dengan memeriksa properti Humanoid.Health dari karakter pengirim pesan obrolan:
Gelembung Kesehatan Rendah
local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")
-- Penangkap peristiwa ketika gelembung obrolan baru ditambahkan ke permainan
TextChatService.OnBubbleAdded = function(message: TextChatMessage, adornee: Instance)
-- Periksa apakah pesan obrolan memiliki TextSource (pengirim) yang terkait
if message.TextSource then
-- Dapatkan pengguna yang mengirim pesan obrolan dengan menggunakan UserId mereka
local player = Players:GetPlayerByUserId(message.TextSource.UserId)
-- Temukan humanoid di karakter pengguna
local humanoid = player.Character:FindFirstChildWhichIsA("Humanoid")
if humanoid and humanoid.Health < 25 then
-- Buat instance BubbleChatMessageProperties baru untuk menyesuaikan gelembung obrolan
local bubbleProperties :BubbleChatMessageProperties = Instance.new("BubbleChatMessageProperties")
-- Sesuaikan properti gelembung obrolan untuk kondisi kesehatan rendah
bubbleProperties.BackgroundColor3 = Color3.fromRGB(245, 245, 245)
bubbleProperties.TextColor3 = Color3.fromRGB(234, 51, 96)
bubbleProperties.TextSize = 20
bubbleProperties.FontFace = Font.fromEnum(Enum.Font.DenkOne)
-- Tambahkan UIGradient sebagai anak untuk menyesuaikan gradien
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
Tampilkan gelembung secara manual
Anda mungkin ingin menampilkan gelembung obrolan ketika pemain belum mengirim pesan, seperti dengan NPC. Gunakan metode TextChatService:DisplayBubble() untuk menampilkan gelembung obrolan secara manual.
Kustomisasi gelembung ini sama dengan kustomisasi gelembung yang ditampilkan secara otomatis ketika Pemain mengirim pesan melalui TextChannels menggunakan TextChatService.OnBubbleAdded callback.
Gelembung NPC
Tampilkan gelembung obrolan untuk karakter non-pemain (NPC) dengan memanggil TextChatService:DisplayBubble(character, message), dengan karakter NPC dan pesan sebagai parameter. Gelembung ini dapat disesuaikan menggunakan callback TextChatService.OnBubbleAdded seperti gelembung obrolan lainnya.
TextChatService:DisplayBubble() hanya bekerja pada skrip sisi-klien, jadi pastikan untuk menggunakan Script dengan RunContext diatur ke Enum.RunContext.Client, atau LocalScript dalam wadah yang sesuai, seperti StarterPlayerScripts. Jika Anda melampirkan ProximityPrompt ke sebuah NPC, skrip untuk menampilkan gelembung obrolan mungkin terlihat seperti ini:
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)