Stüdyo, özel widget'lar oluşturma gücünü size verir ve bunları araçlar ve uzantılar olarak kullanmanızı sağlar. Bu widget'lar, Stüdyo'da özel pencereler/panel olarak davranır ve arayüzünüzün içinde sabitlenebilir veya ayrı pencereler olarak yüzebilir.
Widget UI'ları oluşturma
Tüm Stüdyo widget'ları, DockWidgetPluginGui nesneleri olarak başlar ve bunları GuiObjects ile doldurabilirsiniz, örneğin metin etiketleri ve düğmeler. Boş bir widget GUI oluşturmak için, CreateDockWidgetPluginGui() fonksiyonunu çağırarak bir ID ve bir DockWidgetPluginGuiInfo nesnesi geçin.
DockWidgetPluginGuiInfo.new() yapıcısının parametrelerini belirli bir sırada beklediğini unutmayın:
| # | Özellik | Tür | Açıklama |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | Enum.InitialDockState enumerasyonlarından biri. |
| 2 | InitialEnabled | Boolean | Widget GUI'sinin başlangıçta etkin (görünür) durumu. |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | Eğer doğruysa, InitialEnabled değeri daha önce kaydedilmiş etkin durumu geçersiz kılar. |
| 4 | FloatingXSize | Integer | InitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıç genişliği. |
| 5 | FloatingYSize | Integer | InitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıç yüksekliği. |
| 6 | MinWidth | Integer | GUI'nin minimum genişliği, bazı platforma özgü varyasyonlarla birlikte. |
| 7 | MinHeight | Integer | GUI'nin minimum yüksekliği, bazı platforma özgü varyasyonlarla birlikte. |
-- Yeni "DockWidgetPluginGuiInfo" nesnesi oluştur
local widgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- Widget, yüzer panel olarak başlatılacak
true, -- Widget başlangıçta etkin olacak
false, -- Önceki etkin durumu geçersiz kılma
200, -- Yüzer pencerenin varsayılan genişliği
300, -- Yüzer pencerenin varsayılan yüksekliği
150, -- Yüzer pencerenin minimum genişliği
150 -- Yüzer pencerenin minimum yüksekliği
)
-- Yeni widget GUI'si oluştur
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget" -- İsteğe bağlı widget başlığıWidget UI'sını özelleştirme
Bir widget oluşturduktan sonra, kullanıcı arayüzünü GuiObjects ile özelleştirebilirsiniz, örneğin bilgilendirici TextLabels veya etkileşimli ImageButtons. Örneğin, aşağıdaki kod, GUI penceresine temel bir TextButton ekler:
-- Yeni widget GUI'si oluştur
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget" -- İsteğe bağlı 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 = "Bana Tıkla"
testButton.Parent = testWidgetStüdyo renk temalarını değiştirme
Etkili Stüdyo widget'ları, ideal olarak Stüdyo tema ayarıyla eşleşmeli ve tema değiştiğinde dinamik olarak ayarlanmalıdır. Örneğin, bir geliştirici karanlık temayı kullanıyorsa, widget'ın arka plan rengi, resimleri ve metin etiketleri, Stüdyo'nun yerel tema renkleriyle uyumlu görünmelidir.
Aşağıdaki kod eklemesi, senkronize edilecek GUI nesnelerinin bir tablosuyla birlikte başlangıçta çağrılan bir syncGuiColors() fonksiyonunu kullanır. Fonksiyon içinde, iç içe geçmiş bir setColors() fonksiyonu, nesneleri döngüye alır ve GetColor() ile Enum.StudioStyleGuideColor enum'larını kullanarak bunların belirli yönlerini senkronize eder. Bu setColors() fonksiyonu, Stüdyo temasını senkronize etmek için hemen çalıştırılır ve ardından gelecekteki tema değişikliklerini algılamak için ThemeChanged olayına bağlanır.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Arka plan rengini senkronize et
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Metin rengini senkronize et
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Renkleri başlangıçta senkronize etmek için 'setColors()' fonksiyonunu çalıştır
setColors()
-- 'ThemeChanged' olayını 'setColors()' fonksiyonuna bağla
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Sağlanan nesnelerin renklerini senkronize etmek için 'syncGuiColors()' fonksiyonunu çalıştır
syncGuiColors({testButton})Fare imleçlerini özelleştirme
Widget öğeleriyle beklenen etkileşimi geliştirmek için, GUI olaylarına sistem-spesifik fare imleçleri ayarlayabilirsiniz, örneğin MouseEnter ve MouseLeave. Aşağıdaki kod, testButton'ın MouseEnter ve MouseLeave olaylarına bir fonksiyon bağlayarak fare imlecini değiştirmeyi gösterir:
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)Aşağıdaki tabloyu, fare imleçleri ve potansiyel kullanım durumları için referans alın:
| Fare İmleci İkonu | Varlık | Kullanım Durumu |
|---|---|---|
| rbxasset://SystemCursors/Arrow | Varsayılan tıklama ve seçim. | |
| rbxasset://SystemCursors/PointingHand | Aktif bir bağlantı/düğme üzerinde dururken. | |
| rbxasset://SystemCursors/OpenHand | Taşınabilir bir öğe üzerinde dururken. | |
| rbxasset://SystemCursors/ClosedHand | Bir öğeyi sürüklerken. | |
| rbxasset://SystemCursors/IBeam | Bir metin alanında dururken. | |
| rbxasset://SystemCursors/SizeNS | Dikey bir boyutlandırma tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/SizeEW | Yatay bir boyutlandırma tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/SizeNESW | Köşe boyutlandırma tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/SizeNWSE | Köşe boyutlandırma tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/SizeAll | Çok yönlü bir boyutlandırma tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/SplitNS | Dikey bir "bölme" tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/SplitEW | Yatay bir "bölme" tutamağı üzerinde dururken. | |
| rbxasset://SystemCursors/Forbidden | Kilitli/yasaklı bir öğe üzerinde dururken. | |
| rbxasset://SystemCursors/Wait | Bir işlemin devam ettiğini belirtirken. | |
| rbxasset://SystemCursors/Busy | Sistemin meşgul olduğunu belirtirken. | |
| rbxasset://SystemCursors/Cross | Bir nokta seçim alanı üzerinde dururken. |
Kullanıcı girişi toplama
TextBox ve TextButton gibi UI öğeleri, Stüdyo widget'larında normal şekilde çalışır ve Roblox'ta normalde olduğu gibi arayüzler oluşturabilirsiniz. Ancak, UserInputService çalışmaz çünkü bu hizmetler ana oyun penceresinin odakta olmasını bekler.
Genel giriş olayları için bir çözüm, şeffaf bir Frame oluşturmak ve bunu tüm ekranın üzerine yerleştirmektir. Aşağıdaki kod örneği, bir çerçeve oluşturur ve kullanıcı çerçeveye tıkladığında, GuiObject.InputBegan olayı, kullanıcı başka bir yere tıklayana kadar çerçevede klavye girişini yakalar:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Çerçeveyi gizle
frame.Size = UDim2.new(1, 0, 1, 0) -- Ekranı kapla
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Giriş nesnesini burada işleyin, örneğin tuş vuruşlarını algılayın
end
frame.InputBegan:Connect(onInputBegan)Sürükle-bırak etkileşimi
Widget'larınız için sürükle-bırak etkileşimleri kullanmak, veri akışını geliştirmek için basit bir yoldur. Bu etkileşimi oluşturmak için, sürüklenecek öğeyi tanımlamanız, sürüklemeyi başlatmanız, bir bırakma hedefi oluşturmanız ve bırakma eylemini işlemeniz gerekir.
Sürükleme kaynağı oluşturma
Bir sürükleme eylemini başlatmak için, kullanıcı bir UI öğesi üzerinde, genellikle bir TextButton veya ImageButton üzerinde fare düğmesine bastığında Plugin:StartDrag() çağırabilirsiniz. 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("Sürükleme Kaynağı", widgetInfo)
dragSourceWidget.Title = "Sürükleme Kaynağı"
-- Sürüklemeyi başlatacak bir TextButton oluştur
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Beni Sürükle!"
dragButton.Parent = dragSourceWidgetSürüklemeyi başlatma
Kullanıcı TextButton'a tıkladığında, MouseButton1Down() olayı aracılığıyla sürüklemeyi başlatabilirsiniz; bu olay, kullanıcı fare düğmesine bastığında hemen tetiklenir.
Bağlı fonksiyon içinde, sürüklenecek veriyi belirleyin. Verinin tipi, MimeType anahtarında yansıtılmalı, sürüklenen içerik Data anahtarında yansıtılmalı ve gönderen kendisini Sender anahtarında tanımlamalıdır. Daha fazla ayrıntı için Plugin:StartDrag() sayfasına bakın.
local function onButton1Down()
local dragInfo = {
Data = "Merhaba, dünya", -- Sürüklenen veri
MimeType = "text/plain", -- Verinin MIME türünü tanımlar
Sender = "BazıSürüklemeKaynağı", -- Verinin nereden geldiğini tanımlar
MouseIcon = "", -- İmleç için kullanılacak resim içeriği
DragIcon = "", -- Sürükleme sırasında imlecin altında görüntülenecek resim içeriği
HotSpot = Vector2.zero -- DragIcon üzerinde imleci merkezlemek için
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)Bırakma hedefi oluşturma
PluginGui.PluginDragDropped olayı, kullanıcı bir sürükleme sırasında bir pencerede fareyi bıraktığında tetiklenir. Bu gerçekleştiğinde, bir TextLabel ile ikinci bir widget gibi bir bırakma hedefi tanımlamanız gerekir.
local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Bırakma Hedefi", widgetInfo)
dragTargetWidget.Title = "Bırakma Hedefi"
-- Bu TextLabel, bırakılanı gösterecek
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Buraya bırak..."
textLabel.Parent = dragTargetWidgetBırakma eylemini işleme
Bir bırakma hedefi oluşturduktan sonra, bırakma hedefi widget'ında PluginGui.PluginDragDropped olayını 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)Bir sürükleme devam ederken, kullanıcı fareyi bir widget üzerinde hareket ettirdiğinde bu üç olay tetiklenir:
- PluginDragEntered – kullanıcı fareyi bir pencerenin üzerine getirdiğinde tetiklenir
- PluginDragMoved – kullanıcı fareyi bir pencerenin üzerinde hareket ettirdiğinde sürekli tetiklenir. Bu, "Buraya bırak!" mesajını göstermek için yararlıdır.
- PluginDragLeft – kullanıcının imleci bir pencereden çıktığında tetiklenir. Bu, "Buraya bırak!" mesajını gizlemek için yararlıdır.















