¿Alguna vez te han dado ganas de programar un RPG?, porque a mi sí. Los Sprites son imagenes que simulan una animación. En el desarrollo de mi nuevo proyecto he logrado hacer animaciones de mi personaje caminando por pantalla. Por el momento es muy primitivo, pero vale la pena compartir este conocimiento con todos los interesados en Lua. Si te interesa mover sprites, sin usar timers, sigue leyendo.

Antes que nada quiero agradecer a Akabane87, creador de Sprite Maker. Las imágenes usadas en el programa de ejemplo son nativas de su magnifica aplicación.

Obtención de Imágenes

En mi caso las imágenes las obtuve de la aplicación mencionada arriba, aunque puedes crear tus propios Sprites, con Photoshop, por ejemplo (O si prefieres con Paint xD). Existen distintas formas de Sprites, hay plantillas que incluyen todas las imágenes necesarias, como las generadas con Sprite Maker o puedes ser imágenes separadas.

Desconozco si Lua es capaz de cargar los tipos de Sprites que vienen en forma de plantilla, por eso recorté los 16 movimientos de la plantilla de Sprite Maker, dejándolos cada uno en una imágen PNG.

Nota: Lua es capaz de cargar Sprites en plantilla. Si quereis saber cómo, pasaos por aquí. 

Los personajes vienen en la raíz del programa de ejemplo. Podrás apreciar que vienen nombrados siguiendo cierto patrón:

• Asigno números para indicar que movimiento va primero, secuencia del 1 al 4.
• Todas las imágenes cuentan con una terminación, siendo "d" para las imágenes orientadas a la derecha, "i" para la izquierda, "a" para abajo, "f" representa "Frente".

Esto es por cuestiones prácticas de organización.

Ya conociendo como organizo y obtengo sprites puedo proceder a explicar el meollo del asunto: el código.

Código

Pido de favor, que si vas a usar mi código para una creación tuya, no me robes el crédito xD, me basta con un pequeño "saludo" en los créditos jeje.

Analizemos la primera parte del Script (Ubicado en la carpeta System del programa de ejemplo)

s1f=Image.load("./1f.png")
s2f=Image.load("./2f.png")
s3f=Image.load("./3f.png")
s4f=Image.load("./4f.png")
 
s1d=Image.load("./1d.png")
s2d=Image.load("./2d.png")
s3d=Image.load("./3d.png")
s4d=Image.load("./4d.png")
 
s1i=Image.load("./1i.png")
s2i=Image.load("./2i.png")
s3i=Image.load("./3i.png")
s4i=Image.load("./4i.png")
 
s1a=Image.load("./1a.png")
s2a=Image.load("./2a.png")
s3a=Image.load("./3a.png")
s4a=Image.load("./4a.png") 

En esta parte no se hace más que cargar imágenes, como ves sigo el mismo patrón de las imagenes con las variables. Sólo que con el prefijo "s" que podemos interpretar como "sprite"

S={}
S[1]={x=100,y=100}
sprite=s1f
pasosd=0
pasosi=0
pasosf=0
pasosa=0

Después creamos un tabla, esta es imporatante, ya que podremos mover al personaje a través de sus variables. Ojo: Mover el personaje, no cambiar las imágenes para simular la animación.

Después creamos 5 variables:

sprite=s1f Esta variable es la más importante, es la que mostraremos en pantalla, con ayuda de una función, su valor cambiará para mostrar diferentes imágenes en diferentes situaciones. Tiene asignado el valor "s1f", que es una imágen, regresa y mira los nombres de las imágenes.

pasosd=0 Esta variable contará, digamos, los pixeles que pasan por el personaje. Así podremos establecer que si se pasan 10 pixeles a la derecha (d) cambie de imagen. Lo mismo sucede con pasosi, pasosf y pasosa.

function mov()
if pad:right() then
S[1].x = S[1].x +2
pasosd = pasosd + 1
end
 
if pad:left() then
S[1].x = S[1].x -2
pasosi = pasosi + 1
end
 
if pad:up() then
S[1].y = S[1].y -2
pasosa = pasosa + 1
end
 
if pad:down() then
S[1].y = S[1].y +2
pasosf = pasosf + 1
end
end

Otra función importante. Establece que si, se presiona el pad digital a X dirección, la variable x de la imagen se incrementará o se disminuirá, sólo moverá la imagen por la pantalla. Y se sumará 1 la variable "pasosX", si releemos arriba nos enteraremos por qué se suma 1 a la variable.

function sprd()
if pasosd >= 0 and pasosd < 10 and pad:right() then
sprite=s1d
end
if pasosd >= 10 and pasosd < 20 and pad:right() then
sprite=s2d
end
if pasosd >= 20 and pasosd < 30 and pad:right() then
sprite=s3d
end
if pasosd >= 30 and pasosd < 40 and pad:right() then
sprite=s4d
end
if pasosd >= 40 then
pasosd=0
end
end

Esta función cambiará la imagen si se cumplen ciertas condiciones, esto dará origen a la animación. Si "pasosd" es mayor o igual a 0 pero menor a 10 y se presiona el pad a la derecha, la imagen almacenada en "sprite" cambiará. Este proceso se repite con diferentes posiciones e imagenes hasta que "pasosd" llegue a 40, entonces el contador se reiniciará, repitiendo el proceso infinitamente.

Las siguientes funciones son idénticas a la anterior, no vale la pena explicarlas, basta con que las leeas bien, y pongas mucha atención.

function spri()
if pasosi >= 0 and pasosi < 10 and pad:left() then
sprite=s1i
end
if pasosi >= 10 and pasosi < 20 and pad:left() then
sprite=s2i
end
if pasosi >= 20 and pasosi < 30 and pad:left() then
sprite=s3i
end
if pasosi >= 30 and pasosi < 40 and pad:left() then
sprite=s4i
end
if pasosi >= 40 then
pasosi=0
end
end

function sprf()
if pasosf >= 0 and pasosf < 10 and pad:down() then
sprite=s1f
end
if pasosf >= 10 and pasosf < 20 and pad:down() then
sprite=s2f
end
if pasosf >= 20 and pasosf < 30 and pad:down() then
sprite=s3f
end
if pasosf >= 30 and pasosf < 40 and pad:down() then
sprite=s4f
end
if pasosf >= 40 then
pasosf=0
end
end

function spra()
if pasosa >= 0 and pasosa < 10 and pad:up() then
sprite=s1a
end
if pasosa >= 10 and pasosa < 20 and pad:up() then
sprite=s2a
end
if pasosa >= 20 and pasosa < 30 and pad:up() then
sprite=s3a
end
if pasosa >= 30 and pasosa < 40 and pad:up() then
sprite=s4a
end
if pasosa >= 40 then
pasosa=0
end
end 

Después sólo resta poner el bucle principal.

while true do
pad = Controls.read()
screen:clear()
mov()
sprd()
spri()
spra()
sprf()
screen:blit(S[1].x,S[1].y,sprite)
if pad:start() then
break
end
screen.waitVblankStart()
screen.flip()
end 

Primero activamos los controles. Limpiamos la pantalla para hacerla funcional. Llamamos a todas las funciones. Y mostramos la imagen, fíjate que se estan usando las variables de la tabla de arriba como ejes X e Y, i se está mostrando "sprite", que, directamente, no es una imágen sino una variable, por lo tanto se mostrará la imágen almacenada en esa variable, con esto quedan más claras las funciones. Finalmente se establece que a presionar Start se romperá el script, reiniciando el código.

Captura del programa

Espero que este tutorial ayude a más de uno. Gracias por leer.

Programa de Ejemplo

Dejo un ejemplo de la aplicación de este código, está listo para extraerese en la raíz de la Memory Stick. Puedes mirar el código directamente del archivo System.lua, ubicado en la carpeta System.

El código expuesto en este tutorial, y en el programa está hecho por mí, no se ha recurrido a otras fuentes para este tutorial.

Descargar Programa de Ejemplo (Sólo Usuarios Registrados)