Studio memberi Anda kekuatan untuk membuat widget kustom dan menggunakannya sebagai alat dan ekstensi. Widget ini berfungsi sebagai jendela/panel kustom di Studio, dan Anda dapat mendock-nya di dalam antarmuka Anda atau membiarkannya mengambang 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 melewatkan ID dan objek DockWidgetPluginGuiInfo.
Perhatikan bahwa konstruktor DockWidgetPluginGuiInfo.new() mengharapkan parameternya dalam urutan tertentu sebagai berikut:
| # | Properti | Jenis | 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 InitialEnabled akan menggantikan keadaan diaktifkan yang disimpan sebelumnya. |
| 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. |
-- Buat objek "DockWidgetPluginGuiInfo" baru
local widgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- Widget akan diinisialisasi dalam panel mengambang
true, -- Widget akan diaktifkan secara awal
false, -- Jangan menggantikan keadaan diaktifkan sebelumnya
200, -- Lebar default jendela mengambang
300, -- Tinggi default jendela mengambang
150, -- Lebar minimum jendela mengambang
150 -- Tinggi minimum jendela mengambang
)
-- Buat GUI widget baru
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Widget Uji" -- Judul widget opsionalSesuaikan 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:
-- Buat GUI widget baru
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Widget Uji" -- Judul widget opsional
local testButton = Instance.new("TextButton")
testButton.BorderSizePixel = 0
testButton.TextSize = 20
testButton.TextColor3 = Color3.new(1,0.2,0.4)
testButton.AnchorPoint = Vector2.new(0.5,0.5)
testButton.Size = UDim2.new(1,0,1,0)
testButton.Position = UDim2.new(0.5,0,0.5,0)
testButton.SizeConstraint = Enum.SizeConstraint.RelativeYY
testButton.Text = "Klik Saya"
testButton.Parent = testWidgetUbah tema warna Studio
Widget Studio yang efektif sebaiknya cocok dengan pengaturan tema Studio dan secara dinamis menyesuaikan ketika tema berubah. Misalnya, jika seorang pengembang menggunakan tema gelap, warna latar belakang widget, gambar, dan label teks harus terlihat baik bersamaan dengan warna tema asli Studio.
Penambahan kode berikut menggunakan fungsi syncGuiColors() yang awalnya dipanggil bersama dengan tabel objek GUI untuk disinkronkan. Di dalam fungsi tersebut, fungsi bersarang setColors() melakukan loop melalui objek-objek tersebut dan menyinkronkan aspek-aspek tertentu dari mereka menggunakan GetColor() dengan enum Enum.StudioStyleGuideColor. Fungsi setColors() ini segera dijalankan untuk menyinkronkan tema Studio, kemudian terhubung 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
-- Sinkronkan warna latar belakang
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Sinkronkan warna teks
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Jalankan fungsi 'setColors()' untuk menyinkronkan warna awal
setColors()
-- Hubungkan acara 'ThemeChanged' ke fungsi 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Jalankan fungsi 'syncGuiColors()' untuk menyinkronkan warna objek yang diberikan
syncGuiColors({testButton})Sesuaikan kursor mouse
Untuk meningkatkan interaksi yang diharapkan dengan elemen widget, Anda dapat mengatur kursor mouse spesifik sistem untuk acara GUI, seperti MouseEnter dan MouseLeave. Kode berikut menunjukkan cara menghubungkan 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)Referensikan tabel berikut untuk daftar kursor mouse dan kemungkinan kasus penggunaannya:
| Ikon Kursor Mouse | Aset | Kasus Penggunaan |
|---|---|---|
| rbxasset://SystemCursors/Arrow | Klik dan pemilihan default. | |
| rbxasset://SystemCursors/PointingHand | Melayang di atas tautan/buton aktif. | |
| rbxasset://SystemCursors/OpenHand | Melayang di atas item yang dapat diseret. | |
| rbxasset://SystemCursors/ClosedHand | Menyusutkan item. | |
| rbxasset://SystemCursors/IBeam | Melayang di bidang teks. | |
| rbxasset://SystemCursors/SizeNS | Melayang di atas pegangan pengubah ukuran vertikal. | |
| rbxasset://SystemCursors/SizeEW | Melayang di atas pegangan pengubah ukuran horizontal. | |
| rbxasset://SystemCursors/SizeNESW | Melayang di atas pegangan pengubah ukuran sudut. | |
| rbxasset://SystemCursors/SizeNWSE | Melayang di atas pegangan pengubah ukuran sudut. | |
| rbxasset://SystemCursors/SizeAll | Melayang di atas pegangan pengubah ukuran multi-arah. | |
| rbxasset://SystemCursors/SplitNS | Melayang di atas pegangan "split" vertikal. | |
| rbxasset://SystemCursors/SplitEW | Melayang di atas pegangan "split" horizontal. | |
| rbxasset://SystemCursors/Forbidden | Melayang di atas item yang terkunci/dilarang. | |
| rbxasset://SystemCursors/Wait | Menunjukkan bahwa suatu tindakan sedang berlangsung. | |
| rbxasset://SystemCursors/Busy | Menunjukkan bahwa sistem sedang sibuk. | |
| rbxasset://SystemCursors/Cross | Melayang di atas area pemilihan titik. |
Kumpulkan input pengguna
Elemen UI seperti TextBox dan TextButton berfungsi normal di widget Studio, dan Anda dapat membangun antarmuka seperti yang biasanya Anda lakukan di Roblox. Namun, UserInputService tidak berfungsi karena layanan ini mengharapkan jendela permainan utama dalam fokus.
Salah satu solusi untuk acara input generik adalah dengan membuat Frame transparan dan menempatkannya di atas seluruh layar. Contoh kode berikut membuat sebuah frame, dan ketika pengguna mengklik frame tersebut, acara GuiObject.InputBegan menangkap input keyboard pada frame hingga pengguna mengklik di luar:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Sembunyikan frame
frame.Size = UDim2.new(1, 0, 1, 0) -- Menutupi 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 lepas, dan memproses aksi lepas.
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 di dalam widget. Contoh kode berikut membuat widget jendela tunggal dengan tombol teks di dalamnya.
-- Buat widget terlebih dahulu
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Sumber Seret", widgetInfo)
dragSourceWidget.Title = "Sumber Seret"
-- Buat TextButton yang akan memulai seret
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Seret saya!"
dragButton.Parent = dragSourceWidgetMemulai seret
Ketika pengguna mengklik TextButton, Anda dapat memulai seret melalui acara MouseButton1Down() yang dipicu segera setelah pengguna menekan tombol mouse.
Di dalam fungsi yang terhubung, tentukan data yang akan 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 diseret
MimeType = "text/plain", -- Menjelaskan tipe MIME dari data
Sender = "BeberapaSumberSeret", -- Menjelaskan dari mana data berasal
MouseIcon = "", -- Konten gambar yang digunakan untuk kursor
DragIcon = "", -- Konten gambar yang dirender di bawah kursor selama seret
HotSpot = Vector2.zero -- Di mana pada DragIcon untuk memusatkan kursor
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)Buat target lepas
Acara PluginGui.PluginDragDropped dipicu ketika pengguna melepaskan mouse mereka di jendela selama seret. Ketika ini terjadi, Anda perlu mendefinisikan target lepas seperti widget kedua dengan TextLabel untuk mendeteksi lepas.
local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Target Lepas", widgetInfo)
dragTargetWidget.Title = "Target Lepas"
-- TextLabel ini akan menampilkan apa yang dijatuhkan
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Jatuhkan di sini..."
textLabel.Parent = dragTargetWidgetProses aksi lepas
Setelah membuat target lepas, hubungkan acara PluginGui.PluginDragDropped pada widget target lepas:
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)Sementara seret masih berlangsung, ketiga acara ini dipicu saat pengguna menggerakkan mouse mereka di atas widget:
- PluginDragEntered – dipicu ketika pengguna melayang di atas jendela
- PluginDragMoved – dipicu berulang kali saat pengguna menggerakkan 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!".















