Si has llegado aquí y no conoces love2d o es tu primer contacto con el desarrollo de juegos es mejor que eches una vistazo antes a BASICS.

Si prefieres empezar por aquí siempre puedes volver a BASICS a repasar algún concepto.

Como no hay mejor motivación al aprender que con resultados visibles, empecemos con imágenes. ¿Cómo utilizar imágenes en nuestro juego?

Cargar imágenes

Vamos a utilizar la función love.graphics.newImage(<ruta de la imagen>) que nos permite cargar una imagen utilizarla en nuestro juego.

En videojuegos, la imagen de fondo se denomina Background.

Si bien, siempre es mejor utilizar y crear nuestros propios recursos, en Internet hay multitud de sitios con recursos gratuitos a nuestra disposición.

Los recursos son elementos que utilizados para construir, en este caso un juego. Las imágenes, sprites o archivos de audio son ejemplos de recursos.

Puedes encontrar recursos gratuitos en https://opengameart.org.

Por el momento, descarga la siguiente imagen que usaremos para nuestro fondo.

Dentro del directorio del juego, crea una carpeta llamada imagenes y copia dentro la imagen descargada.

Ahora edita el archivo main.lua y añade las siguientes lineas:

En la función load():

background = love.graphics.newImage('imagenes/background.png')

En la función draw():

love.graphics.draw(background, 0, 0)

Fíjate que uno de los parámetros a la función es la variable background, que contiene la imagen del fondo que cargamos en el load().

No te preocupes si no entiendes algo, poco a poco lo verás todo mas claro.

El código completo tiene que quedar así:

function love.load()
  background = love.graphics.newImage('imagenes/background.png')
end

function love.update() 

end

function love.draw()
  love.graphics.draw(background, 0, 0)
end

La función update() de momento queda vacía.

Si ahora ejecutas (desde el terminal con «love .») debes ver lo siguiente:

Perfecto! con solo dos lineas ya tenemos el fondo cargado.

Sin embargo, queda algo raro, ¿porque no ocupa todo el fondo y queda tanto espacio en negro?

Como la imagen original tiene unas dimensiones distintas de la ventana y no lo hemos dicho nada, simplemente la hemos mostrado con su tamaño original. Para que quede bien vamos que ajustarla a la ventana.

Ajustar fondo al tamaño de la ventana.

Una de las operaciones mas comunes al trabajar con imágenes es el escalado. Cada dispositivo puede tener un tamaño de ventana diferente y es necesario dimensionar todo para que se vea correctamente.

De momento necesitamos conocer el ancho y alto de la ventana principal del juego.

Para ello añadimos las siguientes lineas:

WINDOWH = love.graphics.getHeight()
WINDOWW = love.graphics.getWidth()

WINDOWH  y WINDOWW son variables donde guardamos el valor del ancho y alto de la ventana principal.

Lo siguiente es obtener ancho y alto de la imagen de fondo, lo haremos con:

backgroundW = background:getWidth()
backgroundH = background:getHeight()

Veréis que las funciones son las mismas, lo que cambia es el objeto que las llama.

Ahora tenemos también en backgroundW y backGroundH el ancho y alto de la imagen. Las unidades son pixels.

Antes de continuar vamos a añadir unas lineas que nos muestren los valores leídos. Utilizaremos la función print() para escribir texto por pantalla.

  love.graphics.print("Ventana: " .. WINDOWW .. " x " .. WINDOWH, 200, 300)
  love.graphics.print("Fondo:   " .. backgroundW .. " x " .. backgroundH, 200, 340)

La función print() tiene 3 parámetros, el texto a mostrar, y coordenadas x e y.

En el código completo hasta ahora debe quedar así:

function love.load()
  WINDOWH = love.graphics.getHeight()
  WINDOWW = love.graphics.getWidth()
  background = love.graphics.newImage('imagenes/background.png')
  backgroundW = background:getWidth()
  backgroundH = background:getHeight()
end

function love.draw()
  love.graphics.print("Ventana: " .. WINDOWW .. " x " .. WINDOWH, 200, 300)
  love.graphics.print("Fondo:   " .. backgroundW .. " x " .. backgroundH, 200, 340)
  love.graphics.draw(background, 0, 0)
end

function love.update()
end

El orden es muy importante, cambiar una linea de sitio puede cambiar totalmente el comportamiento del programa o provocar errores difíciles de detectar.

Para concatenar textos en Lua utilizamos ..

Verás que por el momento la función update() está vacía.

Ejecuta y verás la siguiente ventana:

La ventana tiene 800 de ancho por 600 de alto y el fondo 320 x 256.

Con estos datos, podemos ajustar la imagen para que ocupe todo el fondo de la ventana.

Antes hemos usado love.graphics.draw(background, 0, 0) para mostrar la imagen de fondo. Donde background es la imagen y 0,0 las coordenadas donde empieza a dibujarse.

Si cambias los valores de 0,0 por ejemplo a 60,40 moverás la imagen:

Si bien, sirve de ejemplo y lo recordaremos más adelante, las coordenadas del fondo deben ser 0,0.

Al dibujar un objeto tenemos más opciones, podemos rotar el objeto y escalarlo tanto a lo ancho como a lo alto.

Cambia la linea:

love.graphics.draw(background, 0, 0)

Por esta otra:

love.graphics.draw(background, 0, 0, 0, 2, 2)

Si ejecutas verás que la imagen de fondo es mayor y cubre más la ventana. Eso es porque el parámetro 4 y 5 afectan al escalado y al poner 2,2 parámetros le hemos dicho que escale la imagen x2, tanto el ancho como el largo.

En este caso no es necesaria la rotación, dejamos el tercer valor a 0.

Puedes probar distintas combinaciones y ver que ocurre.

Sin embargo, que valores hay que poner para que se ajuste totalmente al fondo. Solo hay que dividir las dimensiones de la ventana por las de la imagen.

love.graphics.draw(background, 0, 0, 0, WINDOWW/backgroundW, WINDOWH/backgroundH)

Ya tenemos el fondo perfectamente ajustado a nuestra ventana!!!

Antes de terminar, ¿te has fijado que ahora no se ve el texto con las dimensiones de la ventana y la imagen?. Eso es porque hemos escrito y después pintado el fondo encima, por lo que el texto queda tapado.

Al dibujar los elementos de un videojuego, estos deben siempre pintarse de atrás a adelante, o de más lejano a mas cercano, o se taparan y ocultarán entre si.

El orden de las instrucciones es muy importante. Para ver el texto de nuevo, es necesario cambiar el orden de las lineas, primero pintar el fondo y después el texto:

function love.draw()  
  love.graphics.draw(background, 0, 0, 0, WINDOWW/backgroundW, WINDOWH/backgroundH)
  love.graphics.print("Ventana: " .. WINDOWW .. " x " .. WINDOWH, 200, 300)
  love.graphics.print("Fondo:   " .. backgroundW .. " x " .. backgroundH, 200, 340)  
end

Eso es todo, ya tenemos el fondo ajustado a la ventana, además todo lo aprendido sobre carga de imágenes, posicionamiento y dimensionamiento lo usaremos más adelante.

Próxima entrada… coordenadas y posicionamiento.

Puedes descargar el código fuente del tema aquí: altaruru_lec1_invaders

Como siempre, dudas y sugerencias serán bienvenidas!

Feliz código!

Deja tu comentario