Buat meter HUD

A HUD atau Tampilan Kepala-Ke-Kepala adalah serangkaian elemen UI yang selalu terlihat atau diakses selama gameplay, seperti tampilan skor, meteran kesehatan, dan tombol menu.Memasukkan HUD sangat penting untuk sebagian besar pengalaman karena menampilkan informasi yang membantu pemain berhasil dalam tujuan permainan mereka.

Elemen HUD umum adalah meter kesehatan dengan ikon di sebelah kiri yang dapat diadaptasi menjadi bilah waktu, bilah kemajuan, atau serupa.

Menggunakan Stasiun Luar Angkasa Berbahaya sebagai tempat awal dan UI Fundamentals - HUD Meter sebagai tempat referensi selesai, tutorial ini menunjukkan:

• Pengaturan dan penggunaan Emulator Perangkat untuk menguji desain Anda di banyak layar emulasi.
• Penggunaan StarterGui sebagai kontainer desain dan penyimpanan.
• Cara menempatkan/mengukur elemen UI di sekitar kontrol dan perangkat bawaan Roblox, seperti notch kamera pada ponsel modern.
• Cara mengganti meter kesehatan Roblox default dengan meter Anda sendiri dan menghubungkannya ke levelkesehatan karakter.
• Cara menganimasikan bagian tengah meter kesehatan dan mengatur warnanya di antara lima titik kontrol gradien warna (merah, oranye, kuning, lime, hijau).

Aktifkan Emulator Perangkat

Roblox secara inheren berbasis platform silang, karena pemain dapat menemukan dan bergabung dengan pengalaman di PC atau konsol, lalu kemudian mengambil telepon mereka dan melanjutkan di tempat mereka mati.Perangkat seluler (telepon dan tablet) memiliki jumlah ruang layar paling sedikit, jadi penting agar elemen UI Anda pas di layar yang lebih kecil dan bahwa mereka jelas terlihat oleh pemain.

Cara terbaik untuk menguji desain UI di berbagai platform adalah Emulator Perangkat Studio.Alat ini menyediakan pilihan prasetel perangkat dan memungkinkan Anda menambahkan prasetel khusus Anda sendiri.

1. Buka templat Stasiun Luar Angkasa Berbahaya di Studio.

   Edit di Studio

2. Dari tab Tes , beralih pada alat Perangkat .

   

3. Dari bilah langsung di atas jendela utama, pilih emulasi telepon seperti iPhone X atau Samsung Galaxy A51 .Kemudian, atur ukuran pandangan menjadi Pas ke Jendela untuk memanfaatkan ruang maksimum di Studio.

   

Buat wadah layar

Wadah ScreenGui berisi objek UI ( GuiObjects ) untuk ditampilkan di layar pemutar (dalam tutorial ini, seluruhnya meter kesehatan).Untuk menampilkan ScreenGui dan objek anaknya kepada setiap pemain yang bergabung dengan pengalaman, letakkan di dalam kontainer StarterGui.Ketika pemain bergabung dan karakter mereka pertama kali muncul, ScreenGui dan isinya klon ke dalam wadah PlayerGui untuk pemain itu, berlokasi di dalam wadah Players .

Untuk menyisipkan kosong ScreenGui :

1. Di jendela Explorer , temukan kontainer StarterGui.

   

2. Pasang mouse di atas wadah, klik tombol ⊕, dan masukkan ScreenGui.

   

3. Ganti nama kontainer baru HUDContainer untuk mencerminkan tujuannya.

   

Manfaatkan area yang aman

Telepon modern mengambil keuntungan dari seluruh layar tetapi biasanya termasuk notch, cutout, dan elemen lain yang menempati ruang layar.Setiap pengalaman Roblox juga termasuk kontrol bilah atas untuk akses cepat ke menu utama , obrolan, papan peringkat, dan banyak lagi.

Untuk memastikan pemain dapat melihat dan mengakses semua UI tanpa hambatan, Roblox menyediakan properti ScreenInsets yang mengontrol area aman ini untuk konten dari ScreenGui .Setiap objek UI yang Anda posisikan di dalam ScreenGui adalah relatif terhadap batas insersi.

Sementara default dari CoreUISafeInsets memastikan semua objek UI tetap jelas dari UI Roblox dan pemotongan perangkat, DeviceSafeInsets dapat menjadi pilihan yang lebih baik untuk memanfaatkan ruang layar terbatas, seperti yang ditunjukkan di bawah ini.

1. Di jendela Explorer , pilih HUDContainer .

   

2. Di jendela Properti, atur properti ScreenInsets ke DeviceSafeInsets.

   

Tetapkan pengisi ujung

Dengan ScreenInsets diatur ke DeviceSafeInsets , konten sekarang dapat diperpanjang langsung ke ujung atas fisik layar.Namun, jumlah kecil padding dapat membantu mendorong meter kesehatan (dan objek lain di dalam kontainer) sedikit menjauh dari tepi layar untuk tampilan yang lebih bersih dan untuk mencegah mereka dipotong.

Salah satu cara untuk menerapkan padding ke kontainer UI adalah melalui penyisipan modifikasi UIPadding:

1. Masukkan modifikasi UIPadding ke dalam HUDContainer .

   

2. Dengan objek baru UIPadding yang dipilih, masukkan nilai 0, 16 untuk semua sisi kontainer ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Ini berlaku pada pengisi 16 piksel di sekitar wadah, terlepas dari resolusi layar.

   

Membangun meter kesehatan

Dengan kontainer layar yang dikonfigurasi , Anda dapat mulai membangun meter kesehatan menggunakan objek UI Roblox seperti frame dan label gambar .

Buat frame orangtua

Mirip dengan aplikasi desain seperti Figma dan Photoshop, Frame di Roblox berfungsi sebagai wadah untuk objek UI lainnya.Untuk tutorial ini, seluruh meter kesehatan akan berada dalam satu frame orang tua, sehingga mudah untuk dipindahkan di berbagai tata letak HUD.

1. Sisipkan Frame ke dalam HUDContainer . Frame baru muncul di sudut kiri atas sebagai kotak putih kosong.

   

   Jika frame baru tidak muncul di jendela pandang, pastikan Anda telah menyalakan Overlay GUI dari widget Opsi Visualisasi di sudut kanan atas tampilan 3D, atau menyalakan Visibilitas UI dari tab Tampilan.

2. Ganti nama instansi frame baru menjadi MeterBar .

   

Posisikan frame

Di Roblox, posisi objek UI diwakili oleh set koordinat UDim2 yang berisi Scale dan Offset nilai untuk kedua sumbu X dan Y :

• Scale nilai mewakili persentase dari ukuran wadah di sepanjang sumbu yang sesuai, tambahan dari nilai apa pun Offset .
• Offset nilai mewakili berapa banyak piksel untuk bergeser objek pada sumbu yang sesuai, tambahan dari setiap nilai Scale.

Untuk menempatkan objek UI di sudut kanan atas kontainer layar, Scale adalah pendekatan terbaik karena nilai X dari 1 (100%) mewakili ujung kanan kontainer, terlepas dari ukuran piksel fisik layar.Demikian pula, nilai skala Y dari 0 (0%) mewakili ujung atas dari wadah.

Selain itu, Anda perlu menetapkan titik anker kanan atas untuk menentukan titik asalnya bagi frame orang tua untuk mendefinisikan titik asalnya.Nilai yang dapat diterima berada di antara 0 dan 1 , relatif terhadap ukuran objek, sehingga nilai anker 1, 0 menempatkan titik anker frame di sudut kanan atas.

1. Di jendela Explorer , pilih frame MeterBar yang Anda sisipkan sebelumnya.

   

2. Di jendela Properti, masukkan untuk dan tekan .Studio akan secara otomatis menambahkan braket untuk membentuk dari .

3. Masukkan 1, 0 untuk properti AnchorPoint.Frame sekarang harus ditempatkan di sudut kanan atas dari area perlindungan perangkat, sedikit mencekung dari tepi sebagai hasil dari padding .

   

Ubah ukuran frame

Seperti posisi, Size dari objek UI diwakili oleh set koordinat UDim2 yang berisi Scale dan Offset nilai untuk kedua sumbu X dan Y .

Secara default, ukuran frame baru adalah {0, 100},{0, 100} , yang berarti 100 piksel di kedua lebar ( X ) dan tinggi ( Y ).Sementara nilai piksel yang ketat berguna dalam kasus tertentu, banyak elemen UI skala lebih responsif di beberapa layar saat disetel ke persentase dari ukuran kontainer layar keseluruhan.

1. Dengan frame MeterBar dipilih, akses jendela Properti dan navigasikan ke properti Size.

2. Masukkan nilai 0.35, 0, 0.05, 0 untuk menetapkan ukuran persentase 35% lebar dan 5% tinggi tanpa tambahan offset piksel.

   

Gaya bingkai

Secara default, Frames diisi dengan putih solid.Meter kesehatan akhir harus memiliki isi yang lebih gelap dan sedikit buram, serta garis berwarna gelap, sehingga menonjol lebih baik di latar belakang terang dan gelap.

1. Dengan frame MeterBar dipilih, masukkan 0 untuk properti BackgroundColor3.Studio akan secara otomatis mengubahnya menjadi nilai RGB dari [0, 0, 0] . .

2. Masukkan 0.75 untuk properti BackgroundTransparency.Di Roblox, transparansi berkisar dari 0 untuk benar-benar tidak transparan hingga 1 untuk benar-benar transparan, jadi 0.75 sama dengan 25% opakitas di aplikasi lain seperti Figma atau Photoshop.

   

3. Sisipkan objek UIStroke yang kuat, modifikasi UI yang kuat yang menambahkan garis kustomisasi ke frame.

   

4. Dengan UIStroke baru yang dipilih, atur properti berikut:

   • Thickness = 3
   • Transparency = 0.25 (75% tidak transparan)

   

Untuk menyelesaikan gaya meter frame, Anda dapat membulatkan sudut untuk membentuk bentuk "pill" bukan segi tegas.

1. Masukkan instansi UICorner ke dalam frame MeterBar .

   

2. Dengan pilihan baru UICorner yang dipilih, atur CornerRadius untuk .Menggunakan skala nilai (50%) alih-alih nilai piksel karena memastikan kurva bulat penuh tidak peduli seberapa tinggi atau lebar wadah menjadi.

   

Buat isi dalam

Sekarang bahwa frame meter kesehatan sudah lengkap, Anda dapat menambahkan bagian isi internal untuk mewakili kesehatan variabel karakter.Karena hanya perlu menjadi wilayah yang diisi padat, anak kedua Frame di dalam frame orang tua cocok.

1. Masukkan anak Frame ke dalam frame MeterBar .

2. Ganti nama instansi frame baru menjadi InnerFill .

   

3. Dengan InnerFill dipilih, atur properti berikut:

   • AnchorPoint = 0, 0.5 (ujung kiri dan pusat vertikal)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Karena anak-anak frame ditempatkan dan diukur relatif terhadap orangtuanya, penggunaan skala membuat frame dalam mengisi lebar dan tinggi penuh orangtuanya, mulai dari ujung kiri orangtuanya.

   

4. Untuk mencocokkan bentuk "pill" dari frame orang tua, masukkan tambahan UICorner ke dalam InnerFill .

   

5. Dengan modifikasi baru yang dipilih, atur propertinya ke untuk mencocokkan bentuk "pill" dari frame orang tua MeterBar .

   

6. Untuk lebih representatif menunjukkan bahwa meter penuh menunjukkan kesehatan yang baik, pilih InnerFill dan atur propertinya ke (dalam tugas berikutnya, Anda akan menulis skrip warna ini untuk berubah berdasarkan kesehatan yang sebenarnya).

   

Tambahkan ikon

Untuk lebih jelas menunjukkan tujuan meter, Anda dapat menambahkan label gambar ke sisi kiri, dalam hal ini hati merah yang biasanya mewakili kesehatan atau kehidupan.

1. Masukkan ImageLabel ke dalam frame MeterBar . Objek ini memungkinkan Anda menerapkan aset gambar 2D yang telah diunggah sebagai stiker ke Roblox.

2. Ganti nama instansi label baru menjadi Ikon .

   

3. Dengan Ikon terpilih, atur properti ZIndex menjadi 2.Sementara objek UI baru yang disisipkan selalu berada di depan objek yang disisipkan sebelumnya, perubahan ini memastikan ikon selalu ditampilkan di depan elemen frame meter.

   

4. Temukan properti ikon Image dan masukkan rbxassetid://91715286435585 , referensi ke gambar hati yang diunggah sebelumnya (jika diinginkan, Anda dapat 导入 gambar Anda sendiri dan menggunakan ID asetnya).

   

5. Untuk memastikan ikon ImageLabel selalu tetap pada rasio aspek 1:1, masukkan UIAspectRatioConstraint.Meskipun batasan ini memiliki properti yang dapat disesuaikan untuk mengontrol rasio aspek, Anda dapat meninggalkan nilai defaultnya utuh.

   

6. Dengan Simbol terpilih, selesaikan penampilan dan posisi dengan mengubah properti berikut:

   • AnchorPoint = 0.5, 0.5 (pengait tengah)
   • BackgroundTransparency = 1 (100% transparan)
   • Position = 0, 0, 0.5, 0 (sisi kiri meter dan pusat vertikal)
   • Size = 2, 0, 2, 0 (200% dari ukuran keseluruhan frame MeterBar , dibatasi pada 1:1 oleh UIAspectRatioConstraint )

   

Membatasi ukuran

Sementara skala ketinggian (5%) dari 0.05 (5%) terlihat bagus di layar ponsel modern dan monitor game yang memiliki rasio aspek 16:9 atau lebih luas, meter mungkin terlihat sedikit terlalu tinggi di layar tablet dan ponsel lama.Anda dapat memeriksa ini dengan memodifikasi tablet seperti iPad Generasi ke-7 dari Emulator Perangkat .

Untuk menjaga ketinggian bilah meter lebih konsisten dengan layar yang lebih luas, Anda dapat menerapkan UISizeConstraint untuk membatasi ketinggian piksel maksimum.

1. Masukkan UISizeConstraint ke dalam frame MeterBar .

   

2. Dengan batasan baru yang dipilih, atur properti MaxSize untuk membatasi ketinggiannya menjadi 20 piksel sambil menegakkan batasan lebar tidak ada.

   

Sekarang, bilah meter mempertahankan ketinggian yang lebih konsisten antara layar yang lebih lebar dan lebih tinggi.

Ganti meter kesehatan default

Pengalaman Roblox termasuk meter kesehatan default yang menjadi terlihat ketika karakter mengalami kerusakan.Jika Anda menjaga meter default tetap terlihat, itu akan duplikasi dan mungkin tumpang tindih meter khusus.

Nonaktifkan meter default

Untuk menonaktifkan meter kesehatan default, Anda akan menggunakan skrip klien ( ) dalam yang memanggil .

1. Di jendela Explorer , perluas kontainer StarterPlayer dan temukan kontainer StarterPlayerScripts di dalamnya.

   

2. Masukkan baru LocalScript ke dalam wadah dan ganti namanya menjadi HideDefaultHealthMeter untuk menggambarkan tujuannya.Skrip dalam StarterPlayerScripts secara otomatis dijalankan saat pemain lokal bergabung dengan pengalaman, menjadikannya wadah ideal untuk menjalankan skrip yang secara permanen menyembunyikan meter default

   

3. Ketika Anda menyisipkan skrip baru, itu secara otomatis terbuka di tab editor skrip baru (jika tidak, klik ganda skrip di jendela Explorer ).

   Tempelkan kode berikut di dalam skrip HideDefaultHealthMeter :

   Sembunyikan Meter Kesehatan Dasar
   local StarterGui = game:GetService("StarterGui")
   
   -- Sembunyikan meter kesehatan default
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Penjelasan Kode

   Garis	Tujuan
   1	Mendapat referensi ke layanan inti , , yang mewakili wadah yang sama di mana Anda membuat meter kesehatan khusus dan konten klonnya ke dalam wadah untuk setiap pemain yang bergabung dengan pengalaman.
   4	Memanggil metode layanan SetCoreGuiEnabled() dan menginstruksikan meter kesehatan default untuk dinonaktifkan ( false ).

Jika Anda menguji pengalaman sekarang dan mengalami kerusakan, Anda akan melihat bahwa meter default dinonaktifkan dan tersembunyi (Anda akan menulis meter khusus untuk mencerminkan perubahan kesehatan di bagian berikutnya).

Dengarkan perubahan kesehatan

Semua model karakter Roblox default berisi kelas Humanoid yang memberikan perilaku dan fungsi khusus kepada karakter, seperti menetapkan kecepatan berjalan/lari dan mengelola kesehatannya. Health perubahan pada server bereplikasi ke klien setiap pemain dan Anda dapat mendeteksi perubahan ini untuk memperbarui ukuran dan warna meter kesehatan khusus.

1. Di jendela Explorer , temukan kontainer StarterCharacterScripts dalam StarterPlayer .

   

2. Masukkan baru LocalScript ke dalam wadah dan ganti namanya menjadi UpdateCustomMeter untuk menggambarkan tujuannya.Skrip dalam StarterCharacterScripts berjalan otomatis setiap kali karakter pemain muncul, menjadikannya wadah ideal untuk menjalankan skrip yang sepenuhnya mengatur ulang meter kesehatan pada setiap respawn.

   

3. Di jendela editor untuk skrip UpdateCustomMeter , tempelkan kode berikut:

   PerbaruiMeter Kustom
   local Players = game:GetService("Players")
   
   -- Referensi ke pemain lokal, karakter, dan humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Referensi ke frame dalam bilah meter
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, lime, hijau)
   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)
   }
   
   -- Fungsi untuk mendapatkan warna dalam urutan gradien dari titik fraksional
   local function getColorFromSequence(fraction: number): Color3
   	-- Setiap warna dalam gradien mendefinisikan awal dan/atau akhir bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Tentukan bagian mana fraksi yang diminta jatuh ke
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Dapatkan warna di awal dan akhir bagian
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisasi fraksi menjadi angka dari 0 hingga 1 dalam bagian
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp antara awal dan akhir berdasarkan fraksi normalisasi
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Hitung kesehatan baru sebagai persentase maksimum
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Atur bilah ke target ukuran/warna baru
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Dengarkan perubahan kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran bilah/warna ke kesehatan saat ini
   onHealthChanged()

   Penjelasan Kode

   Garis	Tujuan
   4 ‑ 6	Mendapat referensi ke lokal Player , model Character mereka, dan kelas Humanoid di dalamnya.
   9 ‑ 10	Mendapat referensi ke objek Isi Dalam meter yang harus diubah ukurannya dan diubah warnanya sebagai perubahan kesehatan karakter.
   13 ‑ 19	Menyatakan array dari lima warna (merah, oranye, kuning, lime, hijau) untuk mengubah meter di berbagai titik; misalnya, hijau untuk 100% kesehatan, kuning untuk 50%, merah untuk 0%, atau campuran di titik mana pun antara titik kunci.
   22 ‑ 41	Fungsi pembantu yang mengembalikan campuran warna di antara salah satu titik warna gradien.
   43 ‑ 50	Fungsi yang menangani setiap perubahan kesehatan.Di sini, ia menghitung kesehatan baru sebagai persentase dari karakter MaxHealth , mengubah ukuran Isi Interior ke persentase skala itu, dan mengubah warnanya menjadi warna yang dikembalikan dari fungsi getColorFromSequence().
   53	Koneksi acara utama event yang mendeteksi perubahan Health yang direplikasi dari server dan memanggil fungsi onHealthChanged().
   56	Awalnya (setelah spawn karakter atau respawn) memanggil fungsi onHealthChanged() untuk mengubah ukuran dan warna InnerFill ke persentase yang benar.Biasanya ini akan menjadi lebar penuh dan hijau.

Jika Anda menguji pengalaman sekarang, Anda akan melihat bahwa meter khusus dengan benar memperbarui ukuran dan warna ketika karakter mengalami kerusakan:

Animasikan bilah meter

Untuk menambahkan tingkat polish ekstra ke meter khusus, Anda dapat menganimasikan perubahan kesehatan melalui tweening , secara bertahap mengubah ukuran dan warna bilah meter lebih dari ½ detik.

1. Akses tab editor skrip untuk skrip UpdateCustomMeter yang Anda edit sebelumnya.

2. Pilih semua baris ( CtrlA atau ⌘A ) dan kemudian tempel di atasnya ( CtrlV atau ⌘V ) dengan kode berikut:

   PerbaruiMeter Kustom
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referensi ke pemain lokal, karakter, dan humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Properti remaja
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referensi ke frame dalam bilah meter
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, lime, hijau)
   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)
   }
   
   -- Fungsi untuk mendapatkan warna dalam urutan gradien dari titik fraksional
   local function getColorFromSequence(fraction: number): Color3
   	-- Setiap warna dalam gradien mendefinisikan awal dan/atau akhir bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Tentukan bagian mana fraksi yang diminta jatuh ke
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Dapatkan warna di awal dan akhir bagian
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisasi fraksi menjadi angka dari 0 hingga 1 dalam bagian
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp antara awal dan akhir berdasarkan fraksi normalisasi
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Hitung kesehatan baru sebagai persentase maksimum
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Pindahkan bilah ke target ukuran/warna baru
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Dengarkan perubahan kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran bilah/warna ke kesehatan saat ini
   onHealthChanged()

   Tambahan/Perubahan Kunci

   Garis	Tujuan
   2	Mendapat referensi ke TweenService untuk menerapkan fungsi tweening dalam skrip.
   10	Membuat konstruktor TweenInfo yang mendefinisikan durasi remaja yang diinginkan, gaya relaksasi , dan arah relaksasi .
   52 ‑ 57	Alih-alih hanya menetapkan ukuran dan warna bar seperti di versi sebelumnya, menyatakan tabel tweenGoal dengan ukuran/warna target, membuat tween baru menggunakan parameter tweenInfo dan tweenGoal, dan memainkan tween baru.

Jika Anda menguji pengalaman sekarang, Anda akan melihat bahwa remaja meter khusus antara setiap perubahan kesehatan:

Tambah efek kerusakan

Sistem meter kesehatan default termasuk warna merah muda singkat dan halus di ujung layar saat karakter rusak.Dengan menonaktifkan meter default , efek ini dihapus, tetapi Anda dapat menggantikannya dengan implementasi Anda sendiri.

1. Akses tab editor skrip untuk skrip UpdateCustomMeter yang Anda edit sebelumnya.

2. Pilih semua baris dan tempelkan di atasnya dengan kode berikut:

   PerbaruiMeter Kustom
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referensi ke pemain lokal, karakter, dan humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Properti remaja
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variabel untuk menyimpan/menyimpan kesehatan karakter
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Dapatkan (atau buat efek koreksi warna baru) di dalam kamera pemain
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referensi ke frame dalam bilah meter
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, lime, hijau)
   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)
   }
   
   -- Fungsi untuk mendapatkan warna dalam urutan gradien dari titik fraksional
   local function getColorFromSequence(fraction: number): Color3
   	-- Setiap warna dalam gradien mendefinisikan awal dan/atau akhir bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Tentukan bagian mana fraksi yang diminta jatuh ke
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Dapatkan warna di awal dan akhir bagian
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisasi fraksi menjadi angka dari 0 hingga 1 dalam bagian
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp antara awal dan akhir berdasarkan fraksi normalisasi
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Hitung kesehatan baru sebagai persentase maksimum
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Pindahkan bilah ke target ukuran/warna baru
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Tampilkan efek kerusakan jika kesehatan baru lebih rendah dari kesehatan yang disimpan
   	if healthFraction < cachedHealth then
   		-- Simpan nilai kesehatan baru
   		cachedHealth = healthFraction
   
   		-- Tetapkan koreksi warna ke merah sebagai warna awal sebelum tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween warna kembali ke putih (netral dan tidak ada perubahan warna dari normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Dengarkan perubahan kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran bilah/warna ke kesehatan saat ini
   onHealthChanged()

   Tambahan/perubahan kunci

   Garis	Tujuan
   14	Tetapkan referensi placeholder ( cachedHealth ) untuk melacak jumlah kesehatan karakter di antara perubahan, sehingga Anda dapat membandingkan apakah perubahan lebih rendah (kerusakan).
   17 ‑ 18	Pada spawn karakter awal, membuat referensi baru ColorCorrectionEffect di dalam Camera pemain saat ini, atau mendapatkan referensi ke instans yang sama pada respawn kemudian.Dengan membesarkan efek post-processing ini ke kamera pemain, hanya berlaku untuk layar lokal mereka, bukan untuk layar setiap pemain di server.
   68 ‑ 83	Pertama melakukan pemeriksaan kondisional untuk mengkonfirmasi bahwa perubahan kesehatan lebih rendah dari nilai cachedHealth , menunjukkan kerusakan; jika demikian, ia menetapkan cachedHealth ke nilai baru.Selanjutnya, ia menetapkan tinta ColorCorrectionEffect ke [255, 25, 25] (merah) dengan saturasi lebih tinggi, lalu tweens tinta kembali ke default putih netral ( [255, 255, 255] ) tanpa saturasi.

Jika Anda menguji pengalaman sekarang, Anda akan melihat bahwa layar berkedip merah sesaat ketika karakter mengalami kerusakan: