En este nuevo tutorial vamos a aprender a crear colisiones sencillas en Lua. Con el método que veremos, implementaremos colisiones de nuestro personaje con varios bloques aunque no sean colisiones perfectas en cuanto a píxeles. Al ser el primer intento de colisión será bastante sencillo para que se entienda bien.

Demostración de colisión

En esta pequeña demostración crearemos un personaje capaz de moverse y también tres bloques en pantalla que tendrán implementados una colisión cada uno. El personaje no podrá atravesar esos bloques.

Para empezar crearemos dos colores, uno para el personaje y otro para nuestros bloques:

--Creamos los Colores.
verde=Color.new(0,255,0)
blanco = Color.new(255,255,255)

Ahora crearemos dos imágenes que usaremos para nuestro personaje y para nuestros bloques. Primero creamos imágenes vacías de 32x32 y las rellenamos del color que acabamos de crear.

--Creamos el personaje.
personaje1 = Image.createEmpty(32,32)
personaje1:clear(blanco)
 
--Creamos el bloque.
bloque1 = Image.createEmpty(32,32)
bloque1:clear(verde)

Ahora necesitamos crear un array para almacenar la información del personaje. En esta demostración sólo guardaremos la posición "x" e "y".

--Array del personaje.
Personaje = { x = 30, y = 100 }

Lo siguiente es definir dos variables que almacenarán la altura y anchura de nuestro personaje. Esos valores serán usados en la función de la colisión. Recuerda que hemos creado nuestras imágenes de 32x32, por lo tanto esos serán los valores que usaremos.

--Definicion de variables.
personajeAltura = 32
personajeAnchura = 32

Ahora crearemos un array para almacenar la información de los tres bloques. Naturalmente guardaremos los valores "x" e "y" y la altura y anchura de cada bloque. Usaremos los comandos width() y height() para ello, que automáticamente hallarán esos valores para nosotros. Los valores son tomados del bloque que hemos creado anteriormente. Vamos allá.

--Array del bloque, con sus tres elementos.
Bloque = {}
Bloque[1] = { x = 100, y = 80, Altura = bloque1:height(), Anchura = bloque1:width() }
Bloque[2] = { x = 300, y = 30, Altura = bloque1:height(), Anchura = bloque1:width() }
Bloque[3] = { x = 200, y = 58, Altura = bloque1:height(), Anchura = bloque1:width() }

--Funcion para mover el personaje por la pantalla.
function moverPersonaje()
pad = Controls.read()
if pad:left() then
Personaje.x = Personaje.x - 1
end
if pad:right() then
Personaje.x = Personaje.x + 1
end
if pad:up() then
Personaje.y = Personaje.y - 1
end
if pad:down() then
Personaje.y = Personaje.y + 1
end
end

Y ahora viene lo más interesante. Es hora de crear la función que compruebe si hay colisiones. Esta función nos permitirá comprobar si hay colisiones para cualquier objeto de nuestro juego, siempre y cuando la función sea llamada para cada objeto en nuestro bucle principal. Mira la función completa y después la explicaré:

--Funcion que comprueba si se produce alguna colision.
function comprobarColision(object)
if (Personaje.x + personajeAnchura > object.x) and (Personaje.x < object.x + object.Anchura) and (Personaje.y + personajeAltura > object.y) and (Personaje.y < object.y + object.Altura) then
Personaje.x = oldx
Personaje.y = oldy
end
end

Miremos la primera línea: function comprobarColision(object). Con ella creamos nuestra función llamada comprobarColision. Fíjate que dentro de los paréntesis colocamos la palabra object. La palabra es básicamente una variable. Cuando más adelante usemos la función, esta palabra será sustituida por el nombre del objeto del que queremos probar si hay colisión. Si miras dentro de la función te darás cuenta de que la palabra objeto aparece varias veces más. Cuando la función es llamada, todas las palabras object serán reemplazadas por el objeto que le hemos pasado a la función.

En la segunda línea tenemos una sentencia if que comprueba varias condiciones. Fíjate que he puesto cada sección entre paréntesis, lo cual hace que sea mucho más legible.

La primera comprobación pregunta si (Personaje.x + personajeAnchura > object.x). El valor "x" de las imágenes es la esquina superior izquierda de la imagen. La colisión consiste en ver si dos imágenes se superponen la una a la otra y si eso ocurre lo detenemos. Entonces ¿por qué sumamos la anchura del personaje al valor "x" del personaje? Simple, porque si sólo comprobamos el valor "x" del personaje no se detectaría la colisión a menos que el píxel superior izquierdo de la imagen se superpusiera. Si nos estamos moviendo a la derecha y hay un bloque en el camino, entonces necesitamos que la colisión ocurra en la parte derecha de la imagen del personaje. El valor "x" del personaje sumado a la anchura del personaje es la esquina superior derecha de la imagen.

Básicamente lo que vamos a hacer es crear una área cuadrada al rededor del bloque que requiera la colisión. Si entras en ese área ocurrirá la colisión. He dibujado varias imágenes para que veas como trabajan estas líneas de código. El cuadrado azul es el bloque y el rojo es el personaje. La línea negra muestra donde ocurre la colisión. Hasta ahora sólo hemos comprobado si el lado derecho de nuestro personaje supera el valor "x" de nuestro otro objeto. Mira:

Como puedes ver, ahora nuestro personaje está dentro de la zona de colisión, pero tenemos que hacer más comprobaciones.

Lo siguiente que tenemos es: (Personaje.x < object.x + object.Anchura). Este fragmento de código es para cuando el personaje se esté moviendo hacia la izquierda y golpea la parte derecha del bloque. Es básicamente lo contrario de la anterior línea. El valor "x" del bloque sumado al ancho será su lado derecho. Veamos la zona de colisión con las dos primeras comprobaciones:

Todavía estamos dentro de la zona de colisión con estas primeras dos comprobaciones.

La siguiente comprobación es: (Personaje.y + personajeAltura > object.y). Este fragmento de código es para cuando el personaje se esté moviendo hacia abajo. La posición del personaje sumado a la altura del personaje nos da la parte inferior de la imagen del personaje. Si este valor es superior que la posición "y" del bloque entonces estamos colisionando. Veamos la imagen con las tres comprobaciones:

Ahora, como ves, el área que está por encima del bloque no forma parte del área de colisión, luego la parte inferior de la imagen del personaje tiene que ser superior a la parte alta del bloque para que ocurra la colisión.

Nuestra última comprobación: (Personaje.y < object.y + object.Altura). Esta parte es para cuando nos movemos hacia arriba. Si el valor "y" del personaje es menor que la parte inferior del bloque (valor "y" sumado a la altura) entonces estaremos colisionando. Usamos "menor que" esta vez porque al moverte hacia arriba por la pantalla disminuye el valor "y". Veamos la última imagen:

Ahora la zona inferior del bloque ya no es un área de colisión, el único área considerado de colisión está dentro del bloque. Con las cuatro comprobaciones envolvemos el área del bloque.

Ahora tendremos que hacer algo una vez estemos dentro de este área, igualaremos los valores "x" e "y" del personaje a oldx y oldy. No hemos definido aún esas variables, lo haremos al inicio del bucle principal. Esas variables tendrán el valor de "x" e "y" al comienzo de cada pasada del bucle. Si nuestra función determina que estamos dentro del área de colisión, volveremos a la posición anterior, la cual está almacenada en oldx y oldy, lo que nos hace creer que nunca podemos entrar dentro del bloque.

Esto es lo que hace la función. He intentado explicarlo con mucho detalle, así que espero que te haya ayudado a comprenderlo.

Lo siguiente es crear nuestro bucle principal:

--Bucle principal.
while true do
 
--Variables que almacenan la posicion del personaje al comienzo de cada bucle.
oldx = Personaje.x
oldy = Personaje.y
screen:clear()
 
 
--Comprobamos si hay movimiento.
moverPersonaje()
 
--Comprobamos si hay colisión para cada bloque.
comprobarColision(Bloque[1])
comprobarColision(Bloque[2])
comprobarColision(Bloque[3])
 
--Muestra el personaje en pantalla.
screen:blit(Personaje.x,Personaje.y,personaje1)
 
--Muestra los tres bloques en pantalla.
for a = 1,3 do
screen:blit(Bloque[a].x,Bloque[a].y,bloque1)
end
 
screen.waitVblankStart()
screen.flip()
end