HUD metreleri oluştur

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

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.

In-game view showing custom health meter in upper-right region.

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.

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

  2. Test sekmesinden, Cihaz aracını aç/kapat.

    Device button indicated in Test tab
  3. 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.

    Device Emulator settings options indicated at top of viewport window.

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.

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

Boş bir ScreenGui eklemek için:

  1. Araştırıcı penceresinde, konteynerini bulun.

    Explorer window showing the StarterGui container.
  2. Konteynere tıklayın, ⊕ düğmesine tıklayın ve bir ScreenGui girin.

    ScreenGui inserted into the StarterGui container.
  3. Yeni konteyneri HUDContainer olarak yeniden adlandırın, böylece amacını yansıtsın.

    ScreenGui renamed to HUDContainer.

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.

Mobile device showing Roblox top bar buttons and device cutout.

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.

Mobile device showing the core UI safe area.

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.

ScreenInsets set to CoreUISafeInsets.
  1. Kâşif penceresinde HUDContainer seçin.

    Explorer window showing the HUDContainer selected.
  2. Özellikler penceresinde, ScreenInsets özelliğini DeviceSafeInsets olarak ayarlayın.

    ScreenInsets set to DeviceSafeInsets in the Properties window.

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.

Screen container with padding around all edges.

Bir UI konтейнеру yastırma uygulamak için bir yol, bir UIPadding değiştirici ekleyerek gerçekleşir:

  1. Bir UIPadding değiştiriciyi HUDContainer 'a ekleyin.

    HUDContainer with UIPadding modifier inserted.
  2. 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.

    Properties window showing the UIPadding modifier with 0, 16 set for all edges.

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.

Basic components used for the health meter.

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.

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

    New frame in viewport.
  2. Yeni çerçeve instansını Hız Çubuğu olarak yeniden adlandırın.

    New frame inserted and renamed to MeterBar.

Ç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:

  • Scale değerleri, eşleşen eksen boyunca konteynerin büyüklüğünün yüzde kısmını temsil eder, herhangi bir Offset değerine ekleyici.
  • Offset değerleri, nesneyi ilgili eksene kaydırmak için kaç piksel ve herhangi bir Scale değerin eklenmesini temsil eder.

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.

Scale ranges for the X and Y axes of a container.

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.

Frame anchor point in its upper-right corner.
  1. Kâşif penceresinde, daha önce eklediğiniz MeterBar çerçevesini seçin.

    Explorer window showing the MeterBar frame selected.
  2. Özellikler penceresinde, 1, 0, 0, 0 için Position ve basın Enter .Stüdyo, parantezleri otomatik olarak ekleyerek UDim2 şeklini oluşturacaktır.

  3. 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.

    Frame repositioned in upper-right corner of container.

Ç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.

  1. Metre çubuğu çerçevesi seçildiğinde, Özellikler penceresine erişin ve Size özelliğine yolunuz.

  2. 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.

    Frame resized to 35% wide and 5% tall.

Ç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.

Frame styled with opacity, border, and rounded corners.
  1. 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.

  2. 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.

    Frame restyled with dark background and 25% opacity.
  3. Bir nesnesini girin, çerçeveye özelleştirilebilir bir çizgi ekleyen güçlü bir UI değiştirici.

    Explorer window showing the MeterBar frame with a child UIStroke modifier.
  4. Yeni UIStroke seçilerek, aşağıdaki özellikleri ayarlayın:

    Frame restyled with a UIStroke modifier.

Sayaç çerçevesinin stilini bitirmek için, kenarları keskin bir dikdörtgen yerine bir "hap" şekline dönüştürmek için yuvarlayabilirsiniz.

  1. Bir UICorner örneğini MeterBar çerçevesine yerleştirin.

    Explorer window showing the MeterBar frame with a child UICorner modifier.
  2. 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.

    Frame corners rounded with a UICorner modifier.

İç 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.

Inner fill frame added to parent frame to represent the character's variable health.
  1. Bir çocuk Frame MeterBar çerçevesine ekleyin.

  2. Yeni çerçeve instansını Dahili Doldurma olarak yeniden adlandırın.

    Explorer window showing the parent MeterBar frame with a child frame named InnerFill.
  3. İçerik Doldurma seçilerek, aşağıdaki özellikleri ayarlayın:

    Ç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.

    Inner fill frame repositioned and resized to fill entire parent frame.
  4. Ebeveyn çerçevenin "hap" şeklini eşleştirmek için, Doldurma içine ek bir UICorner ekleyin.

    Explorer window showing the InnerFill frame with a child UICorner modifier.
  5. Yeni düzenleyici seçilerek, ebeveyn sayfasının "hap" şeklini eşleştirmek için özelliklerini ayarlayın MeterBar .

    Inner fill frame corners rounded with a UICorner modifier.
  6. 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).

    Inner fill frame recolored green to represent good health.

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.

Image label of heart added to more clearly indicate a health meter.
  1. MeterBar çerçevesine bir ekleyin. Bu nesne, Roblox'a bir resim varlığı olarak yüklenen 2D görüntü öğesini uygulamanıza izin verir.

  2. Yeni etiket örneğinin adını Simge olarak değiştirin.

    Explorer window showing the MeterBar frame with a child ImageLabel.
  3. 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.

    Properties window showing the ZIndex of the ImageLabel set to 2.
  4. 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).

    Image label of heart added to MeterBar frame.
  5. 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.

    Explorer window showing the ImageLabel with a child UIAspectRatioConstraint.
  6. 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ı)
    Image label of heart repositioned and resized with background fill made transparent.

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.

Device Emulator set to emulate a tablet device. Emulation on tablet device with meter bar taller than desired.

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.

  1. Bir UISizeConstraint MeterBar çerçevesine yerleştirin.

    Explorer window showing the MeterBar frame with a child UISizeConstraint.
  2. 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.

    Properties window showing the MaxSize of the UISizeConstraint set to inf, 20.

Şimdi, sayaç çubuğu daha geniş ve daha yüksek ekranlar arasında daha tutarlı bir yükseklik korur.

Emulation on phone.

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.

Default health meter overlapping and duplicating the custom health meter.

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.

  1. Araştırıcı penceresinde, konteyneri genişletin ve içindeki konteyneri bulun.

    Explorer window showing the StarterPlayerScripts container inside the StarterPlayer container.
  2. 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

    Explorer window showing the new HideDefaultHealthMeter client script inside the StarterPlayerScripts container.
  3. 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 Gizle

    local StarterGui = game:GetService("StarterGui")
    -- Varsayılan sağlık ölçerini gizle
    StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)
    SatırAmaç
    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.
    4Hizmetin 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).

Default health meter disabled.

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.

  1. Araştırıcı penceresinde, **** içindeki StarterCharacterScripts konteyneri bulun StarterPlayer .

    Explorer window showing the StarterCharacterScripts container inside the StarterPlayer container.
  2. 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

    Explorer window showing the new UpdateCustomMeter client script inside the StarterCharacterScripts container.
  3. UpdateCustomMeter komutunun editör penceresinde, aşağıdaki kodu yapıştırın:

    GüncellemeÖzelÖlçer

    local Players = game:GetService("Players")
    -- Yerel oyuncu, karakter ve insansıza 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
    -- 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 alma
    local function getColorFromSequence(fraction: number): Color3
    -- Gradyanın her rengi 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
    -- Talep edilen bölümün hangi bölüme düştüğünü belirleyin
    local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
    -- Bölümün başında ve sonunda renkleri alın
    local 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ştir
    local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
    -- Normalize edilmiş bölüme dayalı başlangıç ve bitiş arasında Lerp
    return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
    end
    local function onHealthChanged()
    -- Yeni sağlığı maksimumun yüzdesi olarak hesapla
    local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
    -- Barı yeni boyut/renk hedeflerine ayarla
    meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
    meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
    end
    -- Humanoit sağlığına yönelik değişiklikleri dinle
    humanoid.HealthChanged:Connect(onHealthChanged)
    -- Başlangıçta (veya sıfırla) çubuk boyutunu/renğini mevcut sağlığa ayarlayın
    onHealthChanged()
    HatlarAmaç
    46Yerel Player , onların Character modeline ve içindeki Humanoid sınıfına referans alır.
    910Ölçenin İçeri Doldurma nesnesine referans alır, ki bu nesne karakterin sağlığı değiştiğinde yeniden boyutlandırılıp renklendirilmelidir.
    1319Ö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.
    2241Herhangi birgradient renk anahtar noktası arasındaki renk karışımını döndüren yardımcı işlev.
    4350Sağ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.
    53Sunucudan yinelenen değişiklikleri tespit eden ana etkinlik bağlantısı ve Health``onHealthChanged().
    56Baş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.

  1. Daha önce düzenlediğiniz UpdateCustomMeter senaryosu için kod editörü sekmesine erişin.

  2. 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çer

    local Players = game:GetService("Players")
    local TweenService = game:GetService("TweenService")
    -- Yerel oyuncu, karakter ve insansıza referans
    local player = Players.LocalPlayer
    local character = player.Character
    local humanoid = character:WaitForChild("Humanoid")
    -- Geçici özellikler
    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
    -- 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 alma
    local function getColorFromSequence(fraction: number): Color3
    -- Gradyanın her rengi 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
    -- Talep edilen bölümün hangi bölüme düştüğünü belirleyin
    local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
    -- Bölümün başında ve sonunda renkleri alın
    local 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ştir
    local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
    -- Normalize edilmiş bölüme dayalı başlangıç ve bitiş arasında Lerp
    return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
    end
    local function onHealthChanged()
    -- Yeni sağlığı maksimumun yüzdesi olarak hesapla
    local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
    -- Barı yeni boyut/renk hedeflerine kaydır
    local 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 dinle
    humanoid.HealthChanged:Connect(onHealthChanged)
    -- Başlangıçta (veya sıfırla) çubuk boyutunu/renğini mevcut sağlığa ayarlayın
    onHealthChanged()
    HatlarAmaç
    2Senaryo içinde tweening işlevini uygulamak için bir referans alır TweenService ile.
    10Kasıtlı gençliğin süresini, TweenInfo ve kolaylaştırma yönünü tanımlayan bir yapıcı oluşturur.
    5257Sadece ö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.

  1. Daha önce düzenlediğiniz UpdateCustomMeter senaryosu için kod editörü sekmesine erişin.

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

    GüncellemeÖzelÖlçer

    local Workspace = game:GetService("Workspace")
    local Players = game:GetService("Players")
    local TweenService = game:GetService("TweenService")
    -- Yerel oyuncu, karakter ve insansıza referans
    local player = Players.LocalPlayer
    local character = player.Character
    local humanoid = character:WaitForChild("Humanoid")
    -- Geçici özellikler
    local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
    -- Depolama/kaydetme karakter sağlığı değişkeni
    local 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 referans
    local 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 alma
    local function getColorFromSequence(fraction: number): Color3
    -- Gradyanın her rengi 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
    -- Talep edilen bölümün hangi bölüme düştüğünü belirleyin
    local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
    -- Bölümün başında ve sonunda renkleri alın
    local 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ştir
    local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
    -- Normalize edilmiş bölüme dayalı başlangıç ve bitiş arasında Lerp
    return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
    end
    local function onHealthChanged()
    -- Yeni sağlığı maksimumun yüzdesi olarak hesapla
    local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
    -- Barı yeni boyut/renk hedeflerine kaydır
    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 bellekteki sağlıktan daha düşükse hasar etkisini göster
    if healthFraction < cachedHealth then
    -- Yeni sağlık değerini önbelleğe al
    cachedHealth = healthFraction
    -- Tweening öncesi ilk renk olarak renk düzeltmesini kırmızıya ayarlayın
    colorCorrection.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()
    end
    end
    -- Humanoit sağlığına yönelik değişiklikleri dinle
    humanoid.HealthChanged:Connect(onHealthChanged)
    -- Başlangıçta (veya sıfırla) çubuk boyutunu/renğini mevcut sağlığa ayarlayın
    onHealthChanged()
    HatlarAmaç
    14Bir 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.
    1718İ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.
    6883Ö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: