Tworzenie wskaźników HUD

HUD lub Wyświetlacz nawigacyjny to zestaw elementów interfejsu użytkownika, które są zawsze widoczne lub dostępne podczas rozgrywki, takie jak wyświetlacze punktów, wskaźniki zdrowia i przyciski menu. Włączenie HUD jest niezbędne w większości gier, ponieważ wyświetla informacje, które pomagają graczom w osiąganiu celów w grze.

Typowym elementem HUD jest wskaźnik zdrowia z ikoną po lewej stronie, który można dostosować do formy paska czasu, paska postępu lub podobnego.

Używając Niebezpiecznej Stacji Kosmicznej jako miejsca startowego oraz Podstawy interfejsu użytkownika - Wskaźnik HUD jako miejsca odniesienia, ten samouczek demonstruje:

• Ustawienie i użycie Emulatora urządzeń do testowania projektu na wielu emulowanych ekranach.
• Użycie StarterGui jako zarówno kontenera projektowego, jak i przechowującego.
• Jak pozycjonować/rozmiarować elementy interfejsu użytkownika wokół wbudowanych kontrolerów Roblox i wycięć/wysp urządzeń, takich jak wycięcie kamery w nowoczesnych telefonach.
• Jak zastąpić domyślny wskaźnik zdrowia Roblox własnym wskaźnikiem i podłączyć go do poziomu zdrowia postaci.
• Jak animować środkową część wskaźnika zdrowia i ustawić jego kolor pomiędzy pięcioma punktami kluczowymi gradientu kolorów (czerwony, pomarańczowy, żółty, limonkowy, zielony).

Włącz Emulator urządzeń

Roblox jest z natury wieloplatformowy, ponieważ gracze mogą odkrywać i dołączać do gier na swoim telefonie lub tablecie, a następnie kontynuować tam, gdzie przerwali na swoim komputerze lub konsoli. Urządzenia mobilne (telefony i tablety) mają najmniej miejsca na ekranie, więc ważne jest, aby elementy interfejsu użytkownika mieściły się na mniejszych ekranach i były wyraźnie widoczne dla graczy.

Najlepszym sposobem na testowanie projektów interfejsu użytkownika na różnych platformach jest Emulator urządzeń w Studio. To narzędzie oferuje zestaw wstępnie zdefiniowanych urządzeń i pozwala na dodawanie własnych niestandardowych presetów.

1. Otwórz szablon Niebezpiecznej Stacji Kosmicznej w Studio.

2. Z menu Test w Studio włącz Emulator urządzeń.

3. Z paska bezpośrednio nad głównym widokiem, wybierz emulację telefonu, taką jak iPhone X lub Samsung Galaxy A51. Następnie ustaw rozmiar widoku na Dopasuj do okna, aby wykorzystać maksymalną przestrzeń w Studio.

   

Utwórz kontener ekranu

Kontener ScreenGui przechowuje obiekty interfejsu użytkownika (GuiObjects), które mają być wyświetlane na ekranie gracza (w tym samouczku, całość wskaźnika zdrowia). Aby wyświetlić ScreenGui i jego obiekty podrzędne dla każdego gracza, który dołącza do gry, umieść go w kontenerze StarterGui. Gdy gracz dołącza i jego postać po raz pierwszy się pojawia, ScreenGui i jego zawartość są klonowane do kontenera PlayerGui dla tego gracza, znajdującego się w kontenerze Players.

Aby wstawić pusty ScreenGui:

1. W oknie Eksplorator zlokalizuj kontener StarterGui.

   

2. Najedź na kontener, kliknij przycisk ⊕ i wstaw ScreenGui.

   

3. Zmień nazwę nowego kontenera na HUDContainer, aby odzwierciedlić jego przeznaczenie.

   

Wykorzystaj bezpieczne obszary

Nowoczesne telefony wykorzystują cały ekran, ale zazwyczaj zawierają wycięcia, wcięcia i inne elementy, które zajmują miejsce na ekranie. Każda gra Roblox zawiera również górne kontrolki do szybkiego dostępu do głównego menu, czatu, rankingu i innych.

Aby zapewnić, że gracze mogą widzieć i uzyskiwać dostęp do wszystkich interfejsów użytkownika bez przeszkód, Roblox udostępnia właściwość ScreenInsets, która kontroluje wcięcia bezpiecznego obszaru dla zawartości ScreenGui. Każdy obiekt interfejsu użytkownika, który umieszczasz wewnątrz ScreenGui, jest względny do granic wcięcia.

Podczas gdy domyślna wartość CoreUISafeInsets zapewnia, że wszystkie obiekty interfejsu użytkownika pozostają z dala od UI Roblox i wycięć urządzeń, DeviceSafeInsets może być lepszą opcją do wykorzystania ograniczonej przestrzeni na ekranie, jak pokazano poniżej.

1. W oknie Eksplorator wybierz HUDContainer.

   

2. W oknie Właściwości ustaw właściwość ScreenInsets na DeviceSafeInsets.

   

Ustaw wcięcie krawędzi

Z ScreenInsets ustawionym na DeviceSafeInsets, zawartość może teraz rozciągać się bezpośrednio do fizycznej górnej krawędzi ekranu. Jednak niewielka ilość wcięcia może pomóc w odsunięciu wskaźnika zdrowia (i innych obiektów wewnątrz kontenera) nieco od krawędzi ekranu, aby uzyskać czystszy wygląd i zapobiec ich przycinaniu.

Jednym ze sposobów zastosowania wcięcia do kontenera interfejsu użytkownika jest wstawienie modyfikatora UIPadding:

1. Wstaw modyfikator UIPadding do HUDContainer.

   

2. Z wybranym nowym obiektem UIPadding, wprowadź wartość 0, 16 dla wszystkich krawędzi kontenera (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). To stosuje wcięcie 16 pikseli wokół kontenera, niezależnie od rozdzielczości ekranu.

   

Zbuduj wskaźnik zdrowia

Po skonfigurowaniu kontenera ekranu, możesz rozpocząć budowanie wskaźnika zdrowia za pomocą obiektów interfejsu użytkownika Roblox, takich jak ramki i etykieta obrazu.

Utwórz ramkę rodzica

Podobnie jak w aplikacjach projektowych, takich jak Figma i Photoshop, Frame w Roblox służy jako kontener dla innych obiektów interfejsu użytkownika. W tym samouczku cały wskaźnik zdrowia będzie zawarty w jednej ramce rodzica, co ułatwi jego przestawianie w różnych układach HUD.

1. Wstaw Frame do HUDContainer. Nowa ramka pojawia się w lewym górnym rogu jako pusty biały kwadrat.

   

   Jeśli nowa ramka nie pojawia się w widoku, upewnij się, że włączono nakładkę GUI z widgetu Opcje wizualizacji w prawym górnym rogu widoku 3D.

2. Zmień nazwę nowej instancji ramki na MeterBar.

   

Pozycjonowanie ramki

W Roblox pozycja obiektu interfejsu użytkownika jest reprezentowana przez zestaw współrzędnych UDim2, zawierający wartości Scale i Offset dla obu osi X i Y:

• Wartości Scale reprezentują procent rozmiaru kontenera wzdłuż odpowiadającej osi, dodawane do wszelkich wartości Offset.
• Wartości Offset reprezentują, o ile pikseli przesunąć obiekt wzdłuż odpowiadającej osi, dodawane do wszelkich wartości Scale.

Aby umieścić obiekt interfejsu użytkownika w górnym prawym rogu kontenera ekranu, najlepszym podejściem jest użycie Scale, ponieważ wartość X wynosząca 1 (100%) reprezentuje prawą krawędź kontenera, niezależnie od fizycznego rozmiaru piksela ekranu. Podobnie, wartość skali Y wynosząca 0 (0%) reprezentuje górną krawędź kontenera.

Dodatkowo, będziesz musiał ustawić górny prawy punkt kotwiczenia dla ramki rodzica, aby zdefiniować jej punkt początkowy. Akceptowalne wartości mieszczą się między 0 a 1, w odniesieniu do rozmiaru obiektu, więc wartość kotwiczenia 1, 0 umieszcza punkt kotwiczenia ramki w jej górnym prawym rogu.

1. W oknie Eksplorator wybierz ramkę MeterBar, którą wcześniej wstawiłeś.

   

2. W oknie Właściwości wprowadź 1, 0, 0, 0 dla Position i naciśnij Enter. Studio automatycznie doda nawiasy, aby utworzyć UDim2 {1, 0},{0, 0}.

3. Wprowadź 1, 0 dla właściwości AnchorPoint. Ramka powinna teraz być umieszczona w górnym prawym rogu bezpiecznego obszaru urządzenia, nieco wcięta od krawędzi w wyniku wcięcia.

   

Zmień rozmiar ramki

Podobnie jak pozycja, Size obiektu interfejsu użytkownika jest reprezentowana przez zestaw współrzędnych UDim2, zawierający wartości Scale i Offset dla obu osi X i Y.

Domyślnie rozmiar nowej ramki to {0, 100},{0, 100}, co oznacza 100 pikseli zarówno w szerokości (X), jak i wysokości (Y). Chociaż ścisła wartość w pikselach jest przydatna w niektórych przypadkach, wiele elementów interfejsu użytkownika skaluje się bardziej responsywnie na różnych ekranach, gdy jest ustawione na procent całkowitego rozmiaru kontenera ekranu.

1. Z wybraną ramką MeterBar przejdź do okna Właściwości i znajdź właściwość Size.

2. Wprowadź wartość 0.35, 0, 0.05, 0, aby ustawić rozmiar procentowy na 35% szerokości i 5% wysokości bez dodatkowych przesunięć pikselowych.

   

Stylizuj ramkę

Domyślnie Frames są wypełnione jednolitą bielą. Ostateczny wskaźnik zdrowia powinien mieć ciemniejsze i nieco przezroczyste wypełnienie, a także ciemny kontur, aby lepiej wyróżniał się na jasnych i ciemnych tłach.

1. Z wybraną ramką MeterBar wprowadź 0 dla właściwości BackgroundColor3. Studio automatycznie przekształci to na wartość RGB [0, 0, 0].

2. Wprowadź 0.75 dla właściwości BackgroundTransparency. W Roblox przezroczystość waha się od 0 dla całkowicie nieprzezroczystego do 1 dla całkowicie przezroczystego, więc 0.75 oznacza 25% przezroczystości w innych aplikacjach, takich jak Figma czy Photoshop.

   

3. Wstaw obiekt UIStroke, potężny modyfikator interfejsu użytkownika, który dodaje kontrastowy kontur do ramki.

   

4. Z wybranym nowym UIStroke, ustaw następujące właściwości:

   • Thickness = 3
   • Transparency = 0.25 (75% nieprzezroczystości)

   

Aby zakończyć stylizację ramki wskaźnika, możesz zaokrąglić rogi, aby utworzyć kształt "pigułki" zamiast ostrego prostokąta.

1. Wstaw instancję UICorner do ramki MeterBar.

   

2. Z wybranym nowym modyfikatorem UICorner, ustaw CornerRadius na 0.5, 0. Użycie wartości skali 0.5 (50%) zamiast wartości w pikselach jest szczególnie wygodne dla paska wskaźnika, ponieważ zapewnia w pełni zaokrągloną krzywą, niezależnie od tego, jak wysoka lub szeroka staje się ramka.

   

Utwórz wewnętrzne wypełnienie

Teraz, gdy ramka wskaźnika zdrowia jest gotowa, możesz dodać część wewnętrznego wypełnienia, aby reprezentować zmienne zdrowie postaci. Ponieważ musi to być tylko wypełniony obszar, odpowiedni jest podramka Frame wewnątrz ramki rodzica.

1. Wstaw podrzędną Frame do ramki MeterBar.

2. Zmień nazwę nowej instancji ramki na InnerFill.

   

3. Z wybraną InnerFill ustaw następujące właściwości:

   • AnchorPoint = 0, 0.5 (lewy brzeg i środek pionowy)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Ponieważ dzieci ramek są pozycjonowane i rozmiarowane w odniesieniu do ich rodzica, użycie skali sprawia, że wewnętrzna ramka wypełnia pełną szerokość i wysokość rodzica, zaczynając od lewego brzegu rodzica.

   

4. Aby dopasować kształt "pigułki" ramki rodzica, wstaw dodatkowy UICorner do InnerFill.

   

5. Z wybranym nowym modyfikatorem UICorner, ustaw jego właściwość CornerRadius na 0.5, 0, aby dopasować kształt "pigułki" ramki rodzica MeterBar.

   

6. Aby lepiej reprezentować, że pełny wskaźnik oznacza dobre zdrowie, wybierz InnerFill i ustaw jego właściwość BackgroundColor3 na [0, 225, 50] (w późniejszym zadaniu, skryptujesz ten kolor, aby zmieniać się w zależności od rzeczywistego zdrowia).

   

Dodaj ikonę

Aby wyraźniej wskazać cel wskaźnika, możesz dodać etykietę obrazu po lewej stronie, w tym przypadku czerwoną serce, które powszechnie symbolizuje zdrowie lub życie.

1. Wstaw ImageLabel do ramki MeterBar. Ten obiekt pozwala na zastosowanie 2D obrazu, który został przesłany jako naklejka do Roblox.

2. Zmień nazwę nowej etykiety na Icon.

   

3. Z wybraną Icon ustaw jej właściwość ZIndex na 2. Chociaż nowo wstawione obiekty interfejsu użytkownika zawsze warstwują się przed obiektami wstawionymi wcześniej, ta zmiana zapewnia, że ikona zawsze wyświetla się przed elementami ramki wskaźnika.

   

4. Zlokalizuj właściwość Image ikony i wprowadź rbxassetid://91715286435585, odniesienie do wcześniej przesłanego obrazu serca (jeśli chcesz, możesz zaimportować własny obraz i użyć jego identyfikatora zasobu).

   

5. Aby upewnić się, że ikona ImageLabel zawsze zachowuje proporcje 1:1, wstaw UIAspectRatioConstraint. Chociaż ten ogranicznik ma konfigurowalne właściwości do kontrolowania proporcji, możesz pozostawić jego domyślne wartości nietknięte.

   

6. Z wybraną Icon zakończ wygląd i pozycję, zmieniając następujące właściwości:

   • AnchorPoint = 0.5, 0.5 (punkt kotwiczenia w centrum)
   • BackgroundTransparency = 1 (100% przezroczystości)
   • Position = 0, 0, 0.5, 0 (lewa strona wskaźnika i środek pionowy)
   • Size = 2, 0, 2, 0 (200% całkowitego rozmiaru ramki MeterBar, ograniczone do 1:1 przez UIAspectRatioConstraint)

   

Ogranicz rozmiar

Podczas gdy wysokość skali 0.05 (5%) wygląda dobrze na nowoczesnych ekranach telefonów i monitorach do gier, które mają proporcje 16:9 lub szersze, wskaźnik może wyglądać nieco za wysoko na ekranach tabletów i starszych telefonach. Możesz to sprawdzić, emulując tablet, taki jak iPad 7. generacji z Emulatora urządzeń.

Aby utrzymać wysokość paska wskaźnika bardziej spójną z szerszymi ekranami, możesz zastosować UISizeConstraint, aby ograniczyć maksymalną wysokość w pikselach.

1. Wstaw UISizeConstraint do ramki MeterBar.

   

2. Z wybranym nowym ogranicznikiem ustaw jego właściwość MaxSize na inf, 20, aby ograniczyć jego wysokość do 20 pikseli, nie narzucając ograniczeń szerokości.

   

Teraz pasek wskaźnika utrzymuje bardziej spójną wysokość między szerszymi i wyższymi ekranami.

Zastąp domyślny wskaźnik zdrowia

Gry Roblox zawierają domyślny wskaźnik zdrowia, który staje się widoczny, gdy postacie otrzymują obrażenia. Jeśli pozostawisz widoczny domyślny wskaźnik, będzie on duplikowany i potencjalnie nakładał się na niestandardowy wskaźnik.

Wyłącz domyślny wskaźnik

Aby wyłączyć domyślny wskaźnik zdrowia, użyjesz skryptu klienckiego (LocalScript) w StarterPlayerScripts, który wywołuje StarterGui:SetCoreGuiEnabled().

1. W oknie Eksplorator rozwiń kontener StarterPlayer i zlokalizuj kontener StarterPlayerScripts w jego wnętrzu.

   

2. Wstaw nowy LocalScript do kontenera i zmień jego nazwę na HideDefaultHealthMeter, aby opisać jego przeznaczenie. Skrypty w StarterPlayerScripts automatycznie uruchamiają się, gdy lokalny gracz dołącza do gry, co czyni go idealnym kontenerem do uruchomienia skryptu, który na stałe ukrywa domyślny wskaźnik.

   

3. Gdy wstawisz nowy skrypt, automatycznie otworzy się w nowej karcie edytora skryptów (jeśli nie, kliknij dwukrotnie skrypt w oknie Eksplorator).

   Wklej następujący kod do skryptu HideDefaultHealthMeter:

   HideDefaultHealthMeter

   local StarterGui = game:GetService("StarterGui")
   
   -- Ukryj domyślny wskaźnik zdrowia
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Wyjaśnienie kodu

   Linia	Cel
   1	Pobiera odniesienie do podstawowej usługi, StarterGui, która reprezentuje ten sam kontener, w którym utworzyłeś niestandardowy wskaźnik zdrowia i którego zawartość klonuje się do kontenera PlayerGui dla każdego gracza, który dołącza do gry.
   4	Wywołuje metodę SetCoreGuiEnabled() usługi i instruuje, aby domyślny wskaźnik zdrowia został wyłączony (false).

Jeśli teraz przetestujesz grę i otrzymasz obrażenia, zauważysz, że domyślny wskaźnik jest wyłączony i ukryty (w następnej sekcji skryptujesz niestandardowy wskaźnik, aby odzwierciedlał zmiany zdrowia).

Nasłuchuj zmian zdrowia

Wszystkie domyślne modele postaci Roblox zawierają klasę Humanoid, która zapewnia specjalne zachowania i funkcjonalność dla postaci, takie jak ustawianie prędkości chodzenia/biegania i zarządzanie zdrowiem. Zmiany Health na serwerze replikują się do klienta każdego gracza i możesz wykrywać te zmiany, aby zaktualizować zarówno rozmiar, jak i kolor niestandardowego wskaźnika zdrowia.

1. W oknie Eksplorator zlokalizuj kontener StarterCharacterScripts w StarterPlayer.

   

2. Wstaw nowy LocalScript do kontenera i zmień jego nazwę na UpdateCustomMeter, aby opisać jego przeznaczenie. Skrypty w StarterCharacterScripts automatycznie uruchamiają się za każdym razem, gdy postać gracza się pojawia, co czyni go idealnym kontenerem do uruchomienia skryptu, który całkowicie resetuje wskaźnik zdrowia przy każdym odrodzeniu.

   

3. W oknie edytora dla skryptu UpdateCustomMeter wklej następujący kod:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   
   -- Odniesienie do lokalnego gracza, postaci i humanoida
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Odniesienie do wewnętrznej ramki paska
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Kolory sekwencji gradientu (czerwony, pomarańczowy, żółty, limonkowy, zielony)
   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)
   }
   
   -- Funkcja do uzyskania koloru w sekwencji gradientu z punktu ułamkowego
   local function getColorFromSequence(fraction: number): Color3
   	-- Każdy kolor w gradientzie definiuje początek i/lub koniec sekcji
   	local numSections = #gradient - 1
   
   	-- Każda sekcja reprezentuje część 1
   	local sectionSize = 1 / numSections
   
   	-- Określenie, w której sekcji znajduje się żądany ułamek
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Uzyskanie kolorów na początku i końcu sekcji
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizacja ułamka, aby był liczbą od 0 do 1 w obrębie sekcji
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp między początkiem a końcem na podstawie znormalizowanego ułamka
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Oblicz nową wartość zdrowia jako procent maksymalnego
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Ustaw pasek na nowe cele rozmiaru/koloru
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Nasłuchuj zmian zdrowia humanoida
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Początkowo ustaw (lub zresetuj) rozmiar/kolor paska na aktualne zdrowie
   onHealthChanged()

   Wyjaśnienie kodu

   Linie	Cel
   4‑6	Pobiera odniesienia do lokalnego Player, jego modelu Character oraz klasy Humanoid w jego wnętrzu.
   9‑10	Pobiera odniesienie do obiektu InnerFill wskaźnika, który musi być zmieniany i zmieniany kolor w miarę zmian zdrowia postaci.
   13‑19	Deklaruje tablicę pięciu kolorów (czerwony, pomarańczowy, żółty, limonkowy, zielony), aby zmienić kolor wskaźnika w różnych punktach; na przykład, zielony dla 100% zdrowia, żółty dla 50%, czerwony dla 0% lub mieszanka w dowolnym ułamku między punktami kluczowymi.
   22‑41	Funkcja pomocnicza, która zwraca mieszankę kolorów między dowolnymi punktami kluczowymi gradientu kolorów.
   43‑50	Funkcja, która obsługuje wszelkie zmiany zdrowia. Tutaj oblicza nowe zdrowie jako procent maksymalnego zdrowia postaci MaxHealth, zmienia rozmiar InnerFill na ten procent skali i zmienia jego kolor na kolor zwrócony przez funkcję getColorFromSequence().
   53	Główne połączenie zdarzenia, które wykrywa zmiany Health replikowane z serwera i wywołuje funkcję onHealthChanged().
   56	Początkowo (po pojawieniu się postaci lub odrodzeniu) wywołuje funkcję onHealthChanged(), aby ustawić rozmiar i kolor InnerFill na odpowiedni procent. Zazwyczaj będzie to pełna szerokość i zielony.

Jeśli teraz przetestujesz grę, zauważysz, że niestandardowy wskaźnik poprawnie aktualizuje zarówno rozmiar, jak i kolor w miarę otrzymywania obrażeń przez postać:

Animuj pasek wskaźnika

Aby dodać dodatkowy poziom wykończenia do niestandardowego wskaźnika, możesz animować zmiany zdrowia za pomocą tweenu, stopniowo zmieniając rozmiar i kolor paska wskaźnika w ciągu ½ sekundy.

1. Uzyskaj dostęp do karty edytora skryptów dla skryptu UpdateCustomMeter, który edytowałeś wcześniej.

2. Zaznacz wszystkie linie (CtrlA lub ⌘A) i wklej je (CtrlV lub ⌘V) z następującym kodem:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Odniesienie do lokalnego gracza, postaci i humanoida
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Właściwości tweenu
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Odniesienie do wewnętrznej ramki paska
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Kolory sekwencji gradientu (czerwony, pomarańczowy, żółty, limonkowy, zielony)
   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)
   }
   
   -- Funkcja do uzyskania koloru w sekwencji gradientu z punktu ułamkowego
   local function getColorFromSequence(fraction: number): Color3
   	-- Każdy kolor w gradientzie definiuje początek i/lub koniec sekcji
   	local numSections = #gradient - 1
   
   	-- Każda sekcja reprezentuje część 1
   	local sectionSize = 1 / numSections
   
   	-- Określenie, w której sekcji znajduje się żądany ułamek
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Uzyskanie kolorów na początku i końcu sekcji
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizacja ułamka, aby był liczbą od 0 do 1 w obrębie sekcji
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp między początkiem a końcem na podstawie znormalizowanego ułamka
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Oblicz nową wartość zdrowia jako procent maksymalnego
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tweenuj pasek do nowych celów rozmiaru/koloru
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Nasłuchuj zmian zdrowia humanoida
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Początkowo ustaw (lub zresetuj) rozmiar/kolor paska na aktualne zdrowie
   onHealthChanged()

   Kluczowe dodatki/zmiany

   Linie	Cel
   2	Pobiera odniesienie do TweenService, aby wdrożyć funkcjonalność tweenu w skrypcie.
   10	Tworzy konstruktor TweenInfo, który definiuje czas trwania zamierzonego tweenu, styl wygładzania i kierunek wygładzania.
   52‑57	Zamiast po prostu ustawiać rozmiar i kolor paska, jak w poprzedniej wersji, deklaruje tabelę tweenGoal z docelowym rozmiarem/kolorem, tworzy nowy tween przy użyciu parametrów tweenInfo i tweenGoal, a następnie odtwarza nowy tween.

Jeśli teraz przetestujesz grę, zauważysz, że niestandardowy wskaźnik przechodzi animację między każdą zmianą zdrowia:

Dodaj efekt obrażeń

Domyślny system wskaźników zdrowia zawiera krótki, subtelny czerwony odcień na krawędziach ekranu, gdy postać otrzymuje obrażenia. Poprzez wyłączenie domyślnego wskaźnika ten efekt zostaje usunięty, ale możesz go zastąpić własną implementacją.

1. Uzyskaj dostęp do karty edytora skryptów dla skryptu UpdateCustomMeter, który edytowałeś wcześniej.

2. Zaznacz wszystkie linie i wklej je z następującym kodem:

   UpdateCustomMeter

   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Odniesienie do lokalnego gracza, postaci i humanoida
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Właściwości tweenu
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Zmienna do przechowywania/cache'owania zdrowia postaci
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Uzyskaj (lub stwórz nowy) efekt korekcji koloru wewnątrz kamery gracza
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Odniesienie do wewnętrznej ramki paska
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Kolory sekwencji gradientu (czerwony, pomarańczowy, żółty, limonkowy, zielony)
   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)
   }
   
   -- Funkcja do uzyskania koloru w sekwencji gradientu z punktu ułamkowego
   local function getColorFromSequence(fraction: number): Color3
   	-- Każdy kolor w gradientzie definiuje początek i/lub koniec sekcji
   	local numSections = #gradient - 1
   
   	-- Każda sekcja reprezentuje część 1
   	local sectionSize = 1 / numSections
   
   	-- Określenie, w której sekcji znajduje się żądany ułamek
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Uzyskanie kolorów na początku i końcu sekcji
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizacja ułamka, aby był liczbą od 0 do 1 w obrębie sekcji
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp między początkiem a końcem na podstawie znormalizowanego ułamka
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Oblicz nową wartość zdrowia jako procent maksymalnego
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tweenuj pasek do nowych celów rozmiaru/koloru
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Pokaż efekt obrażeń, jeśli nowe zdrowie jest niższe niż przechowywane zdrowie
   	if healthFraction < cachedHealth then
   		-- Zapisz nową wartość zdrowia
   		cachedHealth = healthFraction
   
   		-- Ustaw korekcję koloru na czerwony jako początkowy odcień przed tweenowaniem
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tweenuj odcień z powrotem do białego (neutralnego i bez zmiany odcienia)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Nasłuchuj zmian zdrowia humanoida
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Początkowo ustaw (lub zresetuj) rozmiar/kolor paska na aktualne zdrowie
   onHealthChanged()

   Kluczowe dodatki/zmiany

   Linie	Cel
   14	Ustawia odniesienie zastępcze (cachedHealth), aby śledzić ilość zdrowia postaci między zmianami, aby móc porównać, czy zmiana jest niższa (obrażenia).
   17‑18	Podczas początkowego pojawienia się postaci tworzy nowy ColorCorrectionEffect wewnątrz aktualnej Camera gracza lub uzyskuje odniesienie do tej samej instancji przy późniejszych odrodzeniach. Przez umieszczenie tego efektu post-processingu w kamerze gracza, stosuje się go tylko do ich lokalnego ekranu, a nie do ekranu każdego gracza na serwerze.
   68‑83	Najpierw wykonuje warunkowe sprawdzenie, aby potwierdzić, że zmiana zdrowia jest niższa niż wartość cachedHealth, co wskazuje na obrażenia; jeśli tak, ustawia cachedHealth na nową wartość. Następnie ustawia odcień ColorCorrectionEffect na [255, 25, 25] (czerwony) z wyższą saturacją, a następnie tweenuje odcień z powrotem do domyślnego neutralnego białego ([255, 255, 255]) bez saturacji.

Jeśli teraz przetestujesz grę, zauważysz, że ekran na chwilę miga na czerwono, gdy postać otrzymuje obrażenia: