[Tutorial ImpactJS] Primeros pasos con la librería.

Ahora que tenemos nuestra motor ImpactJS funcionando sin problemas vamos a empezar a modificar cosas básicas.

Antes de nada deberías de familiarizarte con la estructura de directorios del motor. Al entrar en directorio donde lo hemos instalado vemos tres archivos y otros directorios en su interior, voy nombrarlos uno a uno:

  • index.html: Este archivo contiene el elemento canvas y incluye la librería impact y nuestro juego, es a través del el por donde jugaremos a nuestra obra.
  • LICENSE.TXT: No hace explicar, dentro contiene la licencia legal del motor.
  • weltmeister.html: Este archivo hace las veces de editor de nivel a través del navegador.
  • tools/: Este directorio contiene los scripts necesarios para llevar a cabo la empaquetación del juego antes de ser distribuido.
  • media/: En este directorio es donde debemos ubicar todas nuestros sprites, imágenes, música, etcétera. No tiene subdirectorios definidos por lo que nosotros podemos organizar nuestros archivos como queramos.
  • lib/: Este directorio contiene a su vez tres subdirectorios, que son:

  • weltmeister/: Contiene todos los archivos necesarios para que el editor de niveles funcione.

  • impact/: Es el corazón de la librería, en este directorio se encuentran todos los scripts que conforman el motor. Por lo general no necesitaremos modificar nada en este directorio.
  • game/: Es el directorio en el que trabajaremos, contiene el archivo main.js que se podría decir que es el script principal de nuestro juego, y dos directorios más, entities donde almacenamos las entidades que creamos y levels para almacenar los niveles que diseñamos.

Una vez entendemos como se distribuye el motor empezamos con nuestro juego, por lo general trabajaremos siempre sobre el directorio* game/* y los archivos index.html y weltmeister.html.

Lo primero que vamos a hacer es modificar el tamaño de nuestro tapiz, para esto debemos de dirigirnos al archivo lib/game/main.js y buscar al final del mismo la siguiente linea:

// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2 
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

La instrucción ig.main() es la encargada de iniciar el juego, se le pasa la id del elemento canvas (#canvas), la clase principal del juego, en este caso MyGame, el numero de frames por segundo deseados que suele ser 60, aunque las ultimas versiones de Impact usa requestAnimationFrame por lo que es posible que no tome en cuenta este parámetro, el ancho y el alto del tapiz, y el valor de escalado que es el factor por el que se multiplica el tamaño del tapiz. Nosotros vamos a modificar solamente el ancho, el alto y la escala dejándolo así:

// Ancho: 520, Alto: 600, Escala: 1 ig.main( '#canvas', MyGame, 60, 520, 600, 1 );

Si nos dirigimos ahora a http://localhost/spaceinvaders/index.html (recuerda que spaceinvaders es el nombre que yo le di a mi carpeta) veremos que el tapiz ha cambiado de tamaño y que la frase “It Works!” se ve más pequeña, esto es debido a que antes estaba aumentada por dos, y ahora el factor de escalado es 1.

El siguiente paso es definir que teclas vamos a permitir usar para interactuar con nuestro juego, esto lo haremos en el método init de la clase MyGame contenida en lib/game/main.js. El método init hace las veces de constructor de la clase, ejecutándose solamente al inicio de esta.

Para declarar que tecla queremos que se puedan usar utilizaremos la instrucción ig.input.bind( claveDeTecla , ‘nombrePersonalizado’), en este caso vamos a usar la barra espaciadora para disparar, las flechas izquierda y derecha para mover al personaje, y la tecla enter para reiniciar el juego cuando el personaje muera. El método init quedaría así:

init: function() { 
    //Tecla de disparo 
    ig.input.bind( ig.KEY.SPACE , 'fuego' ); 
    //Teclas de movimiento 
    ig.input.bind( ig.KEY.LEFT_ARROW , 'izquierda' );
    ig.input.bind( ig.KEY.RIGHT_ARROW , 'derecha' ); 
    //Tecla de reinicio ig.input.bind( ig.KEY.ENTER , 'reinicio' ); 
},

Como de momento no tenemos ninguna entidad creada vamos a probar que las teclas funcionan correctamente mediante firebug, para esto vamos a añadir unas lineas al método update de la clase MyGame. Este método es el encargado de estar actualizando continuamente todo lo que sucede en el juego.

Para controlar el estado de una tecla la clase ig.input provee de tres métodos muy simples:

  • ig.input.pressed: Se dispara solo en el momento en el que la tecla ha sido pulsada.
  • ig.input.state: Devuelve true siempre que la tecla siga pulsada, a diferencia de pressed que solo salta una vez.
  • ig.input.released: Se dispara cuando la tecla deja de ser presionada.

Para probar nuestras teclas vamos a dejar el método update así:

update: function() { 
    // Update all entities and backgroundMaps 
    this.parent(); 

    //Si se pulsan teclas de dirección 
    if( ig.input.state( 'izquierda' ) || ig.input.state( 'derecha' ) ){ 
        console.log('Pulsando teclas de dirección.'); 
    } 

    //Al pulsar la tecla de disparo 
    if( ig.input.pressed( 'fuego' ) ){ 
        console.log('Un Disparo.'); 
    } 

    //Al soltar la tecla de reinicio 
    if( ig.input.released( 'reinicio' ) ){
        console.log('Reiniciando.'); 
    } 
},

Ahora podemos dirigirnos de nuevo a nuestro juego en el navegador y abrir firebug o la consola javascript, al pulsar las teclas de dirección veras como se repite continuamente el mensaje de “Pulsando teclas de dirección”, al presionar la barra espaciadora verás por cada vez que es presionada el mensaje “Un Disparo.” y al presionar y luego soltar la tecla enter verás el mensaje “Reiniciando.”. De esta forma hemos probado que nuestras teclas funcionan correctamente y además hemos aprendido como funcionan los eventos relacionados con estas.

Visto esto hasta aquí empezaremos a crear entidades en el próximo artículo.

Anterior: Mecánica, reglas del juego e instalación de la librería.
Siguiente:Estructura básica de las entidades.
Código: https://github.com/Nazariglez/spaceinvaders* *