Twórz liczniki HUD

A HUD lub wyświetlacz główny to zbiór elementów interfejsu użytkownika, które zawsze są widoczne lub dostępne podczas rozgrywka, takie jak wyświetlanie wyników, liczniki zdrowia i przyciski menu.Włączenie HUD jest niezbędne dla większości doświadczeń, ponieważ wyświetla informacje, które pomagają graczom odnieść sukces w ich celach rozgrywkowych.

Wspólny element HUD to licznik zdrowia z ikoną po lewej stronie, który można dostosować do paska czasu, paska postępu lub podobnego.

In-game view showing custom health meter in upper-right region.

Używając niebezpiecznej stacji kosmicznej jako miejsca startowego i podstawy interfejsu użytkownika - licznika HUD jako miejsceodpowiedniego do końca, ten samouczek pokazuje:

Ustawienie i użycie emulatora urządzenia do testowania projektu na wielu emulowanych ekranach .
Użycie StarterGui jako zarówno pojemnika do przechowywania, jak i projektu
Jak pozycjonować/skalować elementy interfejsu użytkownika wokół wbudowanych kontroli Roblox i notek/wysp urządzeń, takich jak notka kamery na nowoczesnych telefonach.
Jak zastąpić domyślną metrę zdrowia Roblox własną metrą i podłączyć ją do poziomu zdrowia postaci.
Jak animować środkową część wskaźnika zdrowia i ustawić jej kolor między pięcioma punktami gradacji kolorów (czerwony, pomarańczowy, żółty, limonkowy, zielony).

Włącz emulator urządzenia

Roblox jest z natury wieloplatformowy, ponieważ gracze mogą odkrywać i dołączać do doświadczeń na komputerze lub konsole, a następnie podnieść telefon i kontynuować tam, gdzie wyłączone.Urządzenia mobilne (telefony i tablety) mają najmniejszą ilość miejsca na ekranie, więc ważne jest, aby elementy interfejsu użytkownika pasowały do mniejszych ekranów i były wyraźnie widoczne dla graczy.

Najlepszym sposobem na przetestowanie projektów interfejsu na wszystkich platformach jest emulator urządzeń Studio Device Emulator.To narzędzie zapewnia wstępną selekcję urządzeń i umożliwia dodawanie własnych niestandardowych ustawień.

Otwórz szablon Niebezpieczna stacja kosmiczna w Studio.
Z zakładki Test , przełącz narzędzie Urządzenie .
Z paska bezpośrednio nad głównym oknem wyboru wybierz emulację telefonu, taką jak iPhone X lub Samsung Galaxy A51 .Następnie ustaw rozmiar widoku na Pasuje do okna , aby wykorzystać maksymalną przestrzeń w Studio.

Stwórz kontener ekranu

Pojemnik ScreenGui zawiera obiekty interfejsu użytkownika (GuiObjects), które mają być wyświetlane na ekranie gracza (w tym samouczku cała zawartość licznika zdrowia).Aby wyświetlić ScreenGui i jego dziecięce obiekty każdemu graczowi, który dołącza do doświadczenia, umieść go w ramach kontenera StarterGui.Kiedy gracz dołącza i jego postać pojawia się po raz pierwszy, klonuje się ScreenGui i jego zawartość do kontenera PlayerGui dla tego gracza, położonego w kontenerze Players.

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

Aby wstawić puste ScreenGui :

W oknie Eksploratora znajdź kontener StarterGui.
Najedź na pojemnik, kliknij przycisk ⊕ i włóż ScreenGui.
Zmień nazwę nowego kontenera HUDContainer , aby odzwierciedlić jego cel.

Wykorzystaj bezpieczne obszary

Nowoczesne telefony wykorzystują cały ekran, ale zwykle obejmują przetłoczenia, wycięcia i inne elementy, które zajmują przestrzeń ekranu.Każde doświadczenie Roblox obejmuje również sterowanie paskiem górnym do szybkiego dostępu do głównego menu, czat , tabelę wyników i więcej.

Mobile device showing Roblox top bar buttons and device cutout.

Aby upewnić się, że gracze mogą zobaczyć i uzyskać dostęp do wszystkich interfejsów bez przeszkód, Roblox dostarcza właściwość ScreenInsets, która kontroluje wstawki bezpiecznej strefy dla zawartości ScreenGui.Każdy obiekt interfejsu użytkownika, który umieścisz wewnątrz ScreenGui jest względny do granic insercji.

Mobile device showing the core UI safe area.

Chociaż domyślnie CoreUISafeInsets zapewnia, że wszystkie obiekty interfejsu pozostają wolne od interfejsu Roblox i cięć urządzeń, DeviceSafeInsets może być lepszą opcją do wykorzystania ograniczonej przestrzeni ekranu, jak pokazano poniżej.

CoreUISafeInsets utrzymuje licznik wolny od wszelkich przeszkód, ale dodaje dużą szczelinę między licznikiem a fizycznym górnym brzegiem ekranu.

W oknie Eksploratora wybierz HUDContainer .
W oknie Właściwości, ustaw właściwość ScreenInsets na DeviceSafeInsets.

Ustaw przepustkę brzegu

Z ScreenInsets ustawionym na DeviceSafeInsets treść może teraz rozszerzać się bezpośrednio do górnej krawędzi fizycznej ekranu.Jednak niewielka ilość przestrzeni wypełniająca może pomóc wysunąć wskaznik zdrowia (i inne obiekty wewnątrz kontenera) nieco z krawędzi ekranu, aby uzyskać czystszy wygląd i zapobiec ich obcięciu.

Screen container with padding around all edges.

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

Wprowadź modyfikator UIPadding do HUDContainer .
Po wybraniu nowego obiektu wpisz wartość dla wszystkich krawędzi pojemnika ( , , , ).Obejmuje to przesunięcie o 16 pikseli wokół pojemnika, niezależnie od rozdzielczości ekranu.

Zbuduj licznik zdrowia

Z konfigurowanym kontenerem ekranu, możesz zacząć budować licznik zdrowia za pomocą obiektów interfejsu użytkownika Roblox, takich jak ramki i etykieta obrazu.

Basic components used for the health meter.

Utwórz ramę rodziczną

Podobnie do aplikacji projektowych takich jak Figma i Photoshop, Frame w Roblox służy jako pojemnik na inne obiekty UI.W tym samouczku cały licznik zdrowia zostanie umieszczony w pojedynczej ramce rodzica, co ułatwia przesuwanie po różnych układach HUD.

Wprowadź Frame w HUDContainer . Nowe okno pojawia się w lewym górnym rogu jako puste białe kwadratowe okno.

Jeśli nowe okno nie pojawia się w polu widzenia, upewnij się, że przełączyłeś przykrycie GUI z widgetem Opcje wizualizacji w prawym górnym rogu widoku 3D lub przełączyłeś Widzialność interfejsu z zakładką Widok.
Zmień nazwę nowej instancji ramki na MeterBar .

Pozycjonuj ramę

W Roblox pozycja obiektu UI jest reprezentowana przez zestaw koordynatów UDim2, zawierający wartości Scale i Offset dla obu osi X i Y :

Scale wartości reprezentują procent wielkości pojemnika wzdłuż odpowiedniego osi, dodatkowe do każdej Offset wartości.
Offset wartości reprezentują ilość pikseli do przesunięcia obiektu na odpowiednim osi, dodatku dowolnych Scale wartości.

Aby umieścić obiekt UI w prawym górnym rogu kontenera ekranu, jest najlepszym podejściem, ponieważ wartość X (100%) reprezentuje prawy kraniec kontenera, niezależnie od rozmiaru fizycznego piksela ekranu.Podobnie wartość skali Y (0%) o wartości representuje górną krawędź pojemnika.

Scale ranges for the X and Y axes of a container.

Ponadto musisz ustawić punkt odniesienia w prawym górnym punkcie dla ramy rodzicielskiej, aby określić jej punkt pochodzenia.Akceptowane wartości są pomiędzy i , w odniesieniu do rozmiaru obiektu, więc wartość przypisu umieszcza punkt przypisu ramy w jego prawym górnym rogu.

Frame anchor point in its upper-right corner.

W oknie Eksploratora wybierz ramę paska pomiarowego , którą wcześniej wstawiłeś.
W oknie Właściwości, wprowadź dla i naciśnij .Studio automatycznie doda nawiasy, aby utworzyć UDim2 ..
Wpisz 1, 0 dla właściwości AnchorPoint.Rama powinna teraz zostać umieszczona w prawym górnym rogu obszaru bezpieczeństwa urządzenia , nieco odstając od krawędzi w wyniku przetłoczenia .

Zmień rozmiar ramy

Podobnie jak pozycja, Size z obiektu UI reprezentuje zestaw koordynatów UDim2 zawierający wartości Scale i Offset dla obu osi X i Y .

Domyślnie rozmiar nowego ramu wynosi {0, 100},{0, 100} , co oznacza 100 pikseli w obu wymiarach ( X ) i wysokości ( Y ).Chociaż ścisła wartość piksela jest przydatna w niektórych przypadkach, wiele elementów interfejsu skaluje bardziej responsywnie na wielu ekranach, gdy ustawione jest na procent ogólnej rozmiaru kontenera ekranu.

Po wybraniu ramki Pasek wskaźników, uzyskaj dostęp do okna Właściwości i przejdź do właściwości >.
Wprowadź wartość 0.35, 0, 0.05, 0 , aby ustawić procentową szerokość 35% i wysokość 5% bez dodanych przesunięć pikseli.

Styl ramy

Domyślnie Frames są wypełnione solidną bielą.Ostateczny licznik zdrowia powinien mieć ciemniejsze i nieco mniej przezroczyste wypełnienie, a także ciemny obrys, aby wyróżniał się lepiej na jasnym i ciemnym tle.

Frame styled with opacity, border, and rounded corners.

Po wybraniu ramki Pasek wskaźników, wprowadź dla właściwości >.Studio automatycznie przekonwertuje go na wartość RGB .
Wpisz 0.75 dla właściwości BackgroundTransparency.W Roblox przejrzystość wynosi od 0 dla w pełni niedostępnej do 1 dla w pełni przejrzystej, więc 0.75 równa się 25% niedostępności w innych aplikacjach, takich jak Figma lub Photoshop.
Wstaw obiekt UIStroke, potężny modyfikator interfejsu użytkownika, który dodaje dostosowywalny pasek do ramy.
Po wybraniu nowego UIStroke ustaw następujące właściwości:
- Thickness = 3
- Transparency = 0.25 (75% niedźwiedzia)

Aby ukończyć styl ramy licznika, możesz zaokrąglić krawędzie, aby utworzyć kształt "pigu" zamiast ostrego prostokąta.

Włóż instancję UICorner do ramy paska licznika .
Po wybraniu nowego UICorner ustaw CornerRadius na 0.5, 0.Użycie wartości skali (50%) o wartości w miejsce wartości piksela jest szczególnie wygodne dla paska licznika, ponieważ zapewnia całkowicie zaokrągloną krzywą bez względu na wysokość lub szerokość pojemnika.

Stwórz wypełnienie wewnętrzne

Teraz, gdy zawartość ramy licznika zdrowia jest kompletna, możesz dodać część wypełnienia wewnętrznego , aby reprezentować zdrowie zmiennej znaku.Ponieważ musi być to tylko wypełniony region, podwójne dziecko Frame wewnątrz ramy rodzica jest odpowiednie.

Inner fill frame added to parent frame to represent the character's variable health.

Wstaw dziecko Frame w ramę paska licznika .
Zmień nazwę nowej instancji ramki na Wewnętrzne wypełnienie .
Wybierając wypełnienie wewnętrzne , ustaw następujące właściwości:
- AnchorPoint = 0, 0.5 (lewe krawędzie i poziomy środek)
- Position = 0, 0, 0.5, 0
- Size = 1, 0, 1, 0
Ponieważ dzieci ram są położone i skalibrowane względem swojego rodzica, użycie skali wypełnia wewnętrzną ramę pełną szerokość i wysokość rodzica, zaczynając od lewej krawędzi rodzica.
Aby dopasować kształt "pilli" ramy rodzica, włóż dodatkowe UICorner do wypełnienia wewnętrznego .
Po wybraniu nowego modyfikatora UICorner ustaw jego właściwość CornerRadius na 0.5, 0 aby pasował do kształtu "pill" ramy rodzica MeterBar .
Aby lepiej reprezentować to, że pełny licznik wskazuje na dobre zdrowie, wybierz wypełnienie wewnętrzne i ustaw jego właściwość na (w późniejszym zadaniu zmienisz skrypt tego koloru w zależności od rzeczywistego zdrowia).

Dodaj ikona

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

Wprowadź ImageLabel w ramce paska licznika . Ten obiekt pozwala ci zastosować 2D zasób obrazu, który został przesłany jako naklejka do Roblox.
Zmień nazwę nowej instancji etykiety na Ikonę .
Z ikoną wybraną, ustaw jej właściwość ZIndex na 2.Choć nowo dodane obiekty interfejsu zawsze są warstwą przed obiektami wcześniej wstawionymi, ta zmiana zapewnia, że ikona zawsze wyświetlana jest przed elementami ramy licznika.
Zlokalizuj właściwość ikonaImage i wprowadź rbxassetid://91715286435585 , odniesienie do wcześniej przesłanej obrazu serca (jeśli chcesz, możesz zaimportować własny obraz i użyć jego ID zasobu).
Aby zapewnić, że ikona ImageLabel zawsze pozostaje w proporcji 1:1, włóż UIAspectRatioConstraint.Chociaż ograniczenie to ma właściwości dostosowywalne, aby kontrolować proporcję aspektu, możesz zostawić jego domyślne wartości bez zmian.
Po wybraniu ikony , dokończ wygląd i pozycję poprzez zmianę następujących właściwości:
- AnchorPoint = 0.5, 0.5 (środkowy anchor)
- BackgroundTransparency = 1 (100% przejrzyste)
- Position = 0, 0, 0.5, 0 (lewa strona licznika i poziomy środek)
- Size = 2, 0, 2, 0 (200% ogólnej wielkości ramki MeterBar , ograniczonej do 1:1 przez UIAspectRatioConstraint )

Ogranicz rozmiar

Podczas gdy wysokość skali (5%) o wysokości 0.05 (5%) na nowoczesnych ekranach telefonów i monitorów do gier o proporcji 16:9 lub szerszej wygląda dobrze, wskaźnik może wyglądać nieco za wysoko na ekranach tabletów i starszych telefonów.Możesz to sprawdzić, emulując tablet takich jak iPad 7. generacji z Emulator urządzenia .

Device Emulator set to emulate a tablet device.

Emulation on tablet device with meter bar taller than desired.

Aby zachować większą spójność wysokości paska licznika z szerszymi ekranami, możesz zastosować UISizeConstraint aby ograniczyć maksymalną wysokość pikseli.

Włóż UISizeConstraint do ramy paska licznika .
Po wybraniu nowego ograniczenia ustaw jego właściwość na na ograniczenie wysokości do 20 pikseli, zachowując jednocześnie brak ograniczenia szerokości.

Teraz pasek licznika utrzymuje bardziej konsekwentną wysokość między szerszymi a wyższymi ekranami.

Zastąp domyślną licznik zdrowia

Doświadczenia Roblox obejmują domyślną skalę zdrowia, która staje się widoczna, gdy postacie otrzymują obrażenia.Jeśli utrzymasz domyślną licznik widoczną, zduplikuje się i prawdopodobnie zakryje niestandardowy licznik.

Default health meter overlapping and duplicating the custom health meter.

Wyłącz domyślną licznik

Aby wyłączyć domyślną liczbę zdrowia, użyjesz skryptu klienta ( ) w ramach () wezwującego () .

W oknie Eksploratora rozszerz kontener StarterPlayer i znajdź w nim kontener StarterPlayerScripts.
Włóż nowy LocalScript do pojemnika i zmień nazwę na Ukryj domyślną liczbę zdrowia , aby opisać jego cel.Skrypty w StarterPlayerScripts automatycznie uruchamiają się, gdy lokalny gracz dołącza do doświadczenia, co czyni go idealnym pojemnikiem do uruchomienia skryptu, który permanentnie ukrywa domyślną liczarkę.

Kiedy wstawisz nowy skrypt, otworzy się automatycznie w nowej zakładce edytora skryptów (jeśli nie, kliknij dwukrotnie skrypt w oknie Eksploratora ).

Wklej następujący kod w skrypcie Ukryj domyślną liczbę zdrowia :

Ukryj domyślną licznik zdrowia
local StarterGui = game:GetService("StarterGui")

-- Ukryj domyślną licznik zdrowia
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

Wyjaśnienie kodu

Linia	Przeznaczenie
1	Otrzymuje odniesienie do podstawowej usługi core, StarterGui, która reprezentuje ten sam pojemnik, w którym utworzyłeś niestandardowy licznik zdrowia i którego zawartość klonuje się do pojemnika PlayerGui dla każdego gracza, który dołącza do doznania.
4	Wzywa metodę SetCoreGuiEnabled() usługi i instruuje domyślną licznik zdrowia do wyłączenia (false).

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

Słuchaj zmian zdrowia

Wszystkie domyślne modele postaci Roblox zawierają klasę Humanoid, która zapewnia specjalne zachowania i funkcjonalność postaci, takie jak ustawienie jej prędkości chodzenia/biegu i zarządzanie jej zdrowiem.Health zmiany na serwerze powielają się na klient każdego gracza i możesz wykryć te zmiany, aby zaktualizować zarówno rozmiar, jak i kolor niestandardowego licznika zdrowia.

W oknie Eksploratora znajdź kontener StarterCharacterScripts w ciągu StarterPlayer.
Włóż nowy LocalScript do pojemnika i zmień nazwę na UpdateCustomMeter , aby opisać jego cel.Skrypty w StarterCharacterScripts automatycznie uruchamiają się za każdym razem, gdy pojawia się postać gracza, co czyni go idealnym pojemnikiem do uruchomienia skryptu, który w pełni odnowi licznik zdrowia za każdym odrodzeniem.

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

Aktualizuj niestandardowy licznik
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 ramy licznika
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- Kolory sekwencji stopniowej (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, aby uzyskać kolor w sekwencji stopniowej z punktu frakcyjnego
local function getColorFromSequence(fraction: number): Color3
	-- Każdy kolor w gradacji określa początek i/lub koniec sekcji
	local numSections = #gradient - 1

	-- Każda sekcja reprezentuje część 1
	local sectionSize = 1 / numSections

	-- Określ, do jakiego sekcji należy żądana frakcja
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- Zdobądź kolory na początku i na końcu sekcji
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- Normalizuj ułamek, aby był liczbą od 0 do 1 w sekcji
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- Lerp między początkiem a końcem w oparciu o normalizowaną frakcję
	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 pasek na nowe cele wielkości/koloru
	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
end

-- Słuchaj zmian w zdrowiu humanoidów
humanoid.HealthChanged:Connect(onHealthChanged)

-- Początkowo ustaw (lub resetować) rozmiar/kolor paska do obecnego stanu zdrowia
onHealthChanged()

Wyjaśnienie kodu

Liny	Przeznaczenie
4 ‑ 6	Otrzymuje odniesienia do lokalnego Player , ich modelu Character i klasy Humanoid w nim.
9 ‑ 10	Otrzymuje odniesienie do obiektu Wypełnienie wewnętrzne licznika, który musi zostać zmieniony i ponownie pokolorowany wraz z zmianami zdrowia postaci.
13 ‑ 19	Oznajmia matrycę pięciu kolorów (czerwony, pomarańczowy, żółty, limonkowy, zielony) do ponownego kolorowania licznika na różnych punktach; na przykład, zielony na 100% zdrowia, żółty na 50%, czerwony na 0%, lub miks w dowolnej liczbie między klawiszami.
22 ‑ 41	Funkcja pomocnicza, która zwraca miks kolorów między dowolnymi punktami kolorów gradientu.
43 ‑ 50	Funkcja, która obsługuje wszelkie zmiany w zdrowiu.Tutaj oblicza nowe zdrowie jako procent zdrowia postaci MaxHealth, zmienia rozmiar wypełnienia wewnętrznego do tego procentu skali, a następnie zmienia kolor na kolor zwrócony z funkcją getColorFromSequence().
53	Główne połączenie wydarzenia, które wykrywa zmiany Health i wywołuje funkcję onHealthChanged().
56	Początkowo (po pojawieniu się lub odrodzeniu postaci) wzywa funkcję onHealthChanged() do rozmiaru i koloru wypełnienia wewnętrznego do właściwego procentu.Zazwyczaj będzie to pełna szerokość i zielony.

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

Domyślnie system monitorowania zdrowia Roblox zawiera stopniowe efekt leczenia, który pozwala postaci powoli odzyskiwać zdrowie.Jeśli chcesz wyłączyć ten efekt, włóż puste Script o nazwie Zdrowie do pojemnika StarterCharacterScripts.Uniemożliwi to ładowanie domyślnego wewnętrznego skryptu dla każdej postaci gracza, skutecznie usuwając efekt regeneracji.

Animuj pasek licznika

Aby dodać dodatkowy poziom polskiego do niestandardowego miernika, możesz animować zmiany zdrowia poprzez przełączanie , stopniowo zmieniając rozmiar i kolor paska miernika przez ½ sekundy.

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

Wybierz wszystkie linie ( CtrlA lub ⌘A ) i następnie wklej je ( CtrlV lub ⌘V ) za pomocą następującego kodu:

Aktualizuj niestandardowy licznik
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 przejściowe
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- Odniesienie do wewnętrznej ramy licznika
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- Kolory sekwencji stopniowej (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, aby uzyskać kolor w sekwencji stopniowej z punktu frakcyjnego
local function getColorFromSequence(fraction: number): Color3
	-- Każdy kolor w gradacji określa początek i/lub koniec sekcji
	local numSections = #gradient - 1

	-- Każda sekcja reprezentuje część 1
	local sectionSize = 1 / numSections

	-- Określ, do jakiego sekcji należy żądana frakcja
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- Zdobądź kolory na początku i na końcu sekcji
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- Normalizuj ułamek, aby był liczbą od 0 do 1 w sekcji
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- Lerp między początkiem a końcem w oparciu o normalizowaną frakcję
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- Oblicz nowe zdrowie jako procent maksymalnego
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- Przesuwanie paska 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

-- Słuchaj zmian w zdrowiu humanoidów
humanoid.HealthChanged:Connect(onHealthChanged)

-- Początkowo ustaw (lub resetować) rozmiar/kolor paska do obecnego stanu zdrowia
onHealthChanged()

Dodania/zmiany kluczy >

Liny	Przeznaczenie
2	Otrzymuje odniesienie do TweenService w celu wdrożenia funkcjonalności tweeningu w skrypcie.
10	Tworzy konstruktor TweenInfo, który określa czas trwania planowanej przerwy, styl łagodzenia oraz kierunek łagodzenia.
52 ‑ 57	Zamiast po prostu ustawić rozmiar i kolor paska jak w wersji poprzedniej, deklaruje tabelę tweenGoal z docelowym rozmiarem/kolorem, tworzy nowy przejście za pomocą parametrów tweenInfo i tweenGoal, a następnie odtwarza nowe przejście.

Jeśli teraz przetestujesz doświadczenie, zauważysz, że młodzieżowe liczniki niestandardowe między każdą zmianą zdrowia:

Dodaj efekt obrażeń

Domyślny system monitorowania stanu obejmuje krótką, subtelną czerwoną tonę na krawędziach ekranu, gdy postać jest uszkodzona.Poprzez wyłączenie domyślnego licznika ten efekt zostaje usunięty, ale możesz go zastąpić własną implementacją.

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

Wybierz wszystkie linie i wklej nad nimi następujący kod:

Aktualizuj niestandardowy licznik
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 przejściowe
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- Zmienna do przechowywania/przechowywania zdrowia postaci
local cachedHealth = humanoid.Health / humanoid.MaxHealth

-- Zdobądź (lub utwórz nowy) efekt korekcji koloru w środku kamery gracza
local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
colorCorrection.Name = "DamageColorEffect"

-- Odniesienie do wewnętrznej ramy licznika
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- Kolory sekwencji stopniowej (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, aby uzyskać kolor w sekwencji stopniowej z punktu frakcyjnego
local function getColorFromSequence(fraction: number): Color3
	-- Każdy kolor w gradacji określa początek i/lub koniec sekcji
	local numSections = #gradient - 1

	-- Każda sekcja reprezentuje część 1
	local sectionSize = 1 / numSections

	-- Określ, do jakiego sekcji należy żądana frakcja
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- Zdobądź kolory na początku i na końcu sekcji
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- Normalizuj ułamek, aby był liczbą od 0 do 1 w sekcji
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- Lerp między początkiem a końcem w oparciu o normalizowaną frakcję
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- Oblicz nowe zdrowie jako procent maksymalnego
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- Przesuwanie paska 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ż zapisane zdrowie
	if healthFraction < cachedHealth then
		-- Zapisz nową wartość zdrowia
		cachedHealth = healthFraction

		-- Ustaw korekcję koloru na czerwony jako początkowy odcień przed przejściem
		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
		colorCorrection.Saturation = 2.5

		-- Przejdź do odcienia z powrotem do bieli (neutralny i bez zmiany odcienia z normalnego)
		local colorCorrectionTweenGoal = {
			TintColor = Color3.fromRGB(255, 255, 255),
			Saturation = 0
		}
		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
		colorCorrectionTween:Play()
	end
end

-- Słuchaj zmian w zdrowiu humanoidów
humanoid.HealthChanged:Connect(onHealthChanged)

-- Początkowo ustaw (lub resetować) rozmiar/kolor paska do obecnego stanu zdrowia
onHealthChanged()

Dodawanie kluczy/zmiany

Liny	Przeznaczenie
14	Ustawia odniesienie placeholdera ( cachedHealth ) do śledzenia ilości zdrowia postaci między zmianami, abyś mógł porównać, czy zmiana jest niższa (uszkodzenie).
17 ‑ 18	Podczas pierwszego pojawienia się postaci tworzy nową ColorCorrectionEffect wewnątrz obecnego Camera gracza lub uzyskuje odniesienie do tej samej instancji w późniejszych odrodzeniach.Poprzez rodzicielstwo tego efektu post-przetwarzania postu do kamery gracza, dotyczy to tylko jego lokalnego ekranu, a nie każdego ekranu gracza na serwerze.
68 ‑ 83	Najpierw wykonuje warunkową kontrolę, aby potwierdzić, że zmiana zdrowia jest niższa niż wartość cachedHealth, co oznacza uszkodzenie; jeśli tak, ustawia cachedHealth na nową wartość.Następnie ustawia odcień na (czerwony) z wyższą nasyceniem, a następnie nastolatki powracają do domyślnego białego ( ) bez nasycenia.

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

Jeśli zdecydujesz się dostosować niestandardową pasek licznika do innego celu, takiego jak licznik mana lub licznik trucizny, możesz zmienić TintColor na linii 73 na coś bardziej odpowiedniego do wydarzenia, takiego jak jasnoniebieski ( [200, 225, 255] ) lub trujący zielony ( [0, 255, 75] ) .

Jeśli twój licznik zdrowia nie pasuje do wyglądu lub zachowania wyświetlanego w tym samouczku, pamiętaj, że możesz sprawdzić Fundamenty interfejsu użytkownika - licznik HUD jako ukończony szablon referencyjny.

Na tej stronie