PAC 2. Física en Javascript. El meu primer videojoc!

De petit sempre havia volgut programar un videojoc. I en aquesta assignatura i gràcies al grau em vaig poder treure l’espineta. No és que ara em vulgui dedicar professionalment als videojocs, però he de dir que va ser un procés molt dur encara que alhora també molt gratificant.

Vinga! Jugueu una partideta fent clic a l’enllaç de sota:

http://graumultimedia.com/treballs/mfm/pra2/

Per realitzar aquesta pràctica, i amb permís del consultor, he optat perfer servir Phaser, una plataforma de desenvolupament de jocs multi-plataforma tant per escriptori com dispositius mòbils. Dins les possibilitats que ofereix aquesta plataforma, he decidit fer servir el motor de física Box2D ja que es troba molt ben documentat a la xarxa i permet algunes possibilitats que encaixen perfectament amb el programa que volia desenvolupar.

Conceptes de Física que es fan servir al joc.
Des del punt de vista de la aplicació de coneixements provinents del camp de la física es poden destacar els següents aspectes:
gravetat: la gravetat és la força d’atracció mútua que experimenten dos objectes amb massa; en el cas del joc, la gravetat del món s’exerceix sobre l’eix ‘y’ i té un valor determinat que fa caure la bolla constantment. He manipulat aquest paràmetre creant una gravetat amb valor negatiu durant 4 segons després d’encertar la bolla en el vòrtex de la part superior dreta.
fricció: la fricció és la resistència que s’oposa al lliscament d’un cos sobre l’altre i he implementat un valor baix, que permet que la bolla circuli amb una velocitat alta, però controlada.
col·lisió: una col·lisió és un contacte directe entre dos o més cossos; en la llibreria Box2D es pot definir el coeficient de restitució, és a dir, el grau de conservació de l’energa cinètica en un xoc entre partícules. Els coeficients de restitució prenen normalment valors entre 0 (inelàstic) i 1 (elàstic), però també podem fer servir valors superior a 1 que impliquen que un cos sortirà ‘rebotat’ amb més força de la que ha xocat. Aquest efecte pot ser útil per imitar l’efecte dels mecanismes electromagnètics dels pinballs coneguts com rebotadors actius o ‘active bumpers’.
torque: també conegut com parell de forces (moment) és el terme que es fa servir quan parlem de forces que actuen de manera rotatòria. En general és el producte vectorial entre una força i una distància. Definim el torque del motor que mou les paletes, o ‘flippers’, i augmentant el seu valor l’empenta de les paletes quan desplacen la bolla.
velocitat angular: aquest terme apareix en la creació del motor de les paletes, com la velocitat en radians/segon desitjada. També és una de les propietats de la bolla, que ens defineix com d’aviat està girant.
esmorteïment (damping) lineal i angular: ocasionat per l’arrosegament o fricció del fluid. Si augmentem molt el seu valor, sembla que la bolla estigui dins l’aigua i li cost molt més efectuar els moviments. He aplicat un esmorteïment anglar per reduïr la excessiva rotació de la bolla amb la finalitat d’aconseguir una aparença més natural.

Punts a destacar sobre el codi presentat.
Des del punt de vista de la programació en Javascript cal destacar els següents punts:
estats del joc: Per facilitar una programació més modular, possibilitant la ampliació del joc amb més taulers, etc… i també per procurar una millor legilibitat del codi, he fet servir les possiblitats que ofereix Phaser per dissenyar els diferents estats (inicialització, càrrega, joc, crèdits, etc…)
var bootState = {
create: function() {
game.state.start(‘load’);
}
};
arrays: Per simplificar la presentació de les dades, a vegades he optat per fer servir arrays amb les posicions (x,y) dels vértexs d’alguns objectes que no són sprites (contorn de l’àrea de joc, detectors de pas de la bolla, guies, passadissos, gomes rebotadores…) i també en altres casos l’array defineix parelles de punts que llegim per situar objectes com els rebotadors circulars o els àliens.
sprites: He fet servir sprites tant per objectes simples que interactuen amb la bolla (aliens, rebotadors, etc…) com per elements que no entren en la física del joc i només tenen un efecte decoratiu (canviar de color en determinats moments, amagar la bolla…). Per l’animació del camp de força vaig crear una animació amb el programari Flash que vaig exportar com a un full d’sprites amb el seu fitxer d’imatge i el corresponent codi XML. També faig servir grups d’sprites pels aliens de diferents colors amb la finalitat de gestionar més fàcilment la seva aparició i desaparició en funció dels distints events dins el joc.
col·lisions: Per definir el codi a executar en funció de les col·lisions de la bolla primer es defineix un callback amb una funció que es fa servir com argument d’una altra. L’argument és la funció a executar quan es produeixi la col·lisió entre el cos A i el cos B de la següent manera:
cosA.body.setBodyContactCallback(cosB,
funcióAExecutar, this);

function funcióAExecutar(body1, body2, fixture1,
fixture2, begin) {
if (begin) {
// s’executa en iniciar-se la col·lisió
}
}
patró de disseny del codi fora de update(): Si no es preveu de manera adeqüada, una col·lisió o un event poden donar lloc a falsos accionaments (‘retriggers’) de determinades accions. La manera de evitar-ho és no executar codi compromés fora del mètode update() (el que s’executa cada ‘frame’). En el seu lloc, es passen els valors necessaris i els flags oportuns dins variables globals que comprovarem cada ‘frame’, executant aleshores el codi rellevant.

Leave a Reply