Studio size özel widget'lar oluşturma ve bunları araçlar ve uzantılar olarak kullanma gücü verir. Bu widget'lar, Studio'da özel pencereler/panel olarak davranır ve arayüzünüz içinde yerleştirilebilir veya ayrı pencereler olarak serbestçe hareket ettirilebilir.
Widget UI'lerini Oluşturma
Tüm Studio widget'ları, DockWidgetPluginGui nesneleri olarak başlar ve bunları GuiObjects ile doldurabilirsiniz; örneğin, metin etiketleri ve düğmeler. Boş bir widget GUI'si oluşturmak için CreateDockWidgetPluginGui() fonksiyonunu çağırarak bir ID ve DockWidgetPluginGuiInfo nesnesi geçirin.
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 sıralamalarından biri. |
| 2 | InitialEnabled | Boolean | Widget GUI'sinin başlangıçta etkin (görünür) durumu. |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | 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ıçtaki genişliği. |
| 5 | FloatingYSize | Integer | InitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıçtaki yüksekliği. |
| 6 | MinWidth | Integer | GUI'nin minimum genişliği, bazı platforma özgü varyasyonlar ile. |
| 7 | MinHeight | Integer | GUI'nin minimum yüksekliği, bazı platforma özgü varyasyonlar ile. |
-- Yeni "DockWidgetPluginGuiInfo" nesnesi oluşturlocal widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, -- Widget, yüzer panelde başlatılacaktrue, -- Widget başlangıçta etkin olacakfalse, -- Önceki etkin durumu geçersiz kılma200, -- Yüzer pencerenin varsayılan genişliği300, -- Yüzer pencerenin varsayılan yüksekliği150, -- Yüzer pencerenin minimum genişliği150 -- Yüzer pencerenin minimum yüksekliği)-- Yeni widget GUI'si oluşturlocal testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)testWidget.Title = "Test Widget" -- Opsiyonel widget başlığı
Widget UI'sini Özelleştirme
Bir widget oluşturduktan sonra, GuiObjects ile kullanıcı arayüzünü özelleştirebilirsiniz; bu, bilgilendirici TextLabels veya etkileşimli ImageButtons gibi bileşenler olabilir. Örneğin, aşağıdaki kod, GUI penceresine temel bir TextButton ekler:
-- Yeni widget GUI'si oluşturlocal testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)testWidget.Title = "Test Widget" -- Opsiyonel widget başlığılocal testButton = Instance.new("TextButton")testButton.BorderSizePixel = 0testButton.TextSize = 20testButton.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.RelativeYYtestButton.Text = "Bana Tıkla"testButton.Parent = testWidget
Studio renk temalarını değiştirme
Etkili Studio widget'ları, ideal olarak Studio tema ayarını yansıtmalı 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, resimler ve metin etiketleri, Studio'nun yerel tema renkleriyle uyumlu görünmelidir.
Aşağıdaki kod eklemesi, senkronize edilecek GUI nesnelerinin bulunduğu bir tablo ile birlikte başlangıçta çağrılan 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ı kullanarak onların belirli yönlerini senkronize eder. Bu setColors() fonksiyonu, 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 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
-- Başlangıçta renkleri senkronize etmek için 'setColors()' fonksiyonunu çalıştır
setColors()
-- 'ThemeChanged' etkinliğini '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 bileşenleriyle beklenen etkileşimi geliştirmek için, GUI olaylarına sistem özgü 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)
Fare imleçleri için bir listedeki potansiyel kullanım durumları:
| Fare İmleci İkonu | Varlık | Kullanım Durumu |
|---|---|---|
| rbxasset://SystemCursors/Arrow | Varsayılan tıklama ve seçim. | |
| rbxasset://SystemCursors/PointingHand | Etkin bağlantı/düğmenin üzerinde durma. | |
| rbxasset://SystemCursors/OpenHand | Sürüklenebilir bir nesnenin üzerinde durma. | |
| rbxasset://SystemCursors/ClosedHand | Bir nesneyi sürükleme. | |
| rbxasset://SystemCursors/IBeam | Bir metin alanında durma. | |
| rbxasset://SystemCursors/SizeNS | Dikey boyut değiştirme kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/SizeEW | Yatay boyut değiştirme kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/SizeNESW | Köşe boyut değiştirme kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/SizeNWSE | Köşe boyut değiştirme kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/SizeAll | Birden fazla yönlü boyut değiştirme kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/SplitNS | Dikey "böl" kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/SplitEW | Yatay "böl" kulpunun üzerinde durma. | |
| rbxasset://SystemCursors/Forbidden | Kilitlenmiş/yasaklı bir nesnenin üzerinde durma. | |
| rbxasset://SystemCursors/Wait | Bir işlemin devam etmekte olduğunu belirtme. | |
| rbxasset://SystemCursors/Busy | Sistemin meşgul olduğunu belirtme. | |
| rbxasset://SystemCursors/Cross | Bir noktasal seçim alanının üzerinde durma. |
Kullanıcı Geri Bildirimi Toplama
TextBox ve TextButton gibi UI bileşenleri, Studio widget'larında normal olarak çalışır ve Roblox'ta olduğu gibi arayüzleri oluşturabilirsiniz. Ancak, UserInputService çalışmaz, çünkü bu hizmetler, ana deneyim penceresinin odakta olmasını bekler.
Genel giriş olayları için bir workaround, şeffaf bir Frame oluşturarak 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ı ç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ş basımını tespit edin
end
frame.InputBegan:Connect(onInputBegan)
Sürükle ve Bırak Etkileşimi
Widget'larınız için sürükle ve bırak etkileşimlerini 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ğını Oluşturma
Bir sürükleme eylemini başlatmak için, kullanıcı bir UI öğesinin üzerinde fare düğmesine bastığında Plugin:StartDrag() çağrısı yapılır; genellikle bir widget içinde bir TextButton veya ImageButton olur. Aşağıdaki kod örneği, içinde bir metin düğmesi bulunan tek bir pencere widget'ı oluşturur.
-- Önce widget'ı oluşturlocal 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şturlocal dragButton = Instance.new("TextButton")dragButton.Size = UDim2.new(1, 0, 1, 0)dragButton.Text = "Beni Sürükle!"dragButton.Parent = dragSourceWidget
Sürüklemeyi Başlatma
Kullanıcı TextButton'a tıkladığında, sürüklemeyi başlatmak için MouseButton1Down() olayıyla başlatabilirsiniz; bu olay, kullanıcı fare düğmesine bastığında ateşlenir.
Bağlı fonksiyon içinde, sürüklenecek veriyi belirleyin. Verinin tipi, MimeType anahtarında gösterilmeli, sürüklemenin içeriği Data anahtarında yansıtılmalı ve gönderen kendisini Sender anahtarında tanımlamalıdır. Daha fazla detay 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österilecek 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
Kullanıcı sürükleme sırasında bir pencerin üzerinde fareyi bıraktığında PluginGui.PluginDragDropped olayı ateşlenir. 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 düşen nesneyi göstereceklocal textLabel = Instance.new("TextLabel")textLabel.Size = UDim2.new(1, 0, 1, 0)textLabel.Text = "Buraya bırak..."textLabel.Parent = dragTargetWidget
Bırakma Eylemini İşleme
Bir bırakma hedefi oluşturduktan sonra, bıraktığınız hedef widget'ında PluginGui.PluginDragDropped olayına bağlanı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 işlemi devam ederken, kullanıcı fareyi bir widget'ın üzerine hareket ettirdiğinde bu üç olay ateşlenir:
- PluginDragEntered – kullanıcı fareyi pencerenin üzerinde gezdirdiğinde ateşlenir
- PluginDragMoved – kullanıcı fareyi pencerenin üzerinde hareket ettirdiğinde sürekli olarak ateşlenir. "Buraya bırak!" mesajını göstermek için kullanışlıdır.
- PluginDragLeft – kullanıcının imleci pencerenin dışına çıktığında ateşlenir. "Buraya bırak!" mesajını gizlemek için kullanışlıdır.















