Kuinka tehdä Tappy Plane (Flappy Birds -kopio)

Johdanto:

Tervetuloa opetusohjelmaan, jossa luot oman "Flappy Birds" -tyylisen pelin hyperPadissa.

Versiomme on hieman erilainen, joten kutsumme sitä Tappy Planeksi.

Tämä opetusohjelma on tarkoitettu aloittelijoille, jotka haluavat syventää tietämystään käyttäytymisjärjestelmästämme ja oppia visuaalisesta koodauksesta. Opetusohjelman aikana opit myös tuntemaan hyperPadin käyttöliittymän.

Tässä opetusohjelmassa luomme yksinkertaisen pelin Flappy Bird -tyylillä. Pelin kulku koostuu siitä, että pelaaja napauttaa näyttöä ohjatakseen lentokonetta ylös ja alas, navigoiden ohi sarjan kalliopaaseja. Jokainen ohitettu kallio antaa pisteen, ja riittävällä pistemäärällä pelaajat ansaitsevat mitalin. Mitaleja on useita, ja niiden arvo kasvaa, mitä korkeampi tulos, jopa kiiltävän kultamitaliin! Ja kuka ei rakastaisi kiiltäviä asioita!?

Jos sinulla ei vielä ole hyperPadia, voit ladata sen App Storesta: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Voit oppia lisää hyperPadista verkkosivuiltamme osoitteessa http://www.hyperpad.com

Joten ilman lisäpuheita, aloitetaan!

Osa 1: Aloittaminen

Projektin luominen:

Ensimmäinen asia, jonka meidän on tehtävä, on aloittaa uusi projekti. Kun avaat hyperPadin, sinun pitäisi nähdä projektiluettelo. Täältä löydät kaikki luomasi projektit sekä kaikki lataamasi projektit. Tällä hetkellä haluamme aloittaa uuden projektin. Napauta Näytä uusi projekti -painiketta ruudun oikeassa yläkulmassa, kuten alla näkyy.

Kun olet tehnyt tämän, sinun pitäisi nähdä ponnahtava ikkuna. Tässä nimetään projekti ja luodaan pilvivarmistus, jos niin halutaan. Lisäksi voit napauttaa ”Aloita mallilla” -painiketta ostaaksesi jonkin perusprojekteistamme. Mutta nyt emme aio tehdä sitä. Nimeä projekti Tappy Plane ja napauta sitten 'Seuraava' -painiketta.

Uudessa näytössä määritämme laitteen, jolle suunnittelemme, ja suuntaa. Tälle projektille aseta suunta vaaka-asentoon ja laite tukee iPadia. Älä huoli, jos sinun on vaihdettava jotain myöhemmin. Nämä asetukset voidaan säätää milloin tahansa Global Settings -valikossa.

Vihdoin voimme nyt valita, minkätyyppistä peliä haluamme tehdä. Tällä hetkellä hyperPad tukee kahta tyyppiä, ylhäältä alas ja sivulta nähden. Ylhäältä alas, tai lintuperspektiivi, käytetään yleensä peleissä kuten The Legend of Zelda ennen siirtymistään 3D:hen, pulmapelissä kuten Bejeweled ja ylhäältä alas ampuvissa peleissä. Sivuperspektiiviä käytetään yleisesti tasohyppelypeleissä, kuten Super Mario Bros.

Molemmat versiot toimivat identtisesti pienellä erolla: lintuperspektiivin painovoimatoiminnot on poistettu käytöstä (sen sijaan että luotetaan ilmanvastukseen simuloimaan painovoimaa, kun se liikkuu ruutua kohti), joten pidä tämä mielessä luodessasi projektiasi. Voit aina muuttaa tätä myöhemmin Global Properties -valikossa.

Tässä opetusohjelmassa käytämme sivuperspektiiviä, joten varmista, että se on valittu. Seuraavaksi meillä on painovoiman asetukset ja PTM-suhde. Oletusarvoisesti painovoima on asetettu arvoon 0 ja -25.

Nämä ovat x- ja y-arvoja, tai yksinkertaisemmin, pelimaailmamme vaakasuora ja pystysuora. X edustaa vaakasuuntaista liikettä vasemmalta oikealle, kun taas Y edustaa pystysuoraa liikettä ylös ja alas. Oletusarvot 0 ja -25 tarkoittavat, ettei hätäsyitä vedä esineitä vasemmalle tai oikealle, mutta ne putoavat alas 25 metriä sekunnissa. Tämän opetusohjelman osalta oletusarvoiset arvot ovat hyviä sellaisinaan.

PTM-suhde tarkoittaa pisteet metriä kohti, tai yksinkertaisemmin, kuinka monta pikseliä (pistettä) on yhdessä hyperPad metrin pituudessa. Oletusarvoisesti tämä on asetettu 32 pt/m tai 32 pikseliä per metri. Tämä on tärkeää tietää luodessasi taidevarastoja, ja kaikki taidevarastot tulisi seurata tätä mittakaavaa. Tämän opetusohjelman aikana käytämme hyperPadin varastoista saatavia ilmaisia varastoja, joten meidän ei tarvitse muuttaa mittakaavaa.

Kun tämä on tehty, napauta luo-painiketta ja aloitamme!

Muokkaaja:

Nyt kun olemme projektissa, sinun pitäisi nähdä näin näytön:

Tämä on kangas, ja täällä rakennamme peliämme. Näytön keskiosassa pitäisi olla ohut vihreä laatikkomerkki. Tämä edustaa näyttöä. Kaikki, mikä on sijoitettu tähän laatikkoon, on heti näkyvissä pelin alkaessa, kun taas kaikki sen ulkopuolella ei renderöidä. Jos haluat, käytä hetki napauttamalla ympärilläsi ja nähdäksesi, mitä asiat tekevät ennen kuin siirrymme seuraavaan vaiheeseen.

Kun olet valmis, napauta laari-kuvaketta oikeassa alakulmassa avaat Asset Browserin.

Taustakirjasto:

Tässä ovat kaikki varastot pelimme varastoissa. Oletusarvoisesti uusi hyperPad-projekti sisältää vain muutaman aloitustiedoston. Sinun täytyy tuoda omat tai ladata paketti hyperPadin Varastokaupasta. Tässä opetusohjelmassa keskitymme hyperPadin Varastokaupasta tarjoamiin varastoihin. Vasemmalla puolella on palkki, jossa on neljä painiketta. Napauta Hanki varasto -painiketta avataksesi hyperPadin Kaupan.

Täältä löydät ilmaisia varastopaketteja, jotka on asetettu meiltä hyperPadilta auttamaan projektejesi aloittamisessa. Etsi ja napauta Tappy Plane Asset Pack.

Nyt napauta vain 'Hanki' -painiketta aloittaaksesi tuonnin (Huom: jos virhe tapahtuu, napauta sitä vain uudelleen aloittaaksesi tuonnin). Kun se on tehty, saat viestin, joka kertoo, että varastot on tuotu onnistuneesti. Napauta vain sulje-vaihtoehtoa ruudun oikeassa yläkulmassa palataksesi hyperPadiin.

Ja niin helppoa se on. Näet nyt uuden kansion, joka Asset Browserissasi on nimeltään Lataukset. Napauttamalla sitä paljastat Tappy Plane Pack -kansion, jossa on mukana taidevarastomme.

Seuraavaksi aloitamme pelimme kokoamisen.

Osa 2: Pelimekaniikka

Jos olet tuttu Flappy Birdin kanssa, tunnet pelin tyyliin. Napauta näyttöä pitääksemme lintu, tai meidän tapauksessamme lentokone, ilmassa samalla kun yritämme törmätä vastaantuleviin esteisiin. Esteet syntyvät satunnaisissa kokoonpanoissa, joten jokainen pelisessio on erilainen kuin edellinen. Pisteitä myönnetään, kun vältämme esteitä, ja korkeimmat tulokset tallennetaan.

Lentokoneen lisääminen:

Joten nyt kun ymmärrät peruspelimekaniikan, voimme aloittaa. Ensimmäinen asia, jonka meidän on tehtävä, on saada pelaajahahmomme ruudulle. Siirry Asset Browseriisi ja avaa lataustiedostot, ja siirry, kunnes näet taidevarastosi. Sinulla pitäisi olla kansio nimeltä Lentokonesuojat.

Avaa se kansio ja valitse mielestäsi paras väri. Valitse ensin lentokonesuurennuskuva. Tämä sulkee taidekirjaston ja vie sinut takaisin päämuokkausruutuun, jossa näet nyt lentokoneen alareunan objektipalkissa. Tämä UI:n osa tunnetaan nimellä Object Dock. Se näyttää viimeiset 5 käyttämääsi varastoa. Nyt saadaksesi lentokoneesi pelialueelle, vedä lentokone vain dockista kankaalta.

Kun lentokoneemme on nyt pelissä, meidän on tehtävä yksi nopea säätö. Napauta lentokonetta valitaksesi sen ja avaa oikealla sijaitseva ominaisuuksien väli. Mitä haluamme tehdä, on asettaa lentokoneeksi kulkeva seinähahmo. Yksinkertaista, etsi vain läpäisy-kytkin ja napauta sitä kytkeäkseesi sen päälle. Teemme tämän, koska emme halua lentokoneen putoavan ennen kuin pelaajalla on mahdollisuus aloittaa peli. Asetamme myös sen läpäisevänä, koska emme halua sen olevan törmäyksissä vielä.

Kun tämä on tehty, aloitetaan pelattavuuden tekeminen.

Putoava lentokone:

Meidän täytyy saada tapa aloittaa peli. Tehdäksemme tämän tarvitsemme painikkeen. Nyt voimme käyttää yksinkertaista grafiikkaa osoittamaan, mihin napauttaa, mutta pelissämme haluamme antaa pelaajalle mahdollisuuden napauttaa mihin tahansa kohtaan näyttöä. Miten teemme tämän? Teemme koko näytöstä painikkeen!

Ensimmäinen asia, jonka meidän on tehtävä tämän toteuttamiseksi, on luoda uusi kerros. Mutta jotta voimme tehdä tämän, meidän on poistettava valinta lentokoneeltamme. Poista valinta vain napauttamalla mihin tahansa tyhjään tilaan. Kun olet peruuttanut valinnan, objektin ominaisuudet sulkeutuvat ja sinun pitäisi nähdä kerrosvälilehti oikealla. Jos ei, pyyhkäise sormellasi oikeasta reunasta kohti vasenta paljastaaksesi sen.

Kuten näkyy, tällä hetkellä on oletusarvoisesti kolme kerrosta. Global UI, Scene UI ja Main sen erottamisen jälkeen. Nopeasti muistutettakoon, että Global UI -kerroksessa olevat objektit näkyvät pelissäsi kaikissa kohtauksissa. Kaikki muut kerrokset ovat spesifisiä omille kohtauksilleen. Jos haluat luoda uuden kerroksen, napauta vain + kuvaketta kerrosvälilehden alareunassa. Tämä pyytää meiltä nimeämään uusi kerros. Kirjoita Nappi ja napauta OK.

Oletusarvoisesti aktiivinen kerros muuttuu juuri luomaksi. Käytettäessä kerroksia, vain aktiivisessa kerroksessa olevat objektit voidaan valita. Tämä on hieno tapa pitää asiat järjestyksessä rakentaessasi peliäsi, koska et vahingossa siirrä asioita, mitä et halua. Pidä aina kirjaa siitä, mitä kerroksessa työskentelet. Huomioi myös, että kerrokset, jotka sijoitetaan toisen päälle, renderöidään sen päällä. Näin voit välttää taustakuvan peittämistä pelialueen.

Nyt luodaksemme painiketta, tämä on erittäin yksinkertaista. Napauta Erikoisobjektit-painiketta (pikarikuvake) oikeassa alakulmassa Object Dockissa. Tämä avaa valikon, josta voit luoda tietyn tyyppisen objektin. Haluamme Tyhjää objektia. Napauttamalla sitä luodaan pieni, tyhjää neliö meidän projektin keskelle. Mutta haluamme, että tämä kattaa koko näytön. Napauta neliön sisäosaa valitaksesi sen.

Huomaa, että kun se on valittuna, objektin ympärille ilmestyy pieniä vihreitä pisteitä. Voimme käyttää näitä skaalaamaan Tyhjää objektia manuaalisesti. Napauta ja vedä kulmaa skaalaamaan tasaisesti. Vedä kulmat niin, että objekti kattaa kankaan kokonaisuudessaan. Sivujen pisteitä voidaan käyttää esineen säätämiseen paremman istuvuuden saamiseksi. Lopuksi sinulla pitäisi olla jotain tällaista (Huom: Jos sinulla on ongelmia objektin skaalaamisessa, voit zoomata ulospäin pyyhkäisemällä kahta sormea toistensa poispäin ja zoomautua lähemmäksi vetämällä niitä yhteen):

Palataan pääkerrokseen peruuttamalla tyhjää objektia (napauttamalla tyhjää tilaa kankaalla) ja napauta sitten Main kerros ja valitse lentokone uudelleen. Napauta käyttäytymiset-painiketta avataksesi käyttäytymisruudun.

Tämä on käyttäytymisruutu, ja täällä magia tapahtuu. Perinteisen koodauksen sijaan hyperPad käyttää visuaalisia logiikkablokkeja toimintoja ja tapahtumia ohjelmoimaan vuorovaikutuksia. Jos haluat, käytä hetki tutkia kategorioita ja nähdä mitä vaihtoehtoja on tarjolla. Napauta yhtä käyttäytymisistä vasemmassa välilehdessä avataksesi ikkunan, joka antaa lyhyen kuvauksen käyttäytymisestä. Voit myös tarkistaa hyperPadin dokumentaatiosta kunkin käyttäytymisen selityksen.

Sitä, mitä haluamme tehdä, on yksinkertaisesti aloittaa peli ja muuttaa lentokoneemme kulkeviksi seinähahmoiksi. Tällä tavalla sovelletaan fysiikkaa lentokoneeseemme ja siten se putoaa painovoimalla.

Ensimmäinen asia, jonka haluamme tehdä, on käyttää Aloitettu kosketus -käyttäytymisvälineitä, joita on vuorovaikutusosiolla. Vedä se valikosta tyhjään tilaan. Kun se on siellä, se on nyt liitetty objektiimme. Voit napauttaa käyttäytymistä avataksesi sen ominaisuudet, mutta emme tarvitse muuttaa mitään.

Tietenkin, pelkästään tämä ei riitä, koska ei ole mitään, mikä seuraa lentokonetta, kun kosketamme sitä. Korjataan tämä. Siirrymme fysiikkakategoriaan ja vierittää alas, kunnes näet osion nimeltä Tilat. Vedä Lisää fysiikka -käyttäytyminen ja liitä se Aloitettu kosketus -käyttäytymiseen. Nyt meidän tarvitsee vain liittää se Aloitettu kosketukseen. Aloitettaessa Aloitetussa kosketuksessa näet pienen salaman ympyrän. Napauta ja vedä se, ja näet viivan seuraavan sormen. Vedä viivaa Alas- että Lisää fysiikka käyttäytymisen liittämiseksi siihen.

Ja niin yksinkertaista se on. Nopeasti muistutettakoon, että hyperPadissa käyttäytymiset seuraavat rakennetta Tapahtuma -> Toiminto. Tässä tapauksessa tapahtuma on se, että Aloitimme kosketuksen lentokonesella ja toimenpide on, että lentokoneesta tulee fysiikkahakemisto. Otetaan hetki kokeilla tätä ja varmistaa, että se toimii kunnolla. Näytön yläosassa, paina Toista-painiketta aloittaaksesi testin. Kun olet valmis, napauta oikeassa yläkulmassa kolmea palkkia ja valitse Lopeta.

Jos kaikki toimii hyvin, lentokoneen pitäisi pudota ruudulta, kun kosketat sitä.

Nyt haluamme lopettaa pelimme heti, kun lentokoneen on koskettaessaan maata. Vaikka meillä ei tällä hetkellä ole maata, voimme täyttää sen tyhjällä pelin objektilla. Palataan kangas-alueelle napauttamalla takaisin-nuolta näytön vasemmassa yläkulmassa.

Poista valinta lentokoneelta ja napauta Erikoisobjektit-ikonia (pikarikuvake) oikeassa alakulmassa avataaksesi ikkunan ja luodaksesi toisen Tyhjän objektin. Nyt sijoitetaan se kangas alueen alareunaan ja venytetään se niin, että se kattaa koko alareunan.

Valitse lentokone ja avaa käyttäytymisikkuna uudelleen. Nyt lisäämme