Hogyan készíts Pong játékot - hyperPong | hyperPad Documentation

Loading...

Logo

Video_2019-07-31__5_25_47_PM.s.gif

Megjegyzés: Ez a tutorial számára készült befejezett projekt fájl az cikk végén található.

Bevezetés

Ebben a tutorialban, nulláról fogunk létrehozni egy Pong-szerű játékot. Néhány fejlettebb funkciót és viselkedést fogunk bemutatni a hyperPadben, így ez a tutorial némi alapvető tudást feltételez a hyperPad szerkesztővel kapcsolatban. Ha úgy érzed, hogy jobban meg kellene ismerned, hogyan készíthetsz játékot a semmiből, először nézd meg a Teljes útmutató - Platform Játék Létrehozása tutorialt.

A Pong egy egyszerű, kétjátékos játék, amely csak két ütőből és egy labdából áll, és mint egy egyszerű digitális változata a tenisznek tekinthető. Mindkét játékos egy ütőt irányít, mindkét oldalán az asztalnak. Az ütők csak előre és hátra tudnak mozogni, a labdát az ellenkező játékos felé ütik. Ha egy játékos elmulasztja a labdát, a másik játékos pontot szerez. Az első játékos, aki eléri a 11 pontot, nyer!

A Pong játékunkban lehetőség lesz egyjátékos módban (Játékos vs. AI), kétéves módban (Játékos vs. Játékos) és nullás játékos "Néző" módban (AI vs. AI) játszani.

1. rész: Projekt beállítása és főmenü

Kezdjük el egy új projekt létrehozásával.

Nyisd meg a Projektek menüt a hyperPadben, és érintsd meg az Új Projekt gombot. Adj nevet a projektednek és érintsd meg a Tovább gombot. A tájolás maradhat alapértelmezettként vízszintes. Ezen a tutorialon az Eszköztámogatás IPad 4:3-ra van állítva. A következő képernyőn válaszd ki a "Madártávlat" lehetőséget, és hagyd a többit alapértelmezettként.

Most, hogy van egy új projektünk, gyorsan kezdjünk el létrehozni egy főmenüt, mielőtt azonnal a játékra ugrunk. Az első dolog, amit meg kell tennünk, az, hogy átnevezzük a jelenetünket "Főmenü"-re.

Érintsd meg a Projekt/Jelenet menü gombot és érintsd meg a fogaskerék ikont a "Jelenet 1" mellett.

Photo_2019-07-10__5_32_10_PM.s.jpg

Photo_2019-07-10__5_34_50_PM.s.jpg

Érintsd meg a Beállítások lehetőséget, és nevezd át a jelenetet "Főmenü"-re. Érintsd meg a Mentés gombot, hogy elmentsd és bezárd a beállításokat.

Photo_2019-07-10__5_36_34_PM.s.jpg

A következő lépésben, hogy hűek maradjunk a régi retro játékok hagyományaihoz, mint az arcade Pong, a hátterünket feketére állíthatjuk.

Érintsd meg a Jelenet Beállítások gombot és válaszd a Háttér lehetőséget. Érintsd meg a "Szín megváltoztatása" gombot és állítsd feketévé (#000000FF).

Photo_2019-07-10__5_41_52_PM.s.jpg

Photo_2019-07-10__5_43_22_PM.s.jpg

Most adjunk hozzá egy címet a főmenünkhöz. Érintsd meg a Speciális Objektumok gombot és válaszd a Címkét.

Photo_2019-07-15__2_45_50_PM.s.jpg

Photo_2019-07-15__2_46_33_PM.s.jpg

Írd be a játékod nevét a szövegmezőbe (ebben a tutorialban a "hyperPong" volt beírva), állítsd a betűméretet nagyra, de ne túl nagyra. A "hyperPong" címhez a 72 pont megfelelő méret. Állítsd a színt fehérré (#FFFFFFFF) és helyezd a menü közepére, a tetejére közel.

Photo_2019-07-15__2_51_39_PM.s.jpg

Most van egy főmenü jelenetünk, amelyet feltölthetünk a játékaink összes módjának gombjaival. Most hagyjuk a menüt, ahogy van, és befejezzük, miután egy játszható játékunk van.

2. rész: Játék jelenet és ütő beállítása

Érintsük meg a Projekt Menü gombot, és válaszd az "Add Scene"-t. Nevezd el "Játék"-nak és érintsd meg a Létrehozás gombot. Most a Játék jelenetben egy üres vászont kell látnod. Ahogyan a Főmenü jelenettel is tettük, csapj rá a Jelenet Beállítások gombra, és változtasd a hátteret feketévé (#000000FF).

Most kezdjünk el dolgozni a játékos ütők létrehozásán. Hozz létre egy üres objektumot azzal, hogy menj a Speciális Objektumok gombhoz, majd válaszd az "Üres objektumot". Változtasd meg a színét fehérre (#FFFFFFFF), és győződj meg róla, hogy az átlátszóság csúszka teljesen be van állítva.

Photo_2019-07-15__3_07_37_PM.s.jpg

Nevezd át az objektumot "Player-1"-re, és állítsd a fizikai módját Fizikára, hagyva a Megkerülheto-t engedélyezve.

Photo_2019-07-15__3_12_23_PM.s.jpg

Azért fogjuk a Megkerülheto-t engedélyezni, hogy nagyobb kontrollt nyerjünk azzal kapcsolatban, hogy a labda hogyan fog kölcsönhatásba lépni az ütővel, amikor az üti azt. Szeretnénk képesek lenni manuálisan beállítani a labda sebességét és irányát.

A Player-1 objektum tulajdonságainál lépj a Transzformáció fülre, és állítsd a méret X-t 25%-ra, és helyezd el a játéktér bal oldalán.

Photo_2019-07-15__3_37_01_PM.sjpg

Következő lépésként adjunk valamilyen vezérlést az ütőnknek, hogy mozoghasson. Az ütő kiválasztása után, lépj a viselkedése szerkesztőhöz, majd vissza a Fizika fülhöz.

Photo_2019-07-15__5_40_57_PM.sjpg

Helyezz egy Joystick Analóg viselkedést, amelyet az Interakció szekcióban találsz (ha nem találod, lehet, hogy meg kell érinted az Fejlett fülre). Ez automatikusan létrehoz egy joystick-ot a jelenet szerkesztőjében.

De nem akarjuk, hogy az ütő csak a joystick mozgásával tudjon mozogni. Azt is szeretnénk, hogy egy AI is végezzen mozdulatokat.

Az Egyéni szekció alatt helyezz egy Doboz tárolót. Ez fogja tárolni a mozgás irányát, így mind egy játékos joystick-jának vezérlése, mind pedig az AI számításainak eredményének átállításával mozgathatók lesznek. Alapértelmezett értékét állítsd 0-ra. Jó ötlet, ha adsz neki egy jó nevet is, ami megkönnyíti a munkát, a "Mozgás Irány" tűnik megfelelőnek.

Photo_2019-07-17__1_17_12_PM.sjpg

A Dozbox tároló kiválasztásánál, nyomd meg a "Beviteli mező megváltoztatása" gombot, és érintsd meg az Igen-t. Ez létrehozza a Beviteli mező beállítás viselkedést a doboz tárolón, így megváltoztathatjuk az értékét, amikor szükség van rá. Csatlakoztassuk a Beviteli mezőt a Joystick Analóghoz.

Photo_2019-07-17__1_42_32_PM.sjpg

Photo_2019-07-17__1_43_28_PM.sjpg

A Beviteli mező beállítás viselkedésének kiválasztásánál húzd az output értéket a Joystick Analóból az Új érték mezőbe. Válaszd ki az "y" tulajdonságot. Most a Mozgás Irány doboz tároló nyomon követi, hogy a játékos mennyire mozgatja a joystick-ot felfelé vagy lefelé (y-tengely).

Photo_2019-07-17__1_44_16_PM.sjpg

Most, hogy nyomon követjük, mennyit mozog a joystick felfelé vagy lefelé, szükségünk van arra is, hogy nullára állítsuk, ha a játékos elengedi a joystickot. Különben az ütő a legutóbb emlékezett irányba fog mozogni.

Az Interakció szekció alatt adj hozzá egy Megállt Érintés viselkedést, és érintsd meg, hogy megnyisd a tulajdonságait. Alapértelmezettként figyeli, amikor a játékos abbahagyja az ütő érintését, de mi azt szeretnénk, hogy az joystick érintetlenségét figyelje.

Érintsd meg az objektum tulajdonságát, hogy megváltoztasd, és válaszd a joystickot. Lehet, hogy ki kell választani a Globális UI réteget ahhoz, hogy ki tudd választani. Ha kiválasztottad, érints rá a pipa gombra. Most a viselkedésnek az joystick lesz a nyomon követett objektum.

Photo_2019-07-17__1_47_54_PM.sjpg

Photo_2019-07-17__1_48_31_PM.sjpg

Érintsd meg a Beviteli mezőnket, amit korábban készítettünk, és duplikáld azt. A duplikált Beviteli mezővel csatlakoztassuk azt a Megállt Érintés viselkedéshez, és állítsd az Új érték tulajdonságát 0-ra.

Photo_2019-07-17__1_50_08_PM.sjpg

Photo_2019-07-17__1_52_22_PM.sjpg

Most a Mozgás Irány doboz tároló változó nyomon követi a joystick felfelé és lefelé tartó mozgásait és nullára állítja, amikor a joystickot elengedi. Ez egy kiváló módszert biztosít arra, hogy megmondjuk az ütőnek, hogyan kell mozogni, szóval folytassuk, és adjunk a ütónknak mozgást.

Az Egyéni szekció alatt cseppents egy Időtartam viselkedést. Tulajdonságaiban állítsd az intervallumot 0-ra. Ez az időzítő lehetővé teszi, hogy a lehető leggyakrabban hajtódjon végre (minden egyes keretről egyszer), amely lehetővé teszi, hogy gyakran frissíthessük az ütő mozgását.

Photo_2019-07-17__2_27_54_PM.sjpg

Az ütő mozgásának beállítása előtt ellenőriznünk kell, hogy a Mozgás Irány doboz tároló értéke egy ésszerű határon belül legyen, csak abban az esetben, ha túl magasra vagy túl alacsonyra megy. Különben az ütő néha túlságosan gyorsan fog mozogni.

Az Logika szekció alatt helyezz egy Minimum viselkedést és egy Maximum viselkedést. Csatlakoztasd a Minimum viselkedést az időzítőhöz, és a Maximum viselkedést a Minimumhoz. Valami hasonlónak kell lennie:

Photo_2019-07-17__2_30_08_PM.sjpg

A Minimum viselkedés tulajdonságaiban az első értéket állítsd a Mozgás Irány viselkedés kibocsátott értékére, a második értéket pedig 1-re.

A Minimum viselkedés az általa kapott legkisebb számot adja majd ki. Tehát, ha a Mozgás Irány értéke 1-nél nagyobb lesz, az 1-et fogja kibocsátani. Különben egyszerűen a Mozgás Irány értékét fogja kibocsátani.

Photo_2019-07-17__2_31_06_PM.sjpg

A Maximum viselkedés tulajdonságaiban az első értéket állítsd a Minimum eredményére, a második értéket pedig -1-re.

A Maximum viselkedés az általa kapott legnagyobb számot adja majd ki. Tehát, ha a Mozgás Irány értéke -1-nél alacsonyabb lesz, akkor -1-et fog kibocsátani. Különben a Minimum értékét fogja kibocsátani (ami vagy 1 vagy a Mozgás Irány, ami alacsonyabb).

Photo_2019-07-17__2_32_46_PM.sjpg

Mindez annyit jelent, hogy a Maximum kibocsátott értéke gyakorlatilag a Minimumnak -1 és +1 között korlátozott értéke. Ez teljes kontrollt ad nekünk arról, hogy az ütő milyen gyorsan tud mozogni!

A -1 és +1 közötti tartomány könnyen kezelhető, de ha közvetlenül ezt használjuk az ütő sebességéhez, az túl lassú lesz.

Ismét az Logika szekció alatt cseppents egy Szorozza Mezőt viselkedést, és csatlakoztasd a Maximum viselkedéshez. Az első értékhez állítsd a Maximum viselkedés kibocsátott értékét. A második értéket állítsd be egy jó "max sebesség" értékre.

Pillanatnyilag állítsd 20-ra. Ha később úgy gondolod, hogy az ütő túl lassan vagy túl gyorsan mozog, csak állítsd ezt a számot egy magasabbra vagy alacsonyabbra.

Photo_2019-07-17__2_34_52_PM.sjpg

A Szorzás Mező viselkedés most egy jó sebességi tartományt ad nekünk, legalább -20-ig és legfeljebb +20-ig.

Most jó alkalom, hogy beállítsuk az ütő sebességét. A Fizika szekció alatt adj hozzá egy Sebastianit viselkedést, és csatlakoztasd a Szorzás Mező viselkedéshez. Az X mezőt állítsd 0-ra, és a Y mezőt az Szorzás Mező viselkedés kibocsátott eredményére.

Photo_2019-07-17__2_37_11_PM.sjpg

Próbáld ki! Amikor játszani kezded a játékot, az ütőnek követnie kell a joystick fel és le mozgását.

Video_2019-07-17__2_39_15_PM.sgif

Ahogy valószínűleg észrevetted a tesztelés alatt, semmi sem állítja meg az ütőt attól, hogy elhagyja a képernyőt. A következő részben hozzáadunk néhány korlátot, hogy minden a nézőtéren maradjon..

3. rész: Játék Korlátok

És most, hogy folytassuk, használjuk a foresight-ot, és vegyük figyelembe a jó játéktervezést. A játékos ütője nem a képernyő közepén lesz, hanem a szélén, mivel továbbra is összerakjuk a játékot. Ez problémát okoz, mivel UI elemek (pl. joystick) lesznek, amelyek átfedik a játék elemeit (pl. ütők).

Ahelyett, hogy a játékterületet a teljes képernyővel használni kellene, a határok széleit be kell állítanunk, hogy az ütőnk ne jusson a joystick alá, ahol az ujjak vannak, ahol nem látjuk könnyen. Ezzel elkerüljük, hogy az ütőnk a játékmező alján maradjon.

Érintsd meg a Speciális Objektumok gombot és hozz létre egy új Üres Objektumot. Érints a létrehozott üres objektum tulajdonságaira.

Tartsd meg a fizikai módját Falnak és tiltsd le a Megkerülhetőséget. Állítsd be a színt, hogy látható legyen, egy átlátszatlan sötétszürke (#1F1F1FFF) jól illik. Állítsd a súrlódást 0%-ra és a visszapattanást 100%-ra.

Photo_2019-07-17__4_14_41_PM.s.jpg

Most a Fal átalakítási fülénál állítsd Y méretet 200%-ra, és helyezd el a képernyő tetejére. Most nyújtsd annyira ki, hogy a teljes szélességbe belesimuljon a képernyőre. Ki is kapcsolhatod a rácssnapolást, hogy pontosan elhelyezhesd.

Photo_2019-07-23__2_17_57_PM.sjpg

Most másold az falat, és mozdítsd a másolatot a képernyő aljára.

Ismételd meg újra, és állítsd a X méretét 200%-ra. Aztán nyújtsd a magasságát, hogy illeszkedjen a képernyőhöz és helyezd a képernyő bal oldalára.

Légy ismét, másold az fordított falat és mozdítsd a jobb oldalára a képernyőnek. Most már teljes a játékterületed:

Photo_2019-07-23__2_21_51_PM.sjpg

Amikor most játszol, valószínűleg azonnal észre fogod venni, hogy áthaladhatsz a falakon, mintha nem is lennének ott. Ennek két oka van; beállítottuk, hogy az ütő "Megkerülhetõ" legyen és minden keretben erőltetjük az ütő sebességét. Ez rendben van, csak annyit kell tennünk, hogy megvalósítsunk egy módot, hogy megakadályozzuk az ütőt a falakba való mozgását.

Ahhoz, hogy ezt a viselkedést megvalósítsuk, ellenőriznünk kell a játékos pozícióját a fal pozíciójával. Ha ez igaz, akkor az ütőt vissza kell állítani a játszható mezőre.

A azért, hogy a könnyebben megvalósítsuk ezt, érintsd meg a felső falat és állítsd a Y, hogy az új y pozíciót 0%-ra állítsd. Ez a fal pozícióját az önmaga legalsó részéhez rögzíti. Lehet, hogy fel kell oldanod az anchor mezőket a zár ikonra való érintéssel.

Photo_2019-07-23__2_31_57_PM.sjpg

Ugyanígy a jövőfal alsó rögzítési pontját 100%-ra kell beállítani. Ez a fal pozícióját a legjobb helyszínen fogja rögzíteni.

Photo_2019-07-23__2_34_05_PM.sjpg

Most készen állunk a korlát-ellenőrző viselkedések végrehajtására. Érints az ütőre és nyisd meg a viselkedés szerkesztőjét.

Kezdd el egy Get Bounding Box viselkedést az Logika szekcióval. Alapértelmezés szerint a beállításnak a ütőnek kell lennie. Ez a viselkedés megadja az ütő alsó és bal koordinátáit és méretét.

Ezután helyezz el egy Add Values viselkedést az Logika szekcióval és csatlakoztassa azt a Get Bounding Box viselkedéshez. Az Add Values tulajdonságában állítsd az első értéket a Get Bounding Box eredmény "y"-jára és a második értéket a "height"-jára.

Azt, hogy hogy mennyivel kell "tolnunk" az ütőt vissza, hogy a játszható mezőbe maradjon kerül sor, nagyon könnyedén fogja nyomon követni. Az elérési időség úgy nézhet ki, ahogyan meg kell, és létre kell hozni a hozzáértés miatt valami hasonlónak tűnhet:

Photo_2019-07-23__4_05_38_PM.sjpg

Most mindkét irány ellenőrzön, hogy vissza tudjuk-e tolni az ütőt.

Nem biztos, hogy így elérni a kódot. Az, hogy az egyes irányok szerinti legkisebb távolságot megkapják ténylegesen. Segítésként vegyük el az ütő pozícióját.

Most, az Add Values viselkedéshez csatlakoztassunk egy Get Position viselkedéspálcát az Algoritmus szekcióval θαυRen 2 esetben szükséges. Az első Get Position viselkedés követi a alsó falat, és a második Get Position viselkedés követi a felhúzót. Az __Legyél és felírtál___ azok a következőkkel alakítom át:

Photo_2019-07-23__4_05_38_PM.sjpg

Az alábbi __Legyél és felírtál___ jelentése a következő szöveges szférák hívásával belső feltéve a hibatípust. Te és a hátsóek segítségére hivatkozhatsz;

Ha nincsenek kapcsolatok a Get Position viselkedéspálcással, és rechágázzuk a különböző felhasználása a visszatartás nagy vágogatásának. A legfontosabb a kidolgozások; az ütések hívásakor minden vonalon a nyúlkadban kezdetben a megvásárolt erő vissza fog terjeszkedni, hogy szín-jes híreket kapj magad emelkedő szóviszelvénye pivé; a faj átadása indít fechas.lt és úgy döntött, h elmozdultam le az alábbiakban.