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

Zadania paska życia

Warunki jakie narzucimy na wygląd paska życia to:

Ułożenie elementów tworzonego paska przy rozciągniętej osi głębokości przedstawia poniższa ilustracja

pasek życia HP Unity

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

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

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

Jeżeli w Unity nie masz zainstalowanego rozszerzenia 2D Sprite Package to je zainstaluj.

2D Sprite Package Unity

Otwórz Sprite Edytor

Sprite Edytor Unity

W opcjach wybierz automatyczne wycinanie duszków

Sprite Edytor Unity

Wybrane zmiany zatwierdź klawiszem Apply

Apply Sprite Edytor Unity

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

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

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

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

Dopasowujemy rozmiary obrazów

pasek HP image Unity

W pasku zielonym zmieniamy współrzędną X osi obrotu (Piwot)- ustawiamy na zero.

piwot image Unity

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

Zerujemy współrzędne Z

działanie paska życia Unity

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

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

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

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

Jeżeli przejdziesz przez portal, to za każdym razem zostanie zabrane 5% życia.

Układ okresowy- kod qr
Układ okresowy

Układ okresowy pierwiastków- darmowa aplikacja na Androida

Pobierz ze sklepu Google Play
Alkomat- wirtualny test kod qr
Alkomat- wirtualny test

Alkomat- darmowa aplikacja na Androida

Pobierz ze sklepu Google Play
Taklarz- olinowanie stałe kod qr
Olinowanie stałe- kalkulator średnic

Olinowanie stałe- darmowa aplikacja na Androida

Pobierz ze sklepu Google Play
przepis na gogfry

Przepis na gofry

zobacz
przepis na bitą śmietanę

Przepis na bitą śmietanę

zobacz