Anuncios Google

Crear un inicio con transparencias

Tutoriales Avanzados Homebrewmex

Hola, este es mi segundo tutorial sobre programación en LuaHM y les explicaré como agregar un inicio más elgante a nuestro homebrew usando las transparencias. Creo que todos nosotros hemos visto en los juegos comerciales (o incluso en algún homebrew) que al principio aparecen imagenes poco a poco y desaparecen de la misma manera, pues en este tutorial les diré como hacerlo.

Antes que nada quiero agradecer al gran coder pipagerardo por haber liberado el código de su juego Cañones Corazas, que es el lugar de donde saque este código.

NOTA: Aunque saque parte del código de ahí, lo de adaptado para que se vea aún mejor.



Comenzemos

Aunque no se con exactitud que método usen en los juegos comerciales y en los homebrews que he visto con este efecto, yo lo haré utilizando el bucle for.


¿Qué es el Bucle For?

No explicaré del todo el funcionamiento de este bucle, solo lo necesario para hacer funcionar el efecto que busco. Aún así si quieres mas información puedes encontrarla en el tutorial de pipagerardo ó en la Wikipedia ;-).

--Ejemplo de bucle for--
for n = 1, 25, 5 do
     screen:clear()
     screen:print(100,100,n)
   end
 
--Explicación--
- n: Variable que cambiará de valor.
- 1: Es el valor incial de n.
- 25: Es el valor hasta el que llegaremos.
- 5: Es el valor de cada incremento.
 
--[[En otras palabras lo que dice este bucle es lo siguiente:
Para n que vale 1, incrementamos de 5 en 5 hasta llegar a 25.
Aunque esta explicación no es la mejor, creo que se entiende.]]--


Creando nuestro inicio

Este tutorial está basado en LuaHM7 pero puede ser adaptado para cualquier versión del mismo. Ahora en nuestro documento .lua escribiremos lo siguiente:

----------------------------------------
     --EJEMPLO CREADO POR el__QAT--
----------------------------------------
 
--Cargamos la imagen que usaremos--                         
splash = Image.load("Scenery09 Splash.png")    
--Empezamos el primer bucle for--                    
for n = 255, 0, -10 do
     negro = Image.createEmpty(480,272)
     negro:clear(Color.new(0,0,0,n))
     screen:blit(0,0,splash)
     screen:blit(0,0,negro)
     screen.flip()
     System.sleep(2)
   end
--Mostramos el splash por 1 segundo--
     screen:blit(0,0,splash)          
     System.sleep(1000)
--Empezamos el segundo bucle for--
for n = 5, 255, 10 do 
     splash:clear( Color.new(0,0,0,n ))
     screen:blit(0,0,splash)                                
     screen.flip()
     System.sleep(2)
   end


Explicación Parte 1

Ahora les explicaré que es lo que hace el código que está arriba.

splash = Image.load("Scenery09 Splash.png") --Cargamos la imagen que usaremos (yo estoy usando el splash del scenerybeta 2009, pero puedes usar la imagen que quieras.)-- -                    
for n = 255, 0, -10 do --Le damos los valores a nuestro bucle for (como se ve en esta parte también se puede disminuir el valor)-
     negro = Image.createEmpty(480,272) --Creamos una imagen vacía de 480*272px.
     negro:clear(Color.new(0,0,0,n)) --Coloreamos la imagen de negro, en el valor alpha está la variable n.
     screen:blit(0,0,splash) --Mostramos el splash.
     screen:blit(0,0,negro) --Mostramos la imagen que hemos creado.
     screen.flip() --Mostramos en pantalla lo anterior.
     System.sleep(2) --Esperamos 2 milisegundos antes de pasar al siguiente trozo de código.
   end --Finalizamos bucle for.

Lo que hace esta parte del código es lo siguiente:

  • Colocamos en pantalla la imagen del splash y encima de esta la imagen que creamos.
  • Al ir avanzando nuestro bucle for, el valor alpha de nuestra imagen disminuye, se va haciendo transparente y se comienza a mostrar la imagen del splash.

Parte 2

--Mostramos el splash por 1 segundo--
     screen:blit(0,0,splash)          
     System.sleep(1000)
 
--[[Después de haber aparecido la imagen del splash,
espera un segundo antes de empezar a desaparecer]]--


Parte 3

--Empezamos el segundo bucle for--
for n = 5, 255, 10 do --Asignamos lo valores.
     splash:clear( Color.new(0,0,0,n )) --Pintamos la imagen del splash de color negro.
     screen:blit(0,0,splash) --Mostramos la imagen del splash.
     screen.flip() --Mostramos lo anterior en pantalla.
     System.sleep(2) -- Esperamos dos milisegundos antes de ir al siguiente código.
   end --Terminamos el bucle.

Este bucle hace lo contrario al primero:

  • Coloreamos la imagen del splash de color negro.
  • El valor alpha de nuestro color aumenta, el color comienza a hacerse cada ves mas sólido y va tapando nuestra imagen hasta que la bloquea por completo.

Ejemplo del resultado.

NOTA: La calidad del video es mala pues lo he sacado con mi móvil xD.

Bien, este ha sido otro tutorial, espero le haya servido y ya saben, cualquier duda pregunten, hasta la próxima.

4.62766
Tu voto: Ninguno Votos totales: 4.6 (94 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 arielnmz

como hacer esto en C ??

como hacer esto en C ??

Imagen de -chus-

ayuda XD

Edito Muy bueno gracias...un saludo Risa

Imagen de fisckoer

ayuda

hola amigo muy buen tuto los e estado leyendo y estan interesantes pero en este me marca un error en la parte

negro = Image.createEmpty(480,272)
negro:clear(Color.new(0,0,0,n))
screen:blit(0,0,splash)

me marca estas lineas y dice attempt to call metho 'blit'( a nil value)

Imagen de moikop

Solo cambia

Esta linea :

screen:blit(0,0,splash)

Por esta:

screen:blit(0,0,negro)

Y ya debería funcionar ;-)

Un saludo.

Imagen de Danieloyoshy09

:P

gracias por el tuto,me ha servido mucho la transparencia para mi HB...buen efecto ese Risa

salu2

Imagen de Migueliziosop

Bueno..

Aver si luego lo paso a HMv2 para ayudar a otros usuarios :)

Imagen de el__QAT

Bien...

Pensaba pasarlo yo mismo, pero es cuestión de cambiar algunos detalles nada más.

Un preguntilla tonta. Con

Un preguntilla tonta. Con ese pequeño trozo de codigo puedo hacer la transparencia o tengo que hacer algo mas?

Imagen de el__QAT

Si es con ese...

Solo necesitas ese pedazo de código.

sAlud0s!

Fantastico, muy buen tuto.

Fantastico, muy buen tuto.

Imagen de el__QAT

Gracias...

Creo que será de gran utilidad para añadir créditos, splash y demás ;-)

sAlud0s!

Si, estube mucho tiempo

Si, estube mucho tiempo intentando zacer ese efecto pero nunca lo conseguí. Ahora gracias a pipagerardo  a ti si puedo :D.


                                                                          No cuesta nada agradecer!!!

Imagen de sergi70

yo intenté sin existo, pero

yo intenté sin existo, pero ahora ya puedo

Imagen de juan11962

me gusto mucho gracias por

me gusto mucho gracias por el aporte

Imagen de Muscle-Geek

¿no se dice transiciones?

¿que no la trasparencia es cuando carece de fortaleza a la luz algo y/o alguien?

puede que sea la carente calidad de tu video que no lo haya notado sino es así creo que se dice transición 


Homebrew

Imagen de el__QAT

Pues..

No se como le digan en españa (lo digo por si eres de haya), pero aquí transparencia es cuando algo deja pasar la luz o deja ver atraves de el, y eso es lo que pasa.

sAlud0s!


Tutorial: Fabricando nuestro propio micrófono para la PSP.

Exclusivo de PSP.Scenebeta.com

Imagen de Muscle-Geek

yo soy de México

y lo digo asi porque me lo inculcaron en la escuela desde que usaba powerpoint en las transiciones con las diapositivas pero sin son sinonimos o algo por el estilo me da igual solo tenia esa duda


Homebrew

Imagen de rubenelportero

:P

yo soy de españa y se dice transparencia

salu2

Imagen de pspgorrister

Transparencia y transición

Ambos tenéis razón pero no estáis hablando de lo mismo. Para el caso que nos ocupa, una transición sería el efecto que ocurre entre una imagen y otra (fundido, desvanecimiento, cortina, etc.).

Transparecia, en este caso es sencillamente su canal Alfa. que determina cuan opaco (o transparente) es un color.

Este ejemplo en concreto es una transición que utiliza transparencias para hacer el efecto. Así que ambos conceptos están en el mismo código.

 

Un saludo.


LuaDiE: Crea en Lua sin teclear código. Compatible HM7, HMv2, LuaPlayer, LuaDEV y PGE.

Imagen de el__QAT

Gracias...

Por dejarlo claro ;-)

sAlud0s!

Imagen de rubenelportero

dios xD

como os complicais la vida ¿no?, en mi homebrew ta el efecto que describes y yo no lo hago como tu, mira:

Splash = Image.load("imagenes/splashpsp.jpg")
fade = Image.createEmpty(480,272)
trsp = 255
ColorF = Color.new(0,0,0,trsp)
fade:clear(ColorF)
 
while true do
screen:clear()
screen:blit(0,0,Splash)
screen:blit(0,0,fade)
if trsp > 0 then
trsp = trsp - 10
else
break
end
ColorF = Color.new(0,0,0,trsp)
fade:clear(ColorF)
screen.waitVblankStart()
screen:flip()
end
screen.waitVblankStart(50) 
while true do
screen:clear()
screen:blit(0,0,Splash)
screen:blit(0,0,fade)
if trsp < 255 then
trsp = trsp + 10
else
break
end
ColorF = Color.new(0,0,0,trsp)
fade:clear(ColorF)
screen.waitVblankStart()
screen:flip()
end
 
while true do
dofile("System/system2.lua")  -- aqui al script que quieres que se vaya despues del efecto--
end

si quereis lo explico y lo añadis como forma secundaria

Imagen de el__QAT

La verdad...

Se me hace mas difícil con "tú método" :P.

sAlud0s!

Imagen de rubenelportero

ya

pero tú que sabes mucho de programación, pero alomejor otro coder menos avanzado y no sabe lo que es el bucle for (vale, no se que eso del for, nunca lo e savido ¿que pasa? VergüenzaxD) pues mi metodo es mas facil de comprender, si quieres lo explico detalladamente :P

Imagen de Guillermo_Cornielle

El metodo

Que tu usas es un poco complejo, por lo menos lo era para mi. Pero el metodo que usa QAT es sencillo, valga la redundancia, pues quien se imaginaria que con unos bucles for se logra eso jeje.

Ahora bien, el metodo que tu usas lo intente hacer y no pude solo, asi que revise el SRC de Luigi World y es exactamente igual que el tuyo, y podria apostar que tu hiciste lo mismo, tal ves no con el Luigi World, pero me atreveria a apostar que solo no lo hiciste, sin ofender hombre.

Saludos, buen tuto.


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

TheGCProjects

Imagen de rubenelportero

cuanto tiempo guille!

ya creia que te avias ido de scenebeta, es verdad lo que tu dices xD, el codigo que he puesto no es mio, pero como se lo pedi hace ya mucho tiempo a ulind (me lo enseño el :P) pos nose le e cogio mania a lo de decir "mio" a to lo que hay en mi juego xDD,  igualmente da igual, voy a probar el que comenta "el_qat" a ver como funciona y me quedo con el que mas me agrade (tendras tu sitio reservado en los creditos el_qat) :P

salu2!

Imagen de Guillermo_Cornielle

Jajaja

Ulind también saco ese código de Luigi World, pues el mismo me pidio a mi que le ayudara con eso y le dije que se revisara ese código xDD.

Un saludo hombre, suerte con tu nuevo juego.


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

TheGCProjects

Imagen de el__QAT

Yo...

Yo no se mucho de programación, y sinceramente el bucle for me parece algo muy sencillo y útil.

sAlud0s!

Imagen de rubenelportero

e de decir

que mi codigo no es compatible con el HM2 xD tonces no se si lo tendria que a ver puesto xD

Imagen de el__QAT

?

¿Porqué no es compatible?

Imagen de rubenelportero

pues por una gran razon

que en el lua HM 9 (el ultimo) todos los screen:clear y todo eso se escriben con un "." no con ":" osea screen.clear, y ahora que em fijo en el que has puesto, lo has hecho en un sitio equibocado, intenta correr el codigo que has puesto con un eboot HM9 (el ultimo...) y lo entenderas :P tendria que ir en fragmentos de codigo de luaplayer a secas

salu2

PD: leete esto, y fijate ya veras :P

PD2: todas las funciones de "pantalla" (cargar imagenes, pintarlas, escribir, y cualquier cosa, en vez de ":" se usa "." :P

Imagen de el__QAT

Pero...

Es muy fácil (y en serio que muy fácil) adaptarlo a este nuevo HM, solo busca donde esten los ":" y pon "." y listo!

sAud0s!


Tutorial: Fabricando nuestro propio micrófono para la PSP.

Exclusivo de PSP.Scenebeta.com

Imagen de Migueliziosop

No solo eso..

Se te olvida el "screen.flip", ahora ya no es así, ahora es "screen.flipscreen" y hay muchos cambios, no solo quitando los ":" por "." se mueve COMPLETAMENTE a HMv2 ;-).

Imagen de el__QAT

Lo se... ¬__¬

Pero lo que digo es que es muy fácil pasarlo a código de LuaHMv2.

Imagen de rubenelportero

no es tan facil

yo te e dicho una razon, pero hay mas incompatibilidades, ademas, si lo pones en tutos de lua HM esque está en lua HM2 (el nuevo...) ¿no? pero está en lua HM7, dile si quieres a migueliziosop (no si si lo he escrito bien xD) que te lo pase a lua HM2 que el ya ha hecho 2 tutoriales para este, o bien, muevelo de contendor al de luaHM7 xD, si sigues sin creerme, cambia los ":" por "." y lo entendera x2 :D, sé esto porque yo intente cambiar el codigo que e dicho a luaHM 2 y lo di por imposible xDDD

salu2

Imagen de Migueliziosop

También..

Se ve bueno el tuyo, no sería mal adaptar los dos como 2 metodos, por si uno se les hace más fácil o simplemente para probar de nuevas maneras.

Gracias Quatito n.n

Imagen de iEstuardo

Interesante

Gracias... Me servirá.

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.