Studio memberi Anda kekuatan untuk membuat widget kustom dan menggunakannya sebagai alat dan ekstensi. Widget ini berperilaku sebagai jendela/panel kustom di Studio, dan Anda dapat mendock mereka di dalam antarmuka Anda atau membiarkannya mengapung sebagai jendela terpisah.
Buat UI widget
Semua widget Studio dimulai sebagai objek DockWidgetPluginGui yang dapat Anda isi dengan GuiObjects, seperti label teks dan tombol. Untuk membuat GUI widget kosong, panggil fungsi CreateDockWidgetPluginGui(), dengan memberikan ID dan objek DockWidgetPluginGuiInfo.
Perhatikan bahwa konstruktor DockWidgetPluginGuiInfo.new() mengharapkan parameternya dalam urutan tertentu sebagai berikut:
| # | Properti | Tipe | Deskripsi |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | Salah satu enumerasi Enum.InitialDockState. |
| 2 | InitialEnabled | Boolean | Keadaan awal widget GUI yang diaktifkan (terlihat). |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | Jika true, nilai dari InitialEnabled mengesampingkan keadaan yang sebelumnya disimpan sebagai aktif. |
| 4 | FloatingXSize | Integer | Lebar awal GUI ketika InitialDockState diatur ke Enum.InitialDockState.Float. |
| 5 | FloatingYSize | Integer | Tinggi awal GUI ketika InitialDockState diatur ke Enum.InitialDockState.Float. |
| 6 | MinWidth | Integer | Lebar minimum GUI, dengan beberapa variasi spesifik platform. |
| 7 | MinHeight | Integer | Tinggi minimum GUI, dengan beberapa variasi spesifik platform. |
Anda tidak dapat menggunakan fungsi CreateDockWidgetPluginGui() dalam skrip. Anda hanya dapat memanggilnya dari command bar atau skrip plugin.
Kustomisasi UI widget
Setelah Anda membuat widget, Anda dapat menyesuaikan antarmuka penggunanya dengan GuiObjects seperti TextLabels informatif atau ImageButtons interaktif. Misalnya, kode berikut menambahkan TextButton dasar ke jendela GUI:
Untuk membantu Anda membangun widget Studio yang konsisten dan efektif, Roblox menyediakan repositori GitHub yang berisi elemen GUI dengan tampilan dan nuansa "Studio" standar. Ini termasuk kotak centang, tombol radio, dan bidang input yang memiliki gaya Studio, dan semuanya mendukung tema gelap.
Ubah tema warna Studio
Widget Studio yang efektif sebaiknya cocok dengan pengaturan tema Studio dan disesuaikan secara dinamis saat tema berubah. Misalnya, jika seorang pengembang menggunakan tema gelap, warna latar belakang widget, gambar, dan label teksnya harus terlihat baik disandingkan dengan warna tema native Studio.
Kode tambahan berikut menggunakan fungsi syncGuiColors() yang awalnya dipanggil bersama dengan tabel objek GUI untuk diselaraskan. Di dalam fungsi tersebut, sebuah fungsi bersarang setColors() melakukan loop melalui objek-objek dan menyelaraskan aspek tertentu dari mereka menggunakan GetColor() dengan enumerasi Enum.StudioStyleGuideColor. Fungsi setColors() ini segera dijalankan untuk menyelaraskan tema Studio, kemudian dihubungkan ke acara ThemeChanged untuk mendeteksi perubahan tema di masa mendatang.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Sinkronisasi warna latar belakang
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Sinkronisasi warna teks
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Jalankan fungsi 'setColors()' untuk awalnya menyelaraskan warna
setColors()
-- Hubungkan acara 'ThemeChanged' ke fungsi 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Jalankan fungsi 'syncGuiColors()' untuk menyelaraskan warna objek yang diberikan
syncGuiColors({testButton})
Kustomisasi kursor mouse
Untuk meningkatkan interaksi yang diharapkan dengan elemen widget, Anda dapat mengatur kursor mouse spesifik sistem ke acara GUI, seperti MouseEnter dan MouseLeave. Kode berikut menunjukkan cara menghubungkan sebuah fungsi ke acara MouseEnter dan MouseLeave dari testButton untuk mengubah kursor mouse:
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)
Rujuk tabel berikut untuk daftar kursor mouse dan potensi kasus penggunaannya:
| Ikon Kursor Mouse | Aset | Kasus Penggunaan |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Pemilihan dan klik default. |
 | rbxasset://SystemCursors/PointingHand | Hovering di atas link/tombol yang aktif. |
 | rbxasset://SystemCursors/OpenHand | Hovering di atas item yang dapat diseret. |
 | rbxasset://SystemCursors/ClosedHand | Menyusutkan item. |
 | rbxasset://SystemCursors/IBeam | Hovering di dalam bidang teks. |
 | rbxasset://SystemCursors/SizeNS | Hovering di pegangan ubah ukuran vertical. |
 | rbxasset://SystemCursors/SizeEW | Hovering di pegangan ubah ukuran horizontal. |
 | rbxasset://SystemCursors/SizeNESW | Hovering di pegangan ukuran sudut. |
 | rbxasset://SystemCursors/SizeNWSE | Hovering di pegangan ukuran sudut. |
 | rbxasset://SystemCursors/SizeAll | Hovering di pegangan ukuran multi-arah. |
 | rbxasset://SystemCursors/SplitNS | Hovering di pegangan "split" vertikal. |
 | rbxasset://SystemCursors/SplitEW | Hovering di pegangan "split" horizontal. |
 | rbxasset://SystemCursors/Forbidden | Hovering di item yang terkunci/dilarang. |
 | rbxasset://SystemCursors/Wait | Menunjukkan bahwa sebuah aksi sedang berlangsung. |
 | rbxasset://SystemCursors/Busy | Menunjukkan bahwa sistem sedang sibuk. |
 | rbxasset://SystemCursors/Cross | Hovering di area pemilihan titik. |
Perhatikan bahwa tampilan kursor ini hanya merupakan perkiraan — kursor sebenarnya cocok dengan kursor sistem operasi default Anda.
Kumpulkan masukan pengguna
Elemen UI seperti TextBox dan TextButton berfungsi normal di widget Studio, dan Anda dapat membangun antarmuka sama seperti yang biasanya Anda lakukan di Roblox. Namun, UserInputService tidak berfungsi karena layanan ini mengharapkan jendela pengalaman utama dalam fokus.
Salah satu solusi untuk acara input generik adalah dengan membuat Frame transparan dan menimpanya di seluruh layar. Contoh kode berikut membuat sebuah frame, dan ketika pengguna mengeklik frame tersebut, acara GuiObject.InputBegan menangkap input keyboard pada frame sampai pengguna mengklik keluar:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Sembunyikan frame
frame.Size = UDim2.new(1, 0, 1, 0) -- Tutupi layar
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Proses objek input di sini, misalnya mendeteksi penekanan tombol
end
frame.InputBegan:Connect(onInputBegan)
Interaksi seret dan lepas
Menggunakan interaksi seret dan lepas untuk widget Anda adalah cara sederhana untuk meningkatkan alur data. Untuk membuat interaksi ini, Anda harus mendefinisikan elemen untuk diseret, memulai seret, membuat target drop, dan memproses aksi drop.
Buat sumber seret
Anda dapat memulai aksi seret dengan memanggil Plugin:StartDrag() ketika pengguna menekan tombol mouse pada beberapa elemen UI, biasanya TextButton atau ImageButton dalam widget. Contoh kode berikut membuat widget jendela tunggal dengan tombol teks di dalamnya.
Memulai seret
Ketika pengguna mengeklik TextButton, Anda dapat memulai seret melalui acara MouseButton1Down() yang dipicu segera setelah pengguna menekan tombol mouse.
Di dalam fungsi yang terhubung, tentukan data untuk diseret. Tipe data harus tercermin dalam kunci MimeType, konten dari seret harus tercermin dalam kunci Data, dan pengirim harus mendeskripsikan dirinya dalam kunci Sender. Lihat halaman Plugin:StartDrag() untuk detail lebih lanjut.
local function onButton1Down()
local dragInfo = {
Data = "Halo, dunia", -- Data yang sedang diseret
MimeType = "text/plain", -- Menjelaskan tipe MIME dari data
Sender = "BeberapaSumberSeret", -- Menjelaskan dari mana data berasal
MouseIcon = "", -- Konten gambar yang akan digunakan untuk kursor
DragIcon = "", -- Konten gambar yang akan dirender di bawah kursor selama seret
HotSpot = Vector2.zero -- Titik pusat kursor di DragIcon
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Buat target drop
Acara PluginGui.PluginDragDropped dipicu ketika pengguna melepaskan mouse mereka di jendela selama seret. Ketika ini terjadi, Anda perlu mendefinisikan target drop seperti widget kedua dengan TextLabel untuk mendeteksi drop.
Proses aksi drop
Setelah membuat target drop, hubungkan acara PluginGui.PluginDragDropped pada widget target drop:
local function onDragDrop(dragData)
print("PluginDragDropped")
if dragData.MimeType == "text/plain" then
textLabel.Text = dragData.Data
else
textLabel.Text = dragData.MimeType
end
end
dragTargetWidget.PluginDragDropped:Connect(onDragDrop)
Ketika seret masih berlangsung, ketiga acara ini dipicu saat pengguna memindahkan mouse mereka di atas widget:
- PluginDragEntered – dipicu ketika pengguna mengarahkan mouse di atas jendela
- PluginDragMoved – dipicu berulang kali saat pengguna memindahkan mouse mereka di atas jendela. Ini berguna untuk menampilkan pesan "Jatuhkan di sini!"
- PluginDragLeft – dipicu ketika kursor pengguna meninggalkan jendela. Ini berguna untuk menyembunyikan pesan "Jatuhkan di sini!".