BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 13 - 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:

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 HealthScript 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 HealthScript 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í HealthScript.

Ú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 ale pivot dáme úplně na jednu 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 v podstatě 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.


 

Stáhnout

Staženo 8x (63.76 kB)

 

Předchozí článek
Unity (C#) Android - Healthbar 1
Všechny články v sekci
Tvorba 2D arkády pro Android v Unity
Článek pro vás napsal Jan Kubice
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!