Lekce 14 - Unity (C#) Android - Healthbar 2

V minulé lekci, Unity (C#) Android - Healthbar 1, jsme do naší arkády přidali healthbar.

Dnes se podíváme na vylepšení health baru, aby vypadal profesionálněji. Uděláme klasický ukazatel zdraví, který můžeme znát z mnoha různých her. Tenký, podlouhlý a ideálně bez rušivého textu s číslem.

Nové sprity

Například v Photoshopu si můžeme vytvořit vyříznutý obdélník s dírou, nebo můžete použít tuto grafiku z kurzu, jak je již zvykem:

Rovněž budeme potřebovat červené pozadí, které v rámečku výše bude zdraví reprezentovat:

Vložení pozadí

Původní zelený obdélník smažeme a nahradíme tímto červeným pozadím:

Vložení ohraničení

Dále na scénu přidáme přiložené ohraničení:

Jako potomka v hierarchii ohraničení přiřadíme HealthBar a pokusíme se health bar upravit na takovou velikost, aby se vešel do výřezu. Také je zde zbytečný text ukazující kolik máme zdraví, odstraníme tedy komponentu textu z objektu:

Finální objekt si pojmenujeme healths, struktura bude nyní vypadat následovně:

Úprava skriptu

Kdybychom nyní hru zapnuli, health bar by nefungoval. To proto, že jsme smazali text, který se skript snaží najít. V Health stačí pouze najít a smazat tuto řádku:

gameObject.GetComponent<text>().text = "Health: " + health;

Rodič pozadí

Nyní si vytvoříme další podobjekt našeho HealthBar, který si pojmenujeme HealthBarProgressParent. Objektu vynulujeme souřadnice a nastavíme mu scale na 1, 1, 1:

Obdélník znázorňující životy dáme jako podobjekt tohoto objektu, také si ho přejmenujeme na HealthBarProgress:

Nyní přesuneme Health na HealthBarProgressParent. Kvůli tomuto kroku musíme na hráči, přesněji na jeho skriptu PlayerCollisionDetection znovu přiřadit objekt, kde se nachází Health.

Úprava pivotu

Nyní si otevřeme sprite editor našeho červeného pozadí v health baru. Vidíme zde modré kolečko:

Toto modré kolečko přesuneme na levý okraj spritu:

Pravděpodobně se nám pozadí trochu posunulo, tak ho upravíme, aby sedělo do výřezu.

A jak, že to funguje? Jak jsme upravili pozici modrého kolečka, upravili jsme takzvaný pivot spritu. Pivot je bod, za který je sprite "přišpendlený", když jej transformujeme (např. rotujeme nebo škálujeme). Můžeme nepřesně říci, že je to takový "střed" spritu. Když sprite např. rotujeme, otáčí se v pivotu, jako bychom jej na tom místě měli připevněný. Možnost nastavit pivot je důležitá, často totiž neleží střed transformací ve středu obrázku.

Pokud máme pivota na středu a změníme scale spritu, tak se zmenšený sprite zarovná na střed a bude to vypadat, jako by zdraví ubylo po obou stranách. Pokud pivot dáme úplně na levou stranu, bude sprite přichycen vždy na kraji a zdraví se tedy bude roztahovat jen doprava.

Testování

Když hru nyní spustíme a zraníme se, vidíme, jak se nám sprite zkracuje do jedné strany. Hezké, efektivní a přitom tak snadné, že se to obešlo i bez programování. Vše jsme již naprogramované měli, jen jsme museli změnit pivot obrázku.

To je pro tuto lekci vše, byla kratičká, ale před další si musíme odpočinout, čeká nás totiž animování.

V příští lekci, Unity (C#) Android - Animace draka, upravíme hráče a vytvoříme pro draka animace.