Tworzenie wskaźników HUD

HUD lub Wyświetlacz nawigacyjny to zestaw elementów UI, które są zawsze widoczne lub dostępne podczas rozgrywki, takich jak wyświetlacze punktów, wskaźniki zdrowia i przyciski menu. Dodanie HUD jest niezbędne w większości doświadczeń, ponieważ wyświetla informacje, które pomagają graczom osiągać cele rozgrywki.

Typowym elementem HUD jest wskaźnik zdrowia z ikoną po lewej stronie, który można dostosować jako pasek timera, pasek postępu lub podobny.

Używając Zagrożonej Stacji Kosmicznej jako miejsca wyjścia i Podstawy UI - Wskaźnik HUD jako miejsca odniesienia, ten samouczek demonstruje:

• Konfigurację i użycie Emulatora Urządzeń do testowania projektu na wielu emulowanych ekranach.
• Użycie StarterGui jako zarówno kontenera projektu, jak i przechowywania.
• Jak umiejscowić/zmienić rozmiar elementów interfejsu użytkownika wokół wbudowanych kontrolerów Roblox i notchów/wysp urządzeń, takich jak notch 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 kluczowymi punktami 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 doświadczeń na swoich telefonach lub tabletach, a następnie kontynuować tam, gdzie przerwali, na swoim komputerze lub konsoli. Urządzenia mobilne (telefony i tablety) mają najmniej miejsca na ekranie, dlatego ważne jest, aby elementy UI pasowały do mniejszych ekranów i były wyraźnie widoczne dla graczy.

Najlepszym sposobem na testowanie projektów UI w różnych platformach jest Emulator Urządzeń w Studio. Narzędzie to oferuje wstępnie zdefiniowany zestaw urządzeń i pozwala dodać własne niestandardowe ustawienia.

1. Otwórz szablon Zagrożonej Stacji Kosmicznej w Studio.

2. W menu Test w Studio przełą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 UI (GuiObjects), które wyświetlane są na ekranie gracza (w tym samouczku, w całości wskaźnik zdrowia). Aby wyświetlić ScreenGui i jego obiektów podrzędnych dla wszystkich graczy, którzy dołączają do doświadczenia, umieść go wewnątrz kontenera StarterGui. Kiedy gracz dołącza, a jego postać po raz pierwszy się pojawia, ScreenGui i jego zawartość klonują się do kontenera PlayerGui dla tego gracza, który znajduje się w kontenerze Players.

Aby wstawić pusty ScreenGui:

1. W oknie Eksplorator znajdź kontener StarterGui.

   

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

   

3. Zmień nazwę nowego kontenera na HUDContainer, aby odzwierciedlał jego przeznaczenie.

   

Wykorzystaj bezpieczne obszary

Nowoczesne telefony wykorzystują cały ekran, ale zazwyczaj zawierają notch, wycięcia i inne elementy, które zajmują miejsce ekranowe. Każde doświadczenie Roblox zawiera również górne elementy sterujące, aby szybko uzyskać dostęp do głównego menu, czatu, tablicy wyników i nie tylko.

Aby upewnić się, że gracze mogą widzieć i uzyskiwać dostęp do wszystkich interfejsów użytkownika bez przeszkód, Roblox zapewnia właściwość ScreenInsets, która kontroluje boczne marginesy w ScreenGui. Każdy obiekt UI, który umieszczasz wewnątrz ScreenGui, jest względem granic marginesów.

Chociaż domyślna wartość CoreUISafeInsets zapewnia, że wszystkie obiekty UI pozostają z dala od UI Roblox i wycięć urządzeń, DeviceSafeInsets może być lepszą opcją, aby wykorzystać ograniczoną przestrzeń ekranową, 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 marginesy krawędzi

Z ScreenInsets ustawionym na DeviceSafeInsets, zawartość teraz może sięgać bezpośrednio do fizycznej górnej krawędzi ekranu. Jednak niewielka ilość marginesu może pomóc przesunąć wskaźnik zdrowia (i inne obiekty wewnątrz kontenera) nieco z dala od krawędzi ekranu, aby uzyskać czystszy wygląd i zapobiec ich przycięciu.

Jednym ze sposobów na zastosowanie marginesu do kontenera UI jest wstawienie modyfikatora UIPadding:

1. Wstaw modyfikator UIPadding do HUDContainer.

   

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

   

Zbuduj wskaźnik zdrowia

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

Utwórz ramkę rodzica

Podobnie jak aplikacje projektowe, takie jak Figma i Photoshop, Frame w Roblox służy jako kontener dla innych obiektów UI. W tym samouczku cały wskaźnik zdrowia będzie zawarty w jednej ramce rodzica, co ułatwi jego przemieszczenie 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 pojawi się w widoku, upewnij się, że włączono nakładkę GUI w widgetcie Opcje wizualizacji w prawym górnym rogu 3D widoku.

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

   

Pozycjonowanie ramki

W Roblox pozycja obiektu UI jest reprezentowana przez zestaw współrzędnych UDim2, który zawiera wartości Scale i Offset dla osi X i Y:

• Wartości Scale reprezentują procent rozmiaru kontenera wzdłuż odpowiedniej osi, dodające wartości Offset.
• Wartości Offset reprezentują, ile pikseli przesunąć obiekt wzdłuż odpowiedniej osi, dodając wartości Scale.

Aby umiejscowić obiekt UI w prawym górnym rogu kontenera ekranu, Scale jest najlepszym podejściem, ponieważ wartość X 1 (100%) reprezentuje prawą krawędź kontenera, niezależnie od fizycznego rozmiaru piksela ekranu. Podobnie, wartość skali Y 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 są między 0 a 1, w zależności od rozmiaru obiektu, więc wartość kotwicy 1, 0 umieszcza punkt kotwicy ramki w jej prawym górnym 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 być teraz umiejscowiona w prawym górnym rogu bezpiecznego obszaru urządzenia, nieco wcięta od krawędzi w rezultacie marginesu.

   

Zmień rozmiar ramki

Podobnie jak pozycja, Size obiektu UI jest reprezentowana przez zestaw współrzędnych UDim2, który zawiera wartości Scale i Offset dla osi X i Y.

Domyślnie nowy rozmiar ramki to {0, 100},{0, 100}, co oznacza 100 pikseli zarówno przy szerokości (X), jak i wysokości (Y). Podczas gdy ściśle definiowana wartość pikseli jest przydatna w niektórych przypadkach, wiele elementów UI skaluje się bardziej responsywnie na wielu ekranach, gdy jest ustawione jako procent całkowitego rozmiaru kontenera ekranu.

1. Z ramką MeterBar wybraną, przejdź do okna Właściwości i odnajdź 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 wartości pikselowych.

   

Stylizuj ramkę

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

1. Z ramką MeterBar wybraną, 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 równa się 25% przezroczystości w innych aplikacjach, takich jak Figma czy Photoshop.

   

3. Wstaw obiekt UIStroke, potężny modyfikator UI, który dodaje dostosowywalny kontur do ramki.

   

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

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

   

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

1. Wstaw instancję UICorner do ramki MeterBar.

   

2. Z nowym modyfikatorem UICorner wybranym, ustaw CornerRadius na 0.5, 0. Użycie wartości skali 0.5 (50%) zamiast wartości pikselowej 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 ukończona, możesz dodać część wewnętrznego wypełnienia, aby reprezentować zmienne zdrowie postaci. Ponieważ musi to być tylko wypełniony obszar, podramka Frame wewnątrz ramki rodzica jest odpowiednia.

1. Wstaw dziecko Frame do ramki MeterBar.

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

   

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

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

   Ponieważ dzieci ramki są umiejscowione i rozmiarowane w stosunku do ich rodzica, zastosowanie wartości skali sprawia, że wewnętrzna ramka zajmuje 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 nowym modyfikatorem UICorner wybranym, ustaw jego właściwość CornerRadius na 0.5, 0, aby dopasować kształt "pigułki" rodzica MeterBar.

   

6. Aby lepiej reprezentować, że pełny wskaźnik oznacza dobre zdrowie, wybierz InnerFill i ustaw jej właściwość BackgroundColor3 na [0, 225, 50] (później, w następnym 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. Obiekt ten pozwala zastosować 2D zasób obrazu, który został załadowany jako naklejka do Roblox.

2. Zmień nazwę nowej etykiety na Icon.

   

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

   

4. Znajdź właściwość Image ikony i wprowadź rbxassetid://91715286435585, odniesienie do wcześniej załadowanego obrazu serca (jeśli chcesz, możesz importować swój własny obraz i użyć jego identyfikatora zasobu).

   

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

   

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

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

   

Ogranicz rozmiar

Choć wysokość skali 0.05 (5%) wygląda dobrze na nowoczesnych ekranach telefonów i monitorów do gier, które mają proporcje 16:9 lub szersze, wskaźnik może wyglądać nieco za wysoki 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 bliżej spójnej wartości między szerszymi ekranami a węższymi, możesz zastosować UISizeConstraint, aby ograniczyć maksymalną wysokość pikseli.

1. Wstaw UISizeConstraint do ramki MeterBar.

   

2. Z nowym ogranicznikiem wybranym, ustaw 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 a wyższymi ekranami.

Zastąp domyślny wskaźnik zdrowia

Doświadczenia 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, może dojść do jego dublowania i potencjalnego nakładania się na niestandardowy wskaźnik.

Wyłącz domyślny wskaźnik

Aby wyłączyć domyślny wskaźnik zdrowia, użyjesz skryptu klienta (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ń nazwę na HideDefaultHealthMeter, aby opisać jego przeznaczenie. Skrypty w StarterPlayerScripts uruchamiają się automatycznie, gdy lokalny gracz dołącza do doświadczenia, 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	Uzyskuje odniesienie do rdzeniowego serwisu, StarterGui, który reprezentuje ten sam kontener, w którym stworzyłeś niestandardowy wskaźnik zdrowia i który jego zawartości klonują się do kontenera PlayerGui dla każdego gracza, który dołącza do doświadczenia.
   4	Wywołuje metodę SetCoreGuiEnabled() serwisu i nakazuje wyłączenie domyślnego wskaźnika zdrowia (false).

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

Nasłuchuj zmian zdrowia

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

1. W oknie Eksplorator zlokalizuj kontener StarterCharacterScripts wewnątrz StarterPlayer.

   

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

   

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 wskaźnika
   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 na podstawie punktu ułamkowego
   local function getColorFromSequence(fraction: number): Color3
   	-- Każdy kolor w gradiencie definiuje początek i/lub koniec sekcji
   	local numSections = #gradient - 1
   
   	-- Każda sekcja reprezentuje część 1
   	local sectionSize = 1 / numSections
   
   	-- Określ, w której sekcji znajduje się żądany ułamek
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Pobierz kolory na początku i końcu sekcji
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizuj ułamek, aby był liczbą z zakresu 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 nowe zdrowie jako procent maksymalnego
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Ustaw wskaźnik na nowe wartości docelowe rozmiaru/koloru
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Nasłuchuj zmian w zdrowiu humanoida
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Początkowo ustaw (lub zresetuj) rozmiar/kolor paska na aktualne zdrowie
   onHealthChanged()

   Wyjaśnienie kodu

   Linie	Cel
   4‑6	Uzyskuje odniesienia do lokalnego Player, modelu jego Character i klasy Humanoid w jego wnętrzu.
   9‑10	Uzyskuje odniesienie do obiektu InnerFill wskaźnika, który musi być zmieniony i pokolorowany, gdy zdrowie postaci się zmienia.
   13‑19	Definiuje tablicę pięciu kolorów (czerwony, pomarańczowy, żółty, limonkowy, zielony), aby ponownie pokolorować wskaźnik 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 kluczowych punktów.
   22‑41	Funkcja pomocnicza, która zwraca kolor pomiędzy jakimikolwiek kluczowymi kolorami gradientu.
   43‑50	Funkcja obsługująca wszelkie zmiany w zdrowiu. Tutaj oblicza nowe zdrowie jako procent maksymalnego zdrowia MaxHealth, zmienia rozmiar InnerFill na ten procent i ponownie koloruje go na kolor zwrócony z funkcji getColorFromSequence().
   53	Główne połączenie zdarzenia, które wykrywa zmiany Health replikowane z serwera i wywołuje funkcję onHealthChanged().
   56	Początkowo (przy pojawieniu się postaci lub respawnie) wywołuje funkcję onHealthChanged(), aby ustawić rozmiar i kolor InnerFill na poprawny procent. Zazwyczaj będzie to pełna szerokość i kolor zielony.

Jeśli teraz przetestujesz doświadczenie, zauważysz, że niestandardowy wskaźnik poprawnie aktualizuje zarówno rozmiar, jak i kolor, gdy postać otrzymuje obrażenia:

Animuj pasek wskaźnika

Aby dodać dodatkowy poziom wykończenia do niestandardowego wskaźnika, możesz animować zmiany zdrowia przez tweening, stopniowo zmieniając rozmiar i kolor paska wskaźnika przez ½ sekundy.

1. Przejdź do zakładki edytora skryptów dla skryptu UpdateCustomMeter, który edytowałeś wcześniej.

2. Wybierz wszystkie linie (CtrlA lub ⌘A) i następnie 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 tweenowania
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Odniesienie do wewnętrznej ramki wskaźnika
   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 na podstawie punktu ułamkowego
   local function getColorFromSequence(fraction: number): Color3
   	-- Każdy kolor w gradiencie definiuje początek i/lub koniec sekcji
   	local numSections = #gradient - 1
   
   	-- Każda sekcja reprezentuje część 1
   	local sectionSize = 1 / numSections
   
   	-- Określ, w której sekcji znajduje się żądany ułamek
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Pobierz kolory na początku i końcu sekcji
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizuj ułamek, aby był liczbą z zakresu 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 nowe zdrowie jako procent maksymalnego
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tweenuj pasek do nowych wartości docelowych 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 w zdrowiu humanoida
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Początkowo ustaw (lub zresetuj) rozmiar/kolor paska na aktualne zdrowie
   onHealthChanged()

   Kluczowe dodatki/zmiany

   Linie	Cel
   2	Uzyskuje odniesienie do TweenService, aby zaimplementować funkcjonalność tweeningową w skrypcie.
   10	Tworzy konstruktor TweenInfo, który definiuje czas trwania zamierzonego tweena, styl ułatwienia i kierunek ułatwienia.
   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 i odtwarza nowy tween.

Jeśli teraz przetestujesz doświadczenie, zauważysz, że niestandardowy wskaźnik przechodzi tweening 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, efekt ten zostaje usunięty, ale możesz zastąpić go swoją własną implementacją.

1. Przejdź do zakładki edytora skryptów dla skryptu UpdateCustomMeter, który edytowałeś wcześniej.

2. Wybierz 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 tweenowania
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Zmienna do przechowywania/cache zdrowia postaci
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Pobierz (lub utwórz nowy) efekt korekcji kolorów wewnątrz kamery gracza
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Odniesienie do wewnętrznej ramki wskaźnika
   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 na podstawie punktu ułamkowego
   local function getColorFromSequence(fraction: number): Color3
   	-- Każdy kolor w gradiencie definiuje początek i/lub koniec sekcji
   	local numSections = #gradient - 1
   
   	-- Każda sekcja reprezentuje część 1
   	local sectionSize = 1 / numSections
   
   	-- Określ, w której sekcji znajduje się żądany ułamek
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Pobierz kolory na początku i końcu sekcji
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizuj ułamek, aby był liczbą z zakresu 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 nowe zdrowie jako procent maksymalnego
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tweenuj pasek do nowych wartości docelowych 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ż zdrowie przechowywane
   	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
   
   		-- Tweenowanie odcienia 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 w zdrowiu humanoida
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Początkowo ustaw (lub zresetuj) rozmiar/kolor paska na aktualne zdrowie
   onHealthChanged()

   Kluczowe dodatki/zmiany

   Linie	Cel
   14	Ustawia referencję placeholder (cachedHealth), aby śledzić ilość zdrowia postaci między zmianami, aby można było porównać, czy zmiana jest niższa (obrażenia).
   17‑18	Podczas początkowego pojawienia się postaci tworzy nowy ColorCorrectionEffect wewnątrz obecnej Camera gracza, lub uzyskuje odniesienie do tej samej instancji przy późniejszych respawnach. Przez przypisanie tego efektu post-processingu do kamery gracza, stosuje się tylko do jego 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 ColorCorrectionEffect na kolor [255, 25, 25] (czerwony) z wyższą saturacją, a następnie tweenuje odcień do domyślnej wartości neutralnej białej ([255, 255, 255]) bez saturacji.

Jeśli teraz przetestujesz doświadczenie, zauważysz, że ekran miga na czerwono, za każdym razem, gdy postać otrzymuje obrażenia: