Membangun widget Studio

Studio memberi Anda kekuatan untuk membuat widget khusus dan menggunakannya sebagai alat dan ekstensi Studio .Widget ini berperilaku sebagai jendela/panel khusus di Studio, dan Anda dapat mendocknya 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 menyertakan ID dan objek DockWidgetPluginGuiInfo.

Perhatikan konstruktor mengharapkan parameternya dalam urutan tertentu sebagai berikut:

#	Propinsi	Jenis	Deskripsi
1	Enum.InitialDockState	Enumerasi	Salah satu dari Enum.InitialDockState enumerasi.
2	InitialEnabled	Boolean	Status awal yang diaktifkan (terlihat) dari widget GUI.
3	InitialEnabledShouldOverrideRestore	Boolean	Jika benar, nilai InitialEnabled menggantikan status aktif yang sebelumnya disimpan.
4	FloatingXSize	Angka bulat	Lebar awal GUI saat InitialDockState diatur ke Enum.InitialDockState.Float.
5	FloatingYSize	Angka bulat	Tinggi awal GUI saat InitialDockState diatur ke Enum.InitialDockState.Float.
6	MinWidth	Angka bulat	Lebar minimum GUI, dengan beberapa variasi khusus platform.
7	MinHeight	Angka bulat	Ketinggian minimum dari GUI, dengan beberapa variasi khusus platform.


-- Buat objek "DockWidgetPluginGuiInfo" baru
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float, -- Widget akan diinisialisasi di panel mengambang
	true,   -- Widget akan diaktifkan awalnya
	false,  -- Jangan membatalkan status yang diaktifkan sebelumnya
	200,    -- Lebar default dari jendela mengambang
	300,    -- Ketinggian default dari jendela mengambang
	150,    -- Lebar minimum dari jendela mengambang
	150     -- Ketinggian minimum dari jendela mengambang
)

-- Buat GUI widget baru
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

Anda tidak dapat menggunakan fungsi CreateDockWidgetPluginGui() di skrip permainan. Anda hanya dapat memanggilnya dari bilah perintah atau skrip plugin.

Sesuaikan UI widget kustom

Setelah Anda membuat widget, Anda dapat menyesuaikan antarmuka pengguna dengan GuiObjects seperti informatif TextLabels atau interaktif ImageButtons .Sebagai contoh, kode berikut menambahkan kode dasar TextButton ke jendela GUI:


-- Buat GUI widget baru
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- 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 = "Click Me"
testButton.Parent = testWidget

Perhatikan bahwa Anda harus membatalkan tombol ke widget dengan cara yang sama seperti Anda harus membatalkan layar mana pun dalam pengalaman GuiObject ke ScreenGui.

Untuk membantu Anda membuat widget Studio konsisten dan efektif, Roblox menyediakan repo 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 mereka semua mendukung tema gelap.

Ubah tema warna Studio

Widget Studio yang efektif idealnya cocok dengan pengaturan tema Studio dan disesuaikan secara dinamis saat tema berubah.Sebagai kejadian, jika seorang pengembang menggunakan tema gelap, warna latar belakang widget, gambar, dan label teks harus terlihat bagus di samping warna tema asli Studio.

Penyambungan kode berikut menggunakan fungsi syncGuiColors() yang awalnya dipanggil bersama dengan tabel objek GUI untuk disinkronkanDi dalam fungsi, loop fungsi terkait setColors() melalui objek dan sinkronisasi aspek khusus dari mereka menggunakan GetColor() dengan Enum.StudioStyleGuideColor enum.Fungsi ini setColors() berjalan segera untuk menyinkronkan tema Studio, lalu terhubung ke acara ThemeChanged untuk mendeteksi perubahan tema di masa depan.


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 awalnya menyinkronkan warna
	setColors()
	-- Hubungkan acara 'ThemeChanged' ke fungsi 'setColors()'
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Jalankan fungsi 'syncGuiColors()' untuk menyinkronkan warna objek yang disediakan
syncGuiColors({testButton})

Sesuaikan kurator mouse

Untuk meningkatkan interaksi yang diharapkan dengan elemen widget, Anda dapat mengatur kursor sistem khusus ke acara GUI, seperti dan .Kode berikut menunjukkan cara menghubungkan fungsi ke MouseEnter dan MouseLeave peristiwa 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 kasus penggunaan potensial mereka:

Ikon Kursor Mouse	Aset	Gunakan Kasus
	rbxasset://SystemCursors/Arrow	Klik dan seleksi default.
	rbxasset://SystemCursors/PointingHand	Melayang di atas tautan aktif/tombol aktif.
	rbxasset://SystemCursors/OpenHand	Melayang di atas item yang dapat diseret.
	rbxasset://SystemCursors/ClosedHand	Menyeret item.
	rbxasset://SystemCursors/IBeam	Menggantung di bidang teks.
	rbxasset://SystemCursors/SizeNS	Melayang di atas pegangan resize vertikal.
	rbxasset://SystemCursors/SizeEW	Menggantung di atas pegangan resize horizontal.
	rbxasset://SystemCursors/SizeNESW	Melayang di atas pegangan resize sudut.
	rbxasset://SystemCursors/SizeNWSE	Melayang di atas pegangan resize sudut.
	rbxasset://SystemCursors/SizeAll	Menggantung di atas pegangan resize multi-arah.
	rbxasset://SystemCursors/SplitNS	Melayang di atas pegangan "bagi" vertikal.
	rbxasset://SystemCursors/SplitEW	Melayang di atas pegangan "bagi" horizontal.
	rbxasset://SystemCursors/Forbidden	Melayang di atas item terkunci/dilarang.
	rbxasset://SystemCursors/Wait	Menunjukkan bahwa tindakan sedang berlangsung.
	rbxasset://SystemCursors/Busy	Mengindikasikan sistem sibuk.
	rbxasset://SystemCursors/Cross	Melayang di atas area seleksi titik tertentu.

Perhatikan bahwa tampilan kursor ini hanya sebuah aproksimasi - kursor aktual cocok dengan kursor sistem operasi default Anda.

Kumpulkan input pengguna

Elemen UI seperti TextBox dan TextButton bekerja secara normal di widget Studio, dan Anda dapat membangun antarmuka seperti yang biasanya Anda lakukan di Roblox.Namun, UserInputService dan ContextActionService tidak berfungsi karena layanan ini mengharapkan jendela permainan utama berada dalam fokus.

Satu solusi sementara untuk acara input umum adalah membuat transparan Frame dan menumpangkannya di seluruh layar.Contoh kode berikut membuat frame, dan ketika pengguna mengklik frame, acara GuiObject.InputBegan menangkap input keyboard pada frame sampai pengguna mengklik jauh:


local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Sembunyikan frame
frame.Size = UDim2.new(1, 0, 1, 0)  -- Tutup layar
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- Proses objek input di sini, misalnya mendeteksi tekanan tombol
end
frame.InputBegan:Connect(onInputBegan)

Interaksi seret dan lepaskan

Menggunakan interaksi seret dan lepaskan untuk widget Anda adalah cara sederhana untuk meningkatkan aliran data.Untuk membuat interaksi ini, Anda harus mendefinisikan elemen untuk diseret, memulai seretan, membuat target jatuh, dan memproses actionjatuh.

Buat sumber seret

Anda dapat memulai tindakan 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 pertama
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Buat Tombol Teks yang akan memulai seretan
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Mulai seret

Ketika pengguna mengklik pada TextButton, Anda dapat memulai seret melalui peristiwa MouseButton1Down() yang dinyalakan saat pengguna menekan tombol mouse.

Dalam fungsi terhubung, tentukan data untuk ditarik.Tipe data harus dicerminkan dalam unit, konten seret harus dicerminkan dalam unit, dan pengirim harus menggambarkan dirinya sendiri dalam unit.Lihat halaman Plugin:StartDrag() untuk lebih banyak rincian.


local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Data yang diseret
		MimeType = "text/plain",    -- Menggambarkan jenis MIME data
		Sender = "SomeDragSource",  -- Menjelaskan dari mana data berasal
		MouseIcon = "",             -- Konten gambar untuk digunakan untuk kursor
		DragIcon = "",              -- Konten gambar untuk disajikan di bawah kursor selama seret
		HotSpot = Vector2.zero      -- Di mana di DragIcon untuk menyentralkan kursor
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Buat target jatuh

Peristiwa PluginGui.PluginDragDropped terjadi ketika pengguna melepaskan mouse mereka di jendela selama seretan.Ketika ini terjadi, Anda perlu mendefinisikan target jatuh seperti widget kedua dengan TextLabel untuk mendeteksi jatuh.


local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)
dragTargetWidget.Title = "Drop Target"

-- Label Teks ini akan menampilkan apa yang dijatuhkan
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Proses tindakan action

Setelah membuat target jatuh, hubungkan acara PluginGui.PluginDragDropped pada widget target jatuh:


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 seretan masih dalam progres, ketiga peristiwa ini terbakar saat pengguna memindahkan mouse mereka di atas widget:

PluginDragEntered – menyala saat pengguna menggerakkan mouse di atas jendela
PluginDragMoved – terbakar berulang kali saat pengguna menggerakkan mouse mereka di atas jendela. Ini berguna untuk menampilkan pesan "Drop here!"
PluginDragLeft – terbakar saat kursor pengguna meninggalkan jendela. Ini berguna untuk menyembunyikan pesan "Drop here!"

Di halaman ini