Stüdyo Komutlarını Oluşturma

Studio, özelleştirilmiş widget'lar oluşturmak ve onları Studio araçları ve uzantıları olarak kullanmak için size güç verir. Bu widgetlar Studio'da özel pencereler/paneller davranır ve siz onları kaydınızın içine yapıştırabilir veya ayrı pencereler olarak yüzdeler.

Widget UIs Oluşturulması

Tüm Studio widget'leri DockWidgetPluginGui nesneleri olarak başlar, bunlar metin etiketleri ve düğmeler gibi boş bir widget GUI oluşturmak için kullanılabilir. Boş bir widget GUI oluşturmak için Class.Plugin:CreateDockWidgetPluginGui()

Not the DockWidgetPluginGuiInfo.new() constructor expects its parameters in a 特定 sırayla as follows:

-- Yeni "DockWidgetPluginGuiInfo" nesnayı oluştur
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float,  -- Eklenti fluttabl paneilde başlatılacak
	true,   -- Önce ayar kullanılacak
	false,  -- Önceki aktif devleti geçersiz hale getirme
	200,    -- Yuvarlama pencerenin varsayılan genişliği
	300,    -- Yuvarlak pencerenin varsayılan yüksekliği
	150,    -- Yüzün minimum genişliği
	150     -- Yüzün minimum yüksekliği
)

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

Widget UI'si Özelleştirme

Bir widget oluşturduktan sonra, kullanıcı arayüzünü GuiObjects gibi bilgilendirici TextLabels veya etkileşimli ImageButtons ile kişiselleştirebilirsiniz. Örneğin, aşağıdaki kod, GUI penceresine temel bir 2>Class.

-- Yeni bir widget GUI oluştur
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Opcional 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

Stüdyo Renk Temalarını Değiştirme

Etkin Studio widget'ları idealde Studio temasına uyumludur ve tema değiştirildiğinde dinamik olarak ayarlanır. durum, bir geliştirici karanlık temasını kullanıyorsa, widget'nin arka plan rengi, görüntüleri ve metin etiketleri Studio'nun varsayılan tema renkleriyle birlikte güzel görünmelidir.

Aşağıdaki kod eklemesi, önce bir GUI nesnesi tablosu ile senkronize edilmesi için syncGuiColors() işlevini k

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Geriye aktarma renk
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Metni rengini senkronize et
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Renkleri ilk olarak senkronize etmek için 'setColors()' işlevini çağırın
	setColors()
	-- Değiştirilen 'Tema' olayını 'setColors()' işlevine bağlayın
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Sunulan nesnelerin renklerini senkronize etmek için 'syncGuiColors()' işlevini çalıştırın
syncGuiColors({testButton})

Farenizin Kursörlerini Özelleştirme

Beklenen etkileşimi widget elemanları ile geliştirmek için, sistem özellikleriyle fare kurucuları GUI etkinliklerine ayarlayabilirsiniz, Class.GuiObject.MouseEnter|MouseEnter

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

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

Farenizin kursörleri ve potansiyel kullanım durumları için aşağıdaki tabloyu referans alın:

Farenin Ekranını Göstermesi İkonü	Varlık	Kullanım Kılavuzu
	rbxasset://SystemCursors/Arrow	Varsayılan tıklama ve seçme.
	rbxasset://SystemCursors/PointingHand	Aktif bir bağlantıya/tuşa sorunaret edilmesi.
	rbxasset://SystemCursors/OpenHand	Sürüklemeyi sağlayan öğeye fareyi koyarak.
	rbxasset://SystemCursors/ClosedHand	Bir öğeyi sürükleme.
	rbxasset://SystemCursors/IBeam	Bir metin alanında gezinme.
	rbxasset://SystemCursors/SizeNS	Yatay yüklemeye genişletme işlemi yapmak için kaydırıcı.
	rbxasset://SystemCursors/SizeEW	Yatay yeniden boyutlandırma çubuğunun üzerine gezin.
	rbxasset://SystemCursors/SizeNESW	Bir köşe üzerinde durmak resim etiketini yeniden boyutlandırır.
	rbxasset://SystemCursors/SizeNWSE	Bir köşe üzerinde durmak resim etiketini yeniden boyutlandırır.
	rbxasset://SystemCursors/SizeAll	Yönlendirici olarak değiştirmeye genel bak.
	rbxasset://SystemCursors/SplitNS	Yatay bir "ayırma" kolu üzerinde gezin.
	rbxasset://SystemCursors/SplitEW	Yatay bir "ayırma" kolu üzerinde gezin.
	rbxasset://SystemCursors/Forbidden	Kilitli/yasaklı bir öğeye fareyi koymak.
	rbxasset://SystemCursors/Wait	Bir eylemin devam ettiğini gösterir.
	rbxasset://SystemCursors/Busy	Sistemin meşgul olduğunu gösteren bir mesaj.
	rbxasset://SystemCursors/Cross	Bir pinpoint seçim alanına fareyi taşıyıcı olarak hareket ettirerek.

Kullanıcı Girişlerini Toplama

TextBox ve TextButton gibi UI elemanları Studio widget'lerinde normalde çalışır ve Roblox'ta normalde yaptığınız gibi arayüzleri inşa edebilirsiniz. Ancak, UserInputService ve 1>Class.ContextActionService1> bu hizmetleri beklediğinden beri çalış

Genel giriş etkinlikleri için bir çalışma çevresi, şeffaf bir Frame oluşturmak ve tüm ekrana üzerinde katlayın. İşlem kod örneği, bir çerçeve oluşturur ve kullanıcı ekranda çerçevi üzerinde tıklayınca, kullanıcının çerçevi üzerindeki klavye giriş

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Çerçeviyi 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 işleyin, örneğin anahtar basımlarını tespit et
end
frame.InputBegan:Connect(onInputBegan)

Etkileşimi Sürükleme ve Bırakma

Eklentileriniz için kaydır-bırak etkileşimlerini kullanmak, veri akışını artırmak için basit bir yoldur. Bu etkileşimi oluşturmak için, kaydırıcıyı tanımlayın, kaydırıcıyı başlatın, bir kaydırma hedefi oluşturun ve kaydırma aksiyonişlemez.

Bir Sürükleme Kaynağı Oluşturulması

Kullanıcı bir mouse'a düğmesine bastığında Plugin:StartDrag() çağırabilirsiniz, genellikle bir TextButton veya ImageButton içinde bir widget oluşturur. Aşağıdaki kod örneği tek bir pencere widget ile bir text butonu 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şturun
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Sürüklemeyi Başlatma

Kullanıcı TextButton 'e tıkladığında, kullanıcının mouse'u aşağı'ya bastığında çekmeyi başlatabilirsiniz, bu da mouse'u bastırana hemen sonra başlar.

Bağlantılı işlev içinde, sürüklemenin içindeki verileri belirleyin. Verinin türüMimeType anahtarında yansıtılmalıdır ve sürüklemenin içindeki içerik <

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Sürüklenen veriler
		MimeType = "text/plain",    -- Verinin MİME tipini açıklar
		Sender = "SomeDragSource",  -- Verinin nereden geldiğini açıklar
		MouseIcon = "",             -- Kurşör için kullanılacak resim içeriği
		DragIcon = "",              -- Sürüklemede kurсоyla görüntü içeriğini göster
		HotSpot = Vector2.zero -- DragIcon'ın kuruluşunu merkezlemek için nerede
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Bir Drop Hedef Oluşturulması

Kullanıcı bir pencerede farelerini bırakırken etkinleştirilen PluginGui.PluginDragDropped olayı patlar. Bu olay gerçekleştiğinde, bir ikinci widget ile bir Class.TextLabel gerektirir, böylece düşükleri tespit etmek için.

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

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

Drop Action'ı İşlemesi

Bir düşme hedefi oluşturduktan sonra, düşme hedefi widget'ine şu etkinliği bağlayın: PluginGui.PluginDragDropped

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)

Bir çekim hala devam ederken, bu üç etkinlik kullanıcının mouse'unu bir widget üzerinde hareket ettirirken ateşlenir:

• PluginDragEntered – kullanıcı bir pencere üzerinde fareyi kullanarak kullanır
• PluginDragMoved – tekrar tekrar ateşlenir, kullanıcının bir pencere üzerinde fareyi hareket ettirir. Bu, bir "Buraya bırak!" mesajını göstermek için kullanışlıdır.
• PluginDragLeft – kullanıcının kurşörünün bir pencereden ayrıldığında başlar. Bu, bir "Buraya atın!" mesajını gizlemek için yararlıdır.