Comunidad de diseño web y desarrollo en internet online

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 :P

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 :P

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.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate