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:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/bez.png)
Taktiež budeme potrebovať červené pozadie, ktoré v rámčeku vyššie bude zdravie reprezentovať:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/bar.png)
Vloženie pozadia
Pôvodný zelený obdĺžnik zmažeme a nahradíme týmto červeným pozadím:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/bar.png)
Vloženie ohraničenie
Ďalej na scénu pridáme priloženej ohraničenie:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/bez.png)
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:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/obr1.jpg)
Finálny objekt si pomenujeme healths
, štruktúra bude teraz
vyzerať nasledovne:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/obr2.jpg)
Ú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
:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/obr3.jpg)
Obdĺžnik znázorňujúci životy dáme ako podobjektoch tohto objektu,
tiež si ho premenujeme na HealthBarProgress
:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/obr4.jpg)
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:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/obr5.jpg)
Toto modré koliesko presunieme na ľavý okraj Spritu:
![Tvorba 2D arkády pre Android v Unity](images/67100/unity13/obr6.jpg)
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.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkamiStiahnuté 282x (63.76 kB)