Parece que después de años de reinado de Flash en los juegos de navegador, se empieza a imponer el HTML5 gracias a los dispositivos móviles que no soportan Flash.
Esto me ha despertado la curiosidad y he hecho un pequeño estudio del tema. Lo que más me ha llamado la atención ha sido la multitud de 'frameworks' o librerías en Javascript para facilitar el desarrollo de juegos en esta plataforma. Podéis ver unos cuantos aquí.
El caso es que después de estudiármelos todos el que más me ha llamado la atención es Crafty.
Y ¿por qué? Porque es gratuito, tiene bastante documentación y parece bastante sencillito.
Vamos a probarlo:
Instalación de CraftyJS
1.- Nos bajamos CraftyJS de su página. Click aquí.
2.- Creamos una carpeta en nuestro disco.
3.- Por convención, dentro de nuestra carpeta creamos otras tres.
\assets Donde colocaremos los archivos multimedia que utilicemos en nuestro desarrollo.
\lib Ahí irá la librería de Crafty que nos acabamos de bajar.
\scr Aquí irán nuestros fuentes.
4.- Copiamos la librería de Crafty en la carpeta \lib.
Y ya está!
Nuestro primer programa
1.- Creamos un fichero que se llame game.js en nuestra carpeta de fuentes. ¿Recordamos cuál es? Sí, muy bien \scr.
2.- Copiamos el siguiente código dentro de game.js
Game = {
// Inicializa y arranca nuestro juego
start: function() {
// Inicia crafty y establece un color de fondo para que podamos ver que funciona
Crafty.init(480, 320);
Crafty.background('green');
}
}
Analicemos esto:
Ésto es una clase que se llama game, en la que definimos una propiedad llamada start que inicializamos mediante una función.
Esta función, inicializa Crafty dando el tamaño del canvas o lienzo sobre el que ejecutaremos nuestro programa.
3.- Pero todo corre en una página web, con lo que tendremos que tener un html que soporte esto. Crearemos un archivo index.html en la carpeta raíz que hemos creado y le copiaremos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<script src="lib/crafty.js"></script>
<script src="src/game.js"></script>
<script>
window.addEventListener('load', Game.start);
</script>
</head>
<body>
</body>
</html>
Aquí lo que hacemos es cargar nuestras librerías, tanto la de crafty como la de nuestro código y cargamos nuestra clase Game llamando a su propiedad start.
Hemos de terminar viendo esta maravilla:
No hay comentarios:
Publicar un comentario