Share
En la última serie de Crafty, aprendiste diferentes formas de mover elementos usando el teclado. Si bien un teclado puede ayudarlo a crear una variedad de juegos, algunas situaciones requieren que controle diferentes eventos del mouse para que el juego sea más agradable. Por ejemplo, considere un juego donde los globos aparecen en lugares aleatorios en la pantalla. Si el usuario necesita hacer clic en los globos para obtener puntos, definitivamente necesitará un componente de Mouse.
Del mismo modo, el Teclado El componente no será de ninguna utilidad cuando esté desarrollando juegos para dispositivos móviles. En este caso, tendrá que confiar en el componente Touch para crear sus juegos. En este tutorial, aprenderá sobre los componentes Mouse y Touch en Crafty.
los Ratón El componente se usa para agregar eventos básicos del mouse a las entidades. Aquí hay una lista de todos los eventos incluidos en este componente:
Tenga en cuenta que los eventos del mouse se activarán en una entidad solo si ha agregado el Ratón componente para ellos. Aquí hay un código que une el Movimiento del ratón evento a la caja en la demo a continuación:
Accentsconagua
var Box = Crafty.e ("2D, Canvas, Color, Mouse") .attr (x: 200, y: 100, w: 200, h: 200) .color ("negro") .origin ("center ") .bind ('MouseMove', function () this.rotation + = 1;);Después de que la caja ha sido vinculada a la Movimiento del ratón evento, cada movimiento del mouse sobre la caja lo rotará 1 grado. los .origen() Este método se ha utilizado para establecer el punto de rotación de nuestro cuadro en el centro. También puede tomar otros valores como "arriba a la izquierda", "abajo a la derecha", etc.
Intente mover el cursor dentro y fuera del cuadro en la demostración. Si mantiene presionado el botón del mouse dentro de la caja, se activará Ratón hacia abajo Evento y cambiar el color del cuadro a rojo..
UNA MouseEvent El objeto también se pasa como un parámetro a la función de devolución de llamada de todos estos eventos del mouse. Contiene todos los datos relacionados con ese evento específico del mouse..
También puede verificar en qué botón del mouse ha hecho clic el usuario usando la tecla Botón del ratón propiedad. Por ejemplo, un clic izquierdo puede ser detectado usando Crafty.mouseButtons.LEFT. De manera similar, un clic en el botón central puede ser detectado usando Crafty.mouseButtons.MIDDLE.
los MouseDrag componente proporciona una entidad con diferentes eventos de arrastrar y soltar el mouse. Sin embargo, agregar estos eventos no tendrá mucho sentido si la entidad en sí no se puede arrastrar y soltar. Puede agregar habilidades de arrastrar y soltar a una entidad usando el Arrastrable componente. Este componente escucha los eventos del MouseDrag Componente y mueve la entidad dada en consecuencia. los MouseDrag componente se agrega automáticamente a cualquier entidad con el Arrastrable componente.
los Arrastrable El componente tiene tres métodos: .enableDrag (), .disableDrag (), y .dragDirection (). Los dos primeros métodos habilitan y deshabilitan el arrastre en una entidad respectivamente. El tercer método se utiliza para establecer la dirección de arrastre.
Por defecto, la entidad se moverá en cualquier dirección en la que se mueva el cursor. Sin embargo, puede restringir el movimiento de la entidad a una dirección vertical usando this.dragDirection (x: 0, y: 1). De manera similar, puede forzar a una entidad a moverse solo en una dirección horizontal usando this.dragDirection (x: 1, y: 0).
También puede especificar la dirección directamente en grados. Por ejemplo, para mover un elemento 45 grados, simplemente puede 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 cuándo se inició y se detuvo el arrastre. Esto se puede lograr usando StartDrag y StopDrag eventos. También hay una Arrastrando evento que se activa mientras se arrastra una entidad.
Aquí está el código para arrastrar el cuadro rojo en la demostración a continuación:
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 configurar el ancho, la altura y la 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 .enlazar() Método para vincular la entidad a la Arrastrando y StopDrag método.
Cambiar el color a negro le da al usuario una indicación de que la entidad está siendo arrastrada actualmente. También puedes usar el StartDrag evento en lugar de Arrastrando Porque el color de la entidad solo necesita ser cambiado una vez. los Arrastrando El evento es más apropiado cuando tiene que cambiar o monitorear continuamente una propiedad de la entidad que se está arrastrando. Por ejemplo, puede usar el siguiente código para deshabilitar el arrastre en el cuadro una vez que haya alcanzado la ubicación deseada.
hBox.bind ('Dragging', function (evt) this.color ("black"); if (this.x> 300) this.disableDrag (););Si necesita acceder a eventos relacionados con el contacto para una entidad, puede usar el Toque componente. Este componente le da acceso a cuatro eventos diferentes:
Los tres primeros eventos tienen acceso a la TouchEvent Objeto, que contiene toda la información sobre el toque..
Algunos juegos o proyectos pueden requerir que detectes varios toques. Esto se puede lograr habilitando el uso multitáctil Crafty.multitouch (true). Pasando este metodo cierto o falso enciende y apaga el multi-touch.
Antes de usar el Toque componente de sus proyectos, debe saber que actualmente es incompatible con el Arrastrable componente.
Después de completar este tutorial, ahora debería poder manejar correctamente diferentes eventos del mouse o crear juegos basados en arrastrar y soltar fácilmente. Tenga en cuenta que he usado la versión 0.7.1 de Crafty en este tutorial, y es posible que las demostraciones no funcionen con otras versiones de la biblioteca..
En el siguiente tutorial, aprenderás a usar hojas de sprites para animar diferentes personajes del juego en Crafty.
