Ir al contenido principal

Quiéres estos diseños en tu ropa o en diferentes productos?

Publicidad

Cargando imágenes y audio con Love2D


Un saludo a todos, en una entrega anterior di una introducción básica al uso de Love2D y hoy continuaré con esta serie dándoles a conocer como cargar las imágenes y audios para nuestros juegos. En el ejemplo anterior creamos un rectángulo que se movía alrededor de la pantalla y que cuando alcanzara los bordes de la ventana cambiaba su dirección, y en esta oportunidad usaremos ese mismo ejemplo para explicar el uso de las imágenes y el audio.

Si estás interesado en aprender el uso de este motor de juegos debo suponer que ya habrás visto un buen rato la documentación de Love2D, entonces observaste que está compuesta de varios módulos y que cada uno tiene una cantidad de funciones que nos permiten controlar todos los aspectos de nuestro juego. El módulo que necesitamos es love.graphics y dentro de este módulo encontraremos la función love.graphics.newImage(source) la cual nos permite crear una imagen y guardarla en la variable que queramos.

Ejemplo:

nuevaImagen = love.graphics.newImage("recursos/imagen.png")

De esta manera guardamos nuestra imagen en la variable "nuevaimagen", ¿entonces como usaremos el ejemplo anterior para esta práctica?, pues en vez de dibujar un cuadrado vamos a dibujar nuestra imagen, veamos como quedará este nuevo código.

Anteriormente creamos unas variables dentro de la función love.load() para controlar el rectángulo, en esta ocasión haremos lo mismo, pero la diferencia será que no indicaremos el tamaño de la imagen, sino que la obtendremos de la imagen que carguemos, veamos esto.

Como obtener el ancho y alto de una imagen en Love2D

En Love2D como usamos el lenguaje Lua para escribir nuestro código, la manera de acceder a las variables internas de un objeto, en este caso una imagen, debemos usar el símbolo ":" y seguido el nombre de la función, es decir que el ancho y alto respectivamente se obtienen de esta manera. imagen:getWidth(), imagen:getHeight().
 
El nuevo código nos queda así.

function love.load()
    imagen = love.graphics.newImage("recursos/imagen.png")
    imgX = 0
    imgY = 0
    imgW = imagen:getWidth()
    imgH = imagen:getHeight()
    imgVX =50
    imgVY =50
    scrW = love.graphics.getWidth()
    scrH = love.graphics.getHeight()
end
 
Como ves, creamos la imagen, luego iniciamos su posición en 0 tanto en x e y. Luego obtenemos las dimensiones de la imagen y las guardamos en imgW, imgH, la velocidad inicial quedara igual en 50 como en el ejemplo anterior y obtenemos el tamaño de nuestra ventana scrW, scrH.
 
La imagen que usaré será la siguiente, y estará almacenada en la carpeta "recursos".


Así quedará la estructura de la carpeta del juego.


Ahora la lógica de la función love.update(dt) quedará igual que en la vez anterior, pero solo cambiaremos el nombre de las variables por las nuevas.

function love.update(dt)
    if imgX < 0 or (imgX + imgW) > scrW then
        imgVX = imgVX * (-1)
    end
    if imgY < 0 or (imgY + imgH) > scrH then
        imgVY = imgVY * (-1)
    end
    imgX = imgX + imgVX * dt
    imgY = imgY + imgVY * dt
end

Si no comprendes el uso de la variable dt (delta time), puedes verla en la entrada anterior donde doy una explicación de su uso.

Ahora la función love.draw() quedará tan simple como la anterior, solo que ahora usaremos la función love.graphics.draw(imagen,x,y) para mostrar la imagen en la pantalla. La función para dibujar nuestra imagen requiere un objeto dibujable (drawable), en este caso nuestra imagen y sus coordenadas x e y. también posee otros parámetros, pero por los momentos usaremos estos tres.

function love.draw()
    love.graphics.draw(imagen,imgX,imgY)
end

Ahora veamos el código en acción.
 

Bastante simple verdad?, pues ahora vamos a agregarle un pequeño audio que se reproduzca cuando la imagen alcance los límites de la ventana.

Agregando sonido a nuestro juego con Love2D

El proceso para agregar sonido a nuestro juego es creando las fuentes de sonido que necesitemos y guardarlas en variables que luego serán usadas al momento de reproducir nuestro sonido. En la documentación de Love2D tenemos la función love.audio.newSource(direccionAudio,tipo), la dirección es el lugar donde tengamos guardado nuestro archivo de audio y el tipo puede ser "stream" o "static", "stream" decodificara el audio por partes cuando sea necesario, mientras que "static" decodificara todo el audio y será guardado en memoria, lógicamente usaremos "static" para audios muy cortos porque hay que tener en cuenta que un audio de 3 minutos decodificado serian alrededor de 30 megabytes. Y usaremos "stream" para audios largos como la música de fondo de nuestro juego. Conociendo esto vamos a escribir el código que nos falta.

En love.load() agregaremos la siguiente línea donde deseemos, podemos colocarla al final, recuerda colocar el archivo de audio que utilices en la carpeta de recursos.

audio = love.audio.newSource("recursos/audio","static")
audio:setVolume(0.5)

En las líneas de arriba creamos el audio y ajustamos su volume a la mitad 0.5, siendo el valor máximo por defecto 1. El archivo de audio que usaré es muy corto por lo que el tipo "static" es el más apropiado.

Y ahora para reproducir nuestro audio usaremos la función love.audio.play(audio). Una consideración que hay que tomar es la siguiente, cuando en nuestro juego tengamos que reproducir muy continuamente el mismo audio, tanto así que se sobreponen tendremos momentos en que no tendremos sonido porque el anterior no ha terminado aun, así que lo más correcto es crear una nueva fuente de sonido y reproducirla. la mejor forma de hacerlo es usar la función clone() de nuestro audio así obtendremos una copia de nuestra fuente de sonido y la podremos reproducir si tener problemas de audio perdido por lo anteriormente dicho. Tomando esto en cuenta escribiremos la función love.update(dt) asi.

function love.update(dt)
    if imgX < 0 or (imgX + imgW) > scrW then
        imgVX = imgVX * (-1)
        love.audio.play(audio:clone())
    end
    if imgY < 0 or (imgY + imgH) > scrH then
        imgVY = imgVY * (-1)
        love.audio.play(audio:clone())
    end
    imgX = imgX + imgVX * dt
    imgY = imgY + imgVY * dt
end
 
Como observas hacemos una copia de la fuente de sonido y lo pasamos a la función play(), y este es el resultado.
 
 

Eso es todo por ahora, espero haya sido bastante clara la explicación y hasta la próxima. 

Comentarios