Bir HUD veya Oyun sırasında daima görünen veya erişilebilen bir dizi UI öğesi, puan gösterileri, sağlık ölçerleri ve menü düğmeleri gibi oynanışsırasında görünen veya erişilebilen bir dizi UI öğesi.Bir HUD'yi dahil etmek çoğu deneyim için gereklidir, çünkü oyuncuların oyun içi hedeflerinde başarılı olmalarına yardımcı olan bilgileri görüntüler.
Ortak bir HUD öğesi, sol tarafta bir ikon bulunan bir sağlık ölçeğidir, zamanlayıcı çubuğu, veya benzerine adapte edilebilir.

Başlangıç yeri olarak Tehlikeli Uzay İstasyonu kullanılarak ve bitmiş referans dünyaolarak UI Temelleri - HUD Ölçer kullanılarak, bu eğitim şunları gösterir:
- Tasarımınızı çoklu emüle edilmiş ekranda test etmek için Cihaz Emülatörü kurulumu ve kullanımı.
- Tasarım ve depolama konteyneri olarak StarterGui kullanımı.
- Modern telefonlardaki kamera notu gibi yerleştirilmiş Roblox kontrolleri ve cihaz notları/adaları etrafında UI öğelerini konumlandırma/boyutlandırma nasılı
- Varsayılan Roblox sağlık ölçerini kendi ölçerinizle nasıl değiştirebilir ve karakterin sağlık seviyesine bağlayabilirsiniz.
- Sağlık ölçeğinin merkez kısmını nasıl animasyonla gösterir ve beş renk gradyan noktası arasında rengini ayarlar (kırmızı, turuncu, sarı, limon, yeşil).
Cihaz Emülatörünü Etkinleştir
Roblox, oyuncuların bir PC veya konsolda deneyimler keşfedip katılabileceği gibi doğal olarak çok platformludur, ardından telefonlarını kapalıbıraktıkları yerden devam ederler.Mobil cihazlar (telefonlar ve tabletler) en az ekran alanına sahiptir, bu nedenle UI öğelerinizin daha küçük ekranlara uyması ve oyunculara açıkça görünmesi önemlidir.
Platformlar arasındaki UI tasarımlarını test etmenin en iyi yolu, Studio'nun Aygıt Emülatörü dır.Bu araç, önceden seçilmiş cihazlar sağlar ve kendi özel ön ayarlarınızı eklemene izin verir.
Studio'da Tehlikeli Uzay İstasyonu şablonunu açın.
Test sekmesinden, Cihaz aracını aç/kapat.
Ana görüş alanının hemen üzerindeki çubuktan, iPhone X veya Samsung Galaxy A51 gibi bir telefon emülasyonu seçin.Sonra, görüntü boyutunu Pencereye Uygun olarak ayarlayın, böylece Studio'daki maksimum alan kullanılabilir.
Bir ekran konteyneri oluştur
Bir konteyneri, oyuncunun ekranında görüntülemek için UI nesnelerini tutar (bu eğitimde, sağlık ölçeğinin bütünü).Deneyime katılan her oyuncuya bir ScreenGui ve onun çocuk nesnelerini görüntülemek için, bunu StarterGui konteynerin içine yerleştirin.Bir oyuncu katıldığında ve karakteri ilk oluştuğunda, ScreenGui ve içeriği o oyuncunun içinde bulunan PlayerGui konteynere klonlanır, Players konteynerinin içinde bulunan.

Boş bir ScreenGui eklemek için:
Araştırıcı penceresinde, konteynerini bulun.
Konteynere tıklayın, ⊕ düğmesine tıklayın ve bir ScreenGui girin.
Yeni konteyneri HUDContainer olarak yeniden adlandırın, böylece amacını yansıtsın.
Güvenli alanları kullanın
Modern telefonlar tüm ekrandan yararlanır, ancak genellikle ekran alanını dolduran notlar, kesintiler ve diğer elemanlar içerir.Her Roblox deneyimi ayrıca ana menüye hızlı erişim için üst çubuk kontrolleri , sohbet, lider tablosu ve daha fazlasını içerir.

Oyuncuların engellemeden tüm UI'ye erişebilmesi ve görebilmesi için, Roblox bir öğesinin içeriği için güvenli alan girişlerini kontrol eden özellik sağlar, bir içeriğinin.Bir ScreenGui içine yerleştirdiğiniz her UI nesnesi, ayrıştırma sınırlarına göre mutlaktır.

Varsayılan CoreUISafeInsets tüm UI nesnelerinin Roblox UI ve cihaz kesintilerinden temiz 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.

Kâşif penceresinde HUDContainer seçin.
Özellikler penceresinde, ScreenInsets özelliğini DeviceSafeInsets olarak ayarlayın.
Kenar yastığı ayarla
ScreenInsets ile ayarlanarak DeviceSafeInsets , içerik artık doğrudan ekranın fiziksel üst kenarına kadar genişleyebilir.Bununla birlikte, ufak bir miktar boşluk sağlık sayacını (ve konteyner içindeki diğer nesneleri) temiz bir görünüm için ekran kenarlarından biraz uzaklaştırmaya ve onların kesilmesini engellemeye yardımcı olabilir.

Bir UI konтейнеру yastırma uygulamak için bir yol, bir UIPadding değiştirici ekleyerek gerçekleşir:
Bir UIPadding değiştiriciyi HUDContainer 'a ekleyin.
Yeni UIPadding nesnesi seçildiğinde, konteynerin tüm kenarları için bir değer girin 0, 16 (PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Bu, konteynerin tüm etrafında 16 piksel yastıklama uygular, ekranın çözünürlüğüne bakılmaksızın.
Sağlık ölçerini oluştur
ekran konteyneri yapılandırıldığında, çerçeveler ve bir resim etiketi gibi Roblox UI nesnelerini kullanarak sağlık ölçerinin inşa etmeye başlayabilirsiniz.

Ebeveyn çerçevesi oluştur
Figma ve Photoshop gibi tasarım uygulamalarına benzer şekilde, Roblox'taki bir Frame , diğer UI nesneleri için bir konteyner olarak hizmet eder.Bu eğitim için, tüm sağlık ölçeri tek bir anne çerçevede bulunacak ve çeşitli HUD düzenleri arasında yeniden konumlandırılması kolaylaşacak.
Bir Frame HUDContainer içine ekleyin. Yeni çerçeve üst sol köşede boş beyaz bir kare olarak görünür.
Yeni çerçeve instansını Hız Çubuğu olarak yeniden adlandırın.
Çerçeveyi konumlandır
Roblox'ta, bir UI nesnesinin konumu, UDim2 ve Scale ve Offset değerleri içeren bir X ve Y eksenleri için bir koordinat setiyle temsil edilir:


Bir UI nesnesini ekran konteynerinin sağ üst kısmına yerleştirmek için, Scale en iyi yaklaşımdır, çünkü bir X değeri 1 (%100) ekranın fiziksel piksel boyutuna bağımsız olarak sağ kenarı temsil eder.Benzer şekilde, Y ölçek değeri (0%) konteynerin üst kenarını temsil eder.

Ayrıca, ebeveyn çerçevenin kaynak noktasını tanımlaması için sağ üstte bir bağlantı noktası ayarlamanız gerekecek.Kabul edilebilir değerler, nesnenin boyutuna göre 0 ve 1 arasındadır, bu nedenle bir çerçeve değeri 1, 0 , çerçevenin kenar noktasına yerleştirir.

Kâşif penceresinde, daha önce eklediğiniz MeterBar çerçevesini seçin.
1, 0 için AnchorPoint özelliği için girin.Çerçeve artık cihaz güvenli alanının sağ üst köşesine yerleştirilmeli, sonuç olarak kenarlardan biraz içeri çekilerek yastıklama nedeniyle.
Çerçeveyi yeniden boyutlandır
Konum gibi, bir UI nesnesinin 'si, 'nin ve 'nin her iki eksen için de X ve Y değerlerini içeren bir koordinat setiyle temsil edilir.
Varsayılan olarak, yeni çerçevenin boyutu , yani genişlikte ( X ) ve yükseklikte ( Y ) 100 pikseldir ».Sıkı bir piksel değeri bazı durumlarda yararlı olsa da, birçok UI öğesi, genel ekran kapağı boyutunun yüzde 'ine ayarlandığında, çoklu ekranda daha sorumlu bir şekilde ölçeklendirilir.
Metre çubuğu çerçevesi seçildiğinde, Özellikler penceresine erişin ve Size özelliğine yolunuz.
Eklenen piksel ofsetleri olmadan yüzde 35 geniş ve yüzde 5 yüksek bir yüzde boyutu ayarlamak için 0.35, 0, 0.05, 0 değerini girin.
Çerçeveyi stilize et
Varsayılan olarak, Frames sıkı beyazla doldurulur.Son sağlık sayacının daha karanlık ve biraz bulanık bir doldurması ve karanlık bir çizgi olması gerekir, böylece her iki aydınlık ve karanlık arka plan üzerinde daha iyi öne çıkar.

Metre çubuğu çerçevesi seçildiğinde, 0 özelliği için BackgroundColor3 girin.Stüdyo otomatik olarak bunu [0, 0, 0] RGB değerine dönüştürecek.
0.75 özelliği için girin BackgroundTransparency .Roblox'ta, transparanslılık tamamen opak olarak 0 'dan 1 'ye kadar değişir, bu yüzden 0.75 Figma veya Photoshop gibi diğer uygulamalardaki% 25 saydamlığa eşit olur.
Bir nesnesini girin, çerçeveye özelleştirilebilir bir çizgi ekleyen güçlü bir UI değiştirici.
Yeni UIStroke seçilerek, aşağıdaki özellikleri ayarlayın:
- Thickness = 3
- Transparency = 0.25 (75% saydamlı)
Sayaç çerçevesinin stilini bitirmek için, kenarları keskin bir dikdörtgen yerine bir "hap" şekline dönüştürmek için yuvarlayabilirsiniz.
Bir UICorner örneğini MeterBar çerçevesine yerleştirin.
Yeni seçilerek, 'i 'a ayarlayın.Bir piksel değeri yerine ölçek değeri (%50) kullanarak bir piksel değeri yerine özellikle sayaç çubuğu için daha uygundur, çünkü konteyner ne kadar yüksek veya geniş olursa olsun, tümüyle yuvarlak bir eğilim sağlar.
İç doldurmayı oluştur
Artık sağlık ölçerinin içeriği tamamlandı, karakterin değişken sağlığını temsil etmek için bir iç doldurma bölümü ekleyebilirsiniz.Sadece katı doldurulmuş bir bölge olması gerektiğinden, ebeveyn çerçevenin içinde bir alt çocuk Frame uygun.

Bir çocuk Frame MeterBar çerçevesine ekleyin.
Yeni çerçeve instansını Dahili Doldurma olarak yeniden adlandırın.
İçerik Doldurma seçilerek, aşağıdaki özellikleri ayarlayın:
- AnchorPoint = 0, 0.5 (sol kenar ve dikey orta)
- Position = 0, 0, 0.5, 0
- Size = 1, 0, 1, 0
Çerçevelerin çocukları ebeveynlerine göre konumlandırıldığı ve boyutlandığı için, ölçek kullanımı iç çerçevenin ebeveynin tüm genişliğini ve yüksekliğini doldurmasını sağlar, ebeveynin sol kenarından başlayarak.
Ebeveyn çerçevenin "hap" şeklini eşleştirmek için, Doldurma içine ek bir UICorner ekleyin.
Yeni düzenleyici seçilerek, ebeveyn sayfasının "hap" şeklini eşleştirmek için özelliklerini ayarlayın MeterBar .
Tam bir sayacın iyi sağlığı gösterdiğini daha iyi temsil etmek için, Doldurma seçin ve özelliklerinin özelliklerini (daha sonraki bir görevde, gerçek sağlığa dayalı olarak değiştirmek için bu rengi değiştireceksiniz) seçin (daha sonra).
Simgeyi simge
Sayaçın amacını daha açık bir şekilde belirtmek için, bu durumda genellikle sağlık veya hayatı sembolize eden kırmızı bir kalp ekleyebilirsiniz resim etiketi sol tarafta, bu durumda sağlık veya hayatı sembolize eden kırmızı bir kalp.

MeterBar çerçevesine bir ekleyin. Bu nesne, Roblox'a bir resim varlığı olarak yüklenen 2D görüntü öğesini uygulamanıza izin verir.
Yeni etiket örneğinin adını Simge olarak değiştirin.
Simge seçilerek, özelliklerinin ZIndex değerini 2 olarak ayarlayın.Yeni eklenen UI nesneleri her zaman daha önce eklenen nesnelerin önünde görünürken, bu değişiklik simgenin daima sayacın çerçeve elemanlarının önünde görüntülenmesini sağlar.
Simgenin özelliklerini bulun ve girin, önceden yüklü bir kalp görüntüsüne referans (istendiğinde kendi görüntünüzü ithal edip kullanabilirsiniz ve varlık kimliğini kullanabilirsiniz).
Simgenin ImageLabel daima 1:1 oranında kaldığından emin olmak için, bir UIAspectRatioConstraint ekleyin.Bu sınırı aspekt oranını kontrol etmek için özelleştirilebilir özelliklere sahip olmasına rağmen, varsayılan değerlerini bozulmadan bırakabilirsiniz.
Simge seçilerek, son görünüm ve konumu değiştirerek bitirin: değiştirilen özellikler:
- AnchorPoint = 0.5, 0.5 (merkez sabiti)
- BackgroundTransparency = 1 (yüzde 100 şeffaf)
- Position = 0, 0, 0.5, 0 (metrenin sol tarafı ve dikey orta)
- = ( MeterBar çerçevesinin genel boyutunun %200'ü, 1:1 ile sınırlandırıldı)
Boyutu sınırla
Bir ölçek yüksekliği (5%) modern telefon ekranlarında veya oyun monitörlerinde iyi görünürken, sayaç tablet ekranlarında veya daha eski telefonlarda biraz fazla görünebilir.Bunu, Cihaz Emülatörü dan bir tablet gibi iPad 7. Nesil emüle ederek kontrol edebilirsiniz.


Sayaç çubuğunun yüksekliğini daha geniş ekranlarla daha tutarlı tutmak için, maksimum piksel yüksekliğini sınırlandırmak için bir UISizeConstraint uygulayabilirsiniz.
Bir UISizeConstraint MeterBar çerçevesine yerleştirin.
Yeni sınır seçildiğinde, yüksekliğini sınırlandırmak için MaxSize özelliklerini inf, 20 20 piksele ayarlayın, genişlik sınırlaması uygularken.
Şimdi, sayaç çubuğu daha geniş ve daha yüksek ekranlar arasında daha tutarlı bir yükseklik korur.

Varsayılan sağlık ölçerini değiştir
Roblox deneyimleri, karakterlere hasar verildiğinde görünür olan varsayılan bir sağlık ölçeği içerir.Varsayılan sayacı görünür durumda tutarsanız, özel sayacı yeniden yapılacak ve potansiyel olarak üzerine geçecektir.

Varsayılan sayacı devre dışı bırak
Varsayılan sağlık sayacını devre dışı bırakmak için, istemci kodu ( LocalScript ) içinde StarterPlayerScripts çağrılan StarterGui:SetCoreGuiEnabled() 'yi kullanacaksınız.
Araştırıcı penceresinde, konteyneri genişletin ve içindeki konteyneri bulun.
Konteyere yeni bir LocalScript ekleyin ve amacını tanımlamak için onu HideDefaultHealthMeter olarak yeniden adlandırın.Yerel oyuncu bir deneyime katıldığında StarterPlayerScripts içindeki kodlar otomatik olarak çalışır, böylece sürekli olarak ölçmeyi gizleyen bir kripti yürütmek için ideal bir konteyner haline gelir
Yeni bir senaryo eklediğinizde, otomatik olarak yeni bir senaryo editörü sekmesinde açılır (eğer öyle değilse, Gezgini penceresindeki senaryoyu iki kez tıklayın).
Aşağıdaki kodu HideDefaultHealthMeter scriptinin içine yapıştırın:
Varsayılan Sağlık Ölçerini Gizlelocal StarterGui = game:GetService("StarterGui")-- Varsayılan sağlık ölçerini gizleStarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)Kod AçıklamasıSatır Amaç 1 Özel sağlık sayacını oluşturduğunuz aynı çekirdek hizmetine , StarterGui , temsil eden bir referans alır, içeriği ise deneyime katılan her oyuncu için PlayerGui konteynere kopyalanır. 4 Hizmetin SetCoreGuiEnabled() yöntemini çağırır ve varsayılan sağlık ölçerinin devre dışı bırakılmasını talimat eder (false).
Deneyimi şimdi oynayıp hasar alırsanız, varsayılan sayacın devre dışı ve gizli olduğunu fark edeceksiniz (bir sonraki bölümde özel sayacı sağlık değişikliklerini yansıtmak için kodlayacaksınız sağlık değişikliklerini yansıtmak için kodlayacaksınız).

Sağlık değişikliklerini dinle
Tüm varsayılan Roblox karakter modelleri, yürüme/koşma hızını ayarlamak ve sağlığını yönetmek gibi özel davranışlar ve işlevler sağlayan bir Humanoid sınıfı içerir.Health sunucudaki değişiklikler yeniden yapılır her oyuncunun müşterisine ve özelleştirilmiş sağlık ölçeğinin boyutunu ve rengini güncelleştirmek için bu değişiklikleri tespit edebilirsiniz.
Araştırıcı penceresinde, **** içindeki StarterCharacterScripts konteyneri bulun StarterPlayer .
Konteyere yeni bir LocalScript ekleyin ve amaçlarını tanımlamak için onu GüncellemeÖzelÖlçer olarak yeniden adlandırın.oyuncukarakteri her yeniden doğduğunda StarterCharacterScripts içindeki kodlar otomatik olarak çalışır, böylece her yeniden doğuşta sağlık ölçerini tamamen sıfırlayan bir senaryo çalıştırmak için ideal bir konteyner haline gelir
UpdateCustomMeter komutunun editör penceresinde, aşağıdaki kodu yapıştırın:
GüncellemeÖzelÖlçerlocal Players = game:GetService("Players")-- Yerel oyuncu, karakter ve insansıza referanslocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Metre çubuğu iç çerçevesine referanslocal playerGui = player:WaitForChild("PlayerGui")local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill-- Düzgün sıra renkleri (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)}-- Bölümlü noktadan pencerede renk alma işlevi Gradient sequencer'dan renk almalocal function getColorFromSequence(fraction: number): Color3-- Gradyanın her rengi bir bölümün başlangıcını ve/veya sonunu tanımlarlocal numSections = #gradient - 1-- Her bölüm 1'in bir kısmını temsil ederlocal sectionSize = 1 / numSections-- Talep edilen bölümün hangi bölüme düştüğünü belirleyinlocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Bölümün başında ve sonunda renkleri alınlocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Kesimin bölüm içinde 0 ile 1 arasında bir sayı olmasını normalleştirlocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Normalize edilmiş bölüme dayalı başlangıç ve bitiş arasında Lerpreturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Yeni sağlığı maksimumun yüzdesi olarak hesaplalocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Barı yeni boyut/renk hedeflerine ayarlameterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)end-- Humanoit sağlığına yönelik değişiklikleri dinlehumanoid.HealthChanged:Connect(onHealthChanged)-- Başlangıçta (veya sıfırla) çubuk boyutunu/renğini mevcut sağlığa ayarlayınonHealthChanged()Kod AçıklamasıHatlar Amaç 4 ‑ 6 Yerel Player , onların Character modeline ve içindeki Humanoid sınıfına referans alır. 9 ‑ 10 Ölçenin İçeri Doldurma nesnesine referans alır, ki bu nesne karakterin sağlığı değiştiğinde yeniden boyutlandırılıp renklendirilmelidir. 13 ‑ 19 Ölçümü çeşitli noktalarda yeniden renklendirmek için beş renkli bir dizi (kırmızı, turuncu, sarı, limon, yeşil) ilan eder; örneğin, %100 sağlık için yeşil, %50 için sarı, %0 için kırmızı veya anahtarlar arasındaki herhangi bir bölümde bir karışım. 22 ‑ 41 Herhangi birgradient renk anahtar noktası arasındaki renk karışımını döndüren yardımcı işlev. 43 ‑ 50 Sağlığa yapılan herhangi bir değişikliği ele alan işlev.Burada, yeni sağlığı karakterin MaxHealth yüzdesi olarak hesaplar, Doldurma içeri yüzdesini bu ölçek yüzdesine yeniden boyutlandırır ve getColorFromSequence() fonksiyonundan dönen renge yeniden boyutlandırır. 53 Sunucudan yinelenen değişiklikleri tespit eden ana etkinlik bağlantısı ve Health``onHealthChanged(). 56 Başlangıçta (karakter oluşturma veya yeniden oluşturma sırasında) onHealthChanged() fonksiyonunu boyuta ve renge Doldurma içi ayarlar, doğru yüzdeye.Tipik olarak bu, tüm genişlik ve yeşil olacaktır.
Deneyimi şimdi test ederseniz, karakter hasar gördüğünde ölçek ve rengin her ikisinin de doğru bir şekilde güncellendiğini fark edeceksiniz:
Ölçek çubuğunu animasyonlaştır
Özel ölçüye ek olarak Polonya düzeyi eklemek için, ölçü çubuğunun boyutunu ve rengini ½ saniye boyunca yavaş yavaş değiştiren geçişle sağlık değişikliklerini animasyonlaştırabilirsiniz.
Daha önce düzenlediğiniz UpdateCustomMeter senaryosu için kod editörü sekmesine erişin.
Tüm satırları seçin ( CtrlA veya ⌘A ) ve ardından aşağıdaki kodla yapıştırın ( CtrlV veya ⌘V ) :
GüncellemeÖzelÖlçerlocal Players = game:GetService("Players")local TweenService = game:GetService("TweenService")-- Yerel oyuncu, karakter ve insansıza referanslocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Geçici özelliklerlocal tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)-- Metre çubuğu iç çerçevesine referanslocal playerGui = player:WaitForChild("PlayerGui")local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill-- Düzgün sıra renkleri (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)}-- Bölümlü noktadan pencerede renk alma işlevi Gradient sequencer'dan renk almalocal function getColorFromSequence(fraction: number): Color3-- Gradyanın her rengi bir bölümün başlangıcını ve/veya sonunu tanımlarlocal numSections = #gradient - 1-- Her bölüm 1'in bir kısmını temsil ederlocal sectionSize = 1 / numSections-- Talep edilen bölümün hangi bölüme düştüğünü belirleyinlocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Bölümün başında ve sonunda renkleri alınlocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Kesimin bölüm içinde 0 ile 1 arasında bir sayı olmasını normalleştirlocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Normalize edilmiş bölüme dayalı başlangıç ve bitiş arasında Lerpreturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Yeni sağlığı maksimumun yüzdesi olarak hesaplalocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Barı yeni boyut/renk hedeflerine kaydırlocal tweenGoal = {Size = UDim2.new(healthFraction, 0, 1, 0),BackgroundColor3 = getColorFromSequence(healthFraction)}local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)meterBarTween:Play()end-- Humanoit sağlığına yönelik değişiklikleri dinlehumanoid.HealthChanged:Connect(onHealthChanged)-- Başlangıçta (veya sıfırla) çubuk boyutunu/renğini mevcut sağlığa ayarlayınonHealthChanged()Anahtar Ekleme/DeğişiklikleriHatlar Amaç 2 Senaryo içinde tweening işlevini uygulamak için bir referans alır TweenService ile. 10 Kasıtlı gençliğin süresini, TweenInfo ve kolaylaştırma yönünü tanımlayan bir yapıcı oluşturur. 52 ‑ 57 Sadece önceki sürümde olduğu gibi çubuğun boyutunu ve rengini ayarlamak yerine, hedef boyut/renge sahip bir tablo ilan eder, ve parametlerini kullanarak yeni bir geçiş oynatır ve yeni geçişi çalar.
Deneyimi şimdi test ederseniz, sağlıkta her bir değişiklik arasında özel ölçek gençlerinin farkına varacaksınız:
Bir hasar etkisi ekleyin
Varsayılan sağlık ölçer sistemi, karakter hasar gördüğünde ekran kenarlarında kısa, ince bir kırmızı ton içerir.Varsayılan ölçüyü devre dışı bırakarak bu etki kaldırılır, ancak kendi uygulamanızla değiştirebilirsiniz.
Daha önce düzenlediğiniz UpdateCustomMeter senaryosu için kod editörü sekmesine erişin.
Tüm satırları seçin ve aşağıdaki kodla üzerlerine yapıştırın:
GüncellemeÖzelÖlçerlocal Workspace = game:GetService("Workspace")local Players = game:GetService("Players")local TweenService = game:GetService("TweenService")-- Yerel oyuncu, karakter ve insansıza referanslocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Geçici özelliklerlocal tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)-- Depolama/kaydetme karakter sağlığı değişkenilocal cachedHealth = humanoid.Health / humanoid.MaxHealth-- Oyuncu kamerası içinde renk düzeltme etkisi al (veya yeni bir etki oluştur)local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)colorCorrection.Name = "DamageColorEffect"-- Metre çubuğu iç çerçevesine referanslocal playerGui = player:WaitForChild("PlayerGui")local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill-- Düzgün sıra renkleri (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)}-- Bölümlü noktadan pencerede renk alma işlevi Gradient sequencer'dan renk almalocal function getColorFromSequence(fraction: number): Color3-- Gradyanın her rengi bir bölümün başlangıcını ve/veya sonunu tanımlarlocal numSections = #gradient - 1-- Her bölüm 1'in bir kısmını temsil ederlocal sectionSize = 1 / numSections-- Talep edilen bölümün hangi bölüme düştüğünü belirleyinlocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Bölümün başında ve sonunda renkleri alınlocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Kesimin bölüm içinde 0 ile 1 arasında bir sayı olmasını normalleştirlocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Normalize edilmiş bölüme dayalı başlangıç ve bitiş arasında Lerpreturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Yeni sağlığı maksimumun yüzdesi olarak hesaplalocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Barı yeni boyut/renk hedeflerine kaydırlocal tweenGoal = {Size = UDim2.new(healthFraction, 0, 1, 0),BackgroundColor3 = getColorFromSequence(healthFraction)}local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)meterBarTween:Play()-- Yeni sağlık bellekteki sağlıktan daha düşükse hasar etkisini gösterif healthFraction < cachedHealth then-- Yeni sağlık değerini önbelleğe alcachedHealth = healthFraction-- Tweening öncesi ilk renk olarak renk düzeltmesini kırmızıya ayarlayıncolorCorrection.TintColor = Color3.fromRGB(255, 25, 25)colorCorrection.Saturation = 2.5-- Renkten beyaza geri geç (normalden nötr ve renk değişikliği yok)local colorCorrectionTweenGoal = {TintColor = Color3.fromRGB(255, 255, 255),Saturation = 0}local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)colorCorrectionTween:Play()endend-- Humanoit sağlığına yönelik değişiklikleri dinlehumanoid.HealthChanged:Connect(onHealthChanged)-- Başlangıçta (veya sıfırla) çubuk boyutunu/renğini mevcut sağlığa ayarlayınonHealthChanged()Anahtar eklemeleri/değişiklikleriHatlar Amaç 14 Bir değişiklik arasında karakterin sağlık miktarını izlemek için bir doldurucu referansı ayarlar ( cachedHealth ) ve bir değişikliğin daha düşük olup olmadığını karşılaştırabilirsiniz. 17 ‑ 18 İlk karakter oluşumunda, oyuncunun mevcut Camera içinde yeni bir ColorCorrectionEffect oluşturur veya daha sonraki yeniden doğuşlarda aynı örneğe bir referans alır.Bu post-izleme etkisini oyuncunun kamerasına ebeveynlik yaparak, yalnızca yerel ekrana uygulanır, sunucudaki her oyuncunun ekranına değil. 68 ‑ 83 Öncelikle, sağlık değişiminin cachedHealth değerinden daha düşük olduğunu onaylamak için koşullu bir kontrol yapar ve hasar gösterir; eğer öyleyse, yeni değere cachedHealth ayarlar.Sonra, ColorCorrectionEffect tonunu daha yüksek sättenme ile [255, 25, 25] (kırmızı) olarak ayarlar, ardından tonu nötr beyazın varsayılana geri döndürür ([255, 255, 255] ) hiç sättenme olmadan.
Deneyimi şimdi oynarsanız, karakter hasar gördüğünde ekranın kısa süreliğine kırmızı parladığını fark edeceksiniz: