Anuncios Google

07b. Uso de Sprites en plantilla

Tutoriales Avanzados Homebrewes

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

4.45238
Tu voto: Ninguno Votos totales: 4.5 (42 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.

 esta frase no

 

esta frase no entiendo......????

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

 

Mira .. esa es la que no entiendo

porque en realizad no me funciona tu codigo

y en que estoy fallando

ayudame por favor..

mi correo es: -EDITADO-

Gracias...


Editado: Postear direcciones de correo electrónico en el foro público incumple las Normas de la Comunidad. Puede remitir su e-mail mediante mensajes privados, pinchando en el nick del usuario. Antes de volver a postear por favor revise las normas. | Rober Galarga


Web Master

Copio y pego:

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.

Imagen de klozz

pff u.u en la psp me da error

pff u.u en la psp me da error pero usando el lua player de la pc funciona a ke se devera me dice :

Error Script.lua:3:Image.load error loading image  u.u ya inicie un fondo antes del code para el sprite pero nada aun u.u


TEAM MEX Homebrew y desarrollo PSP

Metal TrooperV.Pre-Alpha (15%)Lua , 10% C .

Ubunshell VProof. (45%)C

RPG Magues (35%)Lua , 5% C


Android development for Xperia X8 ^^ mis roms en XDA-Developers ya que en Scenebeta no las publican xD

Xperience  | MIUI Pikachu | Semc debrand engine | Froyexp | Xperience walkman mod | Android 4.0.4 CN9 Crema de nieve

-- KLOZZ

Imagen de recoco

No

No entiendo:

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

Y si tengo una hoja de sprites de 954 x 442 como lo hago?

 


Image Hosted by ImageShack.us 

Imagen de albertpra

me podrias fasilitar la

me podrias fasilitar la imagen con la que isiste el ejemplo esque tengo problema

EDITADO: Cuando esté seleccionado lo borramos

 no se a que te refieres porfavor ayudame


Editado: Crear hilos y comentarios duplicados incumple las Normas de la Comunidad, si necesita cambiar su comentario puede usar la opcion de Editar. Antes de volver a postear por favor revise las Normas.| Rober Galarga


albert

Imagen de CkFra

Pero

qué no entiendes, las 4 tablas esas o cómo hacerlo para que te funcione en la plantilla que dices?

 

Imagen de albertpra

como es mejor usar los

como es mejor usar los sprites en plantilla o normal

Imagen de recoco

sprite

Hacerlo funcionar con la plantilla 954 x 442.

Imagen de Tanos

Toma en cuenta

Toma en cuenta que Lua no admite imágenes mayores a los, aproximadamente, 600 pixeles de alto. No recuerdo el ancho máximo, pero si no te está funcionando deberías de distribuir los sprites en plantillas de 480 X 272.

Saludos

Imagen de CkFra

Pero

no las permite cargar o imprimir? Porque si lo que él busca son Sprites, puede que con tanta altura LUA pueda almacenar la imagen, pero no imprimirla, pero si sólo imprime una sección, le vale.

Yo por mi parte no he hecho la prueba, asique te pregunto, que si lo dices será por algo :P 

Imagen de Tanos

Imprime a medias

Vamos, si las imprime (obviamente las carga), pero sólo en ciertas condiciones. Por ejemplo si tengo una imagen de 600px de alto en movimiento vertical hacia arriba, al llegar el pixel Y300 al pixel Y272 de la pantalla, la imagen desaparece repentinamente.

Vamos, da errores extraños.

Yo tampoco he probado cargar una imagen gigante y después recortarla :P, sólo que me pareció oportuno mencionar ese dato, tal vez le puede servir a Recoco.

Saludos

Imagen de recoco

sprites

Me parece que tendré que seguir con los sprites sueltos. Porque si reduzco la imagen perderá calidad y perderé el tamaño de los sprites. ¿Lua reproduce GIF?


Image Hosted by ImageShack.us 

Imagen de CkFra

Te aconsejo

que primero pruebes a hacerlo como plantilla, que lo más probable es que si funcione. Porque si sólo vas a imprimir una sección no importa el tamaño de la plantilla.

Tú verás, pero por intentarlo y por indagar un poco no te va a pasar nada :P 

Imagen de Guillermo_Cornielle

Nope

LUA no puedecargar ni reproducir GIF, para reproducir animaciones en LUA tienes la libreria ANIMATION LIB, puedes descargarla desde aqui.

Saludos.


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

TheGCProjects

Imagen de CkFra

Vale

entoces te explico. Lo que yo he hecho ha sido un ejemplo usando un modelo de tales dimensiones. El objetivo es que os sirva como ejemplo para que vosotros hagais vuestros propios sprites.

Como en este caso, no todos vamos a usar los mismos sprites, ni las mismas dimensiones. Asi que si entiendes el tutorial, tú mismo tienes que adaptarlo para tú código. Como comprenderás no puedo hacerlo para todo el tipo de sprites que hay, ni sé como es el tuyo, ni el número de sprites que tiene ni nada.

Pero el patrón a seguir tiene que ser el mismo. En imgY tienes que poner el pixel de origen de cada dirección. Y en imgX (pero en la función de pasos)

Saludos 

Imagen de Arkanist

Error.

elseif pad:right() then
x = derecha
coord.x = coord.x + 1.5
dir.pasos = dir.pasos + 1.5
end

 Aqui te has equivocado, donde dice x = derecha, porque lo has puesto? xD

seria dir = derecha.

Saludos.


Cada uno es libre de elegir el SO que más quiera, pero solo algunos son libres de hacer todo lo que quieran con su SO.

Suígueme en twitter

Imagen de CkFra

Tienes

razón :P

Es que lo cogí del código original que hice en un principio y al cambiar la variables de nombres para que se entendiese mejor (en vez de dir, era x) pues se me pasó esa.

Gracias por el aviso ;) 

Imagen de Arkanist

De nada,

es que estaba siguiendo tu tutorial, para hacerlo, y resultaba que no se giraba a la derecha :P.

Saludos.

Imagen de Arkanist

Genial.

CkFra, te felicito por este tutorial (yo lo llegué ha hacer de otra manera pero asi esta mejor xD) Esta muy bien, y aunque me costó un poco de entender, al final lo comprendi.

Creo que deberian poner un enlace en el tutorial de uso de sprites a este tutorial.

Ah por cierto, de la forma que enseñas a cambiar sprites, tambien se podria usar tranquilamente para explosiones, y pequeñas animaciones etc.

Saludos.


Cada uno es libre de elegir el SO que más quiera, pero solo algunos son libres de hacer todo lo que quieran con su SO.

Suígueme en twitter

Imagen de CkFra

Del mismo

modo que digo sprites, también lo puedes hacer con lo que tú dices (pero si las imagenes que vas a usar cambian de tamaño, las variables que necesitarías no tendrían valores regulares como en este caso, tendrías que ver el tamaño exacto y tal... el caso sería ponerse ;))

Lo del enlace no se me había ocurrido :)

¿Qué ha sido lo que te ha costado entender? Para retocarlo si eso..

Un saludo ;) 

Imagen de Arkanist

Pues,

Lo que me ha costado de entender, porque al sumas pasos, solo canvia la dir.imgX, aunque, no lo entendí al principio, porque heche un primer vistazo al tutorial leyendo muy rapido.

Y lo de los sprites para explosiones y cosas de estas, lo usaré con mi juego (Box Killer) en su nueva version jeje....

Saludos.


Cada uno es libre de elegir el SO que más quiera, pero solo algunos son libres de hacer todo lo que quieran con su SO.

Suígueme en twitter

Imagen de markef

muchisimas gracias ;)

yo lo hacia imagen por imagen, pero con esto intentare pillarle el puntillo para poder hacerlo de una sola pasada :P

lo dicho, muchas gracias ;)


Dicen que soy programador... Eso dicen.

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.