viernes, 19 de diciembre de 2014

OpenFL y Sprites (Arkanoid Parte 1)



Haxeui nos permitió de forma sencilla incorporar controles para generar una aplicación de forma rápida y sencilla. Veamos cómo se comporta OpenFL con un ejemplo en puro código nativo:





Intentaremos reproducir una versión simple del juego Arkanoid con este ejemplo.

Creamos un nuevo proyecto con FlashDevelop (OpenFL).

Nuevamente, comenzamos editando el archivo application.xml para modificar el tamaño de la pantalla y el color de fondo.



El juego consta de varios objetos pero comencemos por lo básico: una plataforma, una bolita y ladrillos:

Cualquier elemento que es representado visualmente en la pantalla se denomina Sprite. Vamos a crear diferentes clases para cada uno de ellos.

Comenzamos con la plataforma: en FD, nos posicionamos en el directorio SRC con el puntero del mouse, botón derecho..Add..New Class. 


 Ello nos traerá un cuadro de diálogo con algunas opciones. Por el momento dejaremos todo como está salvo por el nombre de la nueva clase, a la que llamaremos Plataforma.





Dentro del archivo, tipeamos el siguiente código comenzando con la declaración de la librería que vamos a usar, en este caso Sprite.




Luego creamos la clase:

La instrucción super es imperativa en este caso, necesitamos invocar al contructor del objeto en cuestión.
Luego tenemos un par de funciones de dibujo:


La primera es el color de relleno de nuestra plataforma, en mi caso es amarillo. Si no les gusta, pueden elegir el que quieran. Para ver una lista pueden visitar http://www.colorpicker.com/

Luego tenemos la forma y el tamaño. La instrucción específicamente dibuja rectángulos con bordes redondeados (Si no les gustan los bordes pueden utilizar drawRect que es igual pero no permite el redondeo de vértices. por último, terminamos de dibujar.

Guardamos y volvemos a la clase principal (Main):

Allí, comenzamos por declarar una nueva instancia del objeto con los atributos de la clase Plataforma:

private var Plataforma1:Plataforma;

Luego de esto, lo creamos, posicionamos en la pantalla y lo mostramos:


Si ejecutamos el código escrito hasta ahora, nos encontraríamos con algo similar a esto:






Nos es mucho por el momento, pero es importante que se entiendan los conceptos. En la próxima agregamos los demás objetos (que es muy similar a lo que hicimos aquí) y les damos algo de moviemiento.

Enlace a los fuentes en GitHub