Buat Meter HUD

Sebuah HUD atau Heads-Up Display adalah serangkaian 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 pengalaman karena informasi yang ditampilkan membantu pemain mencapai tujuan permainan mereka.

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

Menggunakan Hazardous Space Station sebagai tempat awal dan UI Fundamentals - HUD Meter sebagai referensi tempat yang telah 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/ukuran elemen UI di sekitar kontrol Roblox yang sudah ada dan notch/gangguan perangkat, seperti notch kamera pada ponsel modern.
• Cara mengganti meter kesehatan default Roblox dengan meter Anda sendiri dan menghubungkannya ke tingkat kesehatan karakter.
• Cara menganimasi bagian tengah meter kesehatan dan mengatur warnanya di antara lima titik kunci gradien warna (merah, oranye, kuning, hijau limau, hijau).

Aktifkan Device Emulator

Roblox secara inheren adalah lintas platform, karena pemain dapat menemukan dan bergabung dengan pengalaman di ponsel atau tablet mereka, kemudian melanjutkan di mana mereka tinggalkan di PC atau konsol mereka. Perangkat mobile (ponsel dan tablet) memiliki ruang layar paling sedikit, jadi penting bahwa elemen UI Anda dapat tampil di layar yang lebih kecil dan jelas terlihat oleh pemain.

Cara terbaik untuk menguji desain UI di berbagai platform adalah dengan Device Emulator 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 Studio, aktifkan Device Emulator.

3. Dari bilah tepat di atas tampilan 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 pengalaman, 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 termasuk notch, potongan, dan elemen lain yang menghabiskan ruang layar. Setiap pengalaman Roblox juga menyertakan kontrol bilah atas untuk akses cepat ke menu utama, obrolan, papan peringkat, dan lainnya.

Untuk memastikan pemain dapat melihat dan mengakses semua UI tanpa batasan, Roblox menyediakan properti ScreenInsets yang mengontrol area aman untuk isi 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 diperpanjang langsung ke tepi atas fisik 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 mencegah mereka terpotong.

Salah satu cara untuk menerapkan padding ke wadah UI adalah dengan menyisipkan 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 sebesar 16 piksel di sekitar wadah, terlepas dari resolusi layar.

   

Bangun meter kesehatan

Dengan wadah layar 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, semua meter kesehatan akan berada di dalam satu frame induk, sehingga mudah untuk dipindahkan ke berbagai tata letak HUD.

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

   

   Jika frame baru tidak muncul di viewport, pastikan Anda telah mengaktifkan GUI overlay dari widget Opsi Visualisasi di sudut kanan atas viewport 3D.

2. Ganti nama instance frame baru menjadi MeterBar.

   

Posisikan frame

Di Roblox, posisi objek UI diwakili oleh sekumpulan 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 pada nilai Offset mana pun.
• Nilai Offset mewakili seberapa banyak piksel untuk menggeser objek pada sumbu yang sesuai, ditambahkan pada nilai Scale mana pun.

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

Selain itu, Anda perlu mengatur titik jangkar sudut kanan atas untuk frame induk agar mendefinisikan titik asalnya. Nilai yang dapat diterima adalah antara 0 dan 1, relatif terhadap ukuran objek, sehingga 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 mendorong dari tepi sebagai akibat dari padding.

   

Ubah ukuran frame

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

Secara default, ukuran frame baru adalah {0, 100},{0, 100}, artinya 100 piksel dalam lebar (X) dan tinggi (Y). Meskipun nilai piksel yang ketat berguna dalam kasus tertentu, banyak elemen UI yang lebih responsif skala di berbagai layar ketika disetel sebagai persentase dari ukuran keseluruhan wadah layar.

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

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

   

Gaya frame

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

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

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

   

3. Sisipkan objek UIStroke, modifikasi UI yang kuat yang menambahkan stroke yang dapat disesuaikan ke frame.

   

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

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

   

Untuk menyelesaikan gaya frame meter, Anda bisa membulatkan sudut 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 0.5 (50%) alih-alih nilai piksel sangat nyaman untuk bar meter karena memastikan kurva yang sepenuhnya bulat terlepas dari seberapa tinggi atau lebar wadah tersebut.

   

Buat isian dalam

Sekarang bahwa frame kontainer meter kesehatan sudah lengkap, Anda dapat menambahkan bagian isian dalam untuk mewakili kesehatan variabel karakter. Karena ini hanya perlu menjadi wilayah yang diisi padat, anak Frame di dalam frame induk adalah pilihan yang tepat.

1. Sisipkan anak Frame 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 dari frame diposisikan dan diukur relatif terhadap induknya, penggunaan skala membuat frame dalam mengisi seluruh lebar dan tinggi induknya, dimulai dari tepi kiri induk.

   

4. Untuk mencocokkan bentuk "pil" dari frame induk, sisipkan UICorner tambahan 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 umum 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 ke 2. Meskipun objek UI yang baru disisipkan selalu berada di depan objek yang disisipkan sebelumnya, perubahan ini memastikan ikon selalu ditampilkan di depan elemen frame meter.

   

4. Temukan properti Image untuk ikon dan masukkan rbxassetid://91715286435585, rujukan untuk 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.

   

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

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

   

Batasi ukuran

Sementara tinggi skala 0.05 (5%) terlihat bagus 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 memeriksanya dengan meniru tablet seperti iPad Generasi 7 dari Device Emulator.

Untuk menjaga agar tinggi bar meter 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 dipilih, atur propertinya MaxSize menjadi inf, 20 untuk membatasi tingginya hingga 20 piksel sambil tetap tidak membatasi lebar.

   

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

Ganti meter kesehatan default

Pengalaman Roblox menyertakan meter kesehatan default yang menjadi terlihat ketika karakter mengalami kerusakan. Jika Anda menjaga meter default tetap terlihat, itu akan menggandakan dan mungkin 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 menjelaskan tujuannya. Skrip dalam StarterPlayerScripts secara otomatis dijalankan saat pemain lokal bergabung dengan pengalaman, menjadikannya wadah yang ideal untuk menjalankan skrip yang secara permanen menyembunyikan meter default.

   

3. Ketika Anda menyisipkan skrip baru, skrip tersebut secara otomatis terbuka di tab editor skrip baru (jika tidak, dua kali klik 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 pengalaman.
   4	Manggil metode servis SetCoreGuiEnabled() dan menginstruksikan agar meter kesehatan default dinonaktifkan (false).

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

Dengar untuk perubahan kesehatan

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

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

   

2. Sisipkan LocalScript baru ke dalam wadah dan ganti nama menjadi UpdateCustomMeter untuk menjelaskan tujuannya. Skrip dalam StarterCharacterScripts secara otomatis berjalan setiap kali karakter pemain muncul, menjadikannya wadah yang ideal untuk menjalankan skrip yang sepenuhnya mengatur ulang meter kesehatan setiap kali 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 bar meter isi dalam
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, hijau 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 fraksi
   local function getColorFromSequence(fraction: number): Color3
   	-- Setiap warna dalam gradien mendefinisikan awal dan/atau akhir suatu bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Menentukan bagian mana yang jatuh dalam fraksi yang diminta
   	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 tersebut
   	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 bar ke ukuran/warna target baru
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Dengar untuk perubahan pada kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran/warna bar 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 ukuran dan warnanya saat kesehatan karakter berubah.
   13‑19	Mendeklarasikan array lima warna (merah, oranye, kuning, hijau limau, hijau) untuk mengubah warna meter pada berbagai titik; misalnya, hijau untuk kesehatan 100%, kuning untuk 50%, merah untuk 0%, atau campuran pada fraksi mana pun antara titik kunci.
   22‑41	Fungsi pembantu yang mengembalikan campuran warna antara salah satu titik kunci warna gradien.
   43‑50	Fungsi yang menangani setiap perubahan kesehatan. Di sini, ia menghitung kesehatan baru sebagai persentase dari MaxHealth karakter, mengubah ukuran InnerFill ke persentase skala tersebut, dan mengubah warnanya sesuai dengan warna yang dikembalikan dari fungsi getColorFromSequence().
   53	Koneksi acara utama yang mendeteksi Health yang berubah dari server dan memanggil fungsi onHealthChanged().
   56	Awalnya (setelah karakter muncul atau respawn) memanggil fungsi onHealthChanged() untuk mengukur dan mewarnai InnerFill dengan persentase yang benar. Biasanya ini akan menjadi lebar penuh dan hijau.

Jika Anda menguji pengalaman sekarang, Anda akan melihat bahwa meter kustom diperbarui dengan benar ukuran dan warnanya saat karakter mengalami kerusakan:

Animasi bar meter

Untuk menambahkan tingkat kilau ekstra pada meter kustom, Anda dapat menganimasi perubahan kesehatan melalui tweening, secara bertahap mengubah ukuran dan warna bar meter selama ½ detik.

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

2. Pilih semua baris (CtrlA atau ⌘A) dan lalu tempelkan 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 bar meter isi dalam
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, hijau 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 fraksi
   local function getColorFromSequence(fraction: number): Color3
   	-- Setiap warna dalam gradien mendefinisikan awal dan/atau akhir suatu bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Menentukan bagian mana yang jatuh dalam fraksi yang diminta
   	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 tersebut
   	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 bar 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
   
   -- Dengar untuk perubahan pada kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran/warna bar ke kesehatan saat ini
   onHealthChanged()

   Pembaruan/Penambahan Kunci

   Baris	Tujuan
   2	Mendapatkan referensi ke TweenService untuk menerapkan fungsionalitas tweening 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 bar seperti pada 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 pengalaman sekarang, Anda akan melihat bahwa meter kustom membuat tween antara setiap perubahan kesehatan:

Tambahkan efek kerusakan

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

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

2. Pilih semua baris dan tempelkan 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/mencache kesehatan karakter
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Dapatkan (atau buat yang 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 bar meter isi dalam
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Warna urutan gradien (merah, oranye, kuning, hijau 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 fraksi
   local function getColorFromSequence(fraction: number): Color3
   	-- Setiap warna dalam gradien mendefinisikan awal dan/atau akhir suatu bagian
   	local numSections = #gradient - 1
   
   	-- Setiap bagian mewakili sebagian dari 1
   	local sectionSize = 1 / numSections
   
   	-- Menentukan bagian mana yang jatuh dalam fraksi yang diminta
   	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 tersebut
   	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 bar 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 kerusakan jika kesehatan baru lebih rendah dari cached health
   	if healthFraction < cachedHealth then
   		-- Cache nilai kesehatan baru
   		cachedHealth = healthFraction
   
   		-- Atur koreksi warna ke merah sebagai tints awal sebelum tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween tints kembali ke putih (netral dan tidak ada perubahan tint dari normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Dengar untuk perubahan pada kesehatan humanoid
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Awalnya atur (atau reset) ukuran/warna bar ke kesehatan saat ini
   onHealthChanged()

   Pembaruan/Penambahan Kunci

   Baris	Tujuan
   14	Mengatur referensi placeholder (cachedHealth) untuk melacak jumlah kesehatan karakter antara perubahan, sehingga Anda dapat membandingkan apakah perubahan tersebut lebih rendah (kerusakan).
   17‑18	Pada spawn karakter awal, membuat efek ColorCorrectionEffect baru di dalam Camera pemain saat ini, atau mendapatkan referensi ke instans yang sama pada respawn berikutnya. Dengan menjadikan efek pasca-pemrosesan ini sebagai anak dari kamera pemain, efek ini hanya diterapkan pada layar lokal mereka, bukan pada layar setiap pemain di server.
   68‑83	Pertama melakukan pemeriksaan kondisi untuk memastikan bahwa perubahan kesehatan lebih rendah dari nilai cachedHealth, menunjukkan kerusakan; jika demikian, ia mengubah cachedHealth ke nilai baru. Selanjutnya, mata merah tera yang diatur ColorCorrectionEffect tinto ke [255, 25, 25] (merah) dengan saturasi yang lebih tinggi, lalu tween tint kembali ke default putih netral ([255, 255, 255]) dengan saturasi nol.

Jika Anda menguji pengalaman sekarang, Anda akan melihat bahwa layar berkedip merah sesaat setiap kali karakter menerima kerusakan: