viernes, 13 de febrero de 2015

Nos Atacan!!!


En otras entradas hemos visto cómo dibujar objetos, hoy vamos a ver como hacerlos un poco más complejos. 
Openfl nos permite importar imágenes para “empapelar” nuestros objetos. Existen varios métodos para llevar a cabo esta tarea. Con este modesto ejemplo de “Space Invaders” que comenzamos la entrada anterior veremos algunos métodos muy sencillos para utilizarlas en nuestros proyectos.







En primer lugar, necesitamos conocer algo sobre las imágenes que vamos a utilizar. Como primer medida, deberíamos ser capaces de saber su tamaño en píxeles. No solamente para ver lo que ocupa en la pantalla (ya que podríamos achicarla en tiempo de ejecución), sino también por su “peso” en la memoria del sistema.

Cuanto mayor sea su tamaño, mayor será la cantidad de bytes que ocupará en memoria y, aunque con el paso del tiempo, las computadoras, celulares, tablets, etc..se vuelven más potentes día a día, el rendimiento de nuestro juego se va a ver afectado (sobre todo en juegos complejos donde se muestran muchísimas imágenes por segundo).

No pretendo desvirtuar el tema con un curso sobre cómo usar un editor de imágenes, pero veamos rápidamente un ejemplo sencillo:

Sabemos (porque nosotros lo hemos decidido así) que el área que va a ocupar nuestro juego tiene una superficie de 400x480 píxels. No tendría mucho sentido que cada objeto (llamémosle Alien para el caso) ocupe una superficie de 100x100.

Entonces, para nuestro alien un tamaño de 32x32 sería suficiente.

Obviamente necesitamos un editor de imágenes. De los más populares (y gratis) que conozco están el histórico Gimp para Linux (y windows?) y el Paint.net para Windows.

Abrimos nuestro programa de edición y creamos la imagen que va a utilizar de tapiz nuestro alien.


Como primer paso, creamos una imagen del tamaño requerido (32x32) y hacemos que la primer capa (layer) sea transparente. Agregamos una nueva capa y comenzamos a dibujar.




El producto terminado se ve de la siguiente forma:




Para el caso de nuestra versión de Space Invaders, voy a utilizar 2 imágenes del mismo tamaño, pero que varíen un poco (ya verán más adelante de lo que hablo), así que vuelvo a generar otra imagen con algunos cambios..que va a quedar así:



Bien. Con nuestras dos imágenes de “Aliens”, volvemos ahora a FD y escribimos algo de código:
 
En primer lugar, agregamos nuestros marcianos a la carpeta assets/img. Pueden copiarse directamente a la carpeta y FlashDevelop las va a encontrar o agregarlas mediante el uso del botón izquierdo del mouse en el explorador de proyecto..



Luego creamos una nueva variable de nombre mascara en la clase principal (Main) que va a estar encargada de pasarle un valor a la nueva clase que crearemos a continuación.



Creamos una nueva Clase a la que yo llamo Npc_Alien

y tipeamos el siguiente código en ella:



Puede observarse como la función va a esperar que le llegue el valor “mascara” desde otro lado (línea 15)
Luego con cualquier estructura condicional (podría aquí usarse switch..case también) le asignamos la imagen que el constructor va a utilizar para el objeto.

En la pantalla del juego, nuestro intercambio de imágenes para la creación de los “Aliens” se va a ver reflejado así (una vez que hayamos escrito el código)




El ejemplo muestra cómo podríamos, en una situación un poco más compleja, dejar que el usuario seleccione que tipo de Alien..nave..héroe o villano desea usar antes de asignarlo al objeto, también es útil en situaciones donde los juegos van incrementando su complejidad a medida que el jugador pasa de niveles, etc..

En la próxima nos defendemos de su invasión. Pueden obtener el código (quizás un poco más avanzado) desde GiT