Programando con Love 2D – Mostrar imagen centrada

Mostrar una imagen con Love 2D en pantalla es sencillo (jpg, png, …). La función que nos permite hacer esto nos permite indicar la posición x,y en la que queremos que se muestre. Esa posición es la esquina superior izquierda de la imagen..

De modo que si quisiéramos colocar una imagen en pantalla lo más a la izquierda posible y lo más arriba posible su posición sería x = 0 y = 0.

Para poder centrar una imagen primero necesitamos conocer el alto y ancho de la pantalla. Es sobre eso que vamos a centrarlo. Al mismo tiempo hemos de conocer el alto y ancho de la imagen que vamos a colocar.

Por cierto, este es otro post de una serie llamada “Programando con Love 2D”. Puedes ver otros pinchando aquí.

Veamos un ejemplo de código escrito en LUA utilizando el framework Love 2D para creación de juegos:

function love.load()
        love.window.setFullscreen(true, "desktop") -- set the window to fullscreen

        screen = {}
        screen.w, screen.h = love.graphics.getDimensions()
        screen.wc = screen.w / 2 -- x center screen
        screen.hc = screen.h / 2 -- y center screen

        fondo = {}
        fondo.img = love.graphics.newImage("fondo.jpg")
        fondo.w, fondo.h = fondo.img:getDimensions()
        fondo.wc = fondo.w / 2 -- x center fondo.img
        fondo.hc = fondo.h / 2 -- y center fondo.img
end

function love.draw()
        love.graphics.draw(fondo.img, (screen.wc-fondo.wc), (screen.hc-fondo.hc))
end

Eso mostrará algo así como esto:

Hemos de saber que tenemos que tener un directorio llamado por ejemplo “shit” y dentro de ese directorio el código irá en una archivo llamado main.lua y tendremos que tener al mismo tiempo en ese directorio una imagen llamada fondo.jpg

fondo.jpg puede ser por ejemplo esta imagen:

Y evidentemente para ejecutarlo una vez dentro del directorio podemos hacerlo así:

$ love .

Y disponer de love en el sistema. Para compilar la última versión puedes seguir los pasos indicados en el post: Compilar Love 0.10.2 en Debian 9

Vamos a fijarnos bien en la función que hemos usado (la de love.graphics.draw):

function love.draw()
        love.graphics.draw(fondo.img, (screen.wc-fondo.wc), (screen.hc-fondo.hc))
end

Le hemos indicado que muestre fondo.img y en vez de darle una coordenada a mano hemos puesto el valor de una resta tanto para x como para y.

Hemos encontrado el centro de la pantalla y el centro de la imagen en el eje x y en el eje y. Eso lo hemos realizado al inicio para tener esos valores en variables.

Para centrarlo simplemente se hace una resta de la mitad del ancho de la pantalla menos la mitad del ancho de la imagen. Lo mismo para el alto.

Si deseas añadirle texto y sonido puedes mirarte este otro post: https://mierda.tv/2017/12/19/love-reproducir-ogg-y-mostrar-texto-con-una-tipografia-ttf/

Deja un comentario