[TUTORIAL] Coding: Simple pero útil. 01 - Colisiones

Esta es el primer tutorial que hago y espero que ayude a la gente que está empezando a programar, y también a los que ya han empezado. Creo que siempre viene bien saber otras formas de hacer las cosas.

Hoy empezaré con algo simple, que parece fàcil de primeras, pero que si no se hace bien acaba saliendo una bazòfia injugable (suponiendo que estés creando un videojuego).


Colisión de Circulos
Empezaremos utilizando objetos que se puedan mover y se necesite saber constantemente si estan o no colisionando 2 objetos.
Por ejemplo, tenemos al señor Pacman y una Bola:


Como podeis ver, he añadido en el dibujo el radio de cada circulo y la distancia entre sus respectivos centros.
Ahora bien, se os ocurre alguna forma de ver si los 2 circulos estan colisionando? Si os dais cuenta, tratandose de esferas, únicamente al mover las esferas cambiará la distància entre estas, rotando la imagen (mentalmente) puedes llegar al mismo problema, véase en la siguiente imagen:

Como podeis ver, por mucho que movamos de coordenadas X i Y los 2 circulos, se puede simplificar el problema y ver que se necesitan tan solo 3 valores para comprobar si colisionan o no:
-Radio circulo 1 (Pacman)
-Radio circulo 2 (bola que come pacman(?))
-Distancia entre circulos

Dando como resultado el siguiente problema:

Ahora ya tenemos todo listo para ver de qué manera podremos ver si estas 2 esferas colisionan o no, lo haremos de la siguiente manera:
Una forma de pensar "Como diablos puedo ver como colisionan?" es pensar justamente todo lo contrario: como sabemos que no colisionan seguro?
Fijaos que si acercamos la esfera blanca (linea blanca) hacia pacman (linea amarilla), colisionaran cuando la distancia entre estos sea menor a la suma de los 2 radios:
colisiona: distancia < radio1 + radio2
no colisiona: distancia > radio1 + radio2
O lo que es lo mismo:
Colisiona si se cumple la siguiente condición: Distancia - radio2 < radio1

En esta imagen vemos el caso extremo que depende de cada uno si considera que es colisión o no lo és: dist - radio2 = radio1
Claramente vemos que si la bola blanca se acerca a pacman, la medida "distancia - radio2" disminuye y obviamente están colisionando.
(Si teniamos 'dist - radio2 = radio1' con 'dist - radio2' disminuyendo, obtenemos 'dist - radio2 < radio1', logicamente)

Por lo tanto, ya tenemos nuestro sistema para saber si 2 circumferencias están colisionando o no, dando las coordenadas XY de cada circulo con su radio, calcularemos la distancia entre ellos:


o:

como os guste mas.



Colisión de Rectángulos
Hemos visto que en el problema de las circumferencias que lo podiamos simplificar a 1D (una dimension). Pues bien, la colisión de rectángulos es exactamente lo mismo pero en 2D.
Para ver si colisionan o no 2 rectangulos es un poco más difícil de imaginarselo. Una manera MUY facil es la siguiente:

Sabremos que no colisionará si:
1-la parte derecha del rectangulo 1 se encuentra mas a la izqueirda que la parte izquierda del rectangulo 2
2-la parte izquierda del rectangulo 1 se encuentra mas a la derecha que la parte derecha del rectangulo 2
3-la parte de abajo del rectangulo 1 se encuentra mas arriba que la parte de arriba del rectangulo 2
4-la parte de arriba del rectangulo 1 se encuentra mas abajo que la parte de abajo del rectangulo 2
imagen:


Sabemos que el sistema de coordenadas de la NDS sitúa al eje de origen (0,0) a la parte posterior izquierda (arriba-izquierda) de la pantalla. Haciendo calculos, obtenemos lo siguiente (para cualquier rectangulo, con sus x, y, ancho, altura correspondiente):
parte derecha = x + ancho
parte izquierda = x
parte arriba = y
parte abajo = y + alto

Tenemos la siguiente equación (para ver si no colisionan):


Podemos ajuntarlo todo en una sola linea:

Nota: fijaos en el NOT, que niega la formulita de ver si no-colisionan, por lo que si negamos tal formula obtenemos la de 'colisionan?'

Aplicando la lógica, vemos que la anterior equacion es equivalente a:

Por lo que obtenemos 4 condiciones de saber si colisionan:
1-parte derecha (R1) mas a la derecha que parte izquierda (R2)
2-parte izquierda (R1) mas a la izquierda que parte derecha (R2)
3-parte de abajo (R1) mas abajo que parte de arriba (R2)
4-parte de arriba (R1) mas arriba que parte de abajo (R2)
Un poco mas "dificil" de verlo de esta forma, verdad?

Nota para Colisiones en Objetos 3D
Supongo que queda claro que una esfera (circulo 3D y tal..) seria practicamente la misma formula que la de 2D, verdad? (Piensalo y lee el spoiler)


Y los rectangulos mas de lo mismo, añadir la Z donde toca:


Fácil, no?
Utilizando el mismo método, podreis conseguir mirar si colisionan 2 objetos en 2D, 3D, .. 4D! (no se como imaginarlo, pero viendo tal funcion es fácil, no? ;P)







Pues bien esto es todo por hoy, cuando vuelva a tener tiempo haré la segunda parte de las colisiones:
-Colisiones en Mapas (tipo RPG, tactics, etc.)
-Colision Perfecta (MUY MUY (EXTREMADAMENTE) lenta)

Espero que os sirva de algo, almenos para entender mejor de donde salen estas formulitas