1

Programar botones con Love2D y Lua

portada_botones¡Buenas, homo fabers! Hoy voy a explicar una forma muy simple para programar botones con Love2D y Lua. Vamos a escribir un fichero llamado “button.lua” que gestionará todos los botones. Se encargará de crearlos, dibujarlos y ver si el usuario pulsa alguno. Y lo mejor: este fichero se puede usar en cualquier proyecto de juego en que estéis trabajando, ya sea para el menú, la interfície del jugador…

Y como hoy la cosa va de videojuegos, en vez de música clásica voy a poner la banda sonora de Skyrim para variar. ¿Preparados?

Let’s get to it.

1- Anatomía de un botón

Vamos a crear una tabla que contendrá todos los botones de este ejemplo. Cada botón tendrá varios campos.

Primero: una posición x e y dónde se creará el botón. Después, un ancho y una altura, que nos ayudará a saber si el cursor está dentro de el botón o no. Como los botones serán imágenes, el ancho y la altura serán los mismos que la imagen.

Por último, necesitamos distinguir los botones dentro del programa. Todos los botones tendrán un campo “texto” que servirá como identificador del botón. Por ejemplo “start” o “quit“. Gracias a este texto, el programa sabrá qué debe hacer al pulsar un botón determinado.

robologs_anatomia_boton

2- button.lua

Escribiremos tres funciones. La primera es una función para crear nuevos botones, a la que llamaremos… hmmm… ¿crear_boton?

Esta función recibirá cuatro parámetros: la posición x e y del botón, su texto y su imagen. Entonces calculará la dimensión máxima de la imagen y creará un nuevo botón dentro de la tabla de botones, con todos sus campos.


lista_botones = {} –En esta tabla vamos a guardar todos los botones: coordenadas, imagen

function crear_boton(x,y,texto, imagen) –Creamos un boton con todas sus caracteristicas y lo guardamos en ‘lista_botones’
    –[[
        Todas las caracteristicas del boton son:

        x: la posicion inicial en el eje x
        y: lo mismo, pero en el eje y
        x_max: el ancho del boton. Sera igual al de la imagen.
        y_max: la altura del boton. Tambien sera igual a la de la imagen.
        texto: un texto para identificar el boton. Por ejemplo [boton1], [start] o [salir]
        imagen: la imagen del boton
    –]]

    table.insert(lista_botones, {x = x, y = y, x_max = imagen:getWidth(), y_max = imagen:getHeight() , texto = texto, imagen = imagen})
end

La segunda función (dibujar_botones) sirve para mostrar los botones en pantalla. Va mirando cada boton de la tabla y dibuja su imagen en las coordenadas x, y que tiene definidas.

function dibujar_botones()
    --Recorremos 'lista_botones' y dibujamos cada imagen
    for i,j in ipairs(lista_botones) do
            love.graphics.draw(j.imagen, j.x, j.y)
    end
end

La  última función, que llamaremos seleccionar_boton, sirve para ver si el cursor está sobre alguno de los botones. Recibe como parámetros la posición del cursor y si está sobre un botón, devuelve su texto.


function seleccionar_boton(x,y)
    --Esta funcion recibe como parametro la posicion x,y del raton
    --y busca si el cursor esta dentro de algun boton de la lista.
    --Si se da el caso, devuelve el texto del boton.
    for i,j in ipairs(lista_botones) do
        if x > j.x and x < j.x+j.x_max and y > j.y and y < j.y + j.y_max then
            return j.texto
        end
    end
end

Juntamos todas las funciones en un solo fichero y lo guardamos con el nombre ‘button.lua’ . Debería quedar algo así:

--[[
   button.lua
   Programa en lua para dibujar botones.
   
   Por Glare,
   www.robologs.net

--]]

lista_botones = {} --En esta tabla vamos a guardar todos los botones: coordenadas, imagen

function crear_boton(x,y,texto, imagen) --Creamos un boton con todas sus caracteristicas y lo guardamos en 'lista_botones'
    --[[
        Todas las caracteristicas del boton son:
        
        x: la posicion inicial en el eje x
        y: lo mismo, pero en el eje y
        x_max: el ancho del boton. Sera igual al de la imagen.
        y_max: la altura del boton. Tambien sera igual a la de la imagen.
        texto: un texto para identificar el boton. Por ejemplo [boton1], [start] o [salir]
        imagen: la imagen del boton
    --]]


    table.insert(lista_botones, {x = x, y = y, x_max = imagen:getWidth(), y_max = imagen:getHeight() , texto = texto, imagen = imagen})
end

function dibujar_botones()
    --Recorremos 'lista_botones' y dibujamos cada imagen
    for i,j in ipairs(lista_botones) do
            love.graphics.draw(j.imagen, j.x, j.y)
    end
end

function seleccionar_boton(x,y)
    --Esta funcion recibe como parametro la posicion x,y del raton
    --y busca si el cursor esta dentro de algun boton de la lista.
    --Si se da el caso, devuelve el texto del boton.
    for i,j in ipairs(lista_botones) do
        if x > j.x and x < j.x+j.x_max and y > j.y and y < j.y + j.y_max then
            return j.texto
        end
    end
end

Ya estamos a mitad de camino.

3- main.lua

Primero vamos a importar el programa de los botones, las imágenes y crearemos los botones dentro de love.load(). Las imágenes para los botones están debajo. Guardadlas como “boton1.png”, “boton2.png” y “boton3.png” dentro de la misma carpeta donde hay el fichero button.lua y main.lua.

boton1boton2boton3


require "button" --Importamos el fichero 'button.lua'

--Cargamos las imagenes de los tres botones
boton1_img = love.graphics.newImage("boton1.png")
boton2_img = love.graphics.newImage("boton2.png")
boton3_img = love.graphics.newImage("boton3.png")


function love.load()

    --Creamos tres botones: boton 1, boton 2 y boton 3
    crear_boton(100,20,"boton1", boton1_img)
    crear_boton(100,220,"boton2", boton2_img)
    crear_boton(100,420,"boton3", boton3_img)

end

Esta vez dejaremos el love.update() en blanco.


function love.update(dt)

end

Dentro de love.draw() llamaremos la función de dibujar botones.


function love.draw()

    dibujar_botones() --Hay que dibujar los botones

end

Si habéis tocado un poco Love2D sabéis que hay una función llamada love.mousepressed() que se activa al pulsar un botón del ratón. Dentro de esta función vamos a llamar seleccionar_boton(), que hemos definido antes.

El texto del botón seleccionado se guardará dentro de una variable que llamaremos “boton”. Después escribiremos el contenido de la variable en la consola.


function love.mousepressed(x, y)
    
    boton = seleccionar_boton(x,y) --Guardamos el texto del boton pulsado dentro de la variable 'boton'

    print(boton) --Escribimos el texto en la consola

end

captura_love2d

Esta última función puede cambiarse para que haga cosas concretas al pulsar los distintos botones. Vamos a hacer que al pulsar el boton 1 y 2 escriba algo, y con el tercero cierre el juego. Borramos todo el love.mousepressed y en su lugar ponemos:


function love.mousepressed(x, y)
    
    boton = seleccionar_boton(x,y) --Guardamos el texto del boton pulsado dentro de la variable 'boton'

    if boton == "boton1" then
        print("Boton 1")

    else if boton == "boton2" then
        print("Cosa veredes amigo sancho que faran fablar las piedras")

    else if boton == "boton3" then
        print("Saliendo...")
        love.event.quit( )
    else

end

El código completo con esta última modificación quedaría así:


require "button" --Importamos el fichero 'button.lua'

--Cargamos las imagenes de los tres botones
boton1_img = love.graphics.newImage("boton1.png")
boton2_img = love.graphics.newImage("boton2.png")
boton3_img = love.graphics.newImage("boton3.png")


function love.load()

    --Creamos tres botones: boton 1, boton 2 y boton 3
    crear_boton(100,20,"boton1", boton1_img)
    crear_boton(100,220,"boton2", boton2_img)
    crear_boton(100,420,"boton3", boton3_img)

end


function love.update(dt)

end


function love.draw()

    dibujar_botones() --Hay que dibujar los botones

end

function love.mousepressed(x, y)
    
    boton = seleccionar_boton(x,y) --Guardamos el texto del boton pulsado dentro de la variable 'boton'

    if boton == "boton1" then
        print("Boton 1")

    else if boton == "boton2" then
        print("Cosa veredes amigo sancho que faran fablar las piedras")

    else if boton == "boton3" then
        print("Saliendo...")
        love.event.quit( )
    else

end

Hemos terminado. ¿Qué os ha parecido? ¿Os ha gustado? Escribid en los comentarios y planteadme vuestras dudas. O dejadme un “gracias” y contadme sobre vuestro último proyecto con Love2D 😉

 

Gl4r3

Brillante, luminosa y cegadora a veces, Glare es tan artista como técnica. Le encanta dar rienda suelta a sus módulos de imaginación y desdibujar los ya de por si delgados límites que separan el mundo de la electrónica y el arte. Su mayor creación hasta la fecha es un instrumento capaz de convertir los colores y la luz en música. Cuándo sus circuitos no están trabajando en una nueva obra electrónica, le gusta dedicar sus ciclos a la lectura o a documentar sus invenciones para beneficio de los humanos. Sus artilugios favoritos son aquellos que combinan una funcionalidad práctica con un diseño elegante y artístico.

Antes de comentar, por favor, lee las Normas

1 Comentario en "Programar botones con Love2D y Lua"

avatar
Ordenar por:   más nuevos primero | más antiguos primero
Anthony
Humano

muchas gracias por crear este tutorial me ayudo mucho para separar la programación en otros archivos y tener mas ordenado mi código.

wpDiscuz