Framework para Juegos en HTML5

Estudiando el tag canvas de HTML5 me dispuse a armar un framework para juegos que permita programar de la misma forma que en ActionScript 3.

¿Extrañas ActionScript 3? ¿El save y restore del canvas te marea? Aquí esta tu solución

Application:

Equivale al Stage de AS3. Extiende de View.
En su función constructora recibe:

• FPS - Velocidad del proyecto
  
• idCanvas - El id del tag canvas
  
• bgColor - Color de fondo
  
• isDebugMode - Para mostrar los FPS en pantalla
  

View:

Equivale a los sprites de AS3. Controla el renderizado a partir de una lista de "childs" utilizando los métodos addChild y removeChild. También detecta si alguna de sus "childs" colisiona con cierto punto (usado para el control del click).
Sus principales propiedades:

• x
  
• y
  
• alpha
  
• rotation
  
• scaleX
  
• scaleY
  
• visible
  
• parent
  
• childs
  

ViewImage:

Equivale al Bitmap de AS3. Si quieres aplicarle escala, rotación o transparencia tienes que agregarlo dentro de un View, y modificar ese View. Permite recortar la imagen en una posición determinada (función cut). En el método constructor se agrega la URL de la imágen, y cuando esta es cargada ejecuta la función onLoadComplete que puede ser reemplazada.
Con la función localToGlobal se obtiene el area de esta imágen modificada por todos los Views padres.
Sus principales propiedades son:

• url
  
• x
  
• y
  
• width
  
• height
  
• visible
  
• maskX
  
• maskY
  
• maskWidth
  
• maskHeight
  
• parent
  

ViewSprite

Sirve para generar animaciones a partir de una imágen.




En su función constructora se indica:

• URL - Dirección de la imágen
  
• cols - Cantidad de columnas
  
• rows - Cantidad de filas
  
• duration - Duración de la animación
  
• isLoop - Si la animación se va a repetir
  

ViewText

Equivale al TextField de AS3 (aunque es mucho más simple). En su función constructora se indica:

• text - Texto a mostrar
  
• font - Fuente a utilizar
  
• size - Tamaño de la fuente
  
• fillColor - Color del texto
  
• align - Tipo de alineamiento
  

Además cuenta con la función setStroke, para indicarle un borde al texto. localToGlobal también esta presente en esta clase.

Events

Esta es una simple clase para poder controlar los eventos de click a las Views. Lo único que le falta es controlar la propagación, o ver la forma de utilizar el addEventListener de javascript.

Ejemplo:
Este ejemplo es muy simple, lo hice en una hora a partir de otro proyecto que tenía como para mostrar algún resultado. Pero las capacidades del framework son mucho más grandes que las de este ejemplo.



ver ejemplo aquí

Dibuje todo yo

Descargar Framework y el Ejemplo

Al framework le faltan varias cosas todavía. Tiene un bug del click si se mueve el scroll de la web, y tampoco detecta bien el click de una View con rotación. Todavía no le agregué filtros. Habría que aumentar el performance. No tiene asignación de tamaño por width y height. No tiene una clase para controlar video. Y muchas cosas más...

Así que el que quiere ayudarme a mejorarlo será más que bienvenido

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.