Kako napraviti Tappy Plane (klon Flappy Bird)

Uvod:

Pozdrav i dobrodošli u vodič za izradu vlastite igre u stilu "Flappy Birds" u hyperPadu.

Naša verzija je malo drugačija, pa je nazivamo Tappy Plane.

Ovaj vodič je napravljen za početnike koji žele dublje zaroniti u naš sustav ponašanja i naučiti o vizualnom kodiranju. Kroz vodič ćete također naučiti kretati se sučeljem hyperPada.

U ovom tutorialu ćemo stvoriti jednostavnu igru u stilu Flappy Bird. Igra se sastoji od toga da igrač dodiruje ekran kako bi kontrolirao avion, pomičući ga gore i dolje, izbjegavajući niz litica. Svaka litica koja se prođe donosi jedan bod, a s dovoljno bodova, igrači će zaraditi medalju. Medalje povećavaju svoju vrijednost što je viši rezultat, sve do sjajne zlatne medalje! A tko ne voli sjajne stvari!?

Ako još nemate hyperPad, možete ga preuzeti iz App Store-a: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Možete saznati više o hyperPadu na našoj web stranici http://www.hyperpad.com

Bez daljnjeg odgađanja, hajde da krenemo!

1. dio: Početak

Izrada projekta:

Prva stvar koju trebamo učiniti je započeti novi projekt. Kada otvorite hyperPad, trebali biste vidjeti ekran sa projektima. Ovdje ćete pronaći sve projekte koje ste napravili, kao i one koje ste preuzeli. Za sada, želimo započeti novi projekt. Dodirnite gumb Novi projekt u gornjem desnom kutu ekrana prikazanog dolje.

Jednom kada to učinite, trebali biste vidjeti skočni prozor. Ovdje ćemo imenovati projekt i stvoriti sigurnosnu kopiju u oblaku ako to želite. Osim toga, možete dodirnuti gumb "Počnite s uzorkom umjesto toga" kako biste uvezli jedan od naših osnovnih projekata. Međutim, za sada to nećemo raditi. Nazovite projekt Tappy Plane, a zatim dodirnite gumb 'Dalje'.

Na ovom novom ekranu, odredit ćemo uređaj za koji dizajniramo i orijentaciju. Za ovaj projekt, postavite orijentaciju na pejzažnu i podršku uređaja na iPad. Ne brinite ako trebate nešto promijeniti kasnije. Ove postavke mogu se prilagoditi bilo kada u izborniku Global Settings.

Na kraju možemo odabrati što ćemo tip igre napraviti. Trenutno hyperPad podržava dva tipa načina rada, gornji pogled i bočni pogled. Gornji pogled, ili pogled ptice, obično se koristi za igre kao što su The Legend of Zelda prije nego što se prebacio na 3D, puzzle igre poput Bejeweled i igre s gornjeg pogleda. Bočni pogled se obično koristi za platforme kao što su Super Mario Bros.

Obje verzije rade identično uz jednu malu razliku, pogled ptice će imati isključene postavke gravitacije (umjesto toga se oslanja na otpor zraka kako bi simulirao gravitaciju koja ide prema ekranu), stoga to imajte na umu kada kreirate svoj projekt. Uvijek možete promijeniti ovo kasnije u izborniku Global Properties.

Za ovaj vodič, koristit ćemo Bočni pogled, pa se pobrinite da je to odabrano. Sljedeće, imamo postavke gravitacije i PTM omjer. Prema zadanim postavkama, gravitacija će biti postavljena na 0 i -25.

To su x i y vrijednosti, ili jednostavnije, horizontalne i vertikalne vrijednosti našeg sveta igre. X predstavlja horizontalu, lijevo i desno, dok Y predstavlja vertikalu, ili gore i dolje. Zadane vrijednosti od 0 i -25 znače da neće biti gravitacijskih sila koje vuku objekte lijevo i desno, ali će padati brzinom od 25 metara u sekundi. Za ovaj vodič, zadane vrijednosti su u redu kakve jesu.

PTM omjer označava Oznake do Metara, ili jednostavnije, koliko je piksela (bodova) u 1 hyperPad metru. Prema zadanim postavkama, ovo je postavljeno na 32 pt/m ili 32 piksela po metru. Ovo je važno znati prilikom izrade umetničkih sredstava i sva umetnička sredstva trebaju slijediti ovu skalu. U ovom vodiču koristit ćemo besplatne resurse iz hyperPad knjižnice sredstava, tako da ne trebamo mijenjati skalu.

Jednom kada to učinimo, dodirnite gumb za kreiranje i krenut ćemo!

Uređivač:

Sada kada smo u projektu, trebali biste vidjeti ekran koji izgleda ovako:

Ovo je naš platno i ovdje ćemo izgraditi našu igru. U središtu ekrana trebali biste vidjeti tanu zeleni okvir. Ovo predstavlja naš ekran. Sve što stavite u ovaj okvir bit će odmah vidljivo kada započnete igru, dok ništa izvan njega neće biti iscrtano. Ako želite, uzmite trenutak da dodirnete oko i vidite što stvari rade prije nego što pređemo na sljedeći korak.

Jednom kada ste spremni, dodirnite ikonu ladice u donjem desnom kutu da otvorite Asset Browser.

Knjižnica resursa:

Ovdje će se pohranjivati svi resursi za našu igru. Prema zadanim postavkama, novi hyperPad projekt uključuje samo nekoliko početnih resursa. Morate uvesti svoje vlastite ili preuzeti paket iz hyperPad Asset Shop-a. U ovom vodiču fokusirat ćemo se na korištenje resursa koje pruža hyperPad Asset Shop. Na lijevoj strani bit će trak s četiri gumba. Dodirnite gumb za preuzimanje resursa da otvorite Hyperpad Shop.

Ovdje ćete pronaći besplatne pakete resursa koje smo postavili u Hyperpadu kako bismo vam pomogli da započnete s projektima. Pronađite i dodirnite paket resursa Tappy Plane.

Sada jednostavno dodirnite gumb 'Preuzmi' da započnete uvoz (napomena: ako dođe do pogreške, jednostavno ga dodirnite ponovo kako biste ponovo pokrenuli uvoz). Kada to učinite, dobit ćete poruku koja kaže da su resursi uspješno uvezeni. Jednostavno dodirnite Zatvori u gornjem desnom kutu ekrana da se vratite u Hyperpad.

I to je to. Sada biste trebali vidjeti novu mapu u svom Asset Browseru pod nazivom Preuzimanja. Dodirivanje će otkriti mapu Tappy Plane Pack i unutar toga, naše umetničke resurse.

Sljedeće ćemo započeti sastavljanje naše igre.

2. dio: Igra

Ako ste upoznati s Flappy Bird, onda ćete biti upoznati s stilom igranja. Dodirnite ekran da zadržite pticu, ili u našem slučaju avion, u zraku dok pokušavate ne udariti u dolazne prepreke. Ove prepreke će se pojavljivati u slučajnim konfiguracijama, tako da je svaka igra drugačija od prethodne. Bodovi se dodjeljuju za uspješno izbjegavanje prepreka i vaša najbolja ocjena se bilježi.

Dodavanje aviona:

Dakle, sada kada razumijete osnovnu igru, možemo započeti. Prva stvar koju trebamo učiniti je staviti našeg igranog lika na ekran. Idite u svoj Asset Browser i otvorite mapu za preuzimanje i navigirajte dok ne vidite svoje umetničke resurse. Trebala bi postojati mapa pod nazivom Avioni.

Otvorite tu mapu i odaberite boju koju najviše volite. Zatim, jednostavno odaberite prvu grafiku aviona. To će zatvoriti knjižnicu resursa i vratiti vas na glavni ekran uređivača gdje biste sada trebali vidjeti avion u donjem objekt docku. Ovaj dio UI-a poznat je kao Objekt Dock. Prikazat će posljednjih 5 resursa koje ste koristili. Sada da stavimo naš avion u područje igranja, jednostavno povucite avion iz docka na platno.

Sada kada je naš avion u igri, trebamo napraviti jednu brzu prilagodbu. Dodirnite avion da biste ga odabrali i otvorite karticu s svojstvima s desne strane. Ono što želimo učiniti je postaviti avion da postane prolazni zid objekta. Jednostavno pronađite prekidač Prolazno i dodirnite ga da biste ga uključili. Radimo to jer ne želimo da avion padne prije nego što igrač ima priliku započeti igru. Također ga postavljamo kao prolaznog jer ne želimo da za sada ima bilo kakvu koliziju.

S time je gotovo, zaronimo u izradu igrivog dijela.

Padajući avion:

Potrebna nam je mogućnost da započnemo igru. Da bismo to učinili, trebat će nam gumb. Sada bismo mogli koristiti jednostavnu grafiku da označimo gdje dodirnuti, ali za našu igru želimo dati igraču mogućnost da dodirne bilo gdje na ekranu. Kako to radimo? Napravit ćemo cijeli ekran dugme!

Prva stvar koju trebamo učiniti kako bismo to postigli je stvoriti novu razinu. No, da bismo to učinili, moramo odabrati avion. Da bismo ga poništili, jednostavno dodirnite bilo gdje gde je prazno mesto. Kada bude poništen, svojstva objekta će se zatvoriti i trebali biste vidjeti karticu razina s desne strane. Ako ne, jednostavno povucite prst s desne strane ekrana prema levoj da biste prikazali.

Kao što vidite, trenutno postoje tri razine prema zadanim postavkama. Global UI, Scene UI i zatim Glavna nakon razdvojene linije. Brza napomena da će sve na Global UI razini biti prikazane u svakoj sceni u vašoj igri. Sve druge razine su specifične za svoje pojedinačne scene. Da biste stvorili novu razinu, jednostavno dodirnite + ikonu na dnu kartice nivoa. Ovo će nas zatražiti da imenujemo novu razinu. Upisujemo Gumb i pritisnemo U redu.

Pojam nova razina će se automatski promijeniti na novostvorenu razinu. Kada koristite razine, samo objekti na aktivnoj razini mogu biti odabrani. Ovo je odličan način da zadržite stvari organiziranim kada gradite svoju igru jer nećete slučajno premjestiti stvari koje ne želite. Uvijek pratite na kojoj razini trenutno radite. Također imajte na umu da će objekti postavljeni iznad drugih se prikazati na vrhu te razine. Na ovaj način možete izbjegnuti prekrivanje pozadine s područjem igre.

Da bismo naš gumb stvorili, to je vrlo jednostavno. Dodirnite dugme Specijalni objekti (ikona labavice) u donjem desnom kutu Objekt Dock-a. Ovo će unijeti izbornik za stvaranje tipa objekta. Želimo prazni objekt. Dodirivanjem njega, stvorit će se mali, prazni kvadrat u središtu našeg projekta. Međutim, želimo da zauzima cijeli ekran. Dodirnite unutrašnjost kvadrata da ga odaberete.