Hvordan man laver Tappy Plane (Flappy Birds-klon)

Introduktion:

Hej og velkommen til tutorialen for at lave dit eget "Flappy Birds"-stilspil i hyperPad.

Vores version er lidt anderledes, så vi kalder det Tappy Plane.

Denne tutorial er lavet til begyndere, der ønsker at dykke dybere ind i vores adfærdssystem og lære om visuel kodning. I løbet af tutorialen lærer du også at navigere i hyperPad-grænsefladen.

I denne tutorial vil vi lave et simpelt spil i stil med Flappy Bird. Spiloplevelsen vil bestå af, at spilleren trykker på skærmen for at kontrollere flyet for at bevæge sig op og ned og navigere det forbi en række klippeformationer. Hver klippe, der passes, giver et point, og med nok point vil spillerne optjene en medalje. Medaljerne øges i værdi, jo højere ens score er, op til en skinnende guldmedalje! Og hvem kan lide ikke skinnende ting!?

Hvis du ikke har hyperPad endnu, kan du hente det fra App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Du kan lære mere om hyperPad fra vores hjemmeside på http://www.hyperpad.com

Så uden videre, lad os komme i gang!

Del 1: Komme i gang

Opret projektet:

Det første, vi skal gøre, er at begynde et nyt projekt. Når hyperPad åbnes, skal du kunne se projektvinduet. Her finder du alle de projekter, du har lavet, samt dem, du har downloadet. For nu vil vi gerne starte et nyt projekt. Tryk på knappen Ny Projekt i øverste højre hjørne af skærmen, som vist nedenfor.

Når det er gjort, skal du se et pop op-vindue. Her vil vi navngive projektet og oprette en cloud-backup, hvis ønskes. Desuden kan du trykke på knappen "Kom i gang med et eksempel i stedet" for at importere et af vores basisprojekter. Men for nu vil vi ikke gøre det. Navngiv projektet Tappy Plane og tryk så på knappen 'Næste'.

I denne nye skærm vil vi bestemme, hvilken enhed vi designer til, og orienteringen. For dette projekt skal orienteringen indstilles til liggende, og enhedsstøtten til iPad. Bekymre dig ikke, hvis du skal ændre noget senere. Disse indstillinger kan justeres når som helst i menuen Globale indstillinger.

Endelig kan vi nu vælge, hvilken type spil vi ønsker at lave. I øjeblikket understøtter hyperPad to typer af tilstande, top-down og side view. Top-down, eller fugleperspektiv, bruges typisk til spil som The Legend of Zelda, før det blev til 3D, puslespil som Bejeweled og top-down shooter spil. Side view bruges ofte til platformspil som Super Mario Bros.

Begge versioner fungerer identisk med én lille forskel, fugleperspektiv vil have tyngdekraftindstillingerne deaktiveret (i stedet afhænger det af luftmodstand for at simulere tyngdekraften ind i skærmen), så hold det i tankerne, når du opretter dit projekt. Du kan altid ændre det senere i menuen Globale egenskaber.

Til denne tutorial vil vi bruge Side View, så sørg for, at dette er valgt. Næste har vi tyngdekraftindstillingerne og PTM-forholdet. Som standard vil tyngdekraften sættes til 0 og -25.

Disse er x- og y-værdierne, eller mere simpelt, den vandrette og lodrette dimension af vores spilverden. X repræsenterer den vandrette, eller venstre og højre, mens Y repræsenterer den lodrette, eller op og ned. Standardværdierne på 0 og -25 betyder, at der ikke vil være nogen tyngdekraft, der trækker objekterne venstre og højre, men de vil falde ned med en hastighed på 25 meter per sekund. Til denne tutorial er standardværdierne fine, som de er.

PTM-forholdet står for Points to Metres, eller i enklere termer, hvor mange pixels (punkter) der er i 1 hyperPad-meter. Som standard er dette sat til 32 pt/m eller 32 pixels per meter. Dette er vigtigt at vide, når du opretter kunstaktiver, og alle kunstaktiver skal følge denne skala. I denne tutorial vil vi bruge gratis aktiver fra hyperPad's aktiverbibliotek, så vi behøver ikke at ændre skalaen.

Når det er gjort, tryk på knappen Opret, og så er vi klar til at komme i gang!

Redaktøren:

Nu hvor vi er i projektet, bør du se en skærm, der ser sådan ud:

Dette er vores lærred, og det er her, vi vil bygge vores spil. I midten af skærmen skal du se en tynd grøn ramme af en boks. Dette repræsenterer vores skærmvisning. Alt, hvad der placeres i denne boks, vil være umiddelbart synligt ved starten af spillet, mens alt udenfor ikke vil blive gengivet. Hvis du vil, kan du tage et øjeblik til at trykke rundt og se, hvad tingene gør, før vi går videre til næste trin.

Når du er klar, skal du trykke på skuffeikonet i nederste højre hjørne for at åbne Asset Browser.

Asset Bibliotek:

Dette er, hvor alle aktiver til vores spil vil blive gemt. Som standard inkluderer et nyt hyperPad-projekt kun nogle få starteraktiver. Du skal importere dine egne eller downloade en pakke fra hyperPad Asset Shop. I denne tutorial fokuserer vi på at bruge aktiver, der leveres fra hyperPad Asset Shop. På venstre side vil der være en bjælke med fire knapper. Tryk på knappen Hent aktiver for at åbne Hyperpad Shop.

Her finder du gratis aktivpakker opsat af os hos Hyperpad for at hjælpe med at få dine projekter i gang. Find og tryk på Tappy Plane Asset Pack.

Nu skal du blot trykke på 'Hent'-knappen for at begynde importen (Bemærk: hvis der opstår en fejl, skal du blot trykke på den igen for at genstarte importen). Når det er gjort, vil du få en besked, der siger, at aktiverne er blevet importeret korrekt. Tryk blot på Luk i øverste højre hjørne af skærmen for at vende tilbage til Hyperpad.

Og det er så simpelt som det. Du skulle nu se en ny mappe i din Asset Browser kaldet Downloads. Tryk på den for at afsløre Tappy Plane Pack-mappen, og inden i finder du vores kunstaktiver.

Næste skridt er at begynde at samle vores spil.

Del 2: Gameplay

Hvis du er bekendt med Flappy Bird, så vil du også være fortrolig med gameplay-stilen. Tryk på skærmen for at holde fuglen, eller i vores tilfælde flyet, i luften, mens du forsøger ikke at styrte ind i kommende forhindringer. Disse forhindringer vil spawne i tilfældige konfigurationer, så hver spiloplevelse er anderledes end den sidste. Points tildeles for at undgå forhindringer, og din højeste score registreres.

Tilføje Flyet:

Så nu hvor du forstår det grundlæggende gameplay, kan vi komme i gang. Første ting, vi skal gøre, er at få vores spiller karakter op på skærmen. Gå ind i din Asset Browser, åbn downloads-mappen, og naviger, indtil du ser dine kunstaktiver. Der skal være en mappe kaldet Fly.

Åbn den mappe og vælg den farve, du bedst kan lide. Vælg så blot det første flygrafik. Dette vil lukke aktiverbiblioteket og returnere dig til hovedredaktørskærmen, hvor du nu skal se flyet i det nederste objekt-dok. Denne sektion af UI kaldes Objekt-dokken. Den viser de sidste 5 aktiver, du har brugt. Nu for at få vores fly ind i spilleområdet, skal du blot trække flyet fra dokken og ind på lærredet.

Med vores fly nu i spillet, skal vi foretage en hurtig justering. Tryk på flyet for at vælge det og åbne egenskabstabellen til højre. Hvad vi vil gøre er at indstille flyet til at blive et gennemgangsvæg-objekt. Simpelt nok, find blot Gennemgangskontakten og tryk på den for at tænde den. Vi gør dette, fordi vi ikke vil have flyet til at falde, før spilleren har haft en chance for at starte spillet. Vi indstiller det også til at være gennemgangbart, fordi vi ikke ønsker, at det skal have nogen kollision for nu.

Når det er gjort, lad os dykke ind i at gøre det spilbart.

Faldende Fly:

Så vi har brug for en måde at starte spillet på. For at gøre det, har vi brug for en knap. Nu kunne vi bruge en simpel grafik til at indikere, hvor man skal trykke, men for vores spil vil vi gerne give spilleren mulighed for at trykke hvor som helst på skærmen. Hvordan gør vi det? Vi laver hele skærmen til en knap!

Det første, vi skal gøre for at opnå dette, er at oprette et nyt lag. Men for at gøre det, skal vi deselectere vores fly. For at gøre det skal du blot trykke et sted, hvor der er tomt plads. Når det er deselecteret, vil objekt-egenskaberne lukke, og du skal kunne se lagfanen til højre. Hvis ikke, skal du blot swipe med fingeren fra højre side af skærmen mod venstre for at afsløre den.

Som du kan se, er der i øjeblikket tre lag som standard. Den Globale UI, Scene UI og så Hoved efter en adskillelseslinje. En hurtig note er, at alt på det globale UI-lag vil vises i hver scene i dit spil. Alle andre lag er specifikke for deres individuelle scener. For at oprette et nyt lag skal du blot trykke på + ikonet i bunden af lagfanen. Dette vil anmode os om at navngive det nye lag. Skriv Knappen og tryk OK.

Som standard vil det aktive lag ændres til det nyoprettede. Når der bruges lag, kan kun objekter i det aktive lag vælges. Dette er en god måde at holde tingene organiseret på, når du bygger dit spil, da du ikke utilsigtet vil flytte ting, du ikke ønsker at. Hold altid øje med, hvilket lag du i øjeblikket arbejder på. Husk også, at lag, der er anbragt over et andet, vil blive gengivet oven på det lag. På denne måde kan du undgå at have din baggrund dække spilleområdet.

Nu for at oprette vores knap er det meget simpelt. Tryk på knappen Special Objects (kolbeikonet) nederst til højre i objekt-dokken. Dette vil åbne en menu for at oprette en type objekt. Vi vil have det tomme objekt. At trykke på det vil skabe en lille, tom firkant i midten af vores projekt. Men vi ønsker, at dette skal fylde hele skærmen. Tryk på indersiden af firkanten for at vælge den.