Com fer un joc Pong - hyperPong

Nota: Es pot trobar un fitxer de projecte complet per a aquest tutorial al final d'aquest article.

Introducció

En aquest tutorial, crearem un joc similar al Pong des de zero. Tractarem algunes funcions i comportaments més avançats a hyperPad, així que aquest tutorial suposa coneixements bàsics amb l'editor hyperPad. Si creus que necessites familiaritzar-te més amb la creació d'un joc des de zero, pots consultar el Guia Completa - Creant un Joc de Plataforma primer.

Pong és un joc simple per a dos jugadors que consisteix només en dues pales i una pilota, i es pot considerar una versió digital senzilla del tennis de taula. Cada jugador controla una pala, ambdues situades als costats oposats de la taula. Les pales només poden moure's endavant i enrere, colpejant la pilota cap al jugador contrari. Si un jugador no toca la pilota, l'altre jugador guanya un punt. El primer jugador que aconsegueixi 11 punts guanya!

Per al nostre joc de Pong, inclourem l'opció de jugar en mode 1 Jugador (Jugador contra IA), mode 2 Jugadors (Jugador contra Jugador) o mode 0 Jugadors "Veure" (IA contra IA).

Part 1: Configuració del Projecte i Menú Principal

Comencem creant un nou projecte.

Obre el menú de Projectes a hyperPad i toca Nou Projecte. Dona un nom al teu projecte i toca Següent. L'orientació es pot deixar per defecte en mode apaisat. Per a aquest tutorial, el Suport de Dispositiu està configurat a iPad 4:3. A la següent pantalla, selecciona "Vista de Pàjaro" i deixa la resta com a per defecte.

Ara que tenim un nou projecte llest per començar, anem ràpidament a configurar un menú principal abans de saltar directament al joc en si. La primera cosa que farem és canviar el nom de la nostra escena a "Menú Principal".

Toca el botó del Menú Projecte/Escena i toca el botó d'engranatge al costat de la nostra "Escena 1".

Toca l'opció Configuració i canvia el nom de la nostra escena a "Menú Principal". Toca Desa per desar i tancar la finestra de configuració.

A continuació, per mantenir-nos fidels als primers jocs retro com el Pong d'arcade, podem fer que el color de fons sigui negre.

Toca el botó de Configuració de l'Escena i selecciona Fons. Toca el botó "Canviar Color" i estableix-lo a negre (#000000FF).

Ara afegim una etiqueta de títol al nostre menú principal. Toca el botó d'Objectes Especials i selecciona Etiqueta.

Introdueix el nom del teu joc al camp de text (s'ha introduït "hyperPong" per a aquest tutorial), configura la mida de la font a una mida gran però no massa gran. Per a un títol "hyperPong", 72 punts és una mida adequada. Canvia el color a blanc (#FFFFFFFF) i col·loca'l al centre del menú a prop de la part superior.

Ara tenim una escena de menú principal per omplir amb botons de tots els nostres modes de joc. Deixarem el menú tal com està per ara, i ho acabarem després de tenir un joc jugable.

Part 2: Configurant l'Escena del Joc i la Pala

Toca el botó del menú Projecte i toca "Afegir Escena". Nomena-la "Joc" i toca Crear. Ara a l'escena de Joc, hauries de veure un llenç buit. Com hem fet amb l'escena del Menú Principal, toca de nou el botó de Configuració de l'Escena i canvia el fons a negre (#000000FF).

Anem a treballar creant les nostres pales de jugador. Crea un objecte buit anant al botó d'Objectes Especials i seleccionant "Objecte Buit". Canvia el seu color a blanc (#FFFFFFFF) i assegura't que el control lliscant d'opacitat estigui totalment activat.

Canvia el nom de l'objecte a "Jugador-1" i estableix el seu mode de física a Física, i deixa Passable activat.

La raó per la qual mantindrem Passable activat és perquè tinguem un major control sobre com la pilota interactuarà amb la pala quan la toqui. Voldrem poder controlar manualment la velocitat i la direcció cap on la pilota es mou.

Als propietats de l'objecte Jugador-1, ves a la pestanya de Transformació i configura l'escala X al 25% i mou-lo a l'esquerra del camp de joc.

A continuació, afegirem alguns controls a la nostra pala per tal que es pugui moure. Amb la pala seleccionada, ves al seu editor de comportament tornant a la pestanya de Física.

Col·loca un comportament d'Analògic Joystick, que es troba a la secció d'Interacció (si no el trobes, potser hauràs de tocar la pestanya Avançada). Això crearà automàticament un joystick per tu a l'editor d'escenes.

Pers més, no volem permetre que la pala es mogui només per moviment del joystick. També volem que una IA pugui realitzar moviments, també.

Sota la secció Personalitzada, col·loca un Contenidor de Caixa. Això emmagatzemarà en quina direcció es mourà la pala. D'aquesta manera, tant un jugador controlant un joystick com una IA realitzant càlculs poden moure's canviant aquest valor. El seu valor per defecte hauria de ser 0. També és una bona idea donar-li un bon nom perquè sigui més fàcil treballar-hi, "Direcció de Moviment" sembla adequat.

Amb el Contenidor de Caixa seleccionat, prem el botó "Canviar Camp d'Entrada" i toca Sí. Això crearà un comportament de Set Camp d'Entrada per al contenidor de caixa perquè puguem canviar-ne el valor quan ho necessitem. Connecta el Set Camp d'Entrada a l'Analògic Joystick.

Amb el comportament de Set Camp d'Entrada seleccionat, arrossega el valor de sortida de l'Analògic Joystick al camp de Nou Valor. Selecciona la propietat "y". Ara, el contenidor de caixa Direcció de Moviment rastrejarà fins a quin punt el jugador mou el joystick amunt o avall (eix y).

Ara que estem rastrejant fins a quin punt es mou el joystick cap amunt o avall, també hem de reiniciar-lo a zero si el jugador deixa de tocar el joystick. Altrament, la pala continuarà movent-se en la direcció que recorda darrerament.

Sota la secció d'Interacció, afegeix un comportament d'Aturada de Tocant, i toca'l per obrir les seves propietats. De manera predeterminada, rastreja quan el jugador deixa de tocar la pala, però volem rastrejar quan el jugador deixa de tocar el joystick.

Toca la propietat de l'objecte per canviar-la i selecciona el joystick. Potser hauràs de seleccionar la capa d'UI Global per poder triar-la. Quan estigui seleccionat, toca el botó de marca. El comportament ara hauria de mostrar el joystick com l'objecte rastrejat.

Toca el Set Camp d'Entrada que vam fer anteriorment i duplica'l. Amb el duplicat de Set Camp d'Entrada, connecta'l al comportament d'Aturada de Tocant i estableix la seva propietat de Nou Valor a 0.

Ara la nostra variable del contenidor Direcció de Moviment rastrejarà els moviments cap amunt i avall del joystick i es reiniciarà a 0 quan es deixi anar el joystick. Això ens proporciona una excel·lent manera de dir a la nostra pala com moure's, així que continuem i donem a la nostra pala un moviment.

Sota la secció Personalitzada, col·loca un comportament de Temporitzador. A les seves propietats, estableix el període a 0. Aquest temporitzador s'executarà tan sovint com pugui (una vegada per fotograma), cosa que ens brinda l'oportunitat de actualizar el moviment de la pala amb molta freqüència.

Abans de configurar la velocitat de la pala, volem assegurar-nos que el valor del contenidor Direcció de Moviment estigui limitat dins d'un rang raonable, per si de cas passa massa alt o massa baix. Altrament, la nostra pala es mourà massa ràpidament en alguns casos.

Sota la secció Lògica, col·loca un comportament de Mínim i un de Màxim. Connecta el comportament de Mínim al temporitzador i el comportament de Màxim al Mínim. Hauries de tenir alguna cosa que llueixi així:

En les propietats del comportament de Mínim, estableix el primer valor al valor de sortida del comportament Direcció de Moviment, i estableix el segon valor a 1.

El comportament de Mínim produirà el nombre més petit que li donis. Així que, si el valor de Direcció de Moviment és més alt que 1, produirà 1. Altrament, simplement produirà el valor de Direcció de Moviment.

En les propietats del comportament de Màxim, estableix el primer valor al resultat del Mínim, i estableix el segon valor a -1.

El comportament de Màxim produirà el nombre més gran que li donis. Així que, si el valor de Direcció de Moviment és més baix que -1, produirà -1. Altrament, produirà el valor de Mínim (que és 1 o Direcció de Moviment, el que sigui més baix).

El que tot això significa, és que el valor resultant de Màxim és efectivament el valor de Direcció de Moviment limitat entre -1 i +1. Això ens dóna el control total sobre la velocitat a la que la pala es pot moure!

Un rang de -1 a +1 és fàcil de treballar, però serà massa lent si utilitzem això directament com a velocitat de la pala.

Novament sota la secció Lògica, col·loca un comportament de Multiplicar Valors i connecta'l al comportament de Màxim. Per al primer valor, estableix-ho al resultat de la Màxim. Per al segon valor, podem establir-lo a un bon valor "velocitat màxima".

Per ara, estableix-ho a 20. Si més endavant creus que la pala es mou massa lentament o massa ràpidament, només has de canviar aquest número a un més alt o més baix.

El comportament de Múltiples Valors ara ens proporciona un bon rang de velocitat per treballar, des de tan baix com -20 fins a tan alt com +20.

Ara és un bon moment per establir la velocitat de la pala. Sota la secció Física, afegeix un comportament de Configurar Velocitat i connecta'l al comportament de Multiplicar Valors. Estableix el camp "x" a 0 i el camp "y" al resultat de sortida del comportament de Multiplicar Valors.

Prova-ho! Quan juguis el joc, la pala haurà de moure's a mesura que moguis el joystick cap amunt i cap avall.

Com probablement has notat durant les proves, res està aturant la pala de sortir de la pantalla. A la següent part, afegirem alguns límits per mantenir tot a la vista.

Part 3: Límits del Joc

Abans de continuar, fem servir una mica de previsió i considerem un bon disseny de joc. La pala del jugador no estarà al centre de la pantalla, sinó més a prop dels costats a mesura que anem muntant el joc. Això es convertirà en un problema, ja que tenim elements d'UI (és a dir, joysticks) que ssuperposaran amb els nostres elements de joc (és a dir, pales).

En lloc d'utilitzar tota la pantalla com a àrea jugable, hauríem d'inserir els límits perquè la nostra pala no vagi sota el joystick on estem amb els dits, on no podem veure-ho fàcilment. D'aquesta manera no perdem de vista la nostra pala a prop de la part inferior de l'àrea jugable. També podem utilitzar aquesta inserció com un límit dur per mantenir els nostres objectes dins del camp jugable.

Toca el botó d'Objectes Especials i crea un nou Objecte Buit. Toca el nou objecte buit per obrir les seves propietats.

Mantenint el seu mode físic establert a Mur i desactiva Passable. Estableix el seu color perquè el puguem veure visualment, un gris fosc opac (#1F1F1FFF) s'adapta bé. Estableix la fricció al 0% i el rebote al 100%.

Ara a la pestanya de Transformació del mur, estableix l'escala Y al 200%, i desplaça'l a la part superior de l'àrea de pantalla. Ara estira'l perquè s'ajusti a l'amplada total de l'àrea de pantalla. També pots activar el mode de captura de graella per ajudar-te a col·locar-ho amb precisió.

Ara duplica el mur i mou la còpia a la part inferior.

Duplica de nou i estableix la seva escala X al 200% al seu torn. Llavors estira l'altura per ajustar-se a la pantalla i col·loca'l al costat esquerre de la pantalla.

I de nou, duplica el mur vertical i mou'l al costat dret de la pantalla. Ara hauríes de tenir un camp de joc completament tancat:

Quan juguis al joc ara, probablement notaràs immediatament que pots moure't a través dels murs com si no estiguessin allà. Això es deu a dues raons; hem establert la pala com a "Passable" i estem forçant la velocitat de la pala cada fotograma. Això està bé, només necessitem implementar una manera de fer que la pala no es mogui a la paret.

El que farem per implementar aquest comportament és verificar la posició del jugador davant de la posició del mur. Si això és cert, llavors tornarem a moure el jugador dins del camp jugable.

Per fer-ho una mica més fàcil d'implementar, toca el mur superior i canvia el punt d'ancoratge Y al 0%. Això ancorarà la posició del mur a la part inferior de si mateix. Potser necessitaràs desbloquejar els camps d'ancoratge tocant la icona de bloqueig.

Similarment amb el mur inferior, canvia el punte d'ancoratge Y del mur inferior al 100% aquesta vegada. Això ancorarà la posició del mur inferior a la part superior de si mateix.

Ara estem preparats per implementar els nostres comportaments de comprovació de límits. Toca la pala i obre el seu editor de comportament.

Comença col·locant un comportament de Obtener Caixa Limita de la secció Lògica. Això hauria d'estar configurat per utilitzar la pala de manera predeterminada. Aquest comportament ens donarà les coordenades inferiors/esquerres i la mida de la pala.

A continuació, baixa una Afegir Valors de la secció Lògica i connecta-la al comportament Obtener Caixa Limita. A les propietats d'Afegir Valors, estableix el primer valor al resultat de Obtener Caixa Limita "y" i el segon valor al resultat "altura".

El resultat d'aquesta suma serà la posició de la part superior de la nostra pala. Per llegibilitat, pots canviar el nom del comportament a alguna cosa útil, com ara "Afegir Valors - Part Superior de la Pala", perquè puguem veure clarament el que aconsegueix.