Etkileşimli UI Oluşturma

Bir HUD (Heads-Up Display) deneyiminizde genellikle, HUD metreleri oluşturun bölümünde gösterilen sağlık ölçer gibi etkileşimli olmayan UI bileşenlerini görüntüler. Bunun yanı sıra, hemen her deneyim etkileşimli UI öğeleri gerektirir; buna, oyuncu etkileşimine yanıt veren, etkinleştirildiğinde animasyonlanan, diğer etkileşimli kontrollerle birlikte açılıp kapanan menüler gibi butonlar dahildir.

UI Temelleri - HUD Metresi bölümünü başlangıç noktası olarak kullanarak ve UI Temelleri - Etkileşimlilik bölümünü bitmiş referans olarak alarak, bu öğretici şunları gösterir:

• Ayarlar butonunu ekranın üst kenarında nasıl konumlandıracağınız.
• Etkileşimli sürüklenebilir kaydırıcılar içeren bir ayarlar menüsünün tasarımı.
• Durumlu beyanlarla UI nesnelerinin genişletilebilir kontrolleri için "denetleyici" modülleri oluşturmak için bir ModuleScript kullanımı.
• Butonları, ayarlar menüsünü açıp kapatmak için oyuncu etkileşimi ile nasıl bağlayacağınız.
• Sesi efektleri ve arka plan ortam sesi için ayrı ayrı ayarlamak amacıyla sürüklenebilir UI kaydırıcılarını nasıl bağlayacağınız.

Aygıt Emülatörünü Etkinleştirin

HUD metreleri oluşturun bölümünde belirtildiği gibi, telefonlar ve tabletler en az ekran alanına sahiptir, bu nedenle UI öğelerinizin daha küçük ekranlara sığması ve oyunculara net bir şekilde görünmesi önemlidir. Eğer henüz yapmadıysanız, Studio'da Aygıt Emülatörü'nü etkinleştirin:

1. Studio'da UI Temelleri - HUD Metresi şablonunu açın.

2. Studio'nun Test menüsünden Aygıt Emülatörü'nü etkinleştirin.

3. Ana görünüm penceresinin hemen üstündeki çubuktan iPhone X veya Samsung Galaxy A51 gibi bir telefon emülasyonu seçin. Ardından, görünüm boyutunu Pencereye Sığdır olarak ayarlayarak Studio'daki maksimum alanı kullanın.

   

Ayarlar Butonunu Oluşturun

GuiButtons etkileşimli kullanıcı arayüzü öğeleridir ve Activated etkinliği gibi yerleşik işlevselliğe sahiptir; bu, butona tıkladığınızda veya dokunduğunuzda ateş eder. GuiButton sınıfı iki varyasyona sahiptir; TextButton ve ImageButton, ve bu öğretici ayarlar menüsünü açıp kapatmak için bir "dişli" şeklindeki ImageButton kullanır.

Ayarlar butonunu oluşturmak için:

1. Explorer penceresinde StarterGui içinde HUDContainer'ı bulun.

   

2. HUDContainer'a bir ImageButton ekleyin ve adını SettingsButton olarak değiştirin.

   

3. Yeni buton seçiliyken, Properties penceresinde aşağıdakileri ayarlayın:

   • AnchorPoint = 0.5, 0.25 (yatay merkez ve dikey üst çeyrek)
   • BackgroundTransparency = 1 (tamamen şeffaf)
   • Position = 0.5, 0, 0, 0 (üst merkez konumlandırma)
   • Size = 0.1, 0, 0.1, 0 (oran kısıtlandığında ekran yüksekliğinin %10'u)
   • Image = rbxassetid://104919049969988 (dişli sembolünün varlık kimliği)

4. Butona varsayılan özelliklerle bir UIAspectRatioConstraint ekleyin (1:1 genişlik-yükseklik oranı).

   

5. Butonun maksimum piksel yüksekliğini sınırlamak için bir UISizeConstraint ekleyin ve MaxSize'ını inf, 44 olarak ayarlayın.

   

   

   

Ayarlar Menüsünü Oluşturun

Yeni ayarlar butonu, oyuncuların ayarlara veya diğer bilgilere anında erişim sağlaması için bir ayarlar menüsünü açıp kapatmak üzere betimlenecektir. Bu öğreticide, menü arka plan sesinin ve ses efektlerinin ses seviyelerini ayrı olarak ayarlamak için etkileşimli kaydırıcılar içerecektir.

Ana Çerçeveyi Oluşturun

HUD metreleri oluşturun bölümünde belirtildiği gibi, bir Frame, diğer UI nesneleri için bir konteyner görevi görür. Tüm ayarlar menüsü, durumlu bir nesne olarak, mevcut duruma göre farklılık göstererek girdiye yanıt verme işlemini basit hale getiren tek bir ana çerçeve ile oluşturulacaktır.

1. HUDContainer'a bir Frame ekleyin ve adını SettingsMenu olarak değiştirin.

   

2. SettingsMenu seçiliyken aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 0.5 (merkez noktası)
   • BackgroundColor3 = 30, 30, 60 (lacivert)
   • BackgroundTransparency = 0.25 (şeffaflığın %75'i)
   • Position = 0.5, 0, 0.5, 0 (ekranın ortası)
   • Size = 0.75, 0, 0.75, 0 (ekranın kenar alanının %75'i genişlik/yükseklik)

   

3. SettingsMenu'ya bir UIAspectRatioConstraint ekleyin ve AspectRatio özelliğini 2.5 olarak ayarlayın. (2.5:1 genişlik-yükseklik oranı).

   

   

4. SettingsMenu'nin piksel genişliği ve yüksekliğini sınırlamak için bir UISizeConstraint ekleyin. MaxSize'ını 800, inf ve MinSize'ını 350, 0 olarak ayarlayın.

   

   

   

Bir Kaydırıcı Oluşturun

Oyuncuların ses seviyelerini ayarlamalarına izin vermek için ayarlar menüsü, UIDragDetector ile desteklenen iki sürüklenebilir kaydırıcı bileşeni içerecektir; bu kullanılabilir nesne, 2D kullanıcı arayüzü öğeleri ile etkileşimi kolaylaştırır.

İlk kaydırıcı için bir ana konteyner oluşturmak üzere:

1. SettingsMenu konteynerine yeni bir Frame ekleyin ve adını EffectsVolumeSlider olarak değiştirin.

   

2. EffectsVolumeSlider çerçevesi seçiliyken aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 0.5 (merkez noktasını)
   • BackgroundTransparency = 1 (tamamen şeffaf)
   • Position = 0.5, 0, 0.35, 0 (yatay merkez ve konteynerin üstünden %35)
   • Size = 0.8, 0, 0.1, 0 (konteynerin genişliğinin %80'i ve yüksekliğinin %10'u)

   

3. EffectsVolumeSlider'a yeni bir UIListLayout ekleyin. Bu düzenleyici, kardeş GuiObjects bileşenlerini yatay satırlara veya dikey sütunlara otomatik olarak yerleştirmek için güçlü bir yol sunar; ayrıca esnek kavramlarını uygulama yeteneğine sahiptir.

   

4. Yeni UIListLayout için aşağıdaki özellikleri ayarlayın:

   • Padding = 0.06, 0 (liste öğeleri arasında %6 boşluk)
   • FillDirection = Horizontal (soldan sağa düzenleme)
   • HorizontalFlex = Fill (bütün öğeleri, belirlenen genişliği aşmadan ana konteyneri dolduracak şekilde yeniden boyutlandır)
   • VerticalAlignment = Center (öğeleri dikey merkezleri boyunca hizalama)

Kaydırıcı simgesi

Basit bir simge, ayarlar menüsü açıldığında kaydırıcının amacını oyunculara göstermek için bir ses notası ve "patlama" sembolü içerir.

1. EffectsVolumeSlider çerçevesine bir ImageLabel ekleyin ve adını Icon olarak değiştirin. Bu simge, oyuncuların kaydırıcının hangi deneyim boyutunu kontrol ettiğini anlamalarına yardımcı olacaktır.

   

   Önemle vurgulamak gerekir ki, etiket UIListLayout'un bir kardeşi olmalıdır, bunun içinde bir çocuğu olmamalıdır.

2. Icon seçiliyken, aşağıdaki özellikleri ayarlayın:

   • BackgroundTransparency = 1 (tamamen şeffaf)
   • Size = 2.5, 0, 2.5, 0 (oran kısıtlandığında ana çerçevenin %250'si)
   • Image = rbxassetid://90019827067389 (ses notası ve "patlama" sembolünün varlık kimliği)

3. Icon'a bir UIAspectRatioConstraint ekleyin ve varsayılan özelliklerini olduğu gibi bırakın (1:1 genişlik-yükseklik).

   

Aralık çerçevesi

Simge sağında kaydırıcının etkileşimli kısmı başka bir Frame içinde tutulmalıdır.

1. EffectsVolumeSlider çerçevesine yeni bir Frame ekleyin ve adını SliderFrame olarak değiştirin. Bunun, UIListLayout düzenleyicisinin doğrudan kardeşi olması gerektiğini unutmayın.

   

2. SliderFrame seçiliyken aşağıdaki özellikleri ayarlayın:

   • BackgroundColor3 = 0 (siyah)
   • BackgroundTransparency = 0.75 (şeffaflığın %25'i)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (eşit olarak ana çerçevenin %100'ü genişlik/yükseklik)

   AnchorPoint (Konum Noktası) veya Position (Konum) gibi konumsal değişiklikler atamanıza gerek yoktur; çünkü UIListLayout bunun gibi kardeşleri konumlandırma işlevini kontrol eder; bu durumda soldan sağa yatay olarak sıralar ve birbirlerini dikey olarak merkezler.

   LayoutOrder özelliği, UIListLayout gibi düzenleyicilerle çalışırken önemlidir, çünkü kardeşlerin birbirleriyle sıralandığı diziyi belirler. SliderFrame için 1 olarak değiştirilmesi, Icon'ın varsayılan LayoutOrder'ının 0 olduğu göz önünde bulundurularak, Icon'ın sağında yer almasını sağlar.

3. SliderFrame'e aşağıdaki düzenleyicileri ekleyin:

   • UICorner ile CornerRadius özelliği 0.5, 0 olarak ayarlanmış ("hap" şekli)
   • UISizeConstraint ile MaxSize özelliği inf, 30 olarak ayarlanmış (maksimum 30 piksel yükseklik)
   • UIStroke ile Color 0, Class.UIStroke.Thickness|Thicknessolarak3, Class.UIStroke.Transparency|Transparencyolarak0.25` (şeffaflığın %75'i siyah kenarlık)

   

Etkileşimli tutamak

Kaydırıcı konteyner oluşturulduktan sonra, şimdi oyuncuların oyun esnasında etkileşimde bulunacakları bir sürüklenebilir tutamak oluşturabilirsiniz.

1. SliderFrame konteynerine yeni bir Frame ekleyin ve adını Handle olarak değiştirin.

   

2. Handle seçiliyken aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 0.5 (merkez noktasını)
   • Position = 0.5, 0, 0.5, 0 (ana çerçevenin yatay ve dikey merkezi)
   • Size = 1.2, 0, 1.2, 0 (oran kısıtlandığında ana çerçevenin %120'si)
   • ZIndex = 3 (tutamak katmanını diğer kaydırıcı bileşenlerinin önünde görsel olarak yerleştirin)

3. Handle'a aşağıdaki düzenleyicileri ekleyin:

   • UIAspectRatioConstraint varsayılan özellikleriyle (1:1 genişlik-yükseklik)
   • UICorner ile CornerRadius özelliği 0.5, 0 olarak ayarlanmış (daire şekli)
   • UIStroke ile Color [0, 150, 255] ve Thickness özellikleri 8 olarak ayarlanmış (kalın mavi kenarlık)

4. Handle'a bir UIDragDetector nesnesi ekleyin. Bu kullanılabilir nesne, 2D kullanıcı arayüzü öğeleriyle etkileşimde bulunmayı kolaylaştırır ve teşvik eder.

   

5. Yeni UIDragDetector için aşağıdaki özellikleri ayarlayın:

   • DragStyle = TranslateLine (detektörün DragAxis'ına göre 1D hareket.)
   • ResponseStyle = Scale (detektörün ebeveyninin konum değerleriyle hareket etme)

6. Tutamağın lineer sürükleme aralığını sınırlamak için, BoundingUI özelliğini SliderFrame konteynerine bağlayın:

   1. UIDragDetector'ı seçin.
   2. Properties penceresinde BoundingUI özelliğine tıklayın.
   3. Explorer penceresine döndüğünüzde, tutamağın ebeveyni SliderFrame'e tıklayın.

   

   BoundingUI özelliği bağlandığında, artık SliderFrame konteynerini yansıtır:

   

Şimdi deneyimini oynatmayı denediğinizde, tutamağı ebeveyn konteynerine göre sola ve sağa sürükleyebilirsiniz:

İç Dolgu

Kaydırıcının 0%-100% aralığını kontrol ettiği daha net bir şekilde göstermek için, tutamağın değişken pozisyonuyla senkronize olacak bir iç dolgu ekleyebilirsiniz.

1. SliderFrame konteynerine yeni bir Frame ekleyin ve adını InnerFill olarak değiştirin.

   

2. InnerFill çerçevesi için aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 0, 0.5 (sol kenar ve dikey merkez)
   • BackgroundColor3 = [0, 150, 255] (kaydırıcının tutamağı ile uyumlu mavi)
   • BackgroundTransparency = 0.35 (şeffaflığın %65'i)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (çerçevenin %50'si genişlik ve %100'ü yükseklik)
   • ZIndex = 2 (ana çerçevenin dolgu/kenarlığının önünde görsel katman)

3. Ana SliderFrame konteynerinin "hap" şeklini eşleştirmek için bir UICorner düzenleyicisi ekleyin ve CornerRadius özelliğini 0.5, 0 olarak ayarlayın.

   

   

   

Kaydırıcıyı Kopyalayın

İlk kaydırıcı oluşturulduğunda, kolayca kopyalayabilir ve başka bir amacını belirtmek için bazı görsel yönlerini değiştirebilirsiniz; bu durumda arka plan sesinin hacim seviyesini simgeleyen müzik notaları içeren bir simge ile gösterilecektir.

1. Tamamlanan EffectsVolumeSlider nesnesini seçin.

   

2. Bunu çoğaltın (CtrlD veya ⌘D) ve çoğaltmayı BackgroundVolumeSlider olarak yeniden adlandırın.

   

3. Şu özelliği değiştirin: Position öğesini 0.5, 0, 0.7, 0 olarak ayarlayın ve böylece ilk kaydırıcının altına yerleştirin.

   

4. BackgroundVolumeSlider'ın en üst dalını genişletin, Icon resim etiketini seçin ve Image özelliğini rbxassetid://101125859760167 (müzik notalarının sembolünün varlık kimliği) olarak değiştirin.

   

   

   

5. SliderFrame ⟩ Handle dalını genişletin, içindeki UIStroke düzenleyicisini seçin ve Color özelliğini [255, 0, 125] (macenta) olarak ayarlayın.

   

   

   

6. SliderFrame içinde InnerFill çerçevesini seçin ve BackgroundColor3 özelliğini aynı macenta rengine ([255, 0, 125]) değiştirin.

   

   

   

Kapatma Butonunu Oluşturun

Ayarlar menüsünün son öğesi, oyunculara menüyü kapatmak için ek bir giriş sağlayan bir kapatma butonudur (ekranın üst merkezindeki SettingsButton benzer işlevi görecektir).

1. SettingsMenu konteynerine yeni bir ImageButton ekleyin ve adını CloseButton olarak değiştirin.

   

2. CloseButton seçiliyken aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 1, 0 (üst sağ köşe)
   • BackgroundTransparency = 1 (tamamen şeffaf)
   • Position = 1, -10, 0, 10 (üst sağ köşeden 10 piksel içe)
   • Size = 0.15, 0, 0.15, 0 (oran kısıtlandığında çerçeve yüksekliğinin %15'i)
   • Image = rbxassetid://5577404210 (kapatma butonu sembolünün varlık kimliği)
   • ImageTransparency = 0.25 (şeffaflığın %75'i)

3. Butona varsayılan özelliklerle bir UIAspectRatioConstraint ekleyin (1:1 genişlik-yükseklik).

   

Kontrol Modüllerini Oluşturun

Genişletilebilir bir kontrol modülü kurulumu, etkileşimli UI yönetimini, her nesne içine yerleştirilecek olan bireysel betiklerin yerine daha düzenli hale getirir. ModuleScripts, istemci-sunucu sınırının farklı tarafları arasında veya sınırın aynı tarafında kodu yeniden kullanmanıza izin vererek bu genişletilebilir işlevselliği kolaylaştırır.

Durumlu nesne denetleyicisi

Aşağıdaki durumlu nesne denetleyici modülü, UI nesnelerine, örneğin SettingsButton ve SettingsMenu gibi davranışlar eklemenizi sağlar ve çeşitli durumlar arasında kolayca geçiş yapabilirsiniz. Modülü oluşturmak için:

1. ReplicatedStorage konteynerine bir ModuleScript ekleyin ve adını StatefulObjectController olarak değiştirin.

2. Modül içerisine aşağıdaki kodları yapıştırın:

   StatefulObjectController
   local TweenService = game:GetService("TweenService")
   
   local StatefulObjectController = {}
   StatefulObjectController.__index = StatefulObjectController
   
   export type StateName = string
   export type State = {
   	transition: TweenInfo,
   	properties: { [string]: any },
   }
   
   function StatefulObjectController.hydrate(props: {
   		object: Instance,
   		states: { [StateName]: State },
   		initialStateName: StateName
   	})
   	local object, states, initialStateName = props.object, props.states, props.initialStateName
   
   	local self = setmetatable({
   		states = states,
   		currentStateName = initialStateName,
   		tweens = {},
   	}, StatefulObjectController)
   
   	-- Create tweens for reuse to avoid making new tweens every time state is changed
   	for stateName, state in states do
   		self.tweens[stateName] = TweenService:Create(object, state.transition, state.properties)
   	end
   
   	self:setState(self.currentStateName)
   
   	return self
   end
   
   function StatefulObjectController:setState(stateName: StateName)
   	local stateTween: Tween = self.tweens[stateName]
   	if not stateTween then
   		warn(string.format("Attempted to set %s to unknown state '%s'", self.object:GetFullName(), stateName))
   		return
   	end
   
   	self.currentStateName = stateName
   
   	-- Make sure other tweens aren't conflicting
   	for _, tween in self.tweens do
   		tween:Cancel()
   	end
   
   	stateTween:Play()
   end
   
   return StatefulObjectController

   Kod Açıklaması

   Sıra	Amaç
   6‑10	Bu modülü kullanırken otomatik tamamlama ve linting'i iyileştirmek için Luau türlerini tanımlar ve dışa aktarır.
   12‑33	Bir durumlu UI nesnesi oluşturmak için kullanılan işlevdir, GuiObject'u object olarak kabul eder, durumlar ve bunların ilgili TweenInfo verileri ile bir tablodur ve bir başlangıç durumu adı alır. Bu işlevin içinde, satırlar 26‑28 her durum için Tweens oluşturur ve satır 30, modülün setState() işlevini çağırarak nesneyi başlangıç durumuna getirir.
   35‑50	Bir durumlu nesnenin durumunu ayarlamak için kullanılan işlevdir. İçinde, satırlar 53‑54 nesnenin konumunun ve iç dolgu boyutunun eşleşmesini sağlarken ve satır 57 son değişiklik değerini geribildirim fonksiyonuna gönderir.

Kaydırıcı denetleyicisi

Ek bir modül, iki ses kaydırıcısını başlatır ve kontrol eder. Ayrıca, kaydırıcıyla oyuncu etkileşimini algılamak ve deneyimde istenen değişiklikleri uygulamak için her kaydırıcıya bir geri çağırma işlevi bağlamanıza olanak tanır.

1. ReplicatedStorage konteynerine bir ModuleScript ekleyin ve adını SliderController olarak değiştirin.

   

2. Modül içerisine aşağıdaki kodları yapıştırın:

   SliderController
   local SliderController = {}
   SliderController.__index = SliderController
   
   export type Value = number
   export type OnChanged = (Value) -> ()
   
   function SliderController.hydrate(props: {
   		object: Instance,
   		onChanged: OnChanged,
   		initialValue: Value?
   	})
   	local object, onChanged, initialValue = props.object, props.onChanged, props.initialValue
   
   	local handle = object:FindFirstChild("Handle", true)
   	if not handle then
   		warn(string.format("Attempted to hydrate slider %s but couldn't find Handle", object:GetFullName()))
   	end
   
   	local innerFill = object:FindFirstChild("InnerFill", true)
   	if not innerFill then
   		warn(string.format("Attempted to hydrate slider %s but couldn't find InnerFill", object:GetFullName()))
   	end
   
   	local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
   	if not dragDetector then
   		warn(string.format("Attempted to hydrate slider %s but couldn't find UIDragDetector", object:GetFullName()))
   	end
   
   	local self = setmetatable({
   		handle = handle,
   		innerFill = innerFill,
   		dragDetector = dragDetector,
   		value = initialValue or 0.5,
   		onChanged = onChanged,
   	}, SliderController)
   
   	-- Set initial value
   	self:setValue(self.value)
   
   	-- Connect detector to player manipulation
   	self.dragConnection = dragDetector.DragContinue:Connect(function()
   		self:setValue(handle.Position.X.Scale)
   	end)
   
   	return self
   end
   
   function SliderController:setValue(value: Value)
   	local clampedValue = math.clamp(value, 0, 1)
   	self.value = clampedValue
   
   	-- Update the handle position and inner frame size to match
   	self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
   	self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
   	-- Run the user's callback with the latest value
   	local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
   	if not changeSuccess then
   		warn("Error in slider callback:", changeResult)
   	end
   end
   
   return SliderController

   Kod Açıklaması

   Sıra	Amaç
   7‑46	Kaydırıcı bileşeninin davranışını başlatmak ve eklemek için kullanılan işlevdir. Frame'in ebeveyni olarak object kabul eder, kaydırıcı değişikliklerini işlemek için bir onChanged geri çağırma işlevi ve kaydırıcının kolu pozisyonu için bir başlangıç değeri alır. İşlevin içinde 14‑27 satırları, kaydırıcının tutamağını, iç dolgusunu ve UIDragDetector bileşenlerinin varlığı olduğundan emin olur. Satır 38, modülün setValue() işlevini çağırır ve satır 41‑43, sürükleyicinin DragContinue olayını modülün setValue() işlevine bağlar (bu satır için aşağıda daha fazla bilgi verilmiştir).
   48‑61	Kaydırıcının değerini ayarlamak için kullanılan işlevdir. İşlevin içinde, 53‑54 satırları, tutamağın konumunu ve iç dolgu boyutunu eşleştirir. Satır 57, değişmiş olan değeri geri çağırma fonksiyonuna iletir, böylece değeri istediğiniz gibi kullanabilirsiniz.

Ayarlar Betiğini Oluşturun

ayarlar butonu ve ayarlar menüsü tamamlandığında, hepsini birleştirecek bir betik oluşturabilirsiniz; bu betik kontrol modüllerini kullanır.

1. HUDContainer'e yeni bir LocalScript ekleyin ve amacını açıklamak için adını SettingsScript olarak değiştirin. Bu betiğin SettingsMenu ve SettingsButton ile aynı seviyede (kardeş) olması gerektiğini unutmayın; çünkü yöneteceği üst düzey UI nesneleridir.

   

2. Betik içerisine aşağıdaki kodları yapıştırın:

   SettingsScript
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local SoundService = game:GetService("SoundService")
   
   local SliderController = require(ReplicatedStorage.SliderController)
   local StatefulObjectController = require(ReplicatedStorage.StatefulObjectController)
   
   local HUDContainer = script.Parent
   
   -- Initialize settings button
   local settingsButton = StatefulObjectController.hydrate({
   	object = HUDContainer:FindFirstChild("SettingsButton"),
   	states = {
   		menuOpen = {
   			transition = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out),
   			properties = {
   				Rotation = 45,
   			},
   		},
   		menuClosed = {
   			transition = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out),
   			properties = {
   				Rotation = 0,
   			},
   		},
   	},
   	initialStateName = "menuClosed"
   })
   
   -- Initialize settings menu frame
   local settingsMenu = StatefulObjectController.hydrate({
   	object = HUDContainer:FindFirstChild("SettingsMenu"),
   	states = {
   		menuOpen = {
   			transition = TweenInfo.new(0.5, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out),
   			properties = {
   				Position = UDim2.fromScale(0.5, 0.5),
   				Visible = true,
   			},
   		},
   		menuClosed = {
   			transition = TweenInfo.new(0),
   			properties = {
   				Position = UDim2.fromScale(0.5, 0.4),
   				Visible = false,
   			},
   		},
   	},
   	initialStateName = "menuClosed"
   })
   
   -- Initialize effects volume slider
   local effectsAudio = SoundService:FindFirstChild("Effects")
   local effectsVolumeSlider = SliderController.hydrate({
   	object = HUDContainer:FindFirstChild("EffectsVolumeSlider", true),
   	initialValue = effectsAudio and effectsAudio.Volume or 0.5,
   	onChanged = function(value: SliderController.Value)
   		if effectsAudio then
   			effectsAudio.Volume = value
   		end
   	end,
   })
   
   -- Initialize background volume slider
   local backgroundAudio = SoundService:FindFirstChild("Background")
   local backgroundVolumeSlider = SliderController.hydrate({
   	object = HUDContainer:FindFirstChild("BackgroundVolumeSlider", true),
   	initialValue = backgroundAudio and backgroundAudio.Volume or 0.5,
   	onChanged = function(value: SliderController.Value)
   		if backgroundAudio then
   			backgroundAudio.Volume = value
   		end
   	end,
   })
   
   -- Connect buttons to player interaction
   HUDContainer:FindFirstChild("SettingsButton").Activated:Connect(function()
   	local targetState = if settingsButton.currentStateName == "menuClosed"
   		then "menuOpen"
   		else "menuClosed"
   	settingsButton:setState(targetState)
   	settingsMenu:setState(targetState)
   end)
   HUDContainer:FindFirstChild("CloseButton", true).Activated:Connect(function()
   	settingsButton:setState("menuClosed")
   	settingsMenu:setState("menuClosed")
   end)

3. Betiğin takip eden bölümlerini inceleyerek, betiğin kontrol modüllerini nasıl kullandığını keşfedin.

   Ayarlar Butonu

   10-27 satırları, ayarlar butonu için davranışı başlatır ve ekler, şu şekilde:

   Sıra	Amaç
   10‑11	Yerel settingsButton referansı tanımlanır ve StatefulObjectController.hydrate() fonksiyonu ile beslenir; SettingsButton butonu HUDContainer içinde referans olarak kullanılır.
   12‑25	İki benzersiz durum, menuOpen ve menuClosed ile birlikte geçen bir states tablosu geçilir. Her durum, belirli özelliklerine ulaşma yöntemini tanımlamak için bir geçiş ile birlikte (bir TweenInfo aracılığıyla) tanımlanır. Bu durumda, menuOpen, butonun Rotation değerini 45° olarak değiştirir ve geçiş süresi Exponential olarak ve yarım saniye kadar tanımlanır; buna karşılık, menuClosed butonu 0 konumuna geri döndürür.
   26	Butonun ilk durumu menuClosed olarak ayarlanır (bu, states tablosundaki herhangi bir durum adıyla ayarlanabilir).

   Betiğin ilerleyen kısımlarında (satırlar 76-86), butonlar oyunun etkileşimine bağlanarak UI durum değişikliklerini tetikler:

   Sıra	Amaç
   76‑82	SettingsButton'ın Activated etkinliğine bağlı olup anonim bir fonksiyonu çağırır. Bu anonim fonksiyon içinde, targetState değişkeni menuOpen ve menuClosed arasında geçiş yapar. Satır 80, setState() fonksiyonunu çağırarak butonun durumunu targetState olarak ayarlar ve satır 81, SettingsMenu için aynı işlemi yaparak menünün açılıp kapanmasını sağlar.
   83‑86	CloseButton, Activated olayına bağlanarak, iki durumda da SettingsButton ve SettingsMenu'nun durumunu menuClosed olarak ayarlar.

   Ayarlar Menüsü

   30-49 satırları, ayarlar menüsü için davranışı başlatır ve ekler, şu şekilde:

   Sıra	Amaç
   30‑31	Yerel bir settingsMenu referansı tanımlanır ve StatefulObjectController.hydrate() fonksiyonu ile beslenir, SettingsMenu çerçevesi HUDContainer içinde referans olarak kullanılır.
   32‑46	Ayarlar butonundaki gibi, iki benzersiz durum olan menuOpen ve menuClosed ile bir states tablosu aynı şekilde geçirilir. Burada, menuOpen, çerçevenin Position'unda bir durum değişimi tanımlar; bu, 0.5, 0.5 konumuna geçiş yapar ve Bounce geçiş süresi yarım saniyedir; Visible değişkeni yalnızca true olarak güncellenir. Bunun tam tersine, menuClosed, çerçevenin pozisyona olan durumunu değiştirir; UDim2.fromScale(0.5, 0.4)'ya karşılık gelir ve Visible durumu false doğrulanır. Ancak, TweenInfo sıfır süreyle belirlendiği için, bu durum anında kapanır.
   48	Çerçevenin ilk durumu menuClosed olarak belirlenir.

   Betiğin ilerleyen kısımlarında (satırlar 76-86), ayarlar menüsü oyunun etkileşimine bağlanır:

   Sıra	Amaç
   81	SettingsMenu için aynı targetState ayarlanarak, SettingsButton'ın tetiklenmesi ile senkronize olması sağlanır.
   85	CloseButton etkinleştirildiğinde, SettingsMenu durumunu menuClosed olarak ayarlar.

   Ses Kaydırıcıları

   51-73 satırları, EffectsVolumeSlider ve BackgroundVolumeSlider'e davranış eklemek için kullanılır, şu şekilde:

   Sıra	Amaç
   52	SoundService içindeki Effects SoundGroup'una yerel bir referans gösterilir. Bir SoundGroup, birden fazla Sounds nesnesiyle ilişkili olmanızı sağlar ve bu seslerin tüm sesini, grubun Volume özelliği aracılığıyla kontrol etmenize imkân sağlar.
   53‑54	Yerel bir effectsVolumeSlider referansı tanımlanır ve SliderController.hydrate() fonksiyonu ile beslenir; EffectsVolumeSlider çerçevesi HUDContainer ⟩ SettingsMenu içinde referans olarak kullanılır. true ikinci parametresi, FindFirstChild() metodunun, HUDContainer dalı boyunca EffectsVolumeSlider içindeki bileşeni bulmasını sağlayan bir özelliktir.
   55	Kaydırıcının başlangıç değeri, Effects ses grubunun mevcut Volume değerine veya 0.5 olarak belirlenir.
   56‑60	Kaydırıcı değeri değişikliklerini, Effects ses grubunun sesine uygulamak için geri çağırma fonksiyonu oluşturulur.
   64‑73	Temel olarak, 52-61 satırlarının aynı işleminde, ancak HUDContainer ⟩ SettingsMenu içindeki BackgroundVolumeSlider çerçevesinde ve kaydırıcı değerinin Background ses grubunun sesine uygulanmasını sağlandığı bir başlangıç değeri ayarlanır.

Artık SettingsScript yerleştirildiğinde, deneyim artık ilgili bir dizi UI nesnesini oyuncu etkileşimine bağlayan tamamen işlevsel bir etkileşimli UI örneği sunmaktadır.