HUD ölçüleri oluşturma

Bir HUD veya Heads-Up Display, oyun sırasında her zaman görülebilen veya erişilebilen UI öğelerinin bir setidir; örneğin, skor ekranları, sağlık ölçümleri ve menü düğmeleri. Bir HUD eklemek çoğu deneyim için kritiktir çünkü oyun hedeflerinde başarılı olmak için oyunculara yardımcı olan bilgileri gösterir.

Yaygın bir HUD öğesi, sol tarafında bir simge bulunan bir sağlık ölçüsü olup, bir zamanlayıcı çubuğu, ilerleme çubuğu veya benzeri bir biçimde uyarlanabilir.

Tehlikeli Uzay İstasyonu oyununu başlangıç noktası olarak kullanarak ve UI Temelleri - HUD Ölçüsü tamamlanmış bir referans noktası olarak alarak, bu öğretici:

• Tasarımınızı birden fazla emüle edilmiş ekranda test etmek için Aygıt Emülatörünü kurma ve kullanma.
• StarterGui kullanarak hem bir tasarım hem de depolama konteyneri olarak kullanma.
• UI öğelerini yerleşik Roblox kontrolleri ve cihaz çentikleri/adaları etrafında nasıl konumlandıracağınızı/ölçüleceğini, modern telefonlardaki kamera çentiği gibi.
• Varsayılan Roblox sağlık ölçerini kendi ölçerinizle nasıl değiştireceğinizi ve bunu karakterin sağlık seviyesine nasıl bağlayacağınızı.
• Sağlık ölçerinin ortasında bir animasyon oluşturarak beş renk gradyan ana noktasında (kırmızı, turuncu, sarı, limon, yeşil) rengini nasıl ayarlayacağınızı.

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

Roblox, oyuncuların telefon veya tablet üzerinde deneyimlere ulaşım bulabildiği ve daha sonra PC veya konsolda kaldıkları yerden devam edebildiği çok platformlu bir yapıya sahiptir. Mobil cihazların (telefonlar ve tabletler) ekran alanı en az olduğundan, UI öğelerinizin daha küçük ekranlara sığması ve oyunculara açık bir şekilde görünür olması önemlidir.

Farklı platformlarda UI tasarımlarını test etmenin en iyi yolu, Studio'nun Aygıt Emülatörü'dür. Bu araç, bir dizi cihaz seçeneği sunar ve kendi özel ön ayarlarınızı eklemenize olanak tanır.

1. Studio'da Tehlikeli Uzay İstasyonu şablonunu açın.

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

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

   

Bir ekran konteyneri oluşturun

Bir ScreenGui konteyneri, bir oyuncunun ekranında göstermek için UI nesnelerini (GuiObjects) tutar (bu öğreticide, sağlık ölçerinin tamamı). Tüm oyuncuların deneyime katıldıklarında ScreenGui ve alt nesnelerini görüntülemeleri için bunu StarterGui konteynerinin içine yerleştirin. Bir oyuncu katıldığında ve karakteri ilk kez doğduğunda, ScreenGui ve içeriği, o oyuncuya ait PlayerGui konteynerine kopyalanır.

Boş bir ScreenGui eklemek için:

1. Explorer penceresinde, StarterGui konteynerini bulun.

   

2. Konteynerin üstünde durarak, ⊕ butonuna tıklayın ve bir ScreenGui ekleyin.

   

3. Yeni konteyneri amacını yansıtacak şekilde HUDContainer olarak yeniden adlandırın.

   

Güvenli alanları kullanın

Modern telefonlar ekranın tamamından yararlanır, ancak genellikle ekran alanını işgal eden çentikler, kesikler ve diğer öğeleri içerir. Her Roblox deneyimi, ana menüye hızlı erişim için üst çubuk kontrolleri, sohbet, liderlik tablosu ve daha fazlası içerir.

Oyuncuların tüm UI'ları engellenmeden görebilmesini ve erişebilmesini sağlamak için, Roblox ScreenInsets özelliğini sağlar; bu özellik, bir ScreenGui içeriği için güvenli alan içe aktarımlarını kontrol eder. Bir ScreenGui içine yerleştirdiğiniz her UI nesnesi, içe aktarma sınırları ile ilişkilidir.

CoreUISafeInsets varsayılanı tüm UI nesnelerinin Roblox UI ve cihaz kesimlerinden uzak kalmasını sağlarken, DeviceSafeInsets sınırlı ekran alanını kullanmak için daha iyi bir seçenek olabilir, aşağıda gösterildiği gibi.

1. Explorer penceresinde HUDContainer'ı seçin.

   

2. Özellikler penceresinde, ScreenInsets özelliğini DeviceSafeInsets olarak ayarlayın.

   

Kenar yastıklamasını ayarlayın

ScreenInsets DeviceSafeInsets olarak ayarlandığında, içerik şimdi ekranın fiziksel üst kenarına doğrudan uzanabilir. Ancak, sağlık ölçerini (ve konteynerin içindeki diğer nesneleri) ekran kenarlarından hafifçe uzaklaştırmak için küçük bir yastıklama eklemek temiz bir görünüm sağlarken, kesilmesini de önleyebilir.

Bir UI konteynerine yastıklama uygulamanın bir yolu, bir UIPadding modifikatorü eklemektir:

1. HUDContainer içine bir UIPadding modifikatörü ekleyin.

   

2. Yeni UIPadding nesnesi seçiliyken, konteynerin tüm kenarları için 0, 16 değerini girin (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Bu, konteyner etrafında 16 piksel yastıklama uygular; bu, ekranın çözünürlüğünden bağımsızdır.

   

Sağlık ölçerini inşa edin

Ekran konteyneri yapılandırıldıktan sonra, sağlık ölçerini oluşturmak için Roblox UI nesneleri, örneğin çerçeveler ve görüntü etiketleri gibi nesneleri kullanabilirsiniz.

Ana çerçeveyi oluşturun

Figma ve Photoshop gibi tasarım uygulamalarında olduğu gibi, Roblox'taki bir Frame diğer UI nesneleri için bir konteyner olarak hizmet eder. Bu öğreticinin amacıyla, tüm sağlık ölçeri tek bir ana çerçevede tutacağız, böylece farklı HUD düzenleri arasında yeniden konumlandırılması kolay olacaktır.

1. HUDContainer içine bir Frame ekleyin. Yeni çerçeve, boş bir beyaz kare olarak sol üst köşede görünür.

   

   Yeni çerçeve görünecek şekilde ayarlanmamışsa, 3D görünüm penceresinin sağ üst köşesindeki Görselleştirme Seçenekleri widget'ından GUI overlay'inin açık olduğundan emin olun.

2. Yeni çerçeve örneğine MeterBar adını verin.

   

Çerçeveyi konumlandırın

Roblox'taki bir UI nesnesinin konumu, hem X hem de Y eksenleri için UDim2 koordinat setiyle temsil edilir:

• Scale değerleri, karşılık gelen eksende konteynerin boyutunun bir yüzdesini temsil eder; bu değer, herhangi bir Offset değeri ile eklenir.
• Offset değerleri, nesneyi karşılık gelen eksende ne kadar piksel kaydıracağınızı temsil eder; bu da herhangi bir Scale değeri ile eklenir.

Bir UI nesnesini ekran konteynerinin sağ üst köşesine konumlandırmak için Scale en iyi yaklaşımdır çünkü X değeri 1 (yüzde 100) konteynerin sağ kenarını temsil eder; bu, ekranın fiziksel piksel boyutuna bakılmaksızın geçerlidir. Benzer şekilde, Y ölçek değeri 0 (yüzde 0), konteynerin üst kenarını temsil eder.

Ayrıca, ana çerçevenin köken noktasını tanımlamak için bir üst sağ ankraj noktasını ayarlamanız gerekecek. Geçerli değerler, nesnenin boyutuna göre 0 ile 1 arasında olmalıdır, bu nedenle bir ankraj değeri 1, 0 olduğunda, çerçevenin köşe noktası üst sağ köşesine yerleştirilir.

1. Explorer penceresinde, önceden eklediğiniz MeterBar çerçevesini seçin.

   

2. Özellikler penceresinde, Position için 1, 0, 0, 0 yazın ve Enter tuşuna basın. Studio, otomatik olarak UDim2 biçimindeki parantezleri ekler ve {1, 0},{0, 0} şekline getirir.

3. AnchorPoint özelliği için 1, 0 yazın. Çerçeve, güvenli alan ile üst sağ köşeye konumlanmış olmalı ve yastıklama nedeniyle kenardan hafifçe içeri kaydırılmış olmalıdır.

   

Çerçeveyi yeniden boyutlandırın

Konum gibi, Size bir UI nesnesinin boyutu da X ve Y eksenleri için bir UDim2 koordinat seti ile temsil edilir.

Varsayılan olarak, yeni çerçevenin boyutu {0, 100},{0, 100}; bu da 100 piksel genişlik (X) ve yükseklik (Y) anlamına gelir. Katı bir piksel değeri belirli durumlarda faydalı olsa da, birçok UI öğesi, toplam ekran konteyner boyutunun bir yüzdesi olarak ayarlandığında birden fazla ekranda daha duyarlı ölçeklenir.

1. MeterBar çerçevesi seçili iken, Özellikler penceresine erişin ve Size özelliğine gidin.

2. 35% genişlik ve 5% yükseklik ile ek bir piksel kaydırma olmadan yüzde olarak boyutu ayarlamak için 0.35, 0, 0.05, 0 değerini girin.

   

Çerçeveyi stilize edin

Varsayılan olarak, Frames düz beyaz renkte doldurulur. Nihai sağlık ölçer, hem açık hem de koyu arka planlarda daha belirgin görünmesi için daha koyu ve hafif opak bir dolguya sahip olmalı ve karanlık bir çerçeve ile belirginleştirilmelidir.

1. MeterBar çerçevesi seçili iken, BackgroundColor3 özelliği için 0 değerini girin. Studio bunu otomatik olarak [0, 0, 0] RGB değeri ile değiştirir.

2. BackgroundTransparency özelliği için 0.75 değerini girin. Roblox'ta saydamlık 0'dan tamamen opakla başlar ve 1'den tamamen saydamdır; bu nedenle, 0.75 diğer uygulamalarda %25 opaklık anlamına gelir.

   

3. Bir UIStroke nesnesi ekleyin; bu nesne, çerçeveye özelleştirilebilir bir kenar ekleyen güçlü bir UI modifikatörüdür.

   

4. Yeni UIStroke nesnesi seçiliyken, şu özellikleri ayarlayın:

   • Thickness = 3
   • Transparency = 0.25 (yüzde 75 opak)

   

Ölçer çerçevesinin stilini tamamlamak için, köşeleri yuvarlayarak keskin bir dikdörtgen yerine "hap" biçiminde oluşturalım.

1. MeterBar çerçevesine bir UICorner örneği ekleyin.

   

2. Yeni UICorner seçiliyken, CornerRadius özelliğini 0.5, 0 olarak ayarlayın. Bir ölçek değeri olarak 0.5 (yüzde 50) kullanmak, ölçer çubuğu için özellikle uygundur çünkü yuvarlak bir eğri oluşturur; konteyner ne kadar uzun veya geniş olursa olsun bu geçerli kalır.

   

İç dolgu oluşturun

Artık sağlık ölçerinin konteyner çerçevesi tamamlandığına göre, karakterin değişken sağlığını temsil etmek için bir iç dolgu kısmı ekleyebiliriz. Sadece pad ile doldurulmuş bir alan olması gerektiğinden, ana çerçevenin içine bir alt çerçeve Frame kullandığından emin olun.

1. MeterBar çerçevesine bir çocuk Frame ekleyin.

2. Yeni çerçeve örneğine InnerFill adını verin.

   

3. InnerFill seçiliyken, şu özellikleri ayarlayın:

   • AnchorPoint = 0, 0.5 (sol kenar ve dikey merkez)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Çerçevelerin çocukları, ebeveynlerine göre konumlandırıldığı ve boyutlandırıldığı için, ölçek kullanarak iç çerçeve, ebeveynin tam genişliğini ve yüksekliğini kaplar; bunun başlangıcı ebeveynin sol kenarıdır.

   

4. Ana çerçevenin "hap" şekli ile eşleşmek için, InnerFill içinde ek bir UICorner ekleyin.

   

5. Yeni seçilen UICorner modifikatörünün CornerRadius özelliğini, ana MeterBar çerçevesinin "hap" biçimini eşleştirmek için 0.5, 0 olarak ayarlayın.

   

6. Ölçerin tam dolu olduğunu belirtmek için InnerFill'i seçin ve BackgroundColor3 özelliğini [0, 225, 50] (sonraki bir görevde, bu rengi gerçekteki sağlık durumuna göre betik haline getireceksiniz) olarak ayarlayın.

   

Simgeleri ekleyin

Ölçerin amacını daha net bir şekilde belirtmek için, sol tarafa bir görüntü etiketi ekleyebilirsiniz; bu durumda, genellikle sağlığı veya yaşamı simgeleyen kırmızı bir kalp olur.

1. MeterBar çerçevesine bir ImageLabel ekleyin. Bu nesne, bir decal olarak yüklenmiş 2D görüntü varlıklarını uygulamanıza olanak sağlar.

2. Yeni etiket örneğine Icon adını verin.

   

3. Icon seçiliyken, ZIndex özelliğini 2 olarak ayarlayın. Yeni eklenmiş UI nesneleri her zaman daha önce eklenmiş nesnelerin önünde görünür; bu değişiklik, simgenin her zaman ölçer çerçeve unsurlarının önünde görünmesini sağlar.

   

4. Simgenin Image özelliğini bulup rbxassetid://91715286435585 yazarak önceden yüklenmiş bir kalp görüntüsüne referans verin (istenirse kendi resminizi ithal edebilir ve varlık kimliğini kullanabilirsiniz).

   

5. Simgenin ImageLabel'inin her zaman 1:1 en-boy oranını korumasını sağlamak için bir UIAspectRatioConstraint ekleyin. Bu kısıtlama özelleştirilebilir özelliklere sahip olsa da varsayılan değerlerini olduğu gibi bırakabilirsiniz.

   

6. Icon seçiliyken, aşağıdaki özellikleri değiştirerek görünüm ve konumlandırmayı tamamlayın:

   • AnchorPoint = 0.5, 0.5 (merkez ankraj)
   • BackgroundTransparency = 1 (yüzde 100 saydam)
   • Position = 0, 0, 0.5, 0 (ölçerin sol tarafı ve dikey merkez)
   • Size = 2, 0, 2, 0 (MeterBar çerçevesinin toplam boyutunun 200%, UIAspectRatioConstraint ile 1:1 kısıtlanmıştır)

   

Boyutu sınırlayın

Çerçevenin yeniden boyutlandırılmasında (şu bölümde) 0.05 (yüzde 5) yüksekliği, 16:9 en boy oranına sahip modern telefon ekranları ve oyun monitörleri üzerinde iyi görünse de, ölçer, tablet ekranları ve eski telefonlarda biraz fazla uzun görünebilir. Bunu, Aygıt Emülatörü'nden iPad 7. Nesil gibi bir tableti emüle ederek kontrol edebilirsiniz.

Ölçer çubuğunun yüksekliğini geniş ekranlarla daha uyumlu hale getirmek için, maksimum piksel yüksekliğini sınırlamak amacıyla bir UISizeConstraint uygulayabilirsiniz.

1. MeterBar çerçevesine bir UISizeConstraint ekleyin.

   

2. Yeni kısıtlama seçiliyken, MaxSize özelliğini inf, 20 olarak ayarlayın; bu, yüksekliği 20 piksel ile kısıtlamakta, genişliğe ise herhangi bir kısıtlama getirmemektedir.

   

Artık ölçer çubuğu, daha geniş ve daha uzun ekranlar arasında daha tutarlı bir yüksekliğe sahip.

Varsayılan sağlık ölçerini değiştirin

Roblox deneyimleri, karakterler hasar aldığında görünür hale gelen bir varsayılan sağlık ölçer içerir. Varsayılan ölçeri görünür bırakırsanız, özel ölçerle çakışacak ve muhtemelen üst üste binecektir.

Varsayılan ölçeri devre dışı bırakın

Varsayılan sağlık ölçerini devre dışı bırakmak için, StarterPlayerScripts içindeki bir istemci script (LocalScript) kullanacaksınız ve StarterGui:SetCoreGuiEnabled() metodunu çağıracaksınız.

1. Explorer penceresinde, StarterPlayer konteynerini genişletin ve içinde StarterPlayerScripts konteynerini bulun.

   

2. Konteyner içine yeni bir LocalScript ekleyin ve amacını açıklamak için HideDefaultHealthMeter olarak yeniden adlandırın. StarterPlayerScripts içindeki script'ler, yerel oyuncu bir deneyime katıldığında otomatik olarak çalışır, bu nedenle varsayılan ölçeri sürekli olarak gizleyen bir script çalıştırmak için ideal bir konteynerdir.

   

3. Yeni bir script eklediğinizde, bu otomatik olarak yeni bir script editörü sekmesinde açılır (açılmazsa, Explorer penceresindeki script'e iki kez tıklayın).

   HideDefaultHealthMeter script'inin içine aşağıdaki kodu yapıştırın:

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- Varsayılan sağlık ölçerini gizle
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Kod Açıklaması

   Satır	Amaç
   1	StarterGui'ya, deneyime katılan her oyuncunun PlayerGui konteynerine kopyalanan içeriklerin aynı konteynerinde olan bir temel servis referansı alır.
   4	Servis'in SetCoreGuiEnabled() metodunu çağırır ve varsayılan sağlık ölçerinin devre dışı bırakıldığını (false) bildirir.

Şimdi deneyimi test ettiğinizde ve hasar aldığınızda, varsayılan ölçerin devre dışı ve gizli olduğunu göreceksiniz (özel ölçerinizin, sağlık değişikliklerini yansıtmasını sağlayacaksınız).

Sağlık değişikliklerini dinleyin

Tüm varsayılan Roblox karakter modelleri, karaktere özel davranışlar ve işlevsellik sağlayan Humanoid sınıfını içerir; örneğin yürüme/koşma hızını ayarlamak ve sağlığı yönetmek gibi. Health'deki değişiklikler sunucuya yayılarak her oyuncunun istemcisine ulaşır ve bu değişiklikleri tespit edip özel sağlık ölçerinin boyutunu ve rengini güncellemek için kullanabilirsiniz.

1. Explorer penceresinde, StarterCharacterScripts konteynerini StarterPlayer içinde bulun.

   

2. Konteyner içine yeni bir LocalScript ekleyin ve amacını açıklamak için UpdateCustomMeter olarak yeniden adlandırın. StarterCharacterScripts içindeki script'ler, oyuncunun karakteri her doğduğunda otomatik olarak çalışır, bu nedenle bu script'i, her yeniden doğuşta sağlık ölçerini tamamen sıfırlamak için çalıştırmak için ideal bir konteynerdir.

   

3. UpdateCustomMeter script'inin editör penceresine şu kodu yapıştırın:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   
   -- Yerel oyuncu, karakter ve humanoid için referans
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Ölçer çubuğu iç çerçevesinin referansı
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradyan renk dizisi (kırmızı, turuncu, sarı, limon, yeşil)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- Kesirli noktadan gradyanda rengi almak için işlev
   local function getColorFromSequence(fraction: number): Color3
   	-- Gradyandaki her renk, bir bölümün başlangıcını ve/veya sonunu tanımlar
   	local numSections = #gradient - 1
   
   	-- Her bölüm 1'in bir kısmını temsil eder
   	local sectionSize = 1 / numSections
   
   	-- İstenen kesirin hangi bölüme düştüğünü belirleyin
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Bölümün başlangıcındaki ve sonundaki renkleri al
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Kesiri bölüm içinde 0 ile 1 arasında bir sayı olacak şekilde normalize et
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Başlangıç ve son arasındaki değere göre interpolasyon yap
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Yeni sağlığı maksimuma göre yüzde olarak hesapla
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Barı yeni boyut/rengindeki hedeflere ayarlayın
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Humanoid sağlığındaki değişiklikleri dinleyin
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Başlangıçta (veya sıfırlarken) barın boyut/rengini mevcut sağlığa ayarlayın
   onHealthChanged()

   Kod Açıklaması

   Satırlar	Amaç
   4‑6	Yerel Player'a, onun Character modeline ve içindeki Humanoid sınıfına referans alır.
   9‑10	Sağlık ölçerinin InnerFill nesnesine referans alır; bu nesne, boyutlandırılıp yeniden renklendirilecek olan nesnedir.
   13‑19	Gradyan, ölçer çeşitli noktalar içinde yeniden renklenebilmesi için beş rengi tanımlar; örneğin, %100 sağlık için yeşil, %50 için sarı, %0 için kırmızı ya da ana noktalardaki herhangi bir kesir için karışım.
   22‑41	Yardımcı işlev, gradyanın herhangi bir renk ana noktasındaki ve onun arasında geçen bir kesirin aralığında rengin blendini döner.
   43‑50	Sağlık değişiklerini yöneten işlevdir. Burada, karakterin MaxHealth değerine göre sağlığı yüzde olarak hesaplanır, InnerFill'in, bu ölçek yüzdesine göre boyutu ayarlanır ve getColorFromSequence() işlevinden dönen renge göre rengi değiştirilir.
   53	Sunucudan çoğaltılan Health değişikliklerini algılayan ana olay bağlantısıdır; ve onHealthChanged() işlevini çağırır.
   56	Başlangıçta (karakter doğduğunda veya yeniden doğduğunda) InnerFill'in doğru persantaja ayarlanması için onHealthChanged() işlevini çağırır. Genellikle, bu tam genişlik ve yeşil olacak.

Şimdi deneyimi test ettiğinizde, özel ölçerin, karakter hasar aldıkça boyut ve renk değişikliklerini doğru bir şekilde güncellediğini göreceksiniz:

Ölçer çubuğunu animasyonlayın

Özel ölçere ekstra bir parıltı katmak için, sağlık değişikliklerini tweener kullanarak, ölçer çubuğunun boyutunu ve rengini yarım saniye boyunca yavaşça değiştirebilirsiniz.

1. Daha önce düzenlediğiniz UpdateCustomMeter script'inin sekmesine gidin.

2. Tüm satırları seçin (CtrlA veya ⌘A) ve ardından bunların üstüne aşağıdaki kodu yapıştırın (CtrlV veya ⌘V):

   UpdateCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Yerel oyuncu, karakter ve humanoid için referans
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Tween özellikleri
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Ölçer çubuğu iç çerçevesinin referansı
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradyan renk dizisi (kırmızı, turuncu, sarı, limon, yeşil)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- Kesirli noktadan gradyanda rengi almak için işlev
   local function getColorFromSequence(fraction: number): Color3
   	-- Gradyandaki her renk, bir bölümün başlangıcını ve/veya sonunu tanımlar
   	local numSections = #gradient - 1
   
   	-- Her bölüm 1'in bir kısmını temsil eder
   	local sectionSize = 1 / numSections
   
   	-- İstenen kesirin hangi bölüme düştüğünü belirleyin
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Bölümün başlangıcındaki ve sonundaki renkleri al
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Kesiri bölüm içinde 0 ile 1 arasında bir sayı olacak şekilde normalize et
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Başlangıç ve son arasındaki değere göre interpolasyon yap
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Yeni sağlığı maksimuma göre yüzde olarak hesapla
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Barı yeni boyut/rengindeki hedeflere tweenle
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Humanoid sağlığındaki değişiklikleri dinleyin
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Başlangıçta (veya sıfırlarken) barın boyut/rengini mevcut sağlığa ayarlayın
   onHealthChanged()

   Ana Eklemeler/Değişiklikler

   Satırlar	Amaç
   2	Script içinde tweening işlevselliğini uygulamak için TweenService'e bir referans alır.
   10	İstediklerin tween'in süresini, eğilim stilini ve eğilim yönünü tanımlayan bir TweenInfo oluşturur.
   52‑57	Barın boyut ve rengini önceki sürümdeki gibi ayarlamak yerine, hedef boyut/renk için bir tweenGoal tablosu tanımlanır ve yeni bir tween başlatılır.

Şimdi deneyimi test ettiğinizde, özel ölçerin her sağlık değişikliği arasında geçişli bir geçiş yaptığını göreceksiniz:

Bir hasar efekti ekleyin

Varsayılan sağlık ölçer sisteminde, karakter hasar aldığında ekran kenarlarında kısa ve hafif bir kırmızı tonlama vardır. Varsayılan ölçerin devre dışı bırakılması, bu etkisini kaldırır; ancak kendi uygulamanızla değiştirebilirsiniz.

1. Daha önce düzenlediğiniz UpdateCustomMeter script'inin sekmesine gidin.

2. Tüm satırları seçin ve aşağıdaki kodla onların üstüne yapıştırın:

   UpdateCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Yerel oyuncu, karakter ve humanoid için referans
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Tween özellikleri
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Değişken, karakter sağlık değerini depolamak/önbelleğe almak için
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Oyuncunun kamerasında (veya oluşturulan) bir renk düzeltme efektini almak için
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Ölçer çubuğu iç çerçevesinin referansı
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradyan renk dizisi (kırmızı, turuncu, sarı, limon, yeşil)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- Kesirli noktadan gradyanda rengi almak için işlev
   local function getColorFromSequence(fraction: number): Color3
   	-- Gradyandaki her renk, bir bölümün başlangıcını ve/veya sonunu tanımlar
   	local numSections = #gradient - 1
   
   	-- Her bölüm 1'in bir kısmını temsil eder
   	local sectionSize = 1 / numSections
   
   	-- İstenen kesirin hangi bölüme düştüğünü belirleyin
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Bölümün başlangıcındaki ve sonundaki renkleri al
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Kesiri bölüm içinde 0 ile 1 arasında bir sayı olacak şekilde normalize et
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Başlangıç ve son arasındaki değere göre interpolasyon yap
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Yeni sağlığı maksimuma göre yüzde olarak hesapla
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Barı yeni boyut/rengindeki hedeflere ayarlayın
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Hasar alındığından, yeni sağlık eski sağlıktan düşükse etkisini göster
   	if healthFraction < cachedHealth then
   		-- Yeni sağlık değerini önbelleğe al
   		cachedHealth = healthFraction
   
   		-- Tweenleme öncesinde kırmızı ton olarak düzeltici rengi ayarlayın
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tonlamayı beyaz (normalden nötr) olarak tweenleyin
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Humanoid sağlığındaki değişiklikleri dinleyin
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Başlangıçta (veya sıfırlarken) barın boyut/rengini mevcut sağlığa ayarlayın
   onHealthChanged()

   Ana Eklemeler/Değişiklikler

   Satırlar	Amaç
   14	Karakterin sağlık miktarını değişiklikler arasında takip etmek için bir yerleşim referansı (cachedHealth) ayarlar; bu sayede değişikliklerin daha düşük olup olmadığını tespit edebilirsiniz (hasar).
   17‑18	İlk karakter doğumunda, oyuncunun mevcut Camera içindeki yeni bir ColorCorrectionEffect yaratılır veya daha sonra yeniden doğmalarda aynı örneğe referans alınır. Bu post işlemi efekti oyuncunun ekranına uygulanır, sunucudaki her oyuncunun ekranına uygulanmaz.
   68‑83	Öncelikle sağlık değişikliğinin, cachedHealth değerinden daha düşük olup olmadığını doğrulamak için koşullu bir kontrol yapar; eğer öyleyse, cachedHealth öncekine ayarlanır. Sonrasında, ColorCorrectionEffect renk tonunu [255, 25, 25] (kırmızı) ve daha yüksek doygunluk ile ayarlar, ardından düzelticinin tonunu varsayılan beyaz ([255, 255, 255]) ile tweenlemesi yapılır, hiçbir doygunluk yoktur.

Şimdi deneyimi test ettiğinizde, karakter hasar aldığında ekranın kısa bir süre kırmızıya döndüğünü göreceksiniz: