Anuncios Google

07. Uso de Sprites

Tutoriales Avanzados Homebrewmex

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

4.666665
Tu voto: Ninguno Votos totales: 4.7 (18 votos)

Anuncios Google

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de NauTiluS1

serviria en luadev?

serviria en luadev?

Imagen de -Adolso-Gallardo-

TODO

Todo Lo Que Este Programado En LuaHm Sirve En LuaDev, Lo Unico Seria Que Cambies Las Funciones De Hm Por Las De DEV.

Imagen de recoco

bloqueo

¿Y como se hace para que cuando llegue a la poscion x 480 no puede pasar?

Imagen de Guillermo_Cornielle

Resta

La anchura del jugador por la anchura de la pantalla, y resta la latura del jugador por la altura de la pantalla.

Tan sencillo como eso.


Manual del Perfecto Votante Para un voto libre y justo!.

TheGCProjects

Imagen de recoco

No

Me refiero a que si choca con x 480 debe de empezar de nuevo el bucle. Solamente lo hago para la derecha. Va por timers.

Imagen de rubenelportero

¿que programa usaste para recortar?

esque necesito recortar las imagenes para hacerlo como tu tutorial (no te preocupes tendras un hueco en mis creditos)

Imagen de Tanos

Perdón

Perdón por mi incompetencia, pero con Paint :P

Imagen de rubenelportero

descubrimiento asombrante

¿con paint???? asombrante, ya las separe, gracias por responder

Imagen de Arkanist

como

como se hace para que el fondo del personaje del sprite sea transparente??

lo decia en otro tutorial de sprites pero no entendi ese tutorial, solo este.

Imagen de Guillermo_Cornielle

Se a lo que

Te refieres, pero en Lua desconosco si se puede hacer eso, pero puedes usar fotoshop y quitarle el fondo al personaje y asi sera digamos transparente.


Manual del Perfecto Votante Para un voto libre y justo!.

TheGCProjects

Imagen de Arkanist

pos vaya.

pos vaya,que lastima porque no tengo photoshop y no tengo ganas de buscarlo ahora.

pero, si mal no recuerdo, cuando ponias una imagen con screen:blint, no habia una opcion que era alpha?? para poner el color de la imagen transparente o algo??

 muchas gracias.

Imagen de Guillermo_Cornielle

Pues

Yo ambien lei eso, peor en tutoriales de programacion en C para psp, aunque tambien he oido algo sobre eso en lua, pero aun no lo he visto puesto en practica en algun script.

Saludos. 


Manual del Perfecto Votante Para un voto libre y justo!.

TheGCProjects

Imagen de Pana

Gracias tanos por el aporte,

Gracias tanos por el aporte, pero te informo de que LUA si carga sprites. No me preguntes como porque no lo se :P, pero lo hace. Pucelano sabe como hacerlo.

Saludos. 

Imagen de Carlosls

Sprites

Lua puede cargar sprites de la siguiente forma con los siguientes argumentos en la funcion blit

screen:blit(x, y, imagen, coordenada X pixel de comienzo, coordenada Y pixel de comienzo, coordenada X pixel de final, coordenada Y pixel de final)

De forma que estableces en las dos primeros argumentos las coordenadas donde quieres situar la imagen, el tercer argumento escribes la variable de la imagen a pintar, los dos siguientes argumentos las coordenadas desde donde se empezara a tomar la imagen a mostrar de la imagen cargada de la variable, es decir la esquina superior, y los dos ultimos serian donde acaba la imagen que deseas que esta dentro de la imagen cargada.

No se si lo he dejado claro

screen:blit(10, 20, prueba, 15, 15, 30, 30)

en este ejemplo mostraria desde el pixel 15,15 hasta el pixel 30,30 de la imagen prueba en las coordenadas de la pantalla 10,20


EVO PSP = 2.01 > 2.60 > 1.5 > 3.02OE-A > 3.02OE-B > 3.03OE-A > 3.03OE-A' > 3.03OE-B > 3.03OE-C > 3.10OE-A > 3.10OE-A' > 3.52M33 > 3.52M33-2 > 3.52M33-3 > 3.52M33-4 > 3.71M33 > 3.71M33-3 > 3.7

Imagen de Pana

uooo, mil gracias carlos!

uooo, mil gracias carlos!

Imagen de Miguelinh0

Muy buen aporte

Gracias Tanos, esto me ayudara aun mas para programar.

Salu2 Paisano. 

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.