13. diel - Unity (C #) Android - Healthbar 2

V minulej lekcii, Unity (C #) Android - Healthbar 1 , sme do našej arkády pridali healthbar.

Dnes sa pozrieme na vylepšenie health baru, aby vyzeral profesionálnejšie. Urobíme klasický ukazovateľ zdravia, ktorý môžeme poznať z mnohých rôznych hier. Tenký, podlhovastý a ideálne bez rušivého textu s číslom.

Nové sprity

Napríklad v Photoshope si môžeme vytvoriť vyrezaný obdĺžnik s dierou, alebo môžete použiť túto grafiku z kurzu, ako je už zvykom:

Taktiež budeme potrebovať červené pozadie, ktoré v rámčeku vyššie bude zdravie reprezentovať:

Vloženie pozadia

Pôvodný zelený obdĺžnik zmažeme a nahradíme týmto červeným pozadím:

Vloženie ohraničenie

Ďalej na scénu pridáme priloženej ohraničenie:

Ako potomka v hierarchii ohraničení priradíme HealthBar a pokúsime sa health bar upraviť na takú veľkosť, aby sa vošiel do výrezu. Tiež je tu zbytočný text ukazujúci koľko máme zdravie, odstránime teda komponent textu z objektu:

Finálny objekt si pomenujeme healths, štruktúra bude teraz vyzerať nasledovne:

Úprava skriptu

Keby sme teraz hru zapli, health bar by nefungoval. To preto, že sme zmazali text, ktorý sa skript snaží nájsť. V HealthScript stačí len nájsť a zmazať túto riadku:

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

Rodič pozadia

Teraz si vytvoríme ďalšie podobjektoch nášho HealthBar, ktorý si pomenujeme HealthBarProgressParent. Objektu vynulujeme súradnice a nastavíme mu scale na 1, 1, 1:

Obdĺžnik znázorňujúci životy dáme ako podobjektoch tohto objektu, tiež si ho premenujeme na HealthBarProgress:

Teraz presunieme HealthScript na HealthBarProgressParent. Kvôli tomuto kroku musíme na hráčovi, presnejšie na jeho skriptu PlayerCollisionDetection znovu priradiť objekt, kde sa nachádza HealthScript.

Úprava pivotu

Teraz si otvoríme sprite editor nášho červeného pozadia v health bare. Vidíme tu modré koliesko:

Toto modré koliesko presunieme na ľavý okraj Spritu:

Pravdepodobne sa nám pozadí trochu posunulo, tak ho upravíme, aby sedelo do výrezu.

A ako, že to funguje? Ako sme upravili pozíciu modrého kolieska, upravili sme takzvaný pivot Spritu. Pivot je bod, za ktorý je sprite "prišpendlený", keď ho transformujeme (napr. Rotujeme alebo škáluje). Môžeme nepresne povedať, že je to taký "stred" Spritu. Keď sprite napr. Rotujeme, otáča sa v pivotu, ako by sme ho na tom mieste mali pripevnený. Možnosť nastaviť pivot je dôležitá, často totiž neleží stred transformáciou v stredu obrázka.

Ak máme pivota na stredu a zmeníme scale Spritu, tak sa zmenšený sprite zarovná na stred a bude to vyzerať, ako by zdravie ubudlo po oboch stranách. Pokiaľ ale pivot dáme úplne na jednu stranu, bude sprite prichytený vždy na kraji a zdravie sa teda bude rozťahovať len doprava.

Testovanie

Keď hru teraz spustíme a zraníme sa, vidíme, ako sa nám sprite skracuje do jednej strany. Pekné, efektívne a pritom tak jednoduché, že sa to obišlo aj bez programovania. Všetko sme už naprogramované mali, len sme v podstate museli zmeniť pivot obrázku.

To je pre túto lekciu všetko, bola kratučká, ale pred ďalšou si musíme oddýchnuť, čaká nás totiž animovanie.