Stüdyo widgetlerini oluştur

Stüdyo size özel widgetler oluşturma gücü verir ve bunları Studio araçları ve uzantıları olarak kullanır.Bu widget'lar Studio'da özel pencereler/paneller olarak davranır ve arayüzünüzün içine yerleştirilebilir veya ayrı pencereler olarak yüzülebilir.

Arayüzler oluştur ( Widget UI'leri )

Tüm Stüdyo düzenleyicileri, DockWidgetPluginGui metin etiketleri ve düğmeler gibi şeylerle doldurabileceğiniz GuiObjects nesneler olarak başlar.Boş bir widget GUI oluşturmak için, bir ID ve bir DockWidgetPluginGuiInfo nesne geçerek CreateDockWidgetPluginGui() fonksiyonunu çağırın.

DockWidgetPluginGuiInfo.new() yapıcısının parametrelerini bir belirli sırayla beklediğini unutmayın:

-- Yeni "DockWidgetPluginGuiInfo" objesi oluştur
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float, -- widget yüzen panelde başlatılacak
	true,   -- widget başlangıçta etkinleştirilecek
	false,  -- Önceki etkin durumu geçersiz kılmayın
	200,    -- Yüzen pencerenin varsayılan genişliği
	300,    -- Yüzen pencerenin varsayılan yüksekliği
	150,    -- Yüzen pencerenin minimum genişliği
	150     -- Yüzen pencerenin minimum yüksekliği
)

-- Yeni widget GUI oluştur
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

widget UI'sini özelleştir

Bir widget oluşturduktan sonra, bilgilendirici veya etkileşimli gibi kullanıcı arayüzünü özelleştirebilirsiniz.Örneğin, aşağıdaki kod GUI penceresine temel bir TextButton ekler:

-- Yeni widget GUI oluştur
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Opsiyonel widget başlığı

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

Studio renk temalarını değiştir

Etkili Studio düğmeleri ideal olarak Studio temasına eşleşir ve tema değiştiğinde dinamik olarak ayarlanır.durum, bir geliştirici karanlık temayı kullanıyorsa, widget'in arka plan rengi, resimler ve metin etiketleri Studio'nun yerli tema renklerinin yanında güzel görünmelidir.

Aşağıdaki kod eklemesi, başlangıçta senkronize edilmek üzere bir GUI nesnesi tablosuyla birlikte çağrılan bir syncGuiColors() fonksiyonunu kullanır.İşlevin içinde, iç içe geçmiş bir setColors() işlevi nesneler aracılığıyla dolaşır ve onların belirli yönlerini GetColor() ile senkronize eder kullanarak Enum.StudioStyleGuideColor sayısal değerler.Bu setColors() işlevi, Studio temasını senkronize etmek için hemen çalıştırılır, ardından gelecekteki tema değişikliklerini tespit etmek için ThemeChanged etkinliğine bağlanır.

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Arka plan rengini eşleştir
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Metin rengini eşitle
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Renkleri başlangıçta eşleştirmek için 'setColors()' işlevini çalıştırın
	setColors()
	-- 'ThemeChanged' etkinliğini 'setColors()' işlevine bağla
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Verilen nesnelerin renklerini eşleştirmek için 'syncGuiColors()' işlevini çalıştırın
syncGuiColors({testButton})

Fare imlecilerini özelleştirin

Widget öğeleriyle beklenen etkileşimi geliştirmek için, sistem spesifik fare imleçlerini GUI olaylarına ayarlayabilirsiniz, örneğin MouseEnter ve MouseLeave.Aşağıdaki kod, bir işlevin MouseEnter ve MouseLeave olaylarına nasıl bağlanacağını gösterir: testButton ile fare imlecini değiştirmek:

local function setCursor(cursorAsset)
	plugin:GetMouse().Icon = cursorAsset
end

testButton.MouseEnter:Connect(function()
	setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
	setCursor("")
end)

Fare imleçlerinin ve potansiyel kullanım durumlarının bir listesi için aşağıdaki tabloya bakın:

Fare İşaretleyici Simgesi	Varlık	Kullanma Durumu
	rbxasset://SystemCursors/Arrow	Varsayılan tıklama ve seçim.
	rbxasset://SystemCursors/PointingHand	Aktif bir bağlantı/düğme üzerinde gezinmek.
	rbxasset://SystemCursors/OpenHand	Taşınabilir bir öğeye dokunarak gezinme.
	rbxasset://SystemCursors/ClosedHand	Bir öğeyi sürüklemek.
	rbxasset://SystemCursors/IBeam	Bir metin alanında gezinmek.
	rbxasset://SystemCursors/SizeNS	Dikey yeniden boyutlandırma kolu üzerinde gezinme.
	rbxasset://SystemCursors/SizeEW	Dikey bir yeniden boyutlandırma kolu üzerinde gezinme.
	rbxasset://SystemCursors/SizeNESW	Bir köşe boyutlandırma kolu üzerinde gezinme.
	rbxasset://SystemCursors/SizeNWSE	Bir köşe boyutlandırma kolu üzerinde gezinme.
	rbxasset://SystemCursors/SizeAll	Çok yönlü yeniden boyutlandırma kolu üzerinde gezinme.
	rbxasset://SystemCursors/SplitNS	Dikey bir "bölme" kolu üzerinde gezinme.
	rbxasset://SystemCursors/SplitEW	Dikey bir "bölme" kolu üzerinde gezinme.
	rbxasset://SystemCursors/Forbidden	Kilitli/yasaklanmış bir öğeye dokunuluyor.
	rbxasset://SystemCursors/Wait	Bir eylemin devam ettiğini belirtmek.
	rbxasset://SystemCursors/Busy	Sistemin meşgul olduğunu gösteriyor.
	rbxasset://SystemCursors/Cross	Bir düğme seçim alanının üzerinde geziniyor.

Kullanıcı girdisini topla

TextBox ve TextButton gibi UI öğeleri, Studio widgetlerinde normal çalışır ve Roblox'ta normalde olduğu gibi arayüzler oluşturabilirsiniz.Ancak, UserInputService ve ContextActionService hizmetleri çalışmıyor çünkü bu hizmetler ana oyun penceresinin odakta olmasını bekliyor.

Genel giriş etkinlikleri için bir çözüm, saydam bir Frame oluşturmak ve tüm ekrana yaymaktır.Aşağıdaki kod örneği bir çerçeve oluşturur ve kullanıcı çerçeveye tıkladığında, GuiObject.InputBegan etkinliği kullanıcının uzaklaşana kadar çerçevede klavye girişini yakalar:

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Çerneyi gizle
frame.Size = UDim2.new(1, 0, 1, 0)  -- Ekranı kapat
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- Giriş nesnesini burada işleyin, örneğin anahtar basışlarını algılayın
end
frame.InputBegan:Connect(onInputBegan)

Sürükleme ve bırakma etkileşimi

Widget'leriniz için sürükleme ve bırakma etkileşimlerini kullanmak, veri akışını geliştirmenin basit bir yoludur.Bu etkileşimi oluşturmak için, sürüklemek için elemanı tanımlamalı, sürüklemeyi başlatmalı, bırakma hedefi oluşturmalı ve bırakma aksiyonişlemelisiniz.

Sürükleme kaynağı oluştur Create drag kaynak

Kullanıcı bir UI öğesine (genellikle bir widget içinde) bir fare düğmesine basınca Plugin:StartDrag() çağırarak bir sürükleme eylemine başlayabilirsiniz, tipik olarak bir TextButton veya ImageButton içinde.Aşağıdaki kod örneği, içinde bir metin düğmesi bulunan tek bir pencere widget oluşturur.

-- Önce widget oluştur
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Sürüklemeyi başlatacak bir TextButton oluştur
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Sürüklemeyi başlat

Kullanıcı TextButton üzerine tıkladığında, kullanıcı fare düğmesine basır basır hemen ateşlenen MouseButton1Down() etkinliği aracılığıyla sürükleme başlatabilirsiniz.

Bağlı işlev içinde, sürükleyecek verileri belirleyin.Verilerin türü , sürüklemenin içeriği içinde yansıtılmalıdır, gönderenin içeriği , anahtarında yansıtılmalıdır ve gönderenin anahtarı kendini açıklamalıdır.Daha fazla ayrıntı için Plugin:StartDrag() sayfasına bakın.

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Sürülen veriler
		MimeType = "text/plain",    -- Verilerin MIME türünü tanımlar
		Sender = "SomeDragSource",  -- Verilerin nereden kaynaklandığını tanımlar
		MouseIcon = "",             -- Fare için kullanılacak görüntü içeriği
		DragIcon = "",              -- Sürükleme sırasında cursor altında görüntü içeriği renderlamak
		HotSpot = Vector2.zero      -- Ok işaretini merkeze almak için DragIcon'da nereye
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Bırakma hedefi oluştur Create drop target

The PluginGui.PluginDragDropped etkinliği, kullanıcı bir pencerede sürükleme sırasında fareyi serbest bıraktığında ateşlenir.Bu olay gerçekleştiğinde, düşüşleri tespit etmek için bir ikinci widget ile bırakma hedefi tanımlamanız gerekir.

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

-- Bu Etiket, düşürülen şeyi gösterir
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Bırakma eylemini aksiyon

Bir bırakma hedefi oluşturduktan sonra, bırakma hedefi widgetine PluginGui.PluginDragDropped etkinliğini bağlayın:

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)

Sürükleme hala devam ederken, bu üç olay kullanıcı bir widget üzerinde fareyi hareket ettirdiğinde ateşlenir:

• PluginDragEntered – kullanıcı bir pencere üzerinde fareyi gezdirirken ateş eder
• PluginDragMoved – kullanıcı bir pencere üzerinde fareyi hareket ettirdiğinde tekrar tekrar ateş eder. Bu, bir "Buraya bırak!" mesajını göstermek için yararlıdır.
• PluginDragLeft – kullanıcının kuruluşu bir pencereden ayrıldığında ateş eder. Bu, bir "Buraya bırak!" mesajını gizlemek için yararlıdır.