Studio widget'leri

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

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:

#ÖzellikTürAçıklama
1Enum.InitialDockStateEnumEnum.InitialDockState sıralamalarından biri.
2InitialEnabledBooleanWidget GUI'sinin başlangıçta etkin (görünür) durumu.
3InitialEnabledShouldOverrideRestoreBooleanDoğruysa, InitialEnabled değeri daha önce kaydedilmiş etkin durumu geçersiz kılar.
4FloatingXSizeIntegerInitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıçtaki genişliği.
5FloatingYSizeIntegerInitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıçtaki yüksekliği.
6MinWidthIntegerGUI'nin minimum genişliği, bazı platforma özgü varyasyonlar ile.
7MinHeightIntegerGUI'nin minimum yüksekliği, bazı platforma özgü varyasyonlar ile.

-- Yeni "DockWidgetPluginGuiInfo" nesnesi oluştur
local widgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- Widget, yüzer panelde 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" -- 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ş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 = "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 İkonuVarlıkKullanım Durumu
rbxasset://SystemCursors/ArrowVarsayılan tıklama ve seçim.
rbxasset://SystemCursors/PointingHandEtkin bağlantı/düğmenin üzerinde durma.
rbxasset://SystemCursors/OpenHandSürüklenebilir bir nesnenin üzerinde durma.
rbxasset://SystemCursors/ClosedHandBir nesneyi sürükleme.
rbxasset://SystemCursors/IBeamBir metin alanında durma.
rbxasset://SystemCursors/SizeNSDikey boyut değiştirme kulpunun üzerinde durma.
rbxasset://SystemCursors/SizeEWYatay boyut değiştirme kulpunun üzerinde durma.
rbxasset://SystemCursors/SizeNESWKöşe boyut değiştirme kulpunun üzerinde durma.
rbxasset://SystemCursors/SizeNWSEKöşe boyut değiştirme kulpunun üzerinde durma.
rbxasset://SystemCursors/SizeAllBirden fazla yönlü boyut değiştirme kulpunun üzerinde durma.
rbxasset://SystemCursors/SplitNSDikey "böl" kulpunun üzerinde durma.
rbxasset://SystemCursors/SplitEWYatay "böl" kulpunun üzerinde durma.
rbxasset://SystemCursors/ForbiddenKilitlenmiş/yasaklı bir nesnenin üzerinde durma.
rbxasset://SystemCursors/WaitBir işlemin devam etmekte olduğunu belirtme.
rbxasset://SystemCursors/BusySistemin meşgul olduğunu belirtme.
rbxasset://SystemCursors/CrossBir 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ş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 = 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österecek
local 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.
©2026 Roblox Corporation. Roblox, the Roblox logo and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.