Multimedia y arrays en processing.js
Siguiendo con las entregas sobre la utilización de la librería processing.js, vamos a abordar el uso de imágenes en nuestras aplicaciones y el concepto de arrays, que resultará fundamental para la implementación de estructuras de datos variables. El objetivo de este programa va a ser utilizar el movimiento con ratón para dirigir una nave que pueda efectuar disparos en la vertical.
En programación se denomina array o matriz a una zona de almacenamiento continuo que contiene una serie de elementos del mismo tipo. En principio, se puede considerar que todas las matrices son de una dimensión (vector), la dimensión principal, pero los elementos de dicha fila pueden ser a su vez matrices, lo que nos permite hablar de la existencia de matrices multidimensionales. Estas estructuras de datos son adecuadas para situaciones en las que el acceso a los datos se realice de forma aleatoria y además suelen usarse cuando la longitud del array no sea conocida a priori.
En nuestro caso, vamos a controlar los disparos en un array, de forma que podremos realizar varios disparos sin necesidad de disponer de variables estáticas controlando las posiciones de cada bala. Si no usaramos un array, deberíamos definir dos variables para controlar la posición de cada disparo: disparo1_x y disparo1_y, disparo2_x y disparo2_y, disparo3_x y disparo3_y. Al utilizar un array definimos una estructura de tamaño variable que podremos ajustar sin necesidad de cambios en la implementación y que nos ofrece flexibilidad para ampliar y generalizar las estructuras.
Definimos un array de dos dimensiones que almacenará valores enteros. La primera dimensión corresponderá a la coordenada x y la segunda a la coordenada y. Cada vez que pulsemos el ratón se genera un nuevo disparo, y en principio no existe límite a los generados. Por conveniencia, introducimos una condición que limite a 3 los disparos en pantalla pero se puede ajustar según nos interese a un valor o eliminar la condición directamente para permitir disparos sin limitación. Los disparos que suban por encima de la posición Y=40 mserán eliminados de pantalla y del array.
Mediante la instrucción disparos.length podemos comprobar en cada momento el número de elementos que componen nuestro array. Para agregar un nuevo elemento usaremos append y para eliminar un elemento vamos a usar una combinación de concat y subset para quedarnos con el resultado adecuado.
int[][] disparos = { {} };
void mouseClicked() { genera_disparo();}
void genera_disparo(){
if (disparos.length <= 3 ){
disparos = append(disparos, {mouseX+15,tamy-40});
}
}
void pintar_disparos(){
for (int i = 0; i < disparos.length; i = i+1) {
disparos[i][1]-=5;
noStroke();
fill(255,0,0);
ellipse(disparos[i][0],disparos[i][1],5,5);
if (disparos[i][1] < 40 ) {
disparos = concat( subset(disparos,0,i) , subset(disparos,i+1,disparos.length-i) );
}
}
}
Para utilizar sonidos en nuestras aplicaciones, vamos a integrar una nueva librería llamada Howler.js que integra una serie de propiedades de sonido que podemos explotar de forma muy sencilla. Para reproducir un sonido simplemente invocamos una nueva variable de tipo Howl y le asociamos el fichero de audio deseado:
var sound = new Howl({urls: ['blip.wav']}).play();
Para utilizar imágenes, debemos realizar dos pasos, primeramente precargar el objeto al inicio del programa y en el momento deseado generar una variable PImage que vincula el fichero de imagen y ubicarlo en pantalla en la posición deseada:
/* @pjs preload="arkanoidship.gif"; */
void pintar_nave(){
PImage im = loadImage("arkanoidship.gif");
image(im, x, y);
}
En conclusión, hemos realizado una mecánica sencilla con elementos multimedia, usando imágenes e integrando sonidos mediante Howler, totalmente aprovechable en la realización de juegos en javascript. Además, hemos introducido el uso de arrays como estructura variable y versátil en la implementación de ciertas dinámicas que comportan un número de elementos variables. Como es habitual, en los enlaces dispones de la implementación y del código fuente necesario para replicar los ejemplos utilizados.
