Uso de Sprites

¿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.

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)

Código:

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"

Código:

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.

Código:

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.

Código:

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.

Código:

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

Código:

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

Código:

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.

Código:

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.

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

Por Tanos