Share
Es muy importante en un juego que detectes colisiones correctamente. Nadie va a jugar un juego en el que las cosas empiecen a explotar, incluso cuando están separados por muchos píxeles. Además de los gráficos y los sonidos, esto es una cosa más que debe tratar de mantener lo más preciso posible..
En este tutorial, aprenderá a detectar y depurar las colisiones en detalle..
Antes de que pueda detectar cualquier colisión, debe agregar el Colisión componente a una entidad. Este componente detectará con éxito una colisión entre dos polígonos convexos. Este componente tiene dos eventos: Golpeado en y Golpear fuera. los Golpeado en evento se desencadena cuando se produce una colisión. No se activará de nuevo a menos que cesen las colisiones de ese tipo específico. los Golpear fuera evento se desencadena cuando cesa una colisión.
Si está verificando una colisión con múltiples componentes y todas estas colisiones ocurren simultáneamente, cada colisión se activará por sí misma. Golpeado en evento. Los datos recibidos de un evento de colisión solo son válidos mientras la colisión aún esté ocurriendo.
Puedes usar el .checkHits () Método para realizar verificaciones de colisión contra todas las entidades con un componente específico. Llamar a este método varias veces no dará como resultado múltiples comprobaciones redundantes.
Tenga en cuenta que los controles de impacto se realizan al ingresar cada nuevo marco. Digamos que hay dos objetos que aún no han colisionado cuando se realiza la comprobación de impacto. Ahora, si uno de los objetos se mueve a una nueva ubicación y se superpone con el segundo objeto más adelante en el mismo cuadro, los eventos de impacto no se activarán hasta que se realice nuevamente una verificación de colisión en el siguiente cuadro..
Si solo tiene que detectar la primera colisión entre diferentes entidades, puede utilizar la .ignoreHits (String componentList) método. los lista de componentes variable es una lista de componentes separados por comas con los que ya no desea detectar colisiones. Cuando no se proporcionan argumentos, detendrá la detección de colisiones con todas las entidades. Aquí hay un ejemplo:
Accentsconagua
littleBox.bind ("HitOn", function (hitData) Crafty ("Obstacle"). color ('rojo'); this.ignoreHits ('Obstacle'););Puedes ver que Crafty no solo comienza a detectar el Golpeado en evento, sino también el Golpear fuera evento. Es por eso que el color de la caja grande no cambia de nuevo a negro..
Otro método similar llamado .resetHitChecks (String componentList) se puede usar para volver a verificar la colisión entre componentes específicos. Este método mantendrá disparando el Golpeado en evento una y otra vez, siempre y cuando la colisión todavía está sucediendo.
Cuando las entidades se mueven continuamente, es muy difícil ver si las colisiones se están disparando en el momento adecuado. En la demostración anterior, parece como si el Golpeado en El evento se dispara ligeramente antes del evento real. Crafty te da la opción de dibujar cajas de golpe alrededor de las entidades para que puedas ver lo que está pasando.
Hay dos componentes que puede utilizar para fines de depuración. Estos son WiredHitBox y SoldHitBox.
El primer componente le permitirá utilizar el .debugStroke ([String strokeColor]) Método, que dibujará un contorno alrededor de la entidad con un color dado. Cuando no se proporciona ningún color, el color rojo se utiliza para dibujar el contorno.
Del mismo modo, el segundo componente se utiliza para rellenar las entidades con un color determinado utilizando el .debugFill ([String fillStyle]) método. Cuando no se proporciona ningún color, se utiliza el color rojo. Aquí hay una demo con el .debugStroke () método.
También puede crear un cuadro de resultados personalizado para la detección de colisiones. Esto es útil cuando estás usando sprites de imagen en tu juego que no son rectangulares. los .colisión() El método que puede usar para crear un área de aciertos personalizada acepta un solo parámetro que se usa para establecer las coordenadas del nuevo cuadro de aciertos..
Estas coordenadas se pueden suministrar en forma de un objeto poligonal, una matriz de pares de coordenadas x, y, o una lista de pares de coordenadas x, y. Los puntos del polígono están marcados en el sentido de las agujas del reloj y se posicionan en relación con el estado no rotado de nuestra entidad. El área de impacto personalizada se girará automáticamente cuando la entidad rote.
Hay algunas cosas que debe tener en cuenta al usar áreas de acceso personalizadas. El área de impacto que defina debe formar un polígono convexo para que la detección de colisión funcione correctamente. Para aquellos que no están familiarizados con el término, un polígono convexo es un polígono con todos los ángulos interiores menores a 180 °. También puede ver una ligera degradación del rendimiento cuando el área de impacto que definió se encuentra fuera de la entidad..
El área de acceso personalizada que definió no tendrá ningún efecto a menos que agregue el Colisión componente de cada entidad con la que su área de acceso necesita detectar una colisión.
littleBox.collision (80, 0, 100, 100, 50, 100) .debugStroke ('green') .checkHits ('Obstacle');En la demostración anterior, hemos definido un cuadro de resultados personalizado que se encuentra fuera del cuadro naranja. Como puede ver, el bloque grande se vuelve azul solo cuando choca con el triángulo. La posición de la caja naranja no importa..
Echemos un vistazo a otro ejemplo que usa una nave espacial de Gumichan01. El cuadro de acceso predeterminado para la nave espacial es el límite del propio sprite. En el escenario actual, la esquina superior derecha de la nave espacial toca el bloque primero, pero ese espacio está realmente vacío. Para los usuarios que están jugando su juego, este es un caso de detección de colisión defectuosa.
Lo que puede hacer aquí es definir su propia área de acceso utilizando una forma triangular como el siguiente código. El polígono de cuadro de hit personalizado que defina puede tener tantos lados como desee. Solo asegúrate de que sigue siendo un polígono convexo..
spaceShip.collision (8, 0, 0, 48, 70, 48);
Después de completar todos estos tutoriales, ahora debería poder crear sus propios juegos pequeños con excelentes gráficos, buenos efectos de sonido, escenas y detección de colisiones. Debo recordarte que he usado la versión 0.7.1 de Crafty en este tutorial y que las demostraciones podrían no funcionar con otras versiones de la biblioteca..
JavaScript se ha convertido en uno de los idiomas de facto de trabajar en la web. No deja de tener sus curvas de aprendizaje, y también hay muchos marcos y bibliotecas para mantenerte ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.
Si tienes alguna duda, avísame en los comentarios..
