Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. 2D Games

Crafty Más Allá de los Básicos: Colisiones

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Crafty Beyond the Basics.
Crafty Beyond the Basics: Sounds and Scenes

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Es muy importantes que detectes colisiones apropiadamente. Nadie va a jugar un juego en donde las cosas comienzan a explotar incluso cuando están a muchos pixeles de distancia. Además de los gráficos y sonidos, esta es una cosa más que deberías intentar tan preciso como sea posible.

En este tutorial, aprenderás sobre detectar y depurar colisiones a detalle.

Detectando e Ignorando Golpes

Antes de que puedas detectar cualquier colisión, necesitas agregar el componente Collision a una entidad. Este componente detectará exitosamente una colisión entre dos polígonos convexos. Este componente tiene dos eventos: HitOn y HitOff. El evento HitOn es disparado cuando ocurre una colisión. No será disparado de nuevo a menos que las colisiones de un tipo específico cesen. El evento HitOff es disparado cuando una colisión cesa.

Si estás revisando una colisión con múltiples componentes y todas estas colisiones ocurren de manera simultánea, cada colisión disparará su propio evento HitOn. Los datos recibidos de un evento de colisión es solo válido mientras la colisión siga ocurriendo.

Puedes usar el método .checkHits() para realizar revisiones de colisión contra todas las entidades con un componente especificado. Llamar a este método múltiples veces no resultará en revisiones redundantes múltiples.

Ten en mente que las revisiones de golpe se realizan cuando se entra a cada nuevo fotograma. Digamos que hay dos objetos que aún no han colisionado cuando se realiza la revisión de golpe. Ahora, si uno de los objetos se mueve a una nueva ubicación y se empalma con el segundo objeto después en el mismo cuadro, los eventos de golpe no serán disparados hasta que una revisión de golpe se lleve a cabo de nuevo en el siguiente cuadro.

Si tienes que detectar solo la primera colisión entre diferentes entidades, puedes usar el método .ignoreHits(String componentList). La variable componentList es una lista separada por comas de componentes con los cuáles ya no quieres detectar colisiones. Cuando no se proporcionan argumentos, esto detendrá la detección de colisión con todas las entidades. Aquí hay un ejemplo:

Puedes ver que Crafty no solo comienza detectando el evento HitOn sino que también el evento HitOff. Por eso el color de la caja grande no cambia de vuelta a negro.

Otro método similar llamado .resetHitChecks(String componentList) puede ser usado para revisar de nuevo por colisiones entre componentes específicos. Este método seguirá disparando el método HitOn una y otra vez mientras la colisión siga sucediendo.

Depurando Colisiones

Cuando las entidades se están moviendo continuamente, es muy difícil ver si las colisiones están siendo disparadas en el momento adecuado. En el demo de arriba, parece como si el evento HitOn se estuviera disparando ligeramente antes del evento actual. Crafty te da la opción de dibujar cajas de colisión alrededor de entidades para que puedas realmente ver lo que está pasando.

Hay dos componentes que puedes usar para propósitos de depuración. Estos son WiredHitBox y SoldHitBox.

El primer componente te permitirá usar el método .debugStroke([String strokeColor]), el cuál dibujará un contorno alrededor de la entidad con un color dado. Cuando no se proporciona color, el color rojo es usado para dibujar el contorno.

De manera similar, el segundo componente es usado para rellenar las entidades con un color dado usando el método .debugFill([String fillStyle]). Cuando no se proporcionan colores, el color usado es rojo. Aquí está un demo con el método .debugStroke().

Creando una Caja Personalizada de Colisión

También puedes crear una caja personalizada para detección de colisión. Esto es útil cuando estás usando imágenes de sprite en tu juego que no sean rectangulares. El método .collision() que puedes usar para crear un área personalizada de colisión acepta un solo parámetro que es usado para establecer las coordenadas de la nueva caja de colisión.

Estas coordenadas pueden ser provistas en la forma de un objeto polígono, un arreglo de pares de coordenadas x,y, o una listas de pares de coordenadas x,y. Los puntos del polígono están marcados en sentido de las manecillas del reloj, y están posicionadas relativas a el estado sin rotación de nuestra entidad. El área personalizada de colisión rotará a sí misma automáticamente cuando la entidad rota.

Hay unas cuantas cosas que deberías tener en mente cuando usas áreas personalizadas de colisión. El área de colisión que defines debería formar un polígono convexo para que la detección de colisión funcione adecuadamente. 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°. Podrás también ver una ligera degradación de desempeño cuando el área de colisión que definiste yace fuera de la entidad misma.

El área personalizada de colisión que definiste no tendrá ningún efecto a menos que agregues el componente Collision a cada entidad con la cuál tu área de colisión necesita detectar una colisión.

En el demo de arriba, hemos definido una caja de colisión personalizada que yace fuera de la caja naranja. Como puedes ver, el bloque grande se vuelve azul solo cuando colisiona con el triángulo. La posición de la caja naranja no importa.

Echemos un vistazo a otro ejemplo que usa una nave espacial por Gumichan01. La caja de colisión por defecto para la nave espacial es el límite del sprite mismo. En el escenario actual, la esquina superior derecha de la nave toca primero el bloque, pero ese espacio está realmente vacío. Para usuarios que están jugando tu juego, este es un caso de mala detección de colisión.

Lo que puedes hacer aquí es definir tu propia área de colisión usando una forma triangular como el siguiente código. La caja del polígono de colisión personalizada que defines puede tener tantos lados como quieras. Solo asegúrate de que aún es un polígono convexo.

Conclusión

Después de completar estos tutoriales, deberías poder crear tus propios juegos pequeños con gráficos grandiosos, agradables efectos de sonido, escenas, y detección de colisión. Debería recordarte que he usado Craft versión 0.7.1 en este tutorial, y los demos podrían no funcionar con otras versiones de la librería.

JavaScript se ha vuelto uno de los lenguajes de-facto para trabajar en la web. No es sin sus curvas de aprendizaje, y hay muchos frameworks y librerías para mantenerte ocupado, también. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en el marketplace Envato.

Si tienes alguna pregunta, déjame saber en los comentarios.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.