Buat Meters HUD

A HUD atau Heads-Up Display adalah sekumpulan elemen UI yang selalu terlihat atau dapat diakses selama permainan, seperti tampilan skor, meter kesehatan, dan tombol menu. Menyertakan HUD sangat penting untuk sebagian besar permainan karena menampilkan informasi yang membantu pemain untuk berhasil dalam tujuan permainan mereka.

Salah satu elemen HUD yang umum adalah meter kesehatan dengan ikon di sebelah kiri yang dapat diadaptasi menjadi bilah timer, bilah kemajuan, atau yang serupa.

Menggunakan Hazardous Space Station sebagai tempat awal dan UI Fundamentals - HUD Meter sebagai referensi tempat yang sudah selesai, tutorial ini menunjukkan:

• Pengaturan dan penggunaan Device Emulator untuk menguji desain Anda di beberapa layar yang disimulasikan.
• Penggunaan StarterGui sebagai wadah desain dan penyimpanan.
• Cara memposisikan/mengatur ukuran elemen UI di sekitar kontrol Roblox bawaan dan notch/pulau perangkat, seperti notch kamera di ponsel modern.
• Cara mengganti meter kesehatan default Roblox dengan meter Anda sendiri dan menghubungkannya ke level kesehatan karakter.
• Cara menganimasi bagian tengah meter kesehatan dan mengatur warnanya di antara lima titik kunci gradien warna (merah, oranye, kuning, limau, hijau).

Aktifkan Device Emulator

Roblox secara inheren cross‑platform, karena pemain dapat menemukan dan bergabung dengan permainan di ponsel atau tablet mereka, kemudian melanjutkan dari tempat mereka tinggalkan di PC atau konsol. Perangkat seluler (ponsel dan tablet) memiliki ruang layar yang paling sedikit, jadi penting agar elemen UI Anda muat di layar yang lebih kecil dan terlihat jelas bagi pemain.

Cara terbaik untuk menguji desain UI di berbagai platform adalah dengan Device Emulator di Studio. Alat ini menyediakan pilihan perangkat preset dan memungkinkan Anda menambahkan preset kustom Anda sendiri.

1. Buka template Hazardous Space Station di Studio.

2. Dari menu Test di Studio, aktifkan Device Emulator.

3. Dari bilah tepat di atas viewport utama, pilih emulasi ponsel seperti iPhone X atau Samsung Galaxy A51. Kemudian, atur ukuran tampilan ke Fit to Window untuk memanfaatkan ruang maksimum di Studio.

   

Buat wadah layar

Wadah ScreenGui menyimpan objek UI (GuiObjects) untuk ditampilkan di layar pemain (dalam tutorial ini, keseluruhan meter kesehatan). Untuk menampilkan ScreenGui dan objek anaknya kepada setiap pemain yang bergabung dengan permainan, tempatkan di dalam wadah StarterGui. Ketika seorang pemain bergabung dan karakter mereka pertama kali muncul, ScreenGui dan isinya akan disalin ke dalam wadah PlayerGui untuk pemain tersebut, yang terletak di dalam wadah Players.

Untuk menyisipkan ScreenGui kosong:

1. Di jendela Explorer, temukan wadah StarterGui.

   

2. Arahkan kursor ke wadah, klik tombol ⊕ dan sisipkan ScreenGui.

   

3. Ganti nama wadah baru menjadi HUDContainer untuk mencerminkan tujuannya.

   

Manfaatkan area aman

Ponsel modern memanfaatkan seluruh layar tetapi biasanya menyertakan notch, potongan, dan elemen lain yang memakan ruang layar. Setiap permainan Roblox juga menyertakan kontrol bilah atas untuk akses cepat ke menu utama, chat, papan peringkat, dan lainnya.

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

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

1. Di jendela Explorer, pilih HUDContainer.

   

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

   

Atur padding tepi

Dengan ScreenInsets diatur ke DeviceSafeInsets, konten sekarang dapat diperluas langsung hingga tepi fisik atas layar. Namun, sedikit padding dapat membantu mendorong meter kesehatan (dan objek lain di dalam wadah) sedikit menjauh dari tepi layar untuk penampilan yang lebih bersih dan untuk mencegahnya terpotong.

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

1. Sisipkan modifikasi UIPadding ke dalam HUDContainer.

   

2. Dengan objek UIPadding baru yang dipilih, masukkan nilai 0, 16 untuk semua tepi wadah (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Ini menerapkan padding 16 piksel di sekitar wadah, terlepas dari resolusi layar.

   

Bangun meter kesehatan

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

Buat frame induk

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 ditempatkan dalam satu frame induk, membuatnya 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 viewport, pastikan Anda telah mengaktifkan GUI overlay dari widget Visualization Options di sudut kanan atas viewport 3D.

2. Ganti nama instance frame baru menjadi MeterBar.

   

Posisikan frame

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

• Nilai Scale mewakili persentase dari ukuran wadah di sepanjang sumbu yang sesuai, ditambahkan dengan nilai Offset apa pun.
• Nilai Offset mewakili berapa banyak piksel untuk menggeser objek pada sumbu yang sesuai, ditambahkan dengan nilai Scale apa pun.

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

Selain itu, Anda perlu mengatur titik jangkar sudut kanan atas untuk frame induk untuk mendefinisikan titik asalnya. Nilai yang dapat diterima berada di antara 0 dan 1, relatif terhadap ukuran objek, jadi nilai jangkar 1, 0 menempatkan titik jangkar frame di sudut kanan atasnya.

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

   

2. Di jendela Properties, masukkan 1, 0, 0, 0 untuk Position dan tekan Enter. Studio akan secara otomatis menambahkan tanda kurung untuk membentuk UDim2 {1, 0},{0, 0}.

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

   

Ubah ukuran frame

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

Secara default, ukuran frame baru adalah {0, 100},{0, 100}, yang berarti 100 piksel baik dalam lebar (X) maupun tinggi (Y). Sementara nilai piksel yang ketat berguna dalam beberapa kasus, banyak elemen UI lebih responsif dalam skala di berbagai layar ketika diatur ke persentase dari ukuran keseluruhan wadah layar.

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

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

   

Gaya frame

Secara default, Frames diisi dengan warna putih solid. Meter kesehatan akhir harus memiliki pengisian yang lebih gelap dan sedikit transparan, serta garis gelap, sehingga lebih menonjol di latar belakang terang dan gelap.

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

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

   

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

   

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

   • Thickness = 3
   • Transparency = 0.25 (75% opak)

   

Untuk menyelesaikan gaya frame meter, Anda dapat membulatkan sudutnya untuk membentuk bentuk "pil" alih-alih persegi tajam.

1. Sisipkan instance UICorner ke dalam frame MeterBar.

   

2. Dengan modifikasi UICorner baru yang dipilih, atur CornerRadius menjadi 0.5, 0. Menggunakan nilai skala sebesar 0.5 (50%) alih-alih nilai piksel sangat nyaman untuk bilah meter karena memastikan lengkungan yang sepenuhnya bulat tidak peduli seberapa tinggi atau lebar wadahnya.

   

Buat pengisian dalam

Sekarang setelah frame yang menampung meter kesehatan selesai, Anda dapat menambahkan bagian pengisian dalam untuk mewakili kesehatan variabel karakter. Karena hanya perlu menjadi area yang terisi solid, sub-anak Frame di dalam frame induk sudah cukup.

1. Sisipkan Frame anak ke dalam frame MeterBar.

2. Ganti nama instance frame baru menjadi InnerFill.

   

3. Dengan InnerFill yang dipilih, atur properti berikut:

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

   Karena anak-anak dari frame diposisikan dan diukur relatif terhadap induknya, penggunaan skala membuat frame dalam mengisi lebar dan tinggi penuh induknya, dimulai dari tepi kiri induk.

   

4. Untuk mencocokkan bentuk "pil" dari frame induk, sisipkan tambahan UICorner ke dalam InnerFill.

   

5. Dengan modifikasi UICorner baru yang dipilih, atur properti CornerRadius menjadi 0.5, 0 untuk mencocokkan bentuk "pil" dari frame induk MeterBar.

   

6. Untuk lebih mewakili bahwa meter penuh menunjukkan kesehatan yang baik, pilih InnerFill dan atur properti BackgroundColor3 menjadi [0, 225, 50] (dalam tugas selanjutnya, Anda akan memprogram warna ini untuk berubah berdasarkan kesehatan yang sebenarnya).

   

Tambahkan ikon

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

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

2. Ganti nama instance label baru menjadi Icon.

   

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

   

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

   

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

   

6. Dengan Icon yang dipilih, selesaikan penampilan dan posisi dengan mengubah properti berikut:

   • AnchorPoint = 0.5, 0.5 (jangkar 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 menjadi 1:1 oleh UIAspectRatioConstraint)

   

Batasi ukuran

Sementara tinggi skala sebesar 0.05 (5%) terlihat baik di layar ponsel modern dan monitor gaming yang memiliki rasio aspek 16:9 atau lebih lebar, meter mungkin terlihat sedikit terlalu tinggi di layar tablet dan ponsel lama. Anda dapat memeriksa ini dengan mensimulasikan tablet seperti iPad 7th Generation dari Device Emulator.

Untuk menjaga tinggi bilah meter tetap lebih konsisten dengan layar yang lebih lebar, Anda dapat menerapkan UISizeConstraint untuk membatasi tinggi piksel maksimum.

1. Sisipkan UISizeConstraint ke dalam frame MeterBar.

   

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

   

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

Ganti meter kesehatan default

Permainan Roblox menyertakan meter kesehatan default yang menjadi terlihat ketika karakter menerima damage. Jika Anda membiarkan meter default terlihat, itu akan menggandakan dan berpotensi tumpang tindih dengan meter kustom.

Nonaktifkan meter default

Untuk menonaktifkan meter kesehatan default, Anda akan menggunakan skrip klien (LocalScript) di dalam StarterPlayerScripts yang memanggil StarterGui:SetCoreGuiEnabled().

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

   

2. Sisipkan LocalScript baru ke dalam wadah dan ganti namanya menjadi HideDefaultHealthMeter untuk menggambarkan tujuannya. Skrip di dalam StarterPlayerScripts secara otomatis dijalankan ketika pemain lokal bergabung dengan permainan, menjadikannya wadah yang 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 dua kali skrip di jendela Explorer).

   Tempelkan kode berikut di dalam skrip HideDefaultHealthMeter:

   HideDefaultHealthMeter

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

   Penjelasan Kode

   Baris	Tujuan
   1	Mendapatkan referensi ke layanan inti, StarterGui, yang mewakili wadah yang sama di mana Anda membuat meter kesehatan kustom dan isinya disalin ke dalam wadah PlayerGui untuk setiap pemain yang bergabung dengan permainan.
   4	Memanggil metode SetCoreGuiEnabled() dari layanan dan menginstruksikan agar meter kesehatan default dinonaktifkan (false).

Jika Anda menguji permainan sekarang dan menerima damage, Anda akan melihat bahwa meter default dinonaktifkan dan disembunyikan (Anda akan memprogram meter kustom untuk mencerminkan perubahan kesehatan di bagian berikutnya).

Dengarkan perubahan kesehatan

Semua model karakter default Roblox mengandung kelas Humanoid yang memberikan perilaku dan fungsionalitas khusus kepada karakter, seperti mengatur kecepatan berjalan/berlari dan mengelola kesehatannya. Health yang berubah di server mereplikasi ke setiap klien pemain dan Anda dapat mendeteksi perubahan ini untuk memperbarui ukuran dan warna meter kesehatan kustom.

1. Di jendela Explorer, temukan wadah StarterCharacterScripts di dalam StarterPlayer.

   

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

   

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

   UpdateCustomMeter

   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 pengisian dalam meter
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, limau, 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 dari sebuah bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Menentukan bagian mana yang diminta fraksi jatuh ke dalamnya
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Mendapatkan 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 yang dinormalisasi
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Hitung kesehatan baru sebagai persentase dari maksimum
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Atur bilah ke ukuran/warna target baru
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Dengarkan perubahan pada kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran/warna bilah ke kesehatan saat ini
   onHealthChanged()

   Penjelasan Kode

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

Jika Anda menguji permainan sekarang, Anda akan melihat bahwa meter kustom dengan benar memperbarui ukuran dan warnanya saat karakter menerima damage:

Animasikan bilah meter

Untuk menambahkan tingkat kehalusan ekstra pada meter kustom, Anda dapat menganimasi perubahan kesehatan melalui tweening, secara bertahap mengubah ukuran dan warna bilah meter selama ½ 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:

   UpdateCustomMeter

   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 tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referensi ke frame pengisian dalam meter
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, limau, 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 dari sebuah bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Menentukan bagian mana yang diminta fraksi jatuh ke dalamnya
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Mendapatkan 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 yang dinormalisasi
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Hitung kesehatan baru sebagai persentase dari maksimum
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween bilah ke ukuran/warna target 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 pada kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran/warna bilah ke kesehatan saat ini
   onHealthChanged()

   Penambahan/Perubahan Kunci

   Baris	Tujuan
   2	Mendapatkan referensi ke TweenService untuk menerapkan fungsionalitas tweening di dalam skrip.
   10	Membuat konstruktor TweenInfo yang mendefinisikan durasi tween yang dimaksud, gaya easing, dan arah easing.
   52‑57	Alih-alih hanya mengatur ukuran dan warna bilah seperti di versi sebelumnya, mendeklarasikan tabel tweenGoal dengan ukuran/warna target, membuat tween baru menggunakan parameter tweenInfo dan tweenGoal, dan memutar tween baru tersebut.

Jika Anda menguji permainan sekarang, Anda akan melihat bahwa meter kustom tween antara setiap perubahan kesehatan:

Tambahkan efek damage

Sistem meter kesehatan default menyertakan kilau merah singkat dan halus di tepi layar ketika karakter menerima damage. Dengan menonaktifkan meter default, efek ini dihapus, tetapi Anda dapat menggantinya dengan implementasi Anda sendiri.

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

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

   UpdateCustomMeter

   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 tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variabel untuk menyimpan/meng-cache kesehatan karakter
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Dapatkan (atau buat baru) efek koreksi warna di dalam kamera pemain
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referensi ke frame pengisian dalam meter
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, limau, 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 dari sebuah bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Menentukan bagian mana yang diminta fraksi jatuh ke dalamnya
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Mendapatkan 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 yang dinormalisasi
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Hitung kesehatan baru sebagai persentase dari maksimum
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween bilah ke ukuran/warna target baru
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Tampilkan efek damage jika kesehatan baru lebih rendah dari cached health
   	if healthFraction < cachedHealth then
   		-- Cache nilai kesehatan baru
   		cachedHealth = healthFraction
   
   		-- Atur koreksi warna menjadi merah sebagai kilau awal sebelum tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween kilau kembali ke putih (netral dan tidak ada perubahan kilau 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 pada kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran/warna bilah ke kesehatan saat ini
   onHealthChanged()

   Penambahan/Perubahan Kunci

   Baris	Tujuan
   14	Menetapkan referensi placeholder (cachedHealth) untuk melacak jumlah kesehatan karakter antara perubahan, sehingga Anda dapat membandingkan apakah perubahan lebih rendah (damage).
   17‑18	Pada saat karakter muncul pertama kali, membuat ColorCorrectionEffect baru di dalam Camera pemain saat ini, atau mendapatkan referensi ke instance yang sama pada respawn berikutnya. Dengan menempatkan efek pasca-pemrosesan ini ke kamera pemain, itu hanya diterapkan pada layar lokal mereka, bukan pada layar setiap pemain di server.
   68‑83	Pertama melakukan pemeriksaan kondisional untuk memastikan bahwa perubahan kesehatan lebih rendah dari nilai cachedHealth, menunjukkan damage; jika ya, itu mengatur cachedHealth ke nilai baru. Selanjutnya, mengatur tint ColorCorrectionEffect menjadi [255, 25, 25] (merah) dengan saturasi lebih tinggi, kemudian tween tint kembali ke default putih netral ([255, 255, 255]) tanpa saturasi.

Jika Anda menguji permainan sekarang, Anda akan melihat bahwa layar berkedip merah singkat setiap kali karakter menerima damage: