viernes, 21 de febrero de 2014

CraftyJS - Viewport (II) - Trucos de cámara

Como no podía ser de otra manera, e al igual que cuando me estaba ocupando de la animación, sale una nueva versión de CraftyJS y me lo cambian todo obligándome a reescribir el artículo por completo.

Por lo tanto, todo lo aquí escrito, sólo tiene validez a partir de la versión 0.6.2 de CraftyJS.

Continuamos el artículo del viewport donde lo dejamos viendo otras funcionalidades:

Viewport.pan

Si lo último que vimos fue cómo hacer que la cámara siguiera a nuestra entidad, ahora lo que haremos es desplazar la cámara por sí misma en un movimiento PANorámico.

La instrucción es bien simple:

Crafty.viewport.pan(pixeles_x, pixeles_y, tiempo_en_ms);

Es decir, que le indicamos al viewport cuantos píxeles queremos desplazar la cámara sobre cada eje y el tiempo expresado en milisegundos en que queremos que la cámara llegue a destino.

Se puede ver un ejemplo funcionando de esto aquí.  

Viewport.pan con una vuelta de rosca

Ahora le vamos a dar una vuelta de rosca a este tema, concretamente una vuelta de rosca de ratón. Haremos que nuestra cámara se mueva con lo que los albiones llaman el 'mouse wheel' y nosotros la ruedecilla del ratón.



Nosotros podemos interceptar eventos en CraftyJS con la función .bind que tiene la siguiente sintaxis:

Crafty.bind(evento, acción)

O sea, que podemos hacer lo siguiente:

Crafty.bind("MouseWheel", function(e) {
    var delta = (e.wheelDelta ? e.wheelDelta/120 : e.detail);
   Crafty.viewport.pan(-delta*30, -delta*20, 100);
    });

¿Qué hace esto?

Está claro que delta es un modificador que aplicaremos al desplazamiento del viewport, básicamente para que suba o baje en función del sentido en el que movamos la ruedecilla.

Bien, pues cuando interceptamos el evento de la rueda, éste tiene una propiedad llamada detail con valor +/- 1 si usamos Firefox u Opera o una propiedad wheelDelta con valor +/- 120 si usamos otro navegador.

Es por eso que preguntamos por la propiedad y la dividimos por 120 o la dejamos tal cual, con el objeto de acabar teniendo un +1 si la rueda sube y un -1 si la rueda baja.

Finalmente, dado que en Crafty el eje y incrementa de arriba hacia abajo, le cambiamos el signo para lograr el efecto deseado.

Podéis ver esto y un bizcocho aquí.

Zoom!

Otro efecto que podemos hacer con viewport es un zoom. El zoom además del uso que nos viene a la cabeza de forma intuitiva, puede ser una buena manera de adaptar nuestro juego al tamaño de la pantalla sobre el que se ejecute sin necesidad de redimensionar nada.

Crafty.viewport.scale

Sintaxis:

Crafty.viewport.scale(aumento)

El parámetro aumento es el multiplicador del zoom. Es decir, con un aumento 2, algo que mide 10 píxeles pasará a medir 20. Si ponemos un aumento de 0.5 (1/2), algo que mide 10 píxeles pasará a medir la mitad.

Si pasamos 0 o 1 a la función, todo adquirirá el tamaño normal.

Crafty.viewport.zoom

Sintaxis:

Crafty.viewport.zoom(aumento, pos_x, pos_y, tiempo)

Hace el zoom sobre un punto (x,y) en el tiempo que queramos (expresado en milisegundos). De todas formas aquí debemos tener en cuenta que el aumento es relativo. Es decir, al contrario que con scale que redimensiona al tamaño que queramos, zoom redimensiona sobre la última redimensión. Esto es especialmente importante si hacemos zoom de manera progresiva, ya que el aumento / disminución del tamaño sucederá de manera exponencial.
Ni que decir tiene, que a todo esto le podemos añadir el rollo de la ruedecilla de antes y que nos quede algo asín.
Espero que hayáis disfrutado este artículo tanto como yo escribiéndolo y otros formalismos que se os ocurran. Nos vemos a la próxima.

1 comentario:

  1. Hola:

    Sólo quería comentar que tus tutoriales sobre CraftyJS me han resultado muy útiles. Empecé a leer y practicar con otro tutorial en inglés (http://buildnewgames.com/introduction-to-crafty/) pero el tuyo me parece mucho mejor explicado. Me lo he leído entero hoy :)

    Ojalá sigas escribiendo sobre este tema.

    Por mi parte, espero poder hacer un juego de mesa usando CraftyJS. Si consigo algo decente, te avisaré.

    Muchas gracias.

    ResponderEliminar