Hogyan készítsünk Tappy Plane-t (Flappy Birds klón)
Bevezetés:
Helló és üdvözöljük a hyperPad alkalmazásban saját "Flappy Birds" stílusú játékunk létrehozásához készült útmutatón!
A mi verziónk kicsit más, ezért "Tappy Plane"-nak nevezzük.
Ez az útmutató a kezdőknek szól, akik mélyebben szeretnének megismerkedni a viselkedési rendszerünkkel és tanulni a vizuális programozásról. Az útmutató során emellett megismerkedhet a hyperPad felületével is.
Ebben az útmutatóban egy egyszerű játékot készítünk a Flappy Bird stílusában. A játékmenet abból áll, hogy a játékos megérinti a képernyőt, hogy irányítsa a repülőt felfelé és lefelé, miközben kikerüli a sziklák sorát. Minden egyes érintett szikla egy pontot ad, és elegendő ponttal a játékosok érmet nyernek. Az érmek értéke a pontszám növekedésével nő, egészen a fényes aranyéremig! Ki ne szeretné a fényes dolgokat!?
Ha még nem rendelkezel hyperPad-del, letöltheted az App Store-ból: https://itunes.apple.com/app/apple-store/id886106438?mt=8
Több információt a hyperPad-ről a weboldalunkon találhatsz: http://www.hyperpad.com
Szóval dőlj hátra, és kezdjük el!
1. Rész: Kezdés
A projekt létrehozása:
Az első dolog, amit tennünk kell, hogy új projektet indítunk. A hyperPad betöltésekor látni fogod a projektkezelő képernyőt. Itt találod az összes projektet, amit készítettél, valamint azokat, amiket letöltöttél. Jelenleg új projektet szeretnénk kezdeni. Érintsd meg az Új projekt gombot a képernyő jobb felső sarkában az alább látható módon.
Ha ez kész, meg kell jelennie egy felugró ablaknak. Itt megnevezzük a projektet, és ha szükséges, létrehozunk egy felhő backupot. Emellett, érintsd meg a "Kezdj el egy mintával helyette" gombot, hogy importálj egy alap projektet. De most nem fogunk ezzel foglalkozni. Nevezd el a projektet Tappy Plane-re, majd érintsd meg a 'Tovább' gombot.
Ebben az új képernyőn meg kell határoznunk, hogy milyen készülékre tervezünk és milyen tájolásban. Ehhez a projekthez állítsd a tájolást vízszintesre és a készülék támogatást iPad-re. Ne aggódj, ha később módosítani kell valamit. Ezek a beállítások bármikor módosíthatók a Globális beállítások menüben.
Végül most kiválaszthatjuk, hogy milyen típusú játékot szeretnénk készíteni. Jelenleg a hyperPad két típusú módot támogat: madártávlatú és oldalnézetes. A madártávlatú nézetet tipikusan olyan játékokhoz használják, mint a The Legend of Zelda, mielőtt áttértek a 3D-re, vagy puzzle játékok, mint a Bejeweled és a madártávlatú lövöldözős játékok. Az oldalnézetet leggyakrabban platformer játékokhoz használják, mint például a Super Mario Bros.
Mindkét verzió egyformán működik egy kis különbséggel, a madártávlatú nézetnél a gravitációs beállítások letiltásra kerülnek (ehelyett a levegőellenállásra támaszkodik a gravitáció szimulálása érdekében, ami a képernyőbe megy), szóval ezt tartsd szem előtt a projekt létrehozásakor. Ezen a tutorial során az oldalnézetet fogjuk használni, úgyhogy győződj meg róla, hogy ez van kiválasztva. Következik a gravitációs beállítások és a PTM arány. Alapértelmezés szerint a gravitáció 0 és -25-ra van állítva.
Ez a x és y értékek, vagy egyszerűen a világunk vízszintes és függőleges. Az X a vízszintest, vagy balra és jobbra, míg az Y a függőlegest, vagy fel és le. Az alapértékek 0 és -25 azt jelentik, hogy nem lesz gravitációs erő, ami az objektumokat balra és jobbra húzza, de azok 25 méter percenként fognak leesni. A tutorialhoz az alapértékek rendben vannak, ahogy vannak.
A PTM arány a Pontok és Méterek arányát jelenti, vagy egyszerűbben, hány pixel (pont) található 1 hyperPad méterben. Alapértelmezés szerint ez 32 pt/m, azaz 32 pixel egy méteren. Ezt fontos tudni, amikor művészeti eszközöket készítünk, és minden művészeti eszköznek követnie kell ezt a skálát. Ebben a tutorialban ingyenes eszközöket fogunk használni a hyperPad eszközkönyvtárából, így nem kell átméretezni a skálát.
Miután kész vagy, érintsük meg a létrehozás gombot, és kezdjük el!
A Szerkesztő:
Most, hogy bent vagyunk a projektben, látnod kell, hogy a képernyő így néz ki:
Ez a vászonunk, itt építjük fel a játékunkat. A képernyő közepén látsz egy vékony zöld keretet. Ez képviseli a képernyő nézetünket. Bármilyen dolog, amit ebbe a dobozba helyezel, azonnal látható lesz a játék elkezdésekor, míg minden, ami kívül esik, az nem kerül megjelenítésre. Ha szeretnéd, tölts el egy kis időt arra, hogy rákattints és nézd meg, mit csinálnak a dolgok, mielőtt továbblépünk a következő lépésre.
Ha készen állsz, érints meg a rajz ikont a jobb alsó sarokban az Eszközbörze megnyitásához.
Az Eszközkönyvtár:
Itt tárolódnak az összes eszköz, amiket a játékunkhoz fogunk használni. Alapértelmezés szerint egy új hyperPad projekt csak néhány induló eszközt tartalmaz. Sajátokat kell importálnod, vagy letöltened egy csomagot a hyperPad Eszközként boltjából. Ebben az útmutatóban a hyperPad Eszközként boltjából biztosított eszközöket fogjuk használni. Bal oldalon egy sávot fogsz látni négy gombbal. Érints rá az Eszközök beszerzése gombra a hyperPad bolt megnyitásához.
Most ingyenes eszközcsoportokat találhatsz, amelyeket mi állítottunk be a hyperPad-nél, hogy segítsenek kezdődni a projektjeiddel. Keresd meg és érintsd meg a Tappy Plane Eszközcsomagot.
Most, egyszerűen érintsd meg a 'Beszerzés' gombot az importálás megkezdéséhez (Megjegyzés: Ha hiba történik, egyszerűen érintsd meg újra az importálást). Miután ez kész, kapsz egy üzenetet arról, hogy az eszközök sikeresen importálva lettek. Egyszerűen érintsd meg a Bezárás gombot a képernyő jobb felső sarkában a hyperPad-be való visszatéréshez.
És ennyire egyszerű. Most már látnod kell egy új mappát az Eszközbörzödben, ami a Letöltések nevet viseli. Rákattintva felfedhető a Tappy Plane Csomag mappa, és abban találhatóak a művészeti eszközeink.
Most kezdjük el összeszerelni a játékunkat.
2. Rész: Játékmenet
Ha ismered a Flappy Bird-öt, akkor a játékmenet stílust ismered. Érintsd meg a képernyőt, hogy a madár, vagy a mi esetünkben a repülő, a levegőben maradjon, miközben próbálja elkerülni a közelgő akadályokat. Ezek az akadályok véletlenszerű konfigurációkban fognak megjelenni, így minden egyes játék eltér a legutóbbitól. Pontokat kapunk, amikor sikeresen elkerüljük az akadályokat, és a legmagasabb pontszámainkat nyilvántartjuk.
A Repülő hozzáadása:
Most, hogy megérted az alapvető játékmenetet, elkezdhetjük. Először is, be kell szereznünk a játékos karaktert a képernyőre. Menj az Eszközbörzédbe, nyisd meg a letöltések mappát, és navigálj, amíg meg nem találod a művészeti eszközeidet. Kell lennie egy mappának, ami a Repülő nevet viseli.
Nyisd meg ezt a mappát, és válaszd ki azt a színt, ami a legjobban tetszik. Ezután válaszd ki az első repülő grafikát. Ez lezárja az eszköz könyvtárat, és visszatérsz a fő editor képernyőre, ahol most a repülőt látnod kell az alsó objektum dokkon. Ez az UI szakasz a Legutóbb használt 5 eszköz megjelenítésére szolgál. Most ahhoz, hogy a repülő a játék területén legyen, egyszerűen húzd a repülőt a dokkból a vászonra.
Most, hogy a repülő a játékban van, szükség van egy gyors módosításra. Érints a repülőre, hogy kiválaszd, és nyisd meg a tulajdonságok fület jobbra. Amit szeretnénk csinálni, az az, hogy a repülőt átkonfiguráljuk áthaladó fal objektummá. Egyszerűen csak keresd meg a Hurcolás kapcsolót, és érintsd meg, hogy bekapcsolj. Ezt azért tesszük, mert nem szeretnénk, hogy a repülő lezúgjon, mielőtt a játékosnak lehetősége lenne elindítani a játékot. Szintén átkonfiguráljuk, hogy ne legyen ütközés, mivel nincs szükség rá.
Miután ezzel végeztünk, merüljünk bele a játékosíthatóságba.
Lezuhanó Repülő:
Tehát szükségünk van egy módra, hogy elindítsuk a játékot. Ehhez szükségünk lesz egy gombra. Most használhatnánk egy egyszerű grafikát, hogy jelezzük, hol érintsük meg, de a játékunkhoz azt szeretnénk, ha a játékos bárhol tapsolhatna a képernyőn. Hogyan is tesszük ezt? Az egész képernyőt gombá tesszük!
Amit először tennünk kell ennek eléréséhez, hogy létrehozzunk egy új réteget. De ehhez le kell választanunk a repülőről. Ezt úgy tehetjük meg, hogy bármely üres helyre koppintunk. Miután le van választva, a tárgy tulajdonságai becsukódnak, és látnod kell a rétegek fület a jobb oldalon. Ha nem, egyszerűen húzd el az ujjad a képernyő jobb oldaláról balra, hogy felfedje.
Ahogy láthatod, alapértelmezés szerint jelenleg három réteg van. A Globális UI, Jelenet UI, majd a Fő a szétválasztó vonal után. Egy gyors megjegyzés, hogy bármi, ami a Globális UI rétegen van, minden jelenetben megjelenik a játékodban. Minden más réteg az adott jelenetekhez specifikus. Új réteg létrehozásához egyszerűen érintsd meg a + ikont a rétegek fül alján. Ez egy új réteg nevének megadását fogja kérni. Írd be a "Gomb" nevet és nyomj OK-t.
Alapértelmezés szerint az aktív réteg átvált az újonnan létrehozott rétegre. Amikor rétegeket használunk, csak az aktív rétegben lévő objektumok választhatók ki. Ez nagyszerű módja annak, hogy rendezetten tartsuk a dolgokat, amikor a játékunkat építjük, mivel nem mozdítunk véletlenszerűen dolgokat, amiket nem szeretnénk. Mindig figyelj, hogy melyik rétegen dolgozol. Az is fontos, hogy a másik rétegeken elhelyezett rétegek felülről fognak renderelni. Így elkerülheted, hogy a hátterek elfedjék a játék területét.
Most a gombunk létrehozása nagyon egyszerű. Érints a Speciális objektumok gombra (a lombik ikona) az Objektum Dock jobb alsó sarkában. Ez megnyit egy menüt, hogy egy objektum típust hozzunk létre. Az Üres objektumot szeretnénk. Érintve egy kis üres négyzetet készít a projekt közepén. Azonban ennek el kell foglalnia az egész képernyőt. Érints a négyzet belsejébe, hogy kiválaszd.