En la última serie Crafty, aprendiste sobre diferentes maneras de mover elementos usando el teclado. Mientras un teclado te ayuda a crear una variedad de juegos, algunas situaciones requieren que controles diferentes eventos de ratón para hacer el juego más disfrutable. Por ejemplo, considera un juego en donde aparecen globos en lugares al azar en la pantalla. Si el usuario necesita dar clic en los globos para hacer puntos, definitivamente necesitarás un componente de Ratón.

De manera similar, el componente Keyboard no tendrá ningún uso cuando estés desarrollando juegos para dispositivos móviles. En este caso, tendrás que depender del componente Touch para crear tus juegos. En este tutorial, aprenderás sobre los componentes Mouse y Touch en Crafty.

El Componente Mouse

El componente Mouse es usado para agregar eventos básicos e ratón a entidades. Aquí está una lista de todos los eventos incluidos en este componente.

• MouseOver: Este evento es disparado cuando el ratón entra a una entidad.
• MouseOut: Este evento es disparado cuando el ratón dejan una entidad.
  
• MouseDown: Este evento es disparado cuando el botón del ratón es presionado en una entidad.
  
• MouseUp: Este evento es disparado cuando el botón del ratón es soltado dentro de una entidad.
  
• Click: Este evento es disparado cuando el botón del ratón es presionado dentro de una entidad.
  
• DoubleClick: Este evento es disparado cuando el botón del ratón es presionado dos veces sobre una entidad.
  
• MouseMove: Este evento es disparado cuando el ratón se mueve dentro de una entidad.

Ten en mente que los eventos de ratón serán disparados sobre una entidad dolo si has agregado el componente Mouse a ellos. Aquí hay algo de código que enlaza el evento MouseMove a la caja en el demo de abajo:

var Box = Crafty.e("2D, Canvas, Color, Mouse")
  .attr({
    x: 200,
    y: 100,
    w: 200,
    h: 200
  })
  .color("black")
  .origin("center")
  .bind('MouseMove', function() {
    this.rotation += 1;
  });

Después de que la caja ha sido atada al evento MouseMove, cada movimiento del ratón sobre la caja la rotará un grado. El método .origin() ha sido usado para establecer el punto de rotación de nuestra caja al centro. También puede tomar otros valores como "top left", "bottom right", etc.

Prueba mover el cursor dentro y fuera de la caja en el demo. Mantener presionado un botón dentro de la caja disparará el evento MouseDown y cambiará el color de la caja a rojo.

Un objeto MouseEvent también es pasado como parámetro a la función callback de todos estos eventos de ratón. Contiene toda la información relacionada a ese evento de ratón específico.

También puedes revisar cuál botón del ratón ha sido presionado por el usuario usando la propiedad mouseButton. Por ejemplo, un clic izquierdo puede ser detectado usando Crafty.mouseButtons.LEFT. De manera similar, un clic de botón medio puede ser detectado usando Crafty.mouseButtons.MIDDLE.

Componente MouseDrag

El componente MouseDrag proporciona una entidad con diferentes eventos de ratón arrastrar y soltar. Sin embargo, agregar estos eventos no tendrá mucho sentido si la entidad misma no puede ser arrastrada y soltada. Puedes agregar habilidades arrastrar y soltar a una entidad usando el componente Draggable. Este componente escucha eventos del componente MouseDrag y mueve la entidad dada de manera acorde. El componente MouseDrag es automáticamente agregado a cualquier entidad con el componente Draggable.

El componente Draggable tiene tres métodos: .enableDrag(), .disableDrag(), y .dragDirection(). Los primeros dos métodos habilitan y deshabilitan sobre una entidad respectivamente. El tercer método es usado para establecer la dirección de arrastre.

Por defecto, la entidad se moverá en cualquier dirección que el cursor s esté moviendo. Sin embargo, puedes restringir el movimiento de una entidad a una dirección vertical usando this.dragDirection({x:0, y:1}). De manera similar, puedes forzar a una entidad a moverse solo en dirección horizontal usando this.dragDirection({x:1, y:0}).

También puedes especificar la dirección directamente en grados. Por ejemplo, para mover un elemento 45 grados, puedes simplemente usar this.dragDirection(45) en lugar de  this.dragDirection({x:1, y:1}).

Además de arrastrar y soltar elementos, también es necesario saber cuando un arrastre comienza y termina. Esto puede ser logrado usando los eventos StartDrag y StopDrag. También hay un evento Dragging que es disparado mientras una entidad está siendo arrastrada.

Aquí está el código para arrastrar la caja roja en el demo de abajo:

var hBox = Crafty.e("2D, Canvas, Color, Draggable")
  .attr({
    x: 50,
    y: 50,
    w: 50,
    h: 50
  })
  .color("red")
  .dragDirection(0)
  .bind('Dragging', function(evt) {
    this.color("black");
  })
  .bind('StopDrag', function(evt) {
    this.color("red");
  });

Después de establecer el ancho, alto y posición de la caja, he usado .dragDirection(0) para restringir el movimiento de nuestra caja en la dirección horizontal. También he usado el método .bind() para enlazar la entidad a los métodos Dragging y StopDrag.

Cambiar el color a negro le da al usuario una indicación de que la entidad está siendo actualmente arrastrada. También podrías usar el evento StartDrag en lugar de Dragging porque el color de la entidad solo necesita ser cambiado una vez. El evento Dragging es incluso más apropiado cuando tienes que cambiar o monitorear continuamente una propiedad de la entidad siendo arrastrada. Por ejemplo, puedes usar el siguiente código para deshabilitar el arrastre sobre la caja una vez que ha alcanzado la ubicación deseada.

hBox.bind('Dragging', function(evt) {
    this.color("black");
    if(this.x > 300) {
      this.disableDrag();
    }
});

El Componente Touch

Si necesitas acceder a eventos relacionados con touch para una entidad, puedes usar el componente Touch. Este componente te da accedo a cuatro eventos diferentes.

• TouchStart: Este evento es disparado cuando una entidad es tocada.
• TouchMove: Este evento es disparado cuando un dedo es movido sobre una entidad.
• TouchCancel: Este evento es disparado cuando algo interrumpe el evento touch.
• TouchEnd: Este evento es disparado cuando un dedo es levantada sobre una entidad o deja a esa entidad.

Los primeros tres eventos tienen acceso al objeto TouchEvent, el cuál contiene toda la información sobre el toque.

Algunos juegos o proyectos podrían requerir que detectes múltiples toques. Esto puede ser logrado habilitando multi-touch usando Crafty.multitouch(true). Pasar este método true o false enciende o apaga el multi-touch.

Antes de usar el componente Touch en tus proyectos, deberías saber que es actualmente incompatible con el componente Draggable.

Conclusión

Después de completar este tutorial, deberías ahora poder manejar apropiadamente diferentes eventos del ratón o crear juegos basados en arrastrar y soltar fácilmente. Ten en mente que he usado Crafty versión 0.7.1 en este tutorial, y los demos podrían no funcionar con otras versiones de la librería.

En el siguiente tutorial, aprenderás como usar hojas de sprites para animar diferentes personajes en Crafty.