Cum să faci Tappy Plane (Copie de Flappy Birds)

Introducere:

Bun venit la tutorialul pentru a crea propriul tău joc de tip "Flappy Birds" în hyperPad.

Versiunea noastră este puțin diferită, așa că o numim Tappy Plane.

Acest tutorial este destinat începătorilor care doresc să aprofundeze sistemul nostru de comportamente și să învețe despre codarea vizuală. Pe parcursul tutorialului, vei învăța, de asemenea, cum să navighezi prin interfața hyperPad.

În acest tutorial vom crea un joc simplu în stilul Flappy Bird. Gameplay-ul va consta în faptul că jucătorul va atinge ecranul pentru a controla avionul să se miște sus și jos, navigând pe lângă o serie de stânci. Fiecare stâncă trecută va acorda un punct, iar cu suficiente puncte, jucătorii vor câștiga o medalie. Medaliile cresc în valoare pe măsură ce scorul crește, până la o medalie aurie strălucitoare! Și cine nu îi plac lucrurile strălucitoare!?

Dacă nu ai hyperPad încă, îl poți descărca din App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Puteți afla mai multe despre hyperPad de pe site-ul nostru la http://www.hyperpad.com

Așadar, fără alte ceremonii, să începem!

Partea 1: Începând

Creează proiectul:

Primul lucru pe care trebuie să-l facem este să începem un nou proiect. După ce ai deschis hyperPad, ar trebui să vezi ecranul proiectului. Aici vei găsi toate proiectele pe care le-ai realizat, precum și cele pe care le-ai descărcat. Deocamdată, dorim să începem un nou proiect. Apasă pe butonul Nou Proiect din colțul din dreapta sus al ecranului, așa cum se arată mai jos.

Odată finalizat acest pas, ar trebui să vezi o fereastră pop-up apărând. Aici vom numi proiectul și vom crea o copie de siguranță în cloud, dacă dorești. În plus, poți apăsa pe butonul „Începe cu un exemplu în schimb” pentru a importa unul dintre proiectele noastre de bază. Totuși, deocamdată nu vom face asta. Numește proiectul Tappy Plane și apoi apasă butonul 'Următorul'.

Pe acest nou ecran, vom determina dispozitivul pentru care proiectăm și orientarea. Pentru acest proiect, setează orientarea pe peisaj și suportul pentru dispozitiv pe iPad. Nu te îngrijora dacă trebuie să schimbi ceva mai târziu. Aceste setări pot fi ajustate oricând din meniul Setări Globale.

În cele din urmă, acum putem alege ce tip de joc dorim să realizăm. Currently, hyperPad supports two types of modes, top-down and side view. Top-down, or Bird's Eye View, is typically used for games such as The Legend of Zelda before it transitioned to 3D, puzzle games like Bejeweled and top down shooter games. The Side view is commonly used for platformer games such as Super Mario Bros.

Ambele versiuni funcționează identic, cu o mică diferență, Bird's Eye View va avea setările gravitaționale dezactivate (în schimb, se bazează pe rezistența aerului pentru a simula gravitatea mergând în ecran), deci ține cont de acest lucru atunci când creezi proiectul tău. Poți schimba întotdeauna asta mai târziu în meniul Proprietăți Globale.

Pentru acest tutorial, vom folosi Vista Din Lateral, așa că asigură-te că este selectată. Apoi, avem setările gravitației și raportul PTM. În mod implicit, gravitatea va fi setată la 0 și -25.

Acestea sunt valorile x și y, sau mai simplu, orizontale și verticale ale lumii noastre de joc. X reprezintă orizontala sau stânga-dreapta, iar Y reprezintă verticala sau sus-jos. Valoarea implicită de 0 și -25 înseamnă că nu vor exista forțe gravitaționale care să tragă obiectele spre stânga sau spre dreapta, dar ele vor cădea cu o rată de 25 metri pe secundă. Pentru acest tutorial, valorile implicite sunt bune așa cum sunt.

Raportul PTM reprezintă Puncte la Metri, sau în termeni mai simpli, câte pixeli (puncte) sunt într-un metru hyperPad. În mod implicit, acesta este setat la 32 pt/m sau 32 pixeli pe metru. Acest lucru este important de știut atunci când creezi active artistice și toate activele artistice ar trebui să respecte această scară. În acest tutorial vom folosi active gratuite din biblioteca de active hyperPad, așa că nu este necesar să schimbăm scara.

Odată ce acest lucru este finalizat, apasă butonul creează și vom începe!

Editorul:

Acum că suntem în proiect, ar trebui să vezi un ecran care arată astfel:

Aceasta este pânza noastră și este locul unde vom construi jocul nostru. În centrul ecranului, ar trebui să vezi un contur subțire verde al unei cutii. Aceasta reprezintă vizualizarea ecranului nostru. Orice plasat în această cutie va fi imediat vizibil odată ce jocul pornește, în timp ce orice se află în afara ei nu va fi redat. Dacă dorești, poți lua un moment să dai tap pe diferite lucruri și să vezi ce fac înainte să trecem la pasul următor.

Odată ce ești gata, apasă pe pictograma de sertar din colțul din dreapta jos pentru a deschide Browserul de Active.

Biblioteca de Active:

Aici se vor stoca toate activele pentru jocul nostru. În mod implicit, un nou proiect hyperPad include doar câteva active pentru început. Trebuie să importi ale tale sau să descarci un pachet din Magazinul de Active hyperPad. În acest tutorial ne vom concentra pe utilizarea activelor furnizate de Magazinul de Active hyperPad. Pe partea stângă va fi o bară cu patru butoane. Apasă pe butonul Obține Active pentru a deschide Magazinul Hyperpad.

Aici vei găsi pachete de active gratuite configurate de noi la Hyperpad pentru a ajuta la demararea proiectelor tale. Caută și apasă pe Pachetul de Active Tappy Plane.

Acum, pur și simplu apasă pe butonul 'Obține' pentru a începe importul (Notă: dacă apare o eroare, pur și simplu apasă din nou pentru a relua importul). Odată ce aceasta este finalizată, vei primi un mesaj care spune că activele au fost importate cu succes. Pur și simplu apasă pe Închide în colțul din dreapta sus al ecranului pentru a reveni la Hyperpad.

Și este la fel de simplu ca asta. Ar trebui acum să vezi un nou folder în Browserul tău de Active numit Descărcări. Apăsând pe el se va dezvălui folderul Pachetului Tappy Plane și în interiorul acestuia, activele noastre artistice.

Următorul pas este să începem asamblarea jocului nostru.

Partea 2: Gameplay

Dacă ești familiarizat cu Flappy Bird, atunci vei fi familiarizat cu stilul de gameplay. Apasă pe ecran pentru a menține pasărea, sau în cazul nostru avionul, în aer, încercând să nu te ciocnești de obstacolele care vin. Aceste obstacole vor apărea în configurații aleatorii, astfel încât fiecare sesiune de joc să fie diferită față de precedenta. Punctele sunt acordate pentru evitarea cu succes a obstacolelor, iar scorul tău record este înregistrat.

Adăugarea Avionului:

Așadar, acum că înțelegi gameplay-ul de bază, putem începe. Primul lucru pe care trebuie să-l facem este să aducem personajul nostru pe ecran. Mergi în Browserul de Active și deschide folderul descărcărilor, navigând până când vezi activele tale artistice. Ar trebui să fie un folder numit Avioane.

Deschide acel folder și alege orice culoare îți place cel mai mult. Apoi, pur și simplu selectează prima grafică cu avionul. Aceasta va închide biblioteca de active și te va aduce în ecranul principal al editorului, unde acum ar trebui să vezi avionul în dockul de obiecte din partea de jos. Această secțiune a interfeței utilizator este cunoscută sub numele de Dockul de Obiecte. Acesta va afișa ultimele 5 active pe care le-ai utilizat. Acum, pentru a aduce avionul nostru în zona de joc, pur și simplu trage avionul din dock pe pânză.

Cu avionul nostru acum în joc, trebuie să facem o ajustare rapidă. Apasă pe avion pentru a-l selecta și deschide fila de proprietăți din dreapta. Ce vrem să facem este să setăm avionul să devină un obiect de tip perete care poate fi trecut prin el. Destul de simplu, găsește comutatorul Passable și apasă-l pentru a-l activa. Facem asta deoarece nu dorim ca avionul să cadă înainte ca jucătorul să aibă ocazia să înceapă jocul. De asemenea, îl setăm să fie trecut prin el pentru că nu dorim să aibă coliziune momentan.

Cu asta finalizat, să ne apucăm de a-l face jucabil.

Avionul Care Cade:

Deci avem nevoie de un mod de a începe jocul. Pentru asta, vom avea nevoie de un buton. Acum am putea folosi o grafică simplă pentru a indica unde să dai tap, dar pentru jocul nostru dorim să oferim jucătorului posibilitatea de a apăsa oriunde pe ecran. Cum facem asta? Vom face întregul ecran un buton!

Primul lucru pe care trebuie să-l facem pentru a îndeplini acest obiectiv este să creăm un nou strat. Dar pentru a face asta, trebuie să deselectăm avionul nostru. Pentru a face acest lucru, pur și simplu dă tap pe orice zonă liberă. Odată deselectat, proprietățile obiectului se vor închide și ar trebui să vezi fila stratului în dreapta. Dacă nu, pur și simplu glisează-ți degetul din partea dreaptă a ecranului spre stânga pentru a-l afișa.

Așa cum poți vedea, în prezent există trei straturi în mod implicit. Interfața Globală, Interfața Scenei și apoi Principală după o linie de separare. O notă rapidă este că orice obiect plasat pe stratul Interfața Globală va apărea în fiecare scenă din jocul tău. Toate celelalte straturi sunt specifice scenelor lor individuale. Pentru a crea un nou strat, pur și simplu apasă pe simbolul + din partea de jos a filei straturi. Aceasta ne va solicita să numim noul strat. Tastează Buton și apasă OK.

În mod implicit, stratul activ se va schimba în cel nou creat. Atunci când folosești straturi, numai obiectele din stratul activ pot fi selectate. Aceasta este o modalitate excelentă de a menține lucrurile organizate atunci când construiești jocul tău, astfel încât să nu muți din greșeală lucruri pe care nu dorești să le muți. Ține mereu evidența stratului pe care lucrezi în prezent. De asemenea, ține minte că straturile plasate deasupra altuia vor reda peste acel strat. Aceasta îți va permite să eviți ca fundalul să acopere zona de joc.

Acum, pentru a crea butonul nostru, acest lucru este foarte simplu. Apasă pe butonul Obiecte Speciale (pictograma eprubetei) din partea dreaptă jos a Dockului de Obiecte. Aceasta va solicita un meniu pentru a crea un tip de obiect. Dorim Obiectul Gol. Apăsând pe el va crea un mic pătrat gol în centrul proiectului nostru. Totuși, dorim ca acesta să ocupe întregul ecran. Apasă în interiorul pătratului pentru a-l selecta.

Observă că, atunci când este selectat, apar puncte verzi mici în jurul conturului obiectului. Putem folosi aceste puncte pentru a scalara manual Obiectul Gol. Pur și simplu apasă și trage un colț pentru a scala uniform. Trage colțurile până când obiectul cuprinde întreaga pânză. Punctele de pe laturi pot fi utilizate pentru a ajusta obiectul pentru o ajustare mai bună. La final, ar trebui să ai ceva de genul acesta (Notă: Dacă ai probleme cu scalarea obiectului, poți să zoom in făcând o glisare cu două degete în afară una de cealaltă și să faci zoom out împingându-le împreună):

Întoarce-te la stratul principal deselectând obiectul gol (apăsând pe un spațiu gol de pe pânză) apoi apasă pe stratul Principal și selectează din nou avionul. Apasă pe butonul care spune comportamente pentru a deschide ecranul de comportamente.

Aceasta este ecranul de Comportamente și locul unde se întâmplă magia. În loc de cod tradițional, hyperPad folosește blocuri logice vizuale de acțiuni și evenimente pentru a programa interacțiunile. Dacă dorești, poți lua un moment să explorezi categoriile și să vezi ce opțiuni sunt disponibile. Apasă pe unul dintre comportamentele din tab-ul stâng pentru a deschide o fereastră care oferă o scurtă descriere a comportamentului. De asemenea, poți verifica documentația hyperPad pentru o explicație a fiecărui comportament.

Ceea ce vrem să facem deocamdată este pur și simplu să începem jocul și să transformăm avionul nostru dintr-un obiect de tip perete care poate fi trecut prin el într-un obiect fizic. Facând acest lucru, vom aplica fizica asupra avionului nostru și astfel, va cădea cu gravitate.

Primul lucru pe care vrem să-l facem este să folosim comportamentul Început Atingere care se află sub secțiunea Interacțiune. Pur și simplu tragă-l din meniu și înspațierează-l în spațiul gol. Odată acolo, este acum atașat obiectului nostru. Poți da tap pe comportament pentru a deschide proprietățile sale, dar nu trebuie să schimbăm nimic.

Desigur, doar cu asta, nimic nu se va întâmpla deoarece nu există nimic care să urmeze după ce atingem avionul. Să reparăm asta. Mergi la categoria Fizica și derulează în jos până când vezi o secțiune numită Moduri. Acum trage comportamentul Face Fizică și trage-l sub comportamentul Început Atingere. Acum trebuie doar să-l atașăm la Început Atingere. În partea de jos a Început Atingere, ar trebui să vezi un mic fulger într-un cerc. Apasă și trage-l și vei vedea o linie urmând degetul tău. Trage linia peste comportamentul Face Fizică pentru a-l atașa.

Și este atât de simplu. O notă rapidă, în hyperPad, comportamentele urmează o structură de Eveniment -> acțiune. În acest caz, evenimentul este că am început să atingem avionul și acțiunea este că avionul devine un obiect fizic. Să luăm un moment pentru a testa dacă totul funcționează corect. În partea de sus a ecranului, apasă pe butonul de redare pentru a începe testarea. Când ai terminat, apasă pe cele trei bara din colțul din dreapta sus pentru a deschide meniul și selectează Ieșire.

Dacă totul funcționează bine, avionul ar trebui să cadă de pe ecran odată ce dai tap pe el.

Acum dorim să încheiem jocul odată ce avionul atinge pământul. Deși nu avem niciun pământ în acest moment, putem completa cu un obiect de joc gol. Revenim la pânză apasă pe săgeata înapoi din colțul din stânga sus al ecranului.

Deselectează avionul și apasă pe pictograma Obiecte Speciale (eprubetă) din colțul din dreapta jos al dockului pentru a deschide fereastra și a crea un alt Obiect Gol. Acum să-l poziționăm de-a lungul părții inferioare a pânzei și să-l întindem astfel încât să acopere întreaga porțiune inferioară.

Selectează avionul și deschide din nou fereastra de comportamente. Acum vom adăuga condiția noastră „Pierdut”. Să ne gândim la ceea ce am spus mai devreme, comportamentele hyperPad funcționează pe o bază Eveniment -> Acțiune. Evenimentul în acest caz va fi ciocnirea avionului cu obiectul de pământ. Să setăm asta. Mergi la tab-ul Obiecte și sub Detectarea Coliziunii, trage Comportamentul Colidat în spațiu de lucru. Odată ce este finalizat, apasă-l pentru a deschide proprietățile sale. Vei vedea două casete în partea de sus, una umplută cu avionul nostru și cealaltă goală. Apăsând pe caseta goală se va deschide vederea pânzei. Apasă pe obiectul gol de la baza ecranului pentru a-l selecta, apoi apasă pe bifa din partea de jos pentru a aplica.

Următorul, avem nevoie de acțiunea noastră. Vrem să încărcăm un ecran de joc terminat odată ce avionul colidează cu obiectul nostru de pământ. Mergi la categoria scene și derulează în jos până la secțiunea Overlay și selectează comportamentul Încărcați Overlay și trage-l sub comportamentul Colidat.

Conectează comportamentul Colidat la Încărcați Overlay. Acum, apasă pe comportamentul Încărcați Overlay de pe pânză pentru a deschide proprietățile sale. Pe proprietățile comportamentului apasă acolo unde spune Selectați Overlay. O listă de suprapuner se va deschide. Selectează Joc Terminat, aceasta este o overlay care este creată automat în mod implicit (poți învăța mai multe despre Overlays din documentația hyperPad) Dacă dorești, poți adăuga și o tranziție pentru un pic de stil.

Când asta este finalizată, apasă pe butonul de redare pentru a testa. Când dai tap pe avion, el ar trebui să cadă și ecranul de Joc Terminat ar trebui să apară.

Logica Jocului:

Înainte de a merge mai departe, ar trebui să explic rapid o modalitate bună de a păstra lucrurile organizate cu comportamentele. Pentru a evita aglomerarea și a face modificările mai ușor în viitor, ne vom separa logica jocului de avion. Practic, vom crea un eveniment personalizat și vom transmite un mesaj atunci când avionul colidează cu pământul în loc să încărcăm suprapunerea jocului terminat.

De ce facem asta? Ei bine, așa cum s-a menționat, ajută la păstrarea lucrurilor mai organizate și face ajustările ulterioare mult mai ușoare. Să încercăm să ne gândim în acest fel, dacă logica afectează doar obiectul de joc la care este atașată, atunci păstrează logica în cadrul obiectului. Dacă trebuie să începi să faci referire la alte obiecte sau aspecte ale logicei care nu sunt direct legate de obiect, atunci separă-le. Un exemplu ar fi atunci când avionul colidează cu un obiect, ar trebui să se audă un sunet de accident. Acest lucru poate fi păstrat pe avionul însuși. Dar dacă, atunci când a avut loc coliziunea, obiectul s-a schimbat cumva, atunci ar trebui să fie păstrat separat.

Pentru a face acest lucru, vom crea un mediator, un fel de intermediar care organizează aceste acțiuni într-o zonă pe care putem accesa ușor.

Întoarce-te la comportamentele avionului și selectează comportamentul Încărcați Overlay. Va exista o mică filă atașată la proprietăți. Apasă pe coșul de gunoi pentru a șterge comportamentul Încărcați Overlay. Facem acest lucru pentru că în loc să încărcăm doar overlay-ul, vom transmite un mesaj pe care logica jocului nostru l-ar putea prelua și va încărca ecranul de joc terminat în schimb. Deși, în mod tehnic, creăm pași suplimentari, acesta ne va ajuta pe termen lung.