Stüdyo widget'ları

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

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:

#ÖzellikTürAçıklama
1Enum.InitialDockStateEnumEnum.InitialDockState enumerasyonlarından biri.
2InitialEnabledBooleanWidget GUI'sinin başlangıçta etkin (görünür) durumu.
3InitialEnabledShouldOverrideRestoreBooleanEğer doğruysa, InitialEnabled değeri daha önce kaydedilmiş etkin durumu geçersiz kılar.
4FloatingXSizeIntegerInitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıç genişliği.
5FloatingYSizeIntegerInitialDockState Enum.InitialDockState.Float olarak ayarlandığında GUI'nin başlangıç yüksekliği.
6MinWidthIntegerGUI'nin minimum genişliği, bazı platforma özgü varyasyonlarla birlikte.
7MinHeightIntegerGUI'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 = testWidget

Stü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 İkonuVarlıkKullanım Durumu
rbxasset://SystemCursors/ArrowVarsayılan tıklama ve seçim.
rbxasset://SystemCursors/PointingHandAktif bir bağlantı/düğme üzerinde dururken.
rbxasset://SystemCursors/OpenHandTaşınabilir bir öğe üzerinde dururken.
rbxasset://SystemCursors/ClosedHandBir öğeyi sürüklerken.
rbxasset://SystemCursors/IBeamBir metin alanında dururken.
rbxasset://SystemCursors/SizeNSDikey bir boyutlandırma tutamağı üzerinde dururken.
rbxasset://SystemCursors/SizeEWYatay bir boyutlandırma tutamağı üzerinde dururken.
rbxasset://SystemCursors/SizeNESWKöşe boyutlandırma tutamağı üzerinde dururken.
rbxasset://SystemCursors/SizeNWSEKöşe boyutlandırma tutamağı üzerinde dururken.
rbxasset://SystemCursors/SizeAllÇok yönlü bir boyutlandırma tutamağı üzerinde dururken.
rbxasset://SystemCursors/SplitNSDikey bir "bölme" tutamağı üzerinde dururken.
rbxasset://SystemCursors/SplitEWYatay bir "bölme" tutamağı üzerinde dururken.
rbxasset://SystemCursors/ForbiddenKilitli/yasaklı bir öğe üzerinde dururken.
rbxasset://SystemCursors/WaitBir işlemin devam ettiğini belirtirken.
rbxasset://SystemCursors/BusySistemin meşgul olduğunu belirtirken.
rbxasset://SystemCursors/CrossBir 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 = dragSourceWidget

Sü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 = dragTargetWidget

Bı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.
©2026 Roblox Corporation. Roblox, the Roblox logo and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.