💾 Archived View for gamifi.cat › blog › 2016-08-19_multijugador captured on 2023-09-28 at 16:19:30. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Projectes

Glossari

Contacte

Tutorial Snap! Pong Multijugador

Introducció

A l’última entrada hem programat un joc tipus Pong d’un sol jugador. Ara, el farem per dos jugadors: amb una segona pala, dos marcadors i una pilota amb velocitat variable. Per fer-lo, m’he inspirat del Pong que ha fet el Miguel Àngel a Programo Ergo Sum. Les diferències són que:

Jo no he posat un 3, 2, 1 que es mostra al començar el joc i quan un jugador puntua. Simplement, la pilota se situa al centre de l’escenari i s’atura per fer un nou “saque”.

He afegit un parell de missatges que canvien la direcció de la pilota un cop un jugador puntua: si fa el punt el jugador de la paleta 1-esquerra, la pilota apuntarà cap a ell per deixar avantatge al seu oponent.

Planificació

Primer de tot, haurem de verticalitzar el nostre joc i, si volem, canviar els colors com al Pong original. Al joc tipus Pong d’un jugador que hem programat a l’anterior entrada només tenia una pala i estava en horitzontal. Haurem de:

1. Dissenyar l’escenari i dues pales verticals (posar-ne una a cada cantó de la pantalla, dreta i esquerra).

2. Programar el nou moviment de les dues pales (farem ús sensors).

3. Programar la direcció i el moviment de la pilota, així com la seva interacció amb les pales.

4. Implementar dos marcadors (a la pràctica “Variables” en vam programar un però aquí en necessitem dos: un per a cada jugador/a).

5. Programar que, en funció de qui marqui el punt, la pilota apunti cap a un cantó o cap a l’altre de la pantalla.

Farem servir tres variables (Velocitat, Punt 1-esquerra i Punt 2-dreta) i tres missatges (Comença el joc, Pilota Pala1, Pilota Pala2).

Per reciclar un projecte i aprofitar-ne el codi o els objectes, recordem que en podem fer una còpia clicant a “Anomena i desa”. En aquest cas, però, crearem un “Nou” projecte.

Disseny

Recordem que només podem tenir un escenari però que pot tenir diversos vestits. Nosaltres posarem un vestit de fons negre, que hem creat amb l’editor gràfic:

1. Cliquem el pinzell que tenim a la pestanya vestits, sota la descripció de l’escenari.

2. Creem el nou fons negre amb l’eina del pot de pintura, el desem i el nombrem. Per editar o canviar el nom a un vestit, hem de clicar botó dret al vestit en qüestió i se’ns obrirà un diàleg: la primera opció permet editar-lo; la segona, canviar-li el nom. Nosaltres li hem posat “fons-negre”.

3. Un cop tinguem el fons, anem a dissenyar les pales, que hauran de ser blanques perquè sinó no es veuran amb el nou fons negre. Al projecte del Pong d’un sol jugador, només hi havia un objecte “Pala”, ara en tindrem dos: els podem anomenar “Pala1-esquerra” i “Pala2-dreta”. O jugador 1 i jugador 2 si voleu, però a mi em va millor així.

4. Com hem fet amb l’escenari, també podem dibuixar les pales a l’editor gràfic amb l’eina del rectangle ple. Dibuixem la primera i la nombrem correctament: li hem posat “Pala1-blanca”.

5. Ara, afegim un nou objecte: la segona pala, que podem anomenar “Pala2-dreta” i reciclem el vestit de l’altre pala per tal que les dues pales siguin iguals. Per fer-ho, arrosseguem el vestit “Pala1-blanca” de l’objecte “Pala1-esquerra” fins a l’objecte “Pala2-dreta” de l’àrea dels objectes i l’escenari. Si arrosseguem el vestit a l’objecte, es farà una còpia amb el mateix nom: li podem canviar el nom a “Pala2-blanca”.

6. Per acabar amb el nou disseny del projecte multijugador, crearem un altre objecte “Pilota” i dibuixarem una pilota blanca. El vestit es pot dir “Pilota-blanca”. Un truqui perquè la rodona surti ben rodona és clicar la tecla “Shift” (fletxetes sobre la tecla control) mentre la dibuixem amb el ratolí.

Pales

Ara que ja hem redissenyat el nostre projecte per fer-lo més semblant al Pong original, anem a la pestanya “Programes” i trastegem els blocs de codi per afegir la posició i el moviment les pales: una ha d’anar a l’esquerra i l’altra a la dreta de la pantalla, però ambdues només es mouen de dalt a baix o de baix a dalt, i reboten si toquen una vora per no sortir de l’escenari.

Al joc tipus Pong d’un jugador de l’entrada anterior només hi havia una pala i es movia amb el ratolí. Ara que tenim dos objectes, millor programar que cada jugador, jugui amb dues tecles diferents del teclat. I, de pas, veurem una nova manera de moure els objectes.

La “Pala1-esquerra” la podem fer moure amb les tecles Q i A i la “Pala2-dreta” la podem fer moure amb les fletxes de direcció (amunt i avall).

Si trobem que 30 és massa, podem anar variant els passos o píxels que l’objecte suma al seu eix i variar el moviment de la pala fins que el posem al nostre gust. De fet, al final, ho he posat a 10 i -10 ;)

Si et dóna problemes l’orientació de la pala, juga amb el bloc “apunta en direcció” per posar la paleta en vertical. Modifica els graus clicant la pestanyeta i provant les opcions que dóna (amunt, avall, dreta esquerra).

blocs-moviment-automatic-fletxes-sensor [IMG]

Nou moviment

Com ja hem comentat, les mateixes coses es poden fer de diverses maneres i al projecte del laberint, hem après a fer moure els objectes amb els blocs de control i moviment “Quan la tecla es premi” + “apunta en direcció” + “mou-te passos”. En aquest exemple, proposem moure els objectes per l’escenari amb blocs de control, moviment i sensors.

Enlloc de fer servir el barret de control de prémer les tecles com hem fet al laberint, farem servir el bloc blau clar i punxegut de la categoria sensors anomenat “tecla premuda?”:

Implementant un bucle “per sempre” i un parell de condicionals de control “Si… llavors”, com hem programat a la interacció de l’abella amb el laberint o la flor, podem programar el moviment de les pales.

A diferència del laberint, als “si” condicionals hi haurà d’haver els sensors de “tecla premuda?” enlloc dels d’objecte i color.

Les coordenades en blocs com “vés a x y” ens permeten situar l’objecte a l’escenari i en blocs com “suma y” o “suma x” ens permeten moure l’objecte en un dels seus eixos o a tots dos, si volem, en funció de les direccions que vulguem que prengui l’objecte en qüestió. Com vèiem a les coordenades, no hi ha cap bloc de restar x o y: perquè l’objecte vagi avall, s’ha de restar passos a l’eix sumant en negatiu; perquè l’objecte vagi amunt, s’ha de sumar passos a l’eix sumant en positiu.

Interacció

La pilota és qui fa la interacció amb les pales, la que dóna la puntuació i la que canvia la direcció de la pilota en funció de qui anota un punt al marcador.

El bloc del missatge “Comença el joc”, el veurem quan parlem de l’escenari. Ara, de moment, programarem la interacció de la pilota amb les pales. Per fer-ho:

Haurem de programar un bloc “per sempre” i, dins,

Un condicional “si… llavors”

Amb un bloc verd i punxegut d’operadors: “això o això”.

Dins del bloc d’operadors posem els blocs de sensors “tocant?”, un per a cada pala.

Dins del condicional, farem que la pilota reboti al tocar la paleta i apuntarà en direcció igual a la direcció que porti però en sentit contrari. Al bloc que ja coneixem de “apunta en direcció”,

Hi afegim un bloc verd d’operadors “això multiplicat per això”. (Aquest bloc encara no l’havíem trastejat, però sí havíem vist com canviar la direcció d’un objecte al seu sentit contrari al joc tipus Pong d’un jugador). En aquesta ocasió, dins del bloc d’operadors, fem multiplicar la direcció que porti per -1.

Si volem jugar amb els blocs de so, podem afegir un Pop que sona amb la interacció.

blocs-pong-pilota-multijugador [IMG]

Punts

El bloc de missatge “Comença el joc” el veurem quan parlem de l’escenari. Ara, de moment, ens centrem en la puntuació del joc.

A la pràctica de variables vam implementar un marcador de punts per al nostre ratpenat interactiu. En aquest projecte, però, necessitarem dos marcadors: un per a cada jugador/a. Per això, haurem de crear dues variables de punts que es poden dir: “Punts1-esquerra” i “Punts2-dreta”. O jugador 1 i jugador 2, cadascú que ho posi com vulgui.

A més, les pales estan en vertical (eix y) i haurem de calcular quan es donen els punts en funció de la posició de l’eix x de la pilota.

Si està tocant la vora de l’escenari i la seva posició x és més gran de 200, el punt serà per la personeta de la “Pala1-esquerra”.

Si està tocant la vora de l’escenari i la posició de la pilota és més petita de -200, el punt serà per la personeta de la “Pala2-dreta”.

blocs-pong-pilota-multijugador-punts [IMG]

Velocitat

Volem que la nostra pilota tingui una velocitat variable per tal que:

Tingui una velocitat constant durant el joc.

Que s’aturi uns segons i es posicioni tan al començar el joc com quan un/a jugador/a faci un punt. (com un “saque”).

Com hem vist al bloc anterior, fem rebotar la pilota si toca una vora i hem creat una variable “Velocitat” que hem posat dins el nombre de passos del bloc de moviment.

Això farà que la velocitat, durant el joc, sigui constant en valor de 5. L’assignació de la velocitat constant la determina l’escenari, que veurem a continuació.

Escenari

L’escenari és qui:

Posa la puntuació dels dos marcadors a zero al prémer la bandera verda.

Envia els missatges de posicionament inicial “Pilota Pala1” i d’inici de joc “Comença el joc”.

blocs-pong-escenari [IMG]

Com hem vist a la programació de la pilota, és ella l’única que rep aquest enviament de missatge i, en conseqüència, fa dues coses en paral·lel: una és el bloc de la interacció amb les pales i, l’altra, el bloc del moviment constant, detecció vora i puntuació, i enviaments de missatge per aturar i posicionar la pilota en funció de qui marca.

Els missatges “Pilota Pala 1” i “Pilota Pala 2” serveixen per aturar la pilota uns segons, i fer-la tornar a moure constantment fins que algú anoti un punt al marcador.

A la programació de la pilota, hem vist que després d’anotar un punt, s’envia un missatge. Al rebre el missatge, la pilota va al centre de l’escenari i assigna una direcció en funció de qui ha marcat. Però aquests missatges de “Pilota Pala1” i “Pilota Pala 2” també els rep l’escenari, i actua en conseqüència quan algú marca un punt:

Aturant la pilota posant la velocitat a 0
Esperant 2 segons
Tornant a posar la pilota en una velocitat constant de 5 fins que algú marqui de nou.

Com el que varia és la direcció (en funció de qui marca) però no el comportament d’aturar, esperar i moure a 5, per no repetir els mateixos blocs en dos missatges diferents, hem creat un nou bloc anomenat “Punt de partida”.

La posició i la direcció de la pilota, doncs, estan determinades a la programació de la pilota, i la velocitat de la pilota està determinada a l’escenari al nou bloc “Punt de partida”.

blocs-pong-escenari-punts-joc [IMG]

<a href="https://snap.berkeley.edu/project?user=gamificat&project=04-joc-01-pong-classic">Juga al pong multijugador!</a>

Continuació

Per la propera, explorarem com posar nivells als nostres jocs per incrementar-ne la dificultat.