HUD metreleri oluşturun

Bir HUD veya Heads-Up Display, oyun sırasında her zaman görünür veya erişilebilir olan bir dizi UI öğesidir; örneğin, skor gösterimleri, sağlık metreleri ve menü düğmeleri. Bir HUD dahil etmek, oyuncuların oyun hedeflerinde başarılı olmalarına yardımcı olan bilgileri gösterdiği için çoğu oyun için gereklidir.

Yaygın bir HUD öğesi, solda bir simgeye sahip olan ve bir zamanlayıcı çubuğu, ilerleme çubuğu veya benzeri bir şeye dönüştürülebilen bir sağlık metresidir.

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

• Tasarımınızı birden fazla emüle edilmiş ekranda test etmek için Cihaz Emülatörü'nün kurulumu ve kullanımı.
• Hem tasarım hem de depolama konteyneri olarak StarterGui kullanımı.
• UI öğelerini yerleşik Roblox kontrolleri ve cihaz çentikleri/adaları etrafında nasıl konumlandıracağınız/boyutlandıracağınız; örneğin, modern telefonlardaki kamera çentiği.
• Varsayılan Roblox sağlık metresini kendi metreğinizle nasıl değiştireceğiniz ve bunu karakterin sağlık seviyesiyle nasıl bağlayacağınız.
• Sağlık metresinin ortasını nasıl animasyonlayacağınız ve rengini beş renk gradyanı anahtar noktası (kırmızı, turuncu, sarı, lime, yeşil) arasında ayarlayacağınız.

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

Roblox, oyuncuların telefon veya tabletlerinde oyunları keşfedip katılabildiği ve daha sonra PC veya konsollarında kaldıkları yerden devam edebildiği için doğası gereği çoklu platform destekler. Mobil cihazlar (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.

UI tasarımlarını platformlar arasında test etmenin en iyi yolu, Studio'nun Cihaz Emülatörü kullanmaktır. Bu araç, önceden ayarlanmış bir cihaz seçimi sunar ve kendi özel ayarlarınızı eklemenize olanak tanır.

1. Studio'da Tehlikeli Uzay İstasyonu ş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.

   

Bir ekran konteyneri oluşturun

Bir ScreenGui konteyneri, bir oyuncunun ekranında görüntülemek için UI nesnelerini (GuiObjects) tutar (bu öğreticide, sağlık metresinin tamamı). Her oyuncunun oyuna katıldığında bir ScreenGui ve onun alt nesnelerini görüntülemesi 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, Players konteyneri içinde bulunan o oyuncunun PlayerGui konteynerine kopyalanır.

Boş bir ScreenGui eklemek için:

1. Explorer penceresinde, StarterGui konteynerini bulun.

   

2. Konteynerin üzerine gelin, ⊕ 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ını kullanır ancak genellikle ekran alanını kaplayan çentikler, kesikler ve diğer unsurlar içerir. Her Roblox oyunu, ana menüye hızlı erişim için üst çubuk kontrolleri, sohbet, liderlik tablosu ve daha fazlasını içerir.

Oyuncuların tüm UI'yi engellenmeden görebilmesi ve erişebilmesi için, Roblox, bir ScreenInsets özelliği sağlar; bu özellik, bir ScreenGui içeriği için güvenli alan içe aktarımlarını kontrol eder. ScreenGui içinde konumlandırdığınız her UI nesnesi, içe aktarma sınırlarına göredir.

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ığı ayarlayın

ScreenInsets özelliği DeviceSafeInsets olarak ayarlandığında, içerik artık ekranın fiziksel üst kenarına doğrudan uzanabilir. Ancak, sağlık metresini (ve konteyner içindeki diğer nesneleri) ekran kenarlarından biraz uzaklaştırmak için küçük bir yastık eklemek, daha temiz bir görünüm sağlar ve kesilmesini önler.

Bir UI konteynerine yastık uygulamanın bir yolu, bir UIPadding değiştirici eklemektir:

1. HUDContainer'a bir UIPadding değiştirici ekleyin.

   

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

   

Sağlık metresini oluşturun

Ekran konteyneri yapılandırıldıktan sonra, sağlık metresini Roblox UI nesneleri kullanarak inşa etmeye başlayabilirsiniz; örneğin, çerçeveler ve bir görüntü etiketi.

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 görevi görür. Bu öğretici için, tüm sağlık metresi tek bir ana çerçeve içinde yer alacak, bu da onu çeşitli HUD düzenleri arasında yeniden konumlandırmayı kolaylaştırır.

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

   

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

2. Yeni çerçeve örneğini MeterBar olarak yeniden adlandırın.

   

Çerçeveyi konumlandırın

Roblox'ta, bir UI nesnesinin konumu, X ve Y eksenleri için UDim2 koordinat seti ile temsil edilir; bu set, Scale ve Offset değerlerini içerir:

• Scale değerleri, ilgili eksen boyunca konteynerin boyutunun bir yüzdesini temsil eder; bu, herhangi bir Offset değerinin eklenmesiyle birlikte.
• Offset değerleri, ilgili eksen boyunca nesneyi ne kadar piksel kaydıracağınızı temsil eder; bu da herhangi bir Scale değerinin eklenmesiyle birlikte.

Bir UI nesnesini ekran konteynerinin sağ üst köşesine konumlandırmak için, Scale en iyi yaklaşımdır çünkü bir X değeri 1 (100%) konteynerin sağ kenarını temsil eder; bu, ekranın fiziksel piksel boyutundan bağımsızdır. Benzer şekilde, bir Y ölçek değeri 0 (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ı ayarlamanız gerekecek. Geçerli değerler, nesnenin boyutuna göre 0 ile 1 arasında olmalıdır; bu nedenle, 1, 0 bir ankraj değeri, çerçevenin ankraj noktasını üst sağ köşesine yerleştirir.

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

   

2. Özellikler penceresinde, Position için 1, 0, 0, 0 girin ve Enter tuşuna basın. Studio, otomatik olarak UDim2'yi {1, 0},{0, 0} oluşturmak için parantezleri ekleyecektir.

3. AnchorPoint özelliği için 1, 0 girin. Çerçeve artık güvenli alan içinde, yastık nedeniyle kenardan hafifçe içe yerleştirilmiş olarak üst sağ köşede konumlandırılmış olmalıdır.

   

Çerçeveyi yeniden boyutlandırın

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

Varsayılan olarak, yeni çerçevenin boyutu {0, 100},{0, 100} olup, bu da genişlik (X) ve yükseklik (Y) için 100 piksel anlamına gelir. Kesin bir piksel değeri bazı durumlarda yararlı olsa da, birçok UI öğesi, genel ekran konteyner boyutunun bir yüzdesi olarak ayarlandığında, birden fazla ekran arasında daha duyarlı bir şekilde ölçeklenir.

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

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

   

Çerçeveyi stillendirin

Varsayılan olarak, Frames katı beyaz ile doldurulur. Nihai sağlık metresinin daha koyu ve hafif opak bir dolguya sahip olması, ayrıca açık ve koyu arka planlarda daha iyi görünmesi için koyu bir kenarlık içermesi gerekir.

1. MeterBar çerçevesi seçili iken, BackgroundColor3 özelliği için 0 girin. Studio, bunu otomatik olarak [0, 0, 0] RGB değerine dönüştürecektir.

2. BackgroundTransparency özelliği için 0.75 girin. Roblox'ta, saydamlık 0 tamamen opak ve 1 tamamen saydamdır; bu nedenle, 0.75, Figma veya Photoshop gibi diğer uygulamalarda %25 opaklık anlamına gelir.

   

3. Çerçeveye bir UIStroke nesnesi ekleyin; bu, çerçeveye özelleştirilebilir bir kenar ekleyen güçlü bir UI değiştiricisidir.

   

4. Yeni UIStroke seçili iken, aşağıdaki özellikleri ayarlayın:

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

   

Metre çerçevesinin stilini tamamlamak için, köşeleri keskin bir dikdörtgen yerine "hap" şekli oluşturacak şekilde yuvarlayabilirsiniz.

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

   

2. Yeni UICorner seçili iken, CornerRadius değerini 0.5, 0 olarak ayarlayın. Piksel değeri yerine 0.5 (yüzde 50) ölçek değeri kullanmak, metre çubuğu için özellikle uygundur çünkü konteyner ne kadar yüksek veya geniş olursa olsun tamamen yuvarlak bir eğri sağlar.

   

İç dolgu oluşturun

Artık sağlık metresinin iç çerçevesi tamamlandığına göre, karakterin değişken sağlığını temsil etmek için bir iç dolgu kısmı ekleyebilirsiniz. Sadece katı dolguya ihtiyaç duyduğundan, ana çerçevenin içine bir alt Frame uygun olacaktır.

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

2. Yeni çerçeve örneğini InnerFill olarak yeniden adlandırın.

   

3. InnerFill seçili iken, aşağıdaki ö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 kullanmak, iç çerçevenin ebeveynin tam genişliğini ve yüksekliğini doldurmasını sağlar; ebeveynin sol kenarından başlayarak.

   

4. Ana çerçevenin "hap" şekliyle eşleşmesi için, InnerFill'e ek bir UICorner ekleyin.

   

5. Yeni UICorner değiştiricisi seçili iken, CornerRadius özelliğini 0.5, 0 olarak ayarlayın; bu, ana MeterBar çerçevesinin "hap" şekliyle eşleşmesini sağlar.

   

6. Dolgunun tam bir metre olduğunu göstermek için, InnerFill'i seçin ve BackgroundColor3 özelliğini [0, 225, 50] olarak ayarlayın (daha sonraki bir görevde, bu rengi sağlık değişikliklerini dinleyerek değiştireceksiniz).

   

Simgeyi ekleyin

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

1. MeterBar çerçevesine bir ImageLabel ekleyin. Bu nesne, Roblox'a bir decal olarak yüklenmiş bir 2D görüntü varlığı uygulamanıza olanak tanır.

2. Yeni etiket örneğini Icon olarak yeniden adlandırın.

   

3. Icon seçili iken, ZIndex özelliğini 2 olarak ayarlayın. Yeni eklenen UI nesneleri her zaman daha önce eklenen nesnelerin önünde katmanlanırken, bu değişiklik simgenin her zaman metre çerçevesinin öğelerinin önünde görünmesini sağlar.

   

4. Simgenin Image özelliğini bulun ve rbxassetid://91715286435585 değerini girin; bu, önceden yüklenmiş bir kalp görüntüsüne referanstır (isterseniz, kendi görüntünüzü içe aktarabilir ve varlık kimliğini kullanabilirsiniz).

   

5. Simgenin ImageLabel'in her zaman 1:1 en boy oranında kalmasını sağlamak için, bir UIAspectRatioConstraint ekleyin. Bu kısıtlama, en boy oranını kontrol etmek için özelleştirilebilir özelliklere sahiptir; ancak varsayılan değerlerini olduğu gibi bırakabilirsiniz.

   

6. Icon seçili iken, görünüm ve konumu sonlandırmak için aşağıdaki özellikleri değiştirin:

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

   

Boyutu kısıtlayın

Bir ölçek yüksekliği 0.05 (yüzde 5) modern telefon ekranlarında ve 16:9 en boy oranına sahip oyun monitörlerinde iyi görünse de, metre tablet ekranlarında ve eski telefonlarda biraz fazla yüksek görünebilir. Bunu, Cihaz Emülatörü'nden iPad 7. Nesil gibi bir tableti emüle ederek kontrol edebilirsiniz.

Metre çubuğunun yüksekliğini daha geniş ekranlarla daha tutarlı hale getirmek için, maksimum piksel yüksekliğini sınırlamak için bir UISizeConstraint uygulayabilirsiniz.

1. MeterBar çerçevesine bir UISizeConstraint ekleyin.

   

2. Yeni kısıtlama seçili iken, MaxSize özelliğini inf, 20 olarak ayarlayın; bu, yüksekliği 20 piksel ile sınırlarken genişlik kısıtlaması getirmeyecektir.

   

Artık metre çubuğu, daha geniş ve daha yüksek ekranlar arasında daha tutarlı bir yükseklik korur.

Varsayılan sağlık metresini değiştirin

Roblox oyunları, karakterler hasar aldığında görünür hale gelen varsayılan bir sağlık metresi içerir. Varsayılan metre görünür kalırsa, özel metre ile çakışabilir ve potansiyel olarak üst üste binebilir.

Varsayılan metreyi devre dışı bırakın

Varsayılan sağlık metresini devre dışı bırakmak için, StarterPlayerScripts içinde LocalScript (istemci betiği) kullanarak StarterGui:SetCoreGuiEnabled() çağrısı yapacaksınız.

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

   

2. Konteynerin içine yeni bir LocalScript ekleyin ve amacını tanımlamak için HideDefaultHealthMeter olarak yeniden adlandırın. StarterPlayerScripts içindeki betikler, yerel oyuncu bir oyuna katıldığında otomatik olarak çalışır; bu, varsayılan metreyi kalıcı olarak gizleyen bir betiği çalıştırmak için ideal bir konteynerdir.

   

3. Yeni bir betik eklediğinizde, otomatik olarak yeni bir betik düzenleyici sekmesinde açılır (açılmazsa, Explorer penceresindeki betiğe çift tıklayın).

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

   HideDefaultHealthMeter

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

   Kod Açıklaması

   Satır	Amaç
   1	Bir çekirdek hizmet referansı alır; StarterGui, özel sağlık metresini oluşturduğunuz aynı konteyneri temsil eder ve içeriği oyuna katılan her oyuncu için PlayerGui konteynerine kopyalanır.
   4	Hizmetin SetCoreGuiEnabled() yöntemini çağırır ve varsayılan sağlık metresinin devre dışı bırakılmasını (false) talep eder.

Şimdi oyunu test ettiğinizde ve hasar aldığınızda, varsayılan metre devre dışı kalır ve gizlenir (özel metreyi sağlık değişikliklerini yansıtacak şekilde kodlayacaksı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 bir Humanoid sınıfı içerir; örneğin, yürüyüş/koşu hızını ayarlamak ve sağlığı yönetmek. Health sunucudaki değişiklikler, her oyuncunun istemcisine yayımlanır ve bu değişiklikleri algılayarak özel sağlık metresinin boyutunu ve rengini güncelleyebilirsiniz.

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

   

2. Konteynerin içine yeni bir LocalScript ekleyin ve amacını tanımlamak için UpdateCustomMeter olarak yeniden adlandırın. StarterCharacterScripts içindeki betikler, oyuncunun karakteri her doğduğunda otomatik olarak çalışır; bu, her yeniden doğuşta sağlık metresini tamamen sıfırlayan bir betik çalıştırmak için ideal bir konteynerdir.

   

3. UpdateCustomMeter betiği için düzenleyici penceresinde aşağıdaki kodu yapıştırın:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   
   -- Yerel oyuncu, karakter ve humanoid referansı
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Metre çubuğu iç çerçevesine referans
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradyan renk dizisi (kırmızı, turuncu, sarı, lime, 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 gradyan dizisinde rengi almak için fonksiyon
   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ıç ve bitişindeki renkleri alın
   	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 edin
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Normalleştirilmiş kesire göre başlangıç ve bitiş arasında lerp yapın
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Yeni sağlığı maksimumun yüzdesi olarak hesaplayın
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Çubuğu yeni boyut/reng hedeflerine 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ırlama sırasında) çubuğun boyut/rengini mevcut sağlığa ayarlayın
   onHealthChanged()

   Kod Açıklaması

   Satırlar	Amaç
   4‑6	Yerel Player, Character modelini ve içindeki Humanoid sınıfını referans alır.
   9‑10	Metre içindeki InnerFill nesnesine referans alır; bu nesne, boyutlandırılması ve rengi değiştirilmesi gereken nesnedir.
   13‑19	Beş renk (kırmızı, turuncu, sarı, lime, yeşil) dizisi tanımlar; bu, metreyi çeşitli noktalarda yeniden renklendirmek için kullanılır; örneğin, %100 sağlık için yeşil, %50 için sarı, %0 için kırmızı veya anahtar noktaları arasında herhangi bir kesir için bir karışım.
   22‑41	Yardımcı fonksiyon, gradyan renk anahtar noktaları arasında renk karışımını döndürür.
   43‑50	Sağlık değişikliklerini işleyen fonksiyon. Burada, karakterin MaxHealth'ine göre yeni sağlığı hesaplar, InnerFill'i o ölçek yüzdesine ayarlar ve getColorFromSequence() fonksiyonundan dönen renge boyar.
   53	Sunucudan yayımlanan Health değişikliklerini algılayan ana olay bağlantısıdır ve onHealthChanged() fonksiyonunu çağırır.
   56	Başlangıçta (karakter doğduğunda veya yeniden doğduğunda) onHealthChanged() fonksiyonunu çağırarak InnerFill'in doğru yüzdeye boyutlandırılmasını ve renklendirilmesini sağlar. Genellikle bu, tam genişlik ve yeşil olacaktır.

Şimdi oyunu test ettiğinizde, özel metre, karakter hasar aldıkça boyut ve renk değişikliklerini doğru bir şekilde günceller:

Metre çubuğunu animasyonlayın

Özel metreye ekstra bir cilalama katmanı eklemek için, sağlık değişikliklerini tweening ile animasyonlayabilir, metre çubuğunun boyutunu ve rengini yarım saniye boyunca kademeli olarak değiştirebilirsiniz.

1. Daha önce düzenlediğiniz UpdateCustomMeter betiği için betik düzenleyici sekmesine erişin.

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

   UpdateCustomMeter

   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Yerel oyuncu, karakter ve humanoid 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)
   
   -- Metre çubuğu iç çerçevesine referans
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradyan renk dizisi (kırmızı, turuncu, sarı, lime, 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 gradyan dizisinde rengi almak için fonksiyon
   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ıç ve bitişindeki renkleri alın
   	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 edin
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Normalleştirilmiş kesire göre başlangıç ve bitiş arasında lerp yapın
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Yeni sağlığı maksimumun yüzdesi olarak hesaplayın
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Çubuğu yeni boyut/reng hedeflerine tweenleyin
   	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ırlama sırasında) çubuğun boyut/rengini mevcut sağlığa ayarlayın
   onHealthChanged()

   Anahtar Eklemeler/Değişiklikler

   Satırlar	Amaç
   2	Betikte tweening işlevselliğini uygulamak için TweenService'e bir referans alır.
   10	Tween'in süresini, eğilme stilini ve eğilme yönünü tanımlayan bir TweenInfo oluşturur.
   52‑57	Önceki sürümdeki gibi çubuğun boyutunu ve rengini basitçe ayarlamak yerine, hedef boyut/rengi içeren bir tweenGoal tablosu tanımlar, tweenInfo ve tweenGoal parametrelerini kullanarak yeni bir tween oluşturur ve yeni tweeni oynatır.

Şimdi oyunu test ettiğinizde, özel metre, sağlık değişiklikleri arasında tween yapar:

Hasar etkisi ekleyin

Varsayılan sağlık metre sistemi, karakter hasar aldığında ekran kenarlarında kısa, ince bir kırmızı ton içerir. Varsayılan metreyi devre dışı bıraktığınızda, bu etki kaldırılır; ancak kendi uygulamanızla değiştirebilirsiniz.

1. Daha önce düzenlediğiniz UpdateCustomMeter betiği için betik düzenleyici sekmesine erişin.

2. Tüm satırları seçin ve aşağıdaki kod ile bunların üzerine 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 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ığını depolamak/önbelleğe almak için
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Oyuncu kamerasında (veya yeni) renk düzeltme etkisini al
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Metre çubuğu iç çerçevesine referans
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradyan renk dizisi (kırmızı, turuncu, sarı, lime, 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 gradyan dizisinde rengi almak için fonksiyon
   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ıç ve bitişindeki renkleri alın
   	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 edin
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Normalleştirilmiş kesire göre başlangıç ve bitiş arasında lerp yapın
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Yeni sağlığı maksimumun yüzdesi olarak hesaplayın
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Çubuğu yeni boyut/reng hedeflerine tweenleyin
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Yeni sağlık, önbellek sağlığından düşükse hasar etkisini göster
   	if healthFraction < cachedHealth then
   		-- Yeni sağlık değerini önbelleğe al
   		cachedHealth = healthFraction
   
   		-- Tweenleme öncesinde başlangıç tonunu kırmızı olarak ayarlayın
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tonu beyaza (nötr ve normalden hiçbir ton değişikliği yok) 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ırlama sırasında) çubuğun boyut/rengini mevcut sağlığa ayarlayın
   onHealthChanged()

   Anahtar Eklemeler/Değişiklikler

   Satırlar	Amaç
   14	Karakterin sağlık miktarını değişiklikler arasında izlemek için bir yer tutucu referansı (cachedHealth) ayarlar; böylece bir değişikliğin daha düşük olup olmadığını (hasar) karşılaştırabilirsiniz.
   17‑18	İlk karakter doğumunda, oyuncunun mevcut Camera'sında yeni bir ColorCorrectionEffect oluşturur veya daha sonraki yeniden doğuşlarda aynı örneğe referans alır. Bu post işleme etkisini oyuncunun kamerasına ekleyerek, yalnızca kendi yerel ekranına uygulanmasını sağlar; sunucudaki her oyuncunun ekranına değil.
   68‑83	Önce sağlık değişikliğinin cachedHealth değerinden düşük olduğunu doğrulamak için bir koşullu kontrol gerçekleştirir; eğer öyleyse, cachedHealth'i yeni değere ayarlar. Ardından, ColorCorrectionEffect tonunu [255, 25, 25] (kırmızı) ve daha yüksek doygunlukta ayarlar; ardından tonu varsayılan nötr beyaz ([255, 255, 255]) ve doygunluk olmadan tweenler.

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