Pasek życia.
W tym temacie zajmiemy się zrobieniem prefabrykatu paska życia dla obiektu gracza lub każdego innego obiektu występującego na scenie 3D.
Poniższy krótki film przedstawia działanie paska. Przykładowo każdorazowe przejście prze portal zabiera 5% punktów życia (kliknij na obrazku aby obejrzeć film).
![film pasek życia Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-20.webp)
Zadania paska życia
Warunki jakie narzucimy na wygląd paska życia to:
- pasek ma być zlokalizowany tuż nad obiektem 3D
- pasek ma być zawsze zwrócony w stronę głównej kamery sceny
- pasek ma zmieniać rozmiar względem stan punktów życia obiektu
- pasek ma zawierać tekst z procentową skalą punktów życia
- pasek ma zawierać ikonę serca lub inny obrazek
- pasek ma oprawę graficzną w formie ramki
Ułożenie elementów tworzonego paska przy rozciągniętej osi głębokości przedstawia poniższa ilustracja
![pasek życia HP Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-18.webp)
Czerwony pasek nie zmienia swojej długości, zielony tak. Ramka pełni rolę maski dla krawędzi pasków. W docelowym działaniu pasek prezentuje się jak poniżej.
![punkty HP Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-19.webp)
Sprite 2D dla paska życia
Oprawę graficzną dla paska życia przygotujemy w programie GIMP w postaci zasobu grafiki o wymiarach 512x512 pikseli. W Unity wykorzystamy technikę tekstur 2D wycinanych jako sprite z jednego zasobu graficznego. Ważne aby zasób graficzny miał wymiary potęgi liczby 2 (64x64, 128x128, 512x512 itd.). Dla takich wymiarów uzyskuje się lepszą kompresję zasobów graficznych.
Przykład mojego zasobu dla tworzonego paska życia. Puste miejsca można w dalszym etapie tworzenia projektu wykorzystać na inne ikony (jedzenie, broń, narzędzia itp.)
![sprite zasoby graficzne Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-1.webp)
Gotowy zasób graficzny zapisujemy w postaci pliku *.png z kanałem przezroczystości.
Przechodzimy do Unity. Tworzymy folder na grafikę 2D (u mnie folder nazwałem małą literą g). Do folderu importujemy utworzony plik *.png. Z zaimportowanego pliku tworzymy tekturę typu Sprite 2D, z ustawieniem właściwości Sprite Mode na Multiple. Patrz poniższe ilustracje
![sprite zasoby graficzne 2d Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-2.webp)
Jeżeli w Unity nie masz zainstalowanego rozszerzenia 2D Sprite Package to je zainstaluj.
![2D Sprite Package Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-3.webp)
Otwórz Sprite Edytor
![Sprite Edytor Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-4.webp)
W opcjach wybierz automatyczne wycinanie duszków
![Sprite Edytor Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-5.webp)
Wybrane zmiany zatwierdź klawiszem Apply
![Apply Sprite Edytor Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-6.webp)
Jeżeli wszystko zostało zrobione prawidłowo, to w folderze z zasobami grafiki po kliknięciu na ikonę zaimportowanego pliku zobaczysz podział na osobne tekstury. Jednocześnie zasób został skompresowany.
![kompresja Sprite Edytor Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-7.webp)
Przygotowanie prefabrykatu paska życia
Do sceny dodajemy pusty obiekt (Create Empty). Na razie zostawiamy nazwę GameObject. Do pustego obiektu dodajemy komponenty: Canvas, Canvas Scaler, Graphic Raycaster. Patrz poniższe ustawienia.
![pasek zycia gameobject Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-8.webp)
Korzeń obiektu paska życia został utworzony. Korzeń jest ojcem dla paska czerwonego, paska zielonego, paska oprawy graficznej i serduszka.
Tworzymy pasek czerwony przez dodanie kolejnego pustego obiektu (Create Empty). Do obiektu dodajemy komponent Canvas Render, Image. Ustawiamy zakotwiczenie na środek lewego boku (patrz Rect Transform). W komponencie Image przypisujemy kolo czerwony. Patrz poniższa ilustracja.
![Canvas Render, Image Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-9.webp)
Dwukrotnie duplikujemy dodany pusty obiekt. Dla GameObject (1) ustawiamy kolor zielony. Dla GameObject (2) w komponencie Image we właściwości Source Image osadzamy teksturę oprawy graficznej. Patrz poniższa ilustracja.
![pasek HP Canvas Render, Image Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-10.webp)
Dopasowujemy rozmiary obrazów
![pasek HP image Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-11.webp)
W pasku zielonym zmieniamy współrzędną X osi obrotu (Piwot)- ustawiamy na zero.
![piwot image Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-12.webp)
Po zmianie współrzędnej X osi obrotu musisz dopasować współrzędne zakotwiczenia paska. Jeżeli zmienisz skalę po osi X to zauważysz, że pasek skraca się lub wydłuża. I tę zmienną należy obsłużyć w skrypcie.
Do paska dodamy jeszcze ikonę serca. Duplikujemy pierwszy pasek (czerwony). Ustawiamy obraz na serduszko.
![sprite image Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-13.webp)
Zerujemy współrzędne Z
![działanie paska życia Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-14.webp)
Dodajemy kolejny pusty obiekt na tekst. Podpinamy do niego komponent Text Mesh. Ustawiamy parametry tekstu- kolor, rozmiar itp. Zmieniamy odpowiednio nazwy obiektów. Patrz poniższa ilustracja.
![Text Mesh Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-15.webp)
Skrypt paska życia
Zmiana długości paska w podanym skrypcie odbywa się poprzez zmianę skali wzdłuż osi X. Zakres wartości skali to od 0 do 1. Gdzie 1 to 100% długości. Przykładowa zmiana długości w podanym przykładzie będzie odbywać się po każdorazowym przejściu przez portal. Stąd w skrypci pojawia się taki warunek
Wskazówka:
if (Instancja.fZabierz)
Patrz poniższy kod i komentarz.
Wskazówka:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class pasekZycia : MonoBehaviour
{
[Header("Options")]
[Range(0f, 100f)] public float maxHP = 100.0f;//max punkty zycia
[Range(0f, 100f)] public float hp = 100.0f;//biezace punkty zycia
[SerializeField] Image pasekZielony;
[SerializeField] TextMesh pasekTekstu;
void Start()
{
}
public void ZabierzHP(float ile)
{
hp -= ile;
if (hp < 0) hp = 0;
float skala = hp / maxHP;
//ustaw długośc paska zycia na podstawie skali,
//piwot w inspektorze jest wybrany na lewy bok
//co pozwala skracać pasek z prawgo boku
pasekZielony.transform.localScale = new Vector2(skala, pasekZielony.transform.localScale.y);
pasekTekstu.text = (skala * 100).ToString() + "%";
}
// Update is called once per frame
void LateUpdate()
{
if (Instancja.fZabierz)
{
ZabierzHP(Instancja.ileZabracZycia);
Instancja.fZabierz = false;
Instancja.ileZabracZycia = 0;
}
//obracaj pasek życia plaszczyzną do kamery
transform.LookAt(transform.position +
Camera.main.transform.rotation*Vector3.forward,
Camera.main.transform.rotation*Vector3.up);
}
}
Skrypt podpinamy do paska i ustawiamy jak poniżej.
![skrypt paska życia Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-16.webp)
Wykonujemy zmiany w skrypcie Instancja. Dopisujemy dwie zmienne ileZabracZycia oraz Zabierz. Patrz poniżej
Wskazówka:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Instancja : MonoBehaviour
{
//skrypt zachowujący kazdy obiekt przy przejsciu z jednej sceny do drugiej
public static Instancja instancja;
//nazwa tagu portalu przejścia z jednej sceny do innej
public static string tagPortal;
//zaznacz ze gracz się nie teleportował
public static bool fTeleportacja=false;
//zabierz punkty zycia przy teleportacji
public static float ileZabracZycia = 0.0f;
public static bool fZabierz = false;
private void Awake()
{
if (!instancja)
{
DontDestroyOnLoad(this.gameObject);
instancja = this;
}
else
{
Destroy(this.gameObject);
}
}
}
Przechodzimy do skryptu Portal. Dopisujemy dwie linijki kodu w metodzie OnTriggerStay(). Patrz poniższy kod (doszły dwie ostatnie linie kodu)
Wskazówka:
//gdy gracz jest wewnatrz portalu
private void OnTriggerStay(Collider other)
{
if (other.tag != "Player") return;
//nie było teleportacji to sie teleportuj
if (!Instancja.fTeleportacja)
{
//załaduj nowa scenę
Application.LoadLevel(nazwaScenyCelu);
//zaznacz ze gracz się teleportował
Instancja.fTeleportacja = true;
//zabierz punkty zycia przy telportacji
Instancja.ileZabracZycia = 5.0f;
Instancja.fZabierz = true;
}
}
To na tyle zmian w skryptach. Skrypty pochodzą z poprzedniej części (patrz link)
Z paska życia tworzymy prefabrykat i podpinamy do obiektu gracza.
![prefabrykat HEALTH BAR Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-17.webp)
Uruchom scenę i sprawdź zachowanie. Cały pasek powinien być zwrócony w stronę głównej kamery sceny.
![How to make a HEALTH BAR in Unity](./g-Unity/perspektywa-pierwszo-osobowa-cz7-18.webp)
Jeżeli przejdziesz przez portal, to za każdym razem zostanie zabrane 5% życia.