Etkileşimli UI Oluşturma

Bir HUD (Heads-Up Display), oyununuzda genellikle HUD metreleri oluşturma örneğinde gösterilen sağlık ölçer gibi etkileşimli olmayan UI öğelerini görüntüler. Bunun yanı sıra, neredeyse her oyun, oyuncu etkileşimine yanıt veren, etkinleştirildiğinde animasyon yapan, diğer etkileşimli kontrollerle birlikte menüleri tweenleyen vb. etkileşimli UI'ye ihtiyaç duyar.

UI Temelleri - HUD Metre başlangıç noktası olarak ve UI Temelleri - Etkileşim bitmiş referans noktası olarak kullanarak, bu öğretici şunları gösterir:

• Ayarlar düğmesini ekranın üst kenarına nasıl yerleştireceğiniz.
• Etkileşimli sürüklenebilir kaydırıcılar içeren bir ayarlar menüsünün tasarımı.
• Durumlu bildirimlerle UI nesnelerinin genişletilebilir kontrolü için "denetleyici" modülleri oluşturmak üzere bir ModuleScripts kullanımı.
• Ayarlar menüsünü açıp kapatmak için düğmeleri oyuncu etkinleştirmesine nasıl bağlayacağınız.
• Ses efektleri ve arka plan ambiyansının ses seviyelerini ayrı ayrı ayarlamak için sürüklenebilir UI kaydırıcılarını nasıl bağlayacağınız.

Cihaz Emülatörünü Etkinleştir

HUD metreleri oluşturma 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. Henüz yapmadıysanız, Studio'da Cihaz Emülatörünü etkinleştirin:

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

2. Studio'nun Test menüsünden Cihaz Emülatörü'nü açın.

3. Ana görünümün 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 Düğmesini Oluştur

GuiButtons, düğmeye tıklandığında veya dokunulduğunda tetiklenen çoklu platform Activated olayı gibi yerleşik işlevselliğe sahip etkileşimli kullanıcı arayüzü öğeleridir. GuiButton sınıfı, TextButton ve ImageButton olmak üzere iki varyasyona genişletilir ve bu öğretici, ayarlar menüsünü açıp kapatmak için bir "dişli" şeklinde ImageButton kullanır.

Ayarlar düğmesini 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 düğme seçili iken, 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 ID'si)

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

   

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

   

   

   

Ayarlar Menüsünü Oluştur

Yeni ayarlar düğmesi, oyunculara ayarları veya diğer bilgileri talep üzerine erişim sağlamak için bir ayarlar menüsünü açıp kapatmak üzere betimlenecektir. Bu öğreticide, menü, arka plan sesinin ve ses efektlerinin ses seviyelerini bağımsız olarak ayarlamak için etkileşimli kaydırıcılar içerecektir.

Ana çerçeveyi oluştur

HUD metreleri oluşturma 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ü, girişe bağlı olarak farklı şekilde tepki veren durumlu bir nesne olarak yönetimi basit hale getiren tek bir ana çerçeve ile inşa edilecektir.

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

   

2. SettingsMenu seçili iken, aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 0.5 (merkez noktası)
   • BackgroundColor3 = 30, 30, 60 (lacivert)
   • BackgroundTransparency = 0.25 (yüzde 75 opak)
   • Position = 0.5, 0, 0.5, 0 (ekranın merkezi)
   • Size = 0.75, 0, 0.75, 0 (iç ekran alanının %75 genişliği/yüksekliği)

   

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

   

   

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

   

   

   

Bir kaydırıcı oluştur

Oyuncuların ses seviyelerini ayarlamalarına izin vermek için, ayarlar menüsü, UIDragDetector tarafından desteklenen iki sürüklenebilir kaydırıcı bileşeni içerecektir; bu, 2D kullanıcı arayüzü öğeleriyle etkileşimi kolaylaştıran kullanışlı bir nesnedir.

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

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

   

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

   • AnchorPoint = 0.5 (merkez noktası)

   • 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üzenleme modifiye edici, kardeş GuiObjects öğelerini ana konteynerleri içinde yatay satırlara veya dikey sütunlara otomatik olarak düzenlemenin güçlü bir yoludur; 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 (öğelerin soldan sağa düzenlenmesi)
   • HorizontalFlex = Fill (öğeleri ana konteyneri tamamen dolduracak şekilde yatay olarak yeniden boyutlandırma, tanımlı genişliklerini geçersiz kılma)
   • VerticalAlignment = Center (öğeleri dikey merkezlerine göre hizalama)

Kaydırıcı simgesi

Bir ses notası ve "patlama" sembolü içeren basit bir simge, oyuncuların ayarlar menüsünü açtıklarında kaydırıcının amacını tanımlamalarına yardımcı olur.

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 oyun yönünü kontrol ettiğini anlamalarına yardımcı olacaktır.

   

   Önemli olarak, etiketin UIListLayout'ın kardeşi olması gerektiğini, onun çocuğu olmaması gerektiğini unutmayın.

2. Icon seçili iken, 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 yüksekliğinde)
   • Image = rbxassetid://90019827067389 (ses notası ve "patlama" sembolünün varlık ID'si)

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

   

Aralık çerçevesi

Simge'nin hemen sağında, kaydırıcının etkileşimli kısmı başka bir Frame içinde yer almalıdır.

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

   

2. SliderFrame seçili iken, aşağıdaki özellikleri ayarlayın:

   • BackgroundColor3 = 0 (siyah)
   • BackgroundTransparency = 0.75 (yüzde 25 opak)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (ana çerçevenin %100 genişliği/yüksekliği)

   SliderFrame'in konumunu değiştirmek için AnchorPoint veya Position gibi konumsal değişiklikler atamanıza gerek olmadığını unutmayın; çünkü UIListLayout, kardeşlerinin konumlandırılmasını kontrol eder, bu durumda onları soldan sağa yatay olarak sıralar ve birbirleriyle dikey olarak merkezde tutar.

   LayoutOrder özelliği, UIListLayout gibi düzenleme modifiye edicileri ile çalışırken önemlidir; çünkü bu, kardeşlerin birbirine göre yerleştirileceği sıralamayı belirler. SliderFrame için 1 olarak değiştirmek, Icon'un varsayılan LayoutOrder değeri 0 olan Icon'un sağında yer almasını sağlar.

3. SliderFrame'e aşağıdaki modifiye edicileri ekleyin:

   • UICorner ile CornerRadius özelliği 0.5, 0 (hap şeklinde)
   • UISizeConstraint ile MaxSize özelliği inf, 30 (maksimum 30 piksel yükseklik)
   • UIStroke ile Color özelliği 0, Thickness özelliği 3 ve Transparency özelliği 0.25 (yüzde 75 opak siyah kenarlık)

   

Etkileşimli tutacak

Kaydırıcı konteyner oluşturulduktan sonra, oyuncuların oyun sırasında etkileşimde bulunabileceği bir sürüklenebilir tutacak oluşturabilirsiniz.

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

   

2. Handle seçili iken, aşağıdaki özellikleri ayarlayın:

   • AnchorPoint = 0.5 (merkez noktası)
   • 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 yüksekliğinde)
   • ZIndex = 3 (diğer kaydırıcı öğelerinin önünde katman)

3. Handle'a aşağıdaki modifiye edicileri ekleyin:

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

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

   

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

   • DragStyle = TranslateLine (dedektörün DragAxis'ı boyunca 1D hareket.)
   • ResponseStyle = Scale (dedektörün ebeveyninin konumunun ölçek değerleriyle hareket etme)

6. Tutacağın doğrusal sürükleme aralığının konteyneriyle sınırlı olmasını sağlamak 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 penceresinde, tutacağın ebeveyn SliderFrame'ine tıklayın.

   

   BoundingUI özelliği bağlantısı artık SliderFrame konteynerini yansıtır:

   

Şimdi oyunu test ettiğinizde, tutacağı ebeveyn konteyner içinde sola ve sağa sürükleyebilirsiniz:

İç dolgu

Kaydırıcının %0 ile %100 aralığını kontrol ettiğini daha net bir şekilde belirtmek için, tutacağın değişken konumuyla senkronize olacak şekilde konteynerin sol tarafına 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 tutacağına uyan mavi)
   • BackgroundTransparency = 0.35 (yüzde 65 opak)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (ana çerçevenin %50 genişliği ve %100 yüksekliği)
   • ZIndex = 2 (görsel olarak ana çerçevenin dolgu/kenarlığının önünde katman)

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

   

   

   

Kaydırıcıyı Çoğalt

İlk kaydırıcı oluşturulduktan sonra, onu kolayca çoğaltabilir ve başka bir amacın belirtildiğini göstermek için bazı görsel yönlerini değiştirebilirsiniz; bu durumda arka plan sesinin ses seviyesini simgeleyen müzik notaları simgesi.

1. Tamamlanmış EffectsVolumeSlider nesnesini seçin.

   

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

   

3. Çoğaltmanın Position değerini 0.5, 0, 0.7, 0 olarak değiştirin, böylece ilk kaydırıcının altına taşınsın.

   

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

   

   

   

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

   

   

   

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

   

   

   

Kapatma düğmesini oluştur

Ayarlar menüsünün son öğesi, oyunculara menüyü kapatmak için ek bir girdi sağlayan bir kapatma düğmesidir (üst merkezdeki SettingsButton aynı amaca hizmet edecektir).

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

   

2. CloseButton seçili iken, 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çevenin %15'i)
   • Image = rbxassetid://5577404210 (kapatma düğmesi sembolünün varlık ID'si)
   • ImageTransparency = 0.25 (yüzde 75 opak)

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

   

Kontrol modüllerini oluştur

Genişletilebilir bir kontrol modülü kurulumu, etkileşimli UI yönetimini, her nesneye yerleştirilen bireysel betiklerden daha akıcı hale getirir. ModuleScripts, istemci-sunucu sınırının her iki tarafında veya sınırın aynı tarafında betikler arasında kodu yeniden kullanmanıza olanak tanıyarak bu genişletilebilir işlevselliği kolaylaştırır.

Durumlu nesne denetleyicisi

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

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

   

2. Modülün içine aşağıdaki kodu 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ı

   Satırlar	Amaç
   6‑10	Bu modülü kullanırken otomatik tamamlama ve linting'i geliştirmek için Luau türlerini tanımlar ve dışa aktarır.
   12‑33	Bir durumlu UI nesnesine davranış eklemek için kullanılan işlev, GuiObject'u object olarak, durumların ve ilgili TweenInfo verilerinin bir tablosunu ve bir başlangıç durumu adını kabul eder. Bu işlevin içinde, 26‑28 satırları her durum için Tweens oluşturur ve 30 satırı modülün setState() işlevini çağırarak nesneyi başlangıç durumuna ayarlar.
   35‑50	Bir durumlu nesnenin durumunu ayarlamak/değiştirmek için kullanılan işlev. 42 satırı nesnenin currentStateName'ini ayarlanan duruma, 45‑47 satırları ise çakışmaları önlemek için herhangi bir çalışan tween'i iptal eder ve 49 satırı durumun tween'ini çalıştırır.

Kaydırıcı denetleyicisi

Ek bir modül, iki ses kaydırıcısını başlatır ve kontrol eder. Ayrıca, her kaydırıcıya bir geri çağırma işlevi bağlamanıza olanak tanır, böylece oyuncunun kaydırıcı ile etkileşimini algılayabilir ve oyundaki istenen değişiklikleri uygulayabilirsiniz.

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

   

2. Modülün içine aşağıdaki kodu 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ı

   Satırlar	Amaç
   7‑46	Bir kaydırıcı öğesine davranış eklemek için kullanılan işlev, kaydırıcının ebeveyn Frame'ini object olarak, kaydırıcı değişikliklerini işlemek için bir onChanged geri çağırma işlevini ve kaydırıcının tutacak konumu için bir başlangıç değeri kabul eder. İşlevin içinde, 14‑27 satırları kaydırıcının tutacağı, iç dolgu ve UIDragDetector öğelerinin varlığını doğrular. 38 satırı modülün setValue() işlevini çağırır ve 41‑43 satırları dedektörün DragContinue olayını modülün setValue() işlevine bağlar (aşağıdaki satır için detaylar için).
   48‑61	Kaydırıcının değerini ayarlamak için kullanılan işlev. İşlevin içinde, 53‑54 satırları tutacağın konumunu ve iç dolgu boyutunu senkronize eder ve 57 satırı değiştirilen değeri geri çağırma işlevine geçirir, böylece değeri gerektiği gibi kullanabilirsiniz.

Ayarlar betiğini oluştur

ayarlar düğmesi ve ayarlar menüsü tamamlandığında, her şeyi bir araya getiren tek bir betik oluşturabilirsiniz; bu betik kontrol modüllerini kullanır.

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

   

2. Betiğin içine aşağıdaki kodu 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. Betik, kontrol modüllerini nasıl kullandığını keşfetmek için aşağıdaki bölümlere başvurun.

   Ayarlar Düğmesi

   10-27 satırları, ayarlar düğmesi için davranışları başlatır ve ekler:

   Satırlar	Amaç
   10‑11	Yerel bir referans settingsButton tanımlanır ve StatefulObjectController.hydrate() işlevi ile beslenir; SettingsButton düğmesi HUDContainer içinde beslenmek üzere referans alınır.
   12‑25	İki benzersiz durum, menuOpen ve menuClosed ile birlikte bir states tablosu geçilir. Her durum, belirli bir durumun hedef özelliklerine ulaşma şeklini tanımlamak için bir geçiş (bir TweenInfo aracılığıyla) içerir. Bu durumda, menuOpen, düğmenin Rotation'ını 45° olarak değiştirirken, Exponential tween'i yarım saniye sürer; menuClosed ise düğmeyi varsayılan rotasyonu olan 0'a geri döndürür.
   26	Düğmenin ilk durumu menuClosed olarak ayarlanır (bu, states tablosundaki herhangi bir durum adı olarak ayarlanabilir).

   Betikte daha aşağıda (76-86 satırları), düğmeler oyuncu etkileşimine bağlanarak UI durum değişikliklerini tetikler:

   Satırlar	Amaç
   76‑82	SettingsButton, Activated olayına bağlanarak anonim bir işlev çağırır. Anonim işlevin içinde, targetState değişkeni menuOpen ve menuClosed arasında geçiş yapar. 80 satırı, düğmenin durumunu targetState olarak ayarlamak için setState()'i çağırır ve 81 satırı, SettingsMenu'nun durumunu da aynı şekilde ayarlayarak açılıp kapanmasını sağlar.
   83‑86	CloseButton, Activated olayına bağlanarak anonim bir işlev çağırır; bu işlev, hem SettingsButton'un hem de SettingsMenu'nun durumunu menuClosed olarak ayarlar.

   Ayarlar Menüsü

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

   Satırlar	Amaç
   30‑31	Yerel bir referans settingsMenu tanımlanır ve StatefulObjectController.hydrate() işlevi ile beslenir; SettingsMenu çerçevesi HUDContainer içinde beslenmek üzere referans alınır.
   32‑46	Ayarlar düğmesinde olduğu gibi, iki benzersiz durum, menuOpen ve menuClosed ile birlikte bir states tablosu geçilir. Burada, menuOpen, çerçevenin Position'unu UDim2.fromScale(0.5, 0.5) olarak değiştirirken, Bounce tween'i yarım saniye sürer ve Visible durumu true olarak ayarlanır. Buna karşılık, menuClosed, konum durumunu UDim2.fromScale(0.5, 0.4) olarak değiştirir ve Visible durumunu false olarak ayarlar; ancak TweenInfo'da 0 süresi, durum değişikliğinin anında gerçekleşmesini sağlar.
   48	Çerçevenin ilk durumu menuClosed olarak ayarlanır.

   Betikte daha aşağıda (76-86 satırları), ayarlar menüsü oyuncu etkileşimine bağlanır:

   Satırlar	Amaç
   81	SettingsMenu için aynı targetState ayarlanır, böylece SettingsButton'un etkinleştirilmesiyle senkronize olur.
   85	CloseButton etkinleştirildiğinde SettingsMenu'nun durumunu menuClosed olarak ayarlar.

   Ses Kaydırıcıları

   51-73 satırları, EffectsVolumeSlider ve BackgroundVolumeSlider için davranışları başlatır ve ekler:

   Satırlar	Amaç
   52	Effects SoundGroup'ına yerel bir referans ayarlanır; bir SoundGroup, birden fazla Sounds'ı birbirine bağlamanıza ve grubun Volume özelliği aracılığıyla her sesin ses seviyesini kontrol etmenize olanak tanır.
   53‑54	Yerel bir referans effectsVolumeSlider tanımlanır ve SliderController.hydrate() işlevi ile beslenir; EffectsVolumeSlider çerçevesi HUDContainer ⟩ SettingsMenu içinde beslenmek üzere referans alınır. true için FindFirstChild()'in ikinci parametresi, yöntemin HUDContainer dalında EffectsVolumeSlider'ı bulmak için aşağıya doğru aramasını sağlar.
   55	Kaydırıcının başlangıç değeri, Effects ses grubunun mevcut Volume değerine veya bir yedek olarak 0.5'e ayarlanır.
   56‑60	Kaydırıcı değer değişikliklerini Effects ses grubunun ses seviyesine uygulamak için geri çağırma işlevi oluşturur.
   64‑73	Temelde 52-61 satırlarıyla aynı, ancak BackgroundVolumeSlider çerçevesini HUDContainer ⟩ SettingsMenu içinde besleyerek ve kaydırıcı değer değişikliklerini Background ses grubunun ses seviyesine uygulayarak.

SettingsScript yerinde olduğunda, oyun artık bir dizi UI nesnesini oyuncu etkileşimine bağlayan tamamen işlevsel bir etkileşimli UI örneği sunar.