Dibujando secuencia de imágenes animadas con Love2D

Para dibujar una secuencia de imágenes animadas con Love2D usamos la función newQuad() que de forma simplificada nos permite almacenar la posición y el ancho y alto de un sector de una imagen más grande. Es decir que solo tendremos la información de un rectángulo dentro de esa imagen, pero no la imagen en sí. Luego utilizando la función draw() podremos dibujar el sector de la imagen que necesitemos, veamos un ejemplo.

Tenemos este set de imágenes que representan una explosión, y sé que cada sub imagen es de 256 x 256 píxeles.

Para poder dibujar la primera sub imagen primero haremos lo siguiente. Creamos la imagen que llamaremos "explosion1" y luego crearemos un quad de la primera sub imagen de "explosion1"

explosion1 = love.graphics.newImage("recursos/explosion 1.png")

quad1 = love.graphics.newQuad(0,0,256,256,image:getDimensions())

Para crear el quad, le pasamos como parámetros las coordenadas "x" e "y" dentro de la imagen que en este caso sería 0,0 porque es la esquina superior izquierda de la imagen, y luego el tamaño de la sub imagen que como dije anteriormente es de 256 x 256 píxeles, y al final el tamaño de la imagen original, esto lo podemos saber utilizando la función getDimensions() de la imagen. Para dibujar este sector de la imagen, es decir el quad que acabamos de crear lo haremos utilizando la misma función draw() que para las imágenes pero agregando unos datos extras.

love.graphics.draw(explosion1,quad1,100,100)

El primer parámetro es la imagen desde donde se extraerá la sub imagen, en este caso es "explosion1" que se creó al principio, luego el quad y las coordenadas donde queremos dibujar dentro del área de nuestra ventana del juego. Ya sabiendo esto, como podemos dibujar nuestra explosión de forma animada?, veamos entonces que se debe hacer en este caso.

Lo más lógico seria crear una función que nos devuelva una tabla con todos los quads de la imagen que le pasemos.

function getQuads(image,tileWidth,tileHeight)
   local count = (image:getWidth()/tileWidth) * (image:getHeight()/tileHeight)
   local quads = {}
   local tx = 0
   local ty = 0
   for i = 1 , count , 1 do
     quads[i] = love.graphics.newQuad(tx,ty,tileWidth,tileHeight,image:getDimensions())
     tx = tx + tileWidth
     if tx >= image:getWidth() then
       tx = 0
       ty = ty + tileHeight
    end
   end
   return quads
end

Esta función nos devuelve una tabla con todos los quads de la imagen que le pasamos como parámetro junto con el tamaño de las sub imágenes. Ahora lo siguiente es llevar un control del quad que se está dibujando para así ir avanzando y llegar al final de la lista de quads. Veamos el ejemplo completo.

function love.load()

  explosion1 = love.graphics.newImage("recursos/explosion 1.png")

  quads = getQuads(explosion1,256,256) 

  frame = 0

  maxFrame = table.getn(quads)

end

function love.update(dt)

   frame = frame + 1

  if frame > maxFrame then

    frame = 1

  end

end

function love.draw()

  love.graphics.draw(explosion1,quads[frame],100,100)

end

Para controlar el quad que se está dibujando utilizamos la variable frame la cual se irá incrementando en 1 cada vez que se ejecute la función update() y al llegar al final volveremos a empezar y con esto tenemos nuestra animación continuamente dibujándose en la pantalla. De allí en adelante ya podrás crear la animación como desees.

Te dejo este ejemplo que he realizado y que te permite hacer clic en algún lugar de la pantalla e iniciar una animación la cual desaparece al alcanzar el último quad de la secuencia, puedes crear tantas como desees.

Aquí te dejo el código de este ejemplo para que lo puedas revisar y espero puedas aprender algo nuevo. Y bueno me despido por ahora, hasta la próxima.