Todos nuestros programas han sido sólo aplicaciones de texto, pero en este tutorial nos introduciremos en el uso de imágenes y algunos comandos que podemos usar para obtener información sobre ellas. Haremos un programa que empezara a parecer un juego. No hará nada emocionante pero nos servirá para el propósito de este tutorial: las imágenes. Hay muchos más comandos de imágenes disponibles que los que vamos a aprender aquí. Aprenderemos la mayoría de ellos en posteriores tutoriales. Si quieres puedes mirarlos en la documentación del LuaPlayer. Nuestro producto final incluirá un personaje que podrá moverse por la pantalla, pero que no podrá traspasar sus límites.Usando imágenes en Lua.

Lo primero que deberías hacer es guardar las imágenes que vamos a usar en la carpeta en la que estamos trabajando. LuaPlayer puede cargar imágenes PNG y JPEG. La mayor parte de las veces yo uso PNG, sobre todo cuando necesitas usar transparencia. Ahora guarda estas imágenes.

Descomprime esas imágenes en la carpeta en la que estás trabajando. Deberías tener tres imágenes:

player.png
grass.png
flower.png

Cargando imágenes:

Para usar una imagen en Lua primero tienes que cargarla en tu programa, en una variable (o tabla). Puedes hacerlo al comienzo de tu programa o después, dependiendo de cuando se necesite la imagen. Pre-cargaremos nuestras imágenes cerca del comiendo de nuestro código, un poco más abajo del principio. Ej:

hierba = Image.load("grass.png")

Esto cargará la imagen grass.png en la variable hierba. Para cargar la imagen tendrías que tenerla en la carpeta de nuestro proyecto principal, el que contiene nuestro fichero script. Si tuvieras la imagen en una subcarpeta, por ejemplo, Imágenes, entonces usarías Imagenes/grass.png en vez de grass.png. Asegúrate de escribes el texto exactamente igual, con la I mayúsculas en Image y la l (ele) en minúsculas en load.

Mostrando imágenes:

Mostrar una imagen en pantalla no es tan difícil como cargarla. Este es el comando completo:

screen:blit(x, y, Origen_imagen, [origen_x, origen_y, ancho, alto], [alpha = verdadero])

Hay mucha información que rellenar aquí. No siempre necesitarás todos esos argumentos y puedes omitir los que están entre corchetes si no los necesitas. Expliquémoslos. El código empieza con screen:blit, que es el comando que dice que se muestre la imagen por pantalla. x e y son las mismas que en el comando print, son las coordenadas donde la imagen será mostrada (la coordenada 0,0 es la esquina superior izquierda de la pantalla de la PsP y la coordenada 480,272 es la esquina inferior derecha). Origen_imagen es la imagen que será mostrada. Por ejemplo, arriba hemos cargado una imagen llamada hierba, así que podemos usar hierba como origen. [origen_x, origen_y, ancho, alto] son opcionales. Son usadas para cargar una sección de una imagen. origen_x y origen_y son las coordenadas de la imagen donde la sección comienza. No son coordenadas de la imagen completa, sino de la sección. ancho y alto son la anchura y altura del trozo de imagen que vamos a usar de la imagen principal. La última parte del comando es el argumento alpha. Este es usado para hacer transparencia en imágenes. Verdadero hará la imagen transparente (lo que significa que el fondo se verá a través sin color) y falso mostrará la imagen tal como es. No usaremos todos los argumentos en este tutorial.

Obteniendo el tamaño de la imagen:

Obtener el tamaño de la imagen que has cargado puede ser muy útil. Hay dos comandos para hacerlo, uno para la anchura y otro para la altura de la imagen. Son:

imagen:width()
imagen:height()

Para usarlos reemplaza la palabra imagen por la de la imagen de la que quieres obtener su anchura y altura. Ej:

hierba:width()
hierba:height()

Continuemos y empecemos nuestro programa. Lo primero que haremos será cargar nuestras imágenes en nuestro programa. Crea un nuevo archivo y escribe este código:

hierba = Image.load("grass.png")
jugador = Image.load("player.png")
flor = Image.load("flower.png")

Con esto hemos cargado nuestras tres imágenes en nuestro programa. Ahora vamos a usar los comandos del tamaño de la imagen. Pon el siguiente código y luego lo explicaré. Es mucho mejor que escribas el código en vez de copiarlo. Memorizarás los comandos mejor.

anchoPantalla = 480 - jugador:width()
altoPantalla = 272 - jugador:width()

Este fragmento de código nos ayudará a parar al jugador cuando alcance los límites de la pantalla. Sabemos que 480 es el ancho de la pantalla de la PsP. Pero si ponemos el límite de la pantalla a 480. nuestro personaje saldrá de la pantalla por 32 píxeles, puesto que nuestro personaje tiene 32 píxeles de ancho. jugador:width() es la anchura de la imagen jugador, la cual es 32 píxeles. Esa cantidad es restada del ancho y del alto de la pantalla para parar la imagen en los límites de la pantalla.

Ahora vamos a crear una tabla para almacenar la información del jugador. La única información que vamos a necesitar para este ejemplo será la posición x e y en la pantalla. Mete este código:

Jugador = { }
Jugador[1] = { x = 200, y = 50 }

Esto almacenará la posición en pantalla de nuestro jugador. Empezaremos con nuestro jugador en la posición x = 200 e y = 50. Ahora empezaremos nuestro bucle principal. Mete este código:

while true do
pad = Controls.read()
screen:clear()

Ahora en la siguiente sección de código introduciremos un nuevo comando de bucle, el bucle for. Te daré un ejemplo para que veas como funciona. NO lo uses en tu código. Este ejemplo imprimirá las armas de cinco jugadores por pantalla usando sólo un pequeño bucle.

for a = 1,5 do
screen:print(10, 10, Jugador[a].arma, verde)
end

Para usar el bucle for darás a una variable un valor inicial y un valor final. En este caso for a = 1,5 do. Hemos creado un bucle que da a la variable a un valor inicial de 1 y un valor final de 5. Dentro del bucle estamos imprimiendo el arma del jugador por pantalla. La última línea es la sentencia end, la cual se usa para terminar un bucle. Este bucle se repetirá hasta que el valor final de a se haya alcanzado y el bucle terminará entonces. La primera vez el bucle se ejecutará con el valor de a igual a 1. La siguiente vez a valdrá 2, luego 3, después 4 y al final 5. Esto rápidamente imprimirá las armas del jugador 1 al 5 en pantalla. Aunque, para hacerlo realmente necesitarías cambiar las coordenadas de pantalla del comando print porque sino se imprimirían unas encimas de otras. Pero esto muestra el uso del comando for. Puedes usar sentencias if dentro de los bucles for si fuera necesario.

Usaremos este método para mostrar la imagen hierba por toda la pantalla. Pon el siguiente código y después lo explicaré.

for a = 0, 14 do
for b = 0,8 do
screen:blit(32 * a, 32 * b, hierba)
end
end

Es un bucle for dentro de otro bucle for. Esto mostrará la imagen hierba en toda la pantalla. Mostrará 15 imágenes horizontalmente y 9 verticalmente. Fíjate que empezamos por cero en vez de uno, así que las imágenes serán mostradas junto al límite izquierdo de la pantalla.

Pongamos unas pocas imágenes más:

screen:blit(100,100,flor)
screen:blit(300,220,flor)
screen:blit(Jugador[1].x,Jugador[1].y,jugador)

Esto simplemente mostrará dos flores en pantalla y nuestro jugador. Cuando usemos nuestras teclas de movimiento rápidamente cambiarán las coordenadas del jugador en cada bucle si estamos presionando el botón. Al usar el comando blit la imagen de nuestro jugador será automáticamente mostrada en la zona correcta de la pantalla.

Ahora añadamos código para detectar si estamos presionando las teclas de dirección. Mete esto:

if pad:left() and Jugador[1].x > 0 then
Jugador[1].x = Jugador[1].x - 2
end
 
if pad:right() and Jugador[1].x < anchoPantalla then
Jugador[1].x = Jugador[1].x + 2
end
 
if pad:up() and Jugador[1].y > 0 then
Jugador[1].y = Jugador[1].y - 2
end
 
if pad:down() and Jugador[1].y < altoPantalla then
Jugador[1].y = Jugador[1].y + 2
end

Este código comprobará si estamos presionando los botones arriba, abajo, izquierda o derecha. Usando la sentencia and también comprobamos que no se salga de los límites de la pantalla. Como la coordenada superior y la coordenada más a la izquierda son cero, podemos ver con facilidad si nuestra posición es mayor que cero. Para los otros límites usamos anchoPantalla para la derecha y altoPantalla para el límite inferior. Hemos definido esas variables antes. Si nuestra posición pasa la comprobación del if entonces la coordenada x o la y de nuestro jugador será aumentada o disminuida en 2. Cada vez que el bucle se ejecute mostrará la imagen del jugador en la nueva posición.

Finalmente, acabemos nuestro bucle. Usa este código:

screen.waitVblankStart()
screen.flip()
end

Guarda el trabajo y lánzalo. Usa las teclas de dirección para mover la imagen por la pantalla. No te será permitido traspasar los límites de la pantalla.