Tras la creación del tutorial Uso de Sprites de nuestro amigo Tanos, que mediante una buena explicación nos explicó perfectamente como introducir Sprites en nuestros scripts LUA, pero en forma de 16 imágenes, no en la plantilla. A diferencia de éste, el que os presento a continuación va a utilizar una única imagen (la plantilla, creada con Sprite Maker) y usando un código más sencillo y reducido. Espero que os sirva tanto como el de nuestro querido coder :)

Breve explicación

El otro día me puse a indagar en LUA con sprites y me volví a leer el tutorial de nuestro coder, pero ví que (por comodidad y por lo que comentaba, por desconocimiento), Tanos había separado los Sprites de la plantilla y había dejado las 16 imágenes que la componen, por individual.

Intenté trabajarmelo e intentar usar la plantilla entera para sacar cada sprite desde una imagen, en vez de cargar 16. Gracias a los tutoriales que nos trajo ELeNDeR y viendo algunos comentarios y aportes (como el de pucelano en el tutorial original de Sprites) me puse a trabajar en ello.

Sólo quiero aclarar que parece haberse saltado por nuestros coders más experimentados, ya que ellos (Tanos, pipagerardo, carlosgs, etc.) saben de sobra cómo se hace ;) Esto va por los que os estais iniciando en LUA y quereis ampliar vuestros conocimientos.

Información

El comando que necesitamos principalmente es la de imprimir las imágenes en pantalla: screen:blit(x,y,imagen). Pero los argumentos de este comando no son sólo 3, sino que son más. Podemos incluir más argumentos, como en este caso que necesitamos: screen:blit(x,y,imagen, origenX, origenY, ancho, alto)

Explico: Los 3 primero argumentos sabemos para qué sirven, X e Y son las coordenadas donde imprimimos la imagen en pantalla e IMAGEN es la variable que tiene asignada la imagen que queremos imprimir. A partir de aquí los demás argumentos son opcionales.

Ahora vienen los argumentos que recortan la imagen. origenX y origenY son las coordenadas de la imagen donde comienza la sección que queremos usar. Y ancho y alto, es la anchura y altura de la sección. Para cargar Sprites, el ancho y alto siempre van a ser los mismos, porque cada imagen tienen la misma medida, lo único que varía son las coordenadas de origen. Si aún no se entiende, lo vereis más adelante, o sino probadlo vosotros mismos, que como mejor se aprende :P

Empezando

Preparando la plantilla

Empecemos preparando nuestra plantilla (previamente hecha con Sprite Maker). Tenemos que quitar ese fondo blanco (o el que hayais puesto) para que luego no aparezca. Yo he usado el Photoshop pero podeis usar otro editor de imágenes que haga el mismo resultado.

Abrimos nuestra imagen. Antes de hacer nada, copiamos toda la imagen en un nuevo documento, pero con el Contenido de Fondo: Transparente. Trabajaremos ahora en éste nuevo.

Seleccionamos la Herramienta Varita mágica. Tenemos que pinchar en el fondo de tal modo que cuando lo hagamos se seleccione entero, pero sin ninguna parte de nuestro personaje. Yo uso esta configuracion:

Cuando esté seleccionado lo borramos y veremos que el fondo es transparente. Por último, guardamos la imagen en formato .png y ya la podremos emplear para nuestro código.

Manos a la obra con el código

Para empezar meteremos nuestra plantilla de sprites en nuestro código, guardándola en una variable. Creamos una tabla para guardar las coordenadas del personaje, para que después podamos moverle por la pantalla.

También incluimos una función para imprimir nuestras imágenes, de momento sólo el sprite, pero en vuestros proyectos, al tener más, las meteis aquí, y así es más ordenado. ¡OJO! Debeis de imprimir las demás imágenes debajo del personaje, para que no lo tapen. Imprimimos a nuestro personaje.

Lo que expliqué antes lo hemos puesto en práctica. Se ponen las coordenadas X e Y, y la variable del personaje. El origenX e Y de la imagen están señalizados por dir.imgX/Y, una tabla que luego explicaré. El ancho y alto están puesto con 32 y 48 respectivamente. Ésto es porque cada sprite tiene esa altura y anchura.

Nota: La función de imprimir las imágenes se pone para que se entienda mejor la explicación, pero, por el momento, debe de ir debajo de lo que se vaya poniendo a continuación, ya que los argumentos que usamos en screen:blit() deben de aparecer SIEMPRE antes del comando.

pers = Image.load("Imagenes/pers.png")
 
coord = {x = 320, y = 20}
 
 
---------------
function impr()
 
    screen:blit(coord.x,coord.y,pers,dir.imgX,dir.imgY,32,48)
 
end 

Lo que ahora viene, quizá sea un poco complicado de entender ahora mismo, las tablas de dirección, pero cuando se acaba de hacer y se razona, lo veréis claro ;)

Creamos 4 tablas, cada una con las direcciones posibles de nuestro personaje. Dentro de cada una incluimos la variable del origenX e Y de cada dirección y otra variable, que hará que parezca que el muñeco se mueva, los pasos: imgX, imgY, pasos

Ej: Para arriba, el píxel de origenY en la plantilla es el 144 (porque de 196 px. que mide de altura, es la última sección de las cuatro [196 / 4 = 48; Primera sección: 48 x 0 = 0; Segunda sección: 48 x 1 = 48, Tercera sección: 48 x 2 = 96; Última sección: 48 x 3 = 144]).

Como veis, sólo cambiaría la primera sección de imagen de cada dirección, porque sólo cambiamos la variable imgY; dejamos imgX en 0, para que empiece siempre desde la primera sección. Más adelante cambiaremos el origenX para que se mueva nuestro personaje.

Luego ponemos una variable que sirva para especificar cada tabla, así podemos cambiar entre ellas fácilmente.

Nota: La función impr() sigue estando debajo.

arriba = {imgX = 0, imgY = 144, pasos = 0}
abajo = {imgX = 0, imgY = 0, pasos = 0}
izquierda = {imgX = 0, imgY = 48, pasos = 0}
derecha = {imgX = 0, imgY = 96, pasos = 0}
dir = arriba
 
--------------------------------------
function impr() 

Ahora empezamos a escribir, debajo de la función impr(), las demás funciones.

Primero la de movimiento de nuestro personaje. De explicación aquí muy poca, identificamos pad para los controles, y así no lo tenemos que hacer después. En cada dirección cambiamos dir según la que sea. Las siguientes son la velocidad del personaje y los "pasos" que anda, podeis cambiar el número según vuestros gustos.

function mov()
pad = Controls.read()
 
    if pad:up() then
    dir = arriba
    coord.y = coord.y - 1.5
    dir.pasos = dir.pasos + 1.5
    elseif pad:down() then
    dir = abajo
    coord.y = coord.y + 1.5
    dir.pasos = dir.pasos + 1.5
    elseif pad:left() then
    dir = izquierda
    coord.x = coord.x - 1.5
    dir.pasos = dir.pasos + 1.5
    elseif pad:right() then
    dir = derecha
    coord.x = coord.x + 1.5
    dir.pasos = dir.pasos + 1.5
    end
 
end 

Ahora vamos con la función pasos. Esta función se encarga de "contar los pasos" que da nuestro muñeco (No literalmente, es un forma de contador) y así conseguiremos que se vayan cambiando las imagenes de cada dirección para dar un efecto de movimiento

.

Cuando el personaje dé 10 pasos, el origenX de la imagen se irá cambiando y hará que cambiemos de sprite. Cuando cambie a la última imagen, volveremos al principio con el origenX = 0

function pasos()
 
    if dir.pasos >= 0 and dir.pasos < 10 then
    dir.imgX = 0
    end
 
    if dir.pasos >= 10 and dir.pasos < 20 then
    dir.imgX = 32
    end
 
    if dir.pasos >= 20 and dir.pasos < 30 then
    dir.imgX = 64
    end
 
    if dir.pasos >= 30 and dir.pasos < 40 then
    dir.imgX = 96
    end
 
    if dir.pasos > 40 then
    dir.pasos = 0
    end
 
end

En principio ya estaría, sólo añado una función para que no nos salgamos de la pantalla, la función bordes, que delimita el espacio para que el personaje no siga avanzando.

function bordes()
ancho = 480 - 32
alto = 272 - 48
 
    if coord.x < 0 then coord.x = 0
    elseif coord.x > ancho then coord.x = ancho
    elseif coord.y < 0 then coord.y = 0
    elseif coord.y > alto then coord.y = alto
    end
 
end 

Ahora solo nos queda crear el bucle y meter las funciones.

while true do
screen:clear()
impr()
mov()
pasos()
bordes()
screen.flip()
screen.waitVblankStart()
end

Resultado

Y ya estaría listo. Guardad todo el progreso y ejecutad vuestro script. A ver si os gusta el resultado :)

Espero que se haya entendido bien, si hay alguna duda, por favor, no dudeis en preguntarla :)