Hoe je Tappy Plane maakt (Flappy Birds kloon)

Inleiding:

Hallo en welkom bij de tutorial voor het maken van je eigen "Flappy Birds"-stijl game in hyperPad.

Onze versie is iets anders, daarom noemen we het Tappy Plane.

Deze tutorial is bedoeld voor beginners die dieper willen duiken in ons gedragssysteem en meer willen leren over visuele codering. Gedurende de tutorial leer je ook de weg rondom de hyperPad-interface.

In deze tutorial zullen we een eenvoudig spel maken in de stijl van Flappy Bird. De gameplay bestaat uit het laten tikken op het scherm door de speler om het vliegtuig omhoog en omlaag te besturen en het langs een reeks kliffen te navigeren. Elk gepasseerde klif levert een punt op, en bij voldoende punten verdienen de spelers een medaille. De medailles nemen in waarde toe naarmate de score hoger is, tot aan een glanzende gouden medaille! En wie houdt er nu niet van glanzende dingen!?

Als je hyperPad nog niet hebt, kun je het downloaden vanuit de App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Meer over hyperPad kun je leren op onze website http://www.hyperpad.com

Dus, zonder verder oponthoud, laten we beginnen!

Deel 1: Aan de Slag

Het project aanmaken:

Het eerste wat we moeten doen is een nieuw project starten. Bij het opstarten van hyperPad zou je het projectscherm moeten zien. Hier zie je alle projecten die je hebt gemaakt en ook de projecten die je hebt gedownload. Voor nu willen we een nieuw project starten. Tik op de knop Nieuw Project in de rechterbovenhoek van het scherm hieronder.

Als dat gedaan is, zou er een pop-upvenster moeten verschijnen. Hier geven we de naam aan het project en creëren we een cloudback-up indien gewenst. Bovendien kun je op de knop "Begin met een voorbeeld in plaats daarvan" klikken om een van onze basisprojecten te importeren. Maar voor nu doen we dat niet. Noem het project Tappy Plane en tik vervolgens op de knop 'Volgende'.

In dit nieuwe scherm bepalen we voor welk apparaat we ontwerpen en in welke oriëntatie. Voor dit project stel je de oriëntatie in op liggend en de apparaatcompatibiliteit op de iPad. Maak je geen zorgen als je ze later moet wijzigen. Deze instellingen kunnen te allen tijde in het menu Global Settings worden aangepast.

Als laatste kunnen we nu kiezen wat voor soort game we willen maken. Momenteel ondersteunt hyperPad twee soorten modi, top-down en zijaanzicht. Top-down, of Vogelperspectief, wordt meestal gebruikt voor spellen zoals The Legend of Zelda voordat het naar 3D overging, puzzelspellen zoals Bejeweled en top-down shooter games. Het zijaanzicht wordt vaak gebruikt voor platformspellen zoals Super Mario Bros.

Beide versies werken identiek met één klein verschil: Vogelperspectief heeft de zwaartekrachtinstellingen uitgeschakeld (in plaats daarvan vertrouwt het op luchtweerstand om de zwaartekracht naar het scherm te simuleren), dus houd daar rekening mee bij het maken van je project. Je kunt dit altijd later wijzigen in het menu Algemeen.

Voor deze tutorial gebruiken we het Zijaanzicht, dus zorg ervoor dat deze is geselecteerd. Vervolgens hebben we de Gravity-instellingen en de PTM Ratio. Standaard is de Gravity ingesteld op 0 en -25.

Dit zijn de x- en y-waarden, of eenvoudiger gezegd de horizontale en verticale waarden van onze gamewereld. X vertegenwoordigt de horizontale beweging, of links en rechts, terwijl Y de verticale beweging vertegenwoordigt, of omhoog en omlaag. De standaardwaarden van 0 en -25 betekenen dat er geen zwaartekrachtskracht is die objecten naar links en rechts trekt, maar dat ze met een snelheid van 25 meter per seconde naar beneden vallen. Voor deze tutorial zijn de standaardwaarden prima zoals ze zijn.

De PTM Ratio staat voor Punten naar Meters, of in eenvoudigere bewoordingen, hoeveel pixels (punten) er in 1 hyperPad-meter zijn. Standaard is dit ingesteld op 32 pt/m of 32 pixels per meter. Dit is belangrijk om te weten bij het maken van kunst-assets en alle kunst-assets moeten deze schaal volgen. In deze tutorial gebruiken we gratis assets uit de hyperPad-assetsbibliotheek, dus we hoeven de schaal niet te veranderen.

Als dat klaar is, tik op de knop maken en dan kunnen we beginnen!

De Editor:

Nu we in het project zijn, zou je een scherm moeten zien dat er als volgt uitziet:

Dit is ons canvas en hier zullen we ons spel bouwen. In het midden van het scherm zie je een dunne groene omtrek van een doos. Dit vertegenwoordigt onze schermweergave. Alles wat in deze doos wordt geplaatst, zal onmiddellijk zichtbaar zijn bij het starten van het spel, terwijl alles daarbuiten niet zal worden weergegeven. Als je wilt, neem dan een moment om rond te tikken en te zien wat dingen doen voordat we naar de volgende stap gaan.

Wanneer je klaar bent, tik op het laden-pictogram rechtsonder om de Asset Browser te openen.

De Asset Bibliotheek:

Dit is waar alle assets voor ons spel zullen worden opgeslagen. Standaard bevat een nieuw hyperPad-project slechts enkele starter-assets. Je moet je eigen importeren of een pakket downloaden vanuit de hyperPad Asset Shop. In deze tutorial richten we ons op het gebruik van assets die worden geleverd vanuit de hyperPad Asset Shop. Aan de linkerkant is er een balk met vier knoppen. Tik op de knop Assets Krijgen om de Hyperpad-winkel te openen.

Hier vind je gratis assetpakketten die door ons bij Hyperpad zijn opgezet om jouw projecten te helpen starten. Vind en tik op het Tappy Plane Asset Pack.

Nu, tik simpelweg op de knop 'Krijg' om de import te starten (Opmerking: als er een fout optreedt, tik er dan eenvoudig opnieuw op om de import opnieuw te starten). Zodra dat is gebeurd, krijg je een melding dat de assets met succes zijn geïmporteerd. Tik simpelweg op Sluiten rechtboven in het scherm om terug te keren naar Hyperpad.

En zo simpel is het. Je zou nu een nieuwe map moeten zien in je Asset Browser genaamd Downloads. Er op tikken toont de Tappy Plane Pack-map en daarin onze kunst-assets.

Volgende zullen we beginnen met het assembleren van ons spel.

Deel 2: Gameplay

Als je bekend bent met Flappy Bird, dan ben je vertrouwd met de gameplaystijl. Tik op het scherm om de vogel, of in ons geval de vliegtuig, in de lucht te houden terwijl je probeert niet te botsen tegen komende obstakels. Deze obstakels zullen in willekeurige configuraties verschijnen, zodat elke doorloop anders is dan de vorige. Punten worden toegekend voor het succesvol vermijden van obstakels en je hoogste score wordt vastgelegd.

De Vliegtuig Toevoegen:

Dus nu je de basis gameplay begrijpt, kunnen we aan de slag. Het eerste wat we moeten doen, is onze speler-personage op het scherm krijgen. Ga naar je Asset Browser, open de downloads-map en navigeer totdat je jouw kunst-assets ziet. Er zou een map moeten zijn genaamd Vliegtuigen.

Open die map en kies welke kleur je het leukste vindt. Selecteer vervolgens gewoon de eerste vliegtuigafbeelding. Dit sluit de assetbibliotheek en brengt je terug naar het hoofdscherm van de editor waar je nu het vliegtuig in de onderste objectdock zou moeten zien. Dit gedeelte van de UI wordt de Object Dock genoemd. Het toont de laatste 5 assets die je hebt gebruikt. Nu om ons vliegtuig in het speelgebied te krijgen, sleep je het vliegtuig gewoon vanuit de dock naar het canvas.

Met ons vliegtuig nu in het spel, moeten we een snelle aanpassing maken. Tik op het vliegtuig om het te selecteren en open het eigenschappen-tabblad aan de rechterkant. Wat we willen doen is het vliegtuig instellen als een doorlatende wandobject. Simpel genoeg, zoek gewoon de Passable-schakelaar en tik erop om deze in te schakelen. We doen dit omdat we niet willen dat het vliegtuig valt voordat de speler de kans heeft gehad om het spel te starten. We stellen het ook in op doorlatend omdat we voorlopig geen botsing willen hebben.

Als dat gedaan is, laten we duiken in het speelbaar maken ervan.

Vallend Vliegtuig:

Dus we hebben een manier nodig om het spel te starten. Om dat te doen, hebben we een knop nodig. We kunnen een eenvoudige afbeelding gebruiken om aan te geven waar te tikken, maar voor ons spel willen we de speler de mogelijkheid geven om overal op het scherm te tikken. Hoe doen we dit? We maken het hele scherm een knop!

Het eerste dat we moeten doen om dit te bereiken, is een nieuwe laag aanmaken. Maar daarvoor moeten we ons vliegtuig deselecteren. Om dit te doen, tik je gewoon op een lege ruimte. Eenmaal gedeselecteerd, sluiten de objecteigenschappen en je zou het lagen-tabblad aan de rechterkant moeten zien. Als dat niet het geval is, veeg dan gewoon met je vinger van de rechterkant van het scherm naar links om het weer zichtbaar te maken.

Zoals je kunt zien, zijn er momenteel standaard drie lagen. De Global UI, Scene UI en dan Main na een scheidingslijn. Een snelle opmerking dat alles op de Global UI-laag in elke scène van je spel zal verschijnen. Alle andere lagen zijn specifiek voor hun eigen scènes. Om een nieuwe laag te maken, tik je eenvoudig op het + pictogram onderaan het lagen-tabblad. Dit vraagt ons de nieuwe laag een naam te geven. Typ in Button en druk op OK.

Standaard zal de actieve laag nu veranderen naar de nieuw aangemaakte. Bij het gebruik van lagen kunnen alleen objecten in de actieve laag worden geselecteerd. Dit is een geweldige manier om dingen georganiseerd te houden tijdens het bouwen van je spel, zodat je niet per ongeluk dingen verplaatst die je niet wilt. Houd altijd bij welke laag je momenteel aan het werken bent. Vergeet ook niet dat lagen die boven een andere zijn geplaatst, boven die laag worden weergegeven. Op deze manier kun je voorkomen dat je achtergrond het speelgebied bedekt.

Nu om onze knop te maken, dit is heel eenvoudig. Tik op de knop Speciale Objecten (het reageerbuispictogram) rechtsonder in de Object Dock. Dit zal een menu oproepen om een type object te maken. We willen het Leeg Object. Tik erop en er zal een klein, leeg vierkant in het midden van ons project worden aangemaakt. Maar we willen dat dit het hele scherm beslaat. Tik binnenin het vierkant om het te selecteren.