Anuncios Google

Menú en LuaDev sin imágenes por cam-maker

Bueno este es mi primer tutorial de Lua ya que se me había olvidado lo mas importante de esta comunidad, enseñar y compartir :D con esto les acerco una de las miles de formas de hacer un menú en Lua, y será aplicado en el interprete LuaDev.

Tratare de explicarles línea por línea. Si aun así tienen dudas, no duden en comentar. Aunque les recomiendo encarecidamente, pasarse primero por los tutoriales de esta web como el de Chimecho, ya que es una documentación excelente, muy bien explicada y el tutorial de ELeNDer.

Lo peculiar de este menú, es que será “automático”, en el sentido de que si quieres modificarlo, solo editaras los nombres de las opciones o algún otra opción por allí.

Primero haremos la función de las opciones que aparecerán en nuestro menú, si no comprendes que es una función, te recomiendo que revises este tutorial funciones.

function opciones()
   x = 175
   y = 25
   tabla = {}
   tabla[1] = "Opcion 1"
   tabla[2] = "Opcion 2"
   tabla[3] = "Opcion 3"
   tabla[4] = "Opcion 4"
   tabla[5] = "Opcion 5"   
   for i= 1, #tabla do
      if VM == i  then
         screen.print(x,y,tabla[i],0.8,negro,blanco)
      else 
         screen.print(x,y,tabla[i],0.8,blanco,0x0)
      end
      y = y + 25
   end
end

Esta función nos servirá para agregar las opciones de una
manera fácil. ¿Como funciona?

Primero declaramos las variables de las coordenadas, en "x"
ponemos el valor de 175 el cual es casi la mitad de nuestra pantalla(horizontalmente)
y en “y” desde donde imprimirá las opciones de nuestro menú.

x = 175
y = 25

Ahora creamos una tabla, para almacenar nuestras opciones, si quieres agregar una nueva opción solo pones de nuevo tabla[6] = “Opción 6” y de esa forma puedes agregar las opciones que quieras.

tabla = {}
tabla[1] = "Opcion 1"
tabla[2] = "Opcion 2"
tabla[3] = "Opcion 3"
tabla[4] = "Opcion 4"
tabla[5] = "Opcion 5" 

Ahora haremos el bucle que recorrerá nuestra tabla donde están las opciones.

for i= 1, #tabla do
      if VM == i  then
         screen.print(x,y,tabla[i],0.8,negro,blanco)
      else 
         screen.print(x,y,tabla[i],0.8,blanco,0x0)
      end
      y = y + 25
end

Esta es la estructura básica de un for: “for inicio, final do” esto sin contar el “end” que cierra el bucle. Esto quiere decir que nuestro for iniciara en 1 y llegara hasta el tamaño de nuestra tabla; en Lua si antepones un # a una tabla, obtienes el valor de índices que hay en ella, si te recuerdas nuestra tabla tenia 5 datos, es decir que tabla# seria igual a 5.

for i= 1, #tabla do

VM es el valor del menú, es decir si estas en la opción 5, VM seria igual a 5. Si sabes y has leído los tutoriales básicos, sabes que “i” toma el valor de la vuelta de un bucle ya que lo hemos declarado “for i= 1, #tabla do”, es decir que por cada vuelta “i” incrementa un valor, si estamos en la vuelta 3 “i” vale 3. El primer screen.print mostrara la opción seleccionada y el segundo screen.print mostrara las opciones que no esta seleccionadas

Ahora haremos la condición que imprimirá nuestras opciones.

if VM == i  then
         screen.print(x,y,tabla[i],0.8,negro,blanco)
      else 
         screen.print(x,y,tabla[i],0.8,blanco,0x0)
end

Esta es la condición con la cual revisamos en que opción(VM) del menú estamos. Que no se te olvide que “i” tiene el valor de la vuelta del bucle. Colóquemele valores para que lo puedas apreciar mejor. Si la opción(VM) del menú es igual a 2 entonces, se imprimara la opción 2 con sombra blanca la sombra indicara que la opción esta seleccionada.

if 2 == 2 then
         screen.print(x,y,tabla[2],0.8,negro,blanco)

Pero si no se cumple la condición se imprimirá las opciones en negro, que seria las que no estén seleccionadas.

      else 
         screen.print(x,y,tabla[i],0.8,blanco,0x0)
      end

Pero si en "y" dejáramos un valor estático, cada opción se imprimiría uno encima de otro para eso hacemos que por cada vuelta sume el valor de la distancia entre cada opción en este caso será de 25 pixeles.

 y = y + 25

Ahora crearemos la funcion que nos permitira navegar por las opciones. Tratare de explicarlo mas tarde cuando regrese lo editare.

function navegador()   
   if controls.press("down") and VM ~= #tabla then
      VM = VM + 1
   elseif controls.press("down") and VM >= #tabla then 
      VM = 1
   end
   if controls.press("up") and VM > 1 then  
      VM = VM - 1
   elseif  controls.press("up") and VM == 1 then 
      VM = #tabla
   end
end

Ahora declaramos nuestros colores, he tomado los valores de
este post que casi nadie revisa xD y es muy útil 141 colores para tu homebrew
xerpi nos acerca el código de colores, para facilitarnos el trabajo y asi crear bonitos diseños.

LightSkyBlue = color.new(135,206,250)
negro = color.new(0,0,0)
blanco = color.new(255,255,255)

Y luego declaramos VM como la opción que primero nos aparecerá seleccionada, como todo menú inicio empieza desde la primera opción entonces pondremos.

VM = 1

Ahora nos pasamos ha nuestro bucle principal.

while true do
   controls.read()
   navegador()
   draw.gradrect(0,0,480,272,rojo,LightSkyBlue,negro,negro)
   opciones()
   screen.flip()
end

Colocamos controls.read() para la lectura de lo que presionamos en nuestro PSP, invocamos la función del navegador y luego haremos la imagen de fondo con una función muy especial de LuaDev.

draw.gradrect(0,0,480,272,rojo,azul,negro,blanco)

Esta función nos ayuda a crear un rectángulo con gradientes o un degrado, te coloco una imagen para que veas el orden de los colores y como se muestran en la imagen. Esta funcion nos ahorra la tarea de agregar una imagen si quieres hacer un fondo de este tipo.

Pero nosotros usaremos estos colores.

draw.gradrect(0,0,480,272,LightSkyBlue,LightSkyBlue,negro,negro)

Luego invocamos la funcion de las opciones que hemos hecho arriba con opciones() y por ultimo el screen.flip() para mostrar lo que hemos hecho anteriormente.

El menu nos quedara mas o menos asi:

No hemos usado ninguna imagen y el diseño ya no es tan monótono. Espero que les ayude, y mas tarde explicare la función del navegador, pero básicamente lo que hace es poner los limites de hasta donde llegara las opciones del menú cuando aprietes arriba o abajo. Si tienes alguna duda o me he equivocado en algo comenta y avisame xD 

Aquí les dejo el código completo para que lo puedan copiar y revisarlo ;)

function opciones()
   x = 175
   y = 25
   tabla = {}
   tabla[1] = "Opcion 1"
   tabla[2] = "Opcion 2"
   tabla[3] = "Opcion 3"
   tabla[4] = "Opcion 4"
   tabla[5] = "Opcion 5"   
   for i= 1, #tabla do
      if VM == i  then
         screen.print(x,y,tabla[i],0.8,negro,blanco)
      else 
         screen.print(x,y,tabla[i],0.8,blanco,0x0)
      end
      y = y + 25
   end
end
function navegador()   
   if controls.press("down") and VM ~= #tabla then
      VM = VM + 1
   elseif controls.press("down") and VM >= #tabla then 
      VM = 1
   end
   if controls.press("up") and VM > 1 then  
      VM = VM - 1
   elseif  controls.press("up") and VM == 1 then 
      VM = #tabla
   end
end
VM = 1
LightSkyBlue = color.new(135,206,250)
negro = color.new(0,0,0)
blanco = color.new(255,255,255)
rojo = color.new(255,0,0)
while true do
   controls.read()
   navegador()
   draw.gradrect(0,0,480,272,LightSkyBlue,LightSkyBlue,negro,negro)
   opciones()
   screen.flip()
end

Si quieres agregar mas opciones solo agrégalas como te dije en la "tabla", con respecto a las opciones anteriores y si quieres disminuir, bórralas :D xD

 


"Las cosas brillantes siempre salen de repente, como la geometría de una flor"



Anuncios Google

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 lostdajt

Gracias

Lo estoy utilizando en mi homebrew.

Imagen de Tinakus.Nav

Gracias

La verdad no entiendo muy bien lo de las tablas pero gracias igual

Imagen de cam-maker

que parte o.o

quizas te lo pueda explicar ^^

Imagen de Tinakus.Nav

Ya se

Ya entiendo mas o menos lo  de las tablas pero sigo sin entender lo mismo que Barney77...

¿Me lo podrias explicar?

EDITO: Gracias Rober ahora si entiendo

Imagen de barney77

Yo

Yo no entiendo está parte:

function navegador()   
   if controls.press("down") and VM ~= #tabla then
      VM = VM + 1
   elseif controls.press("down") and VM >= #tabla then 
      VM = 1
   end
   if controls.press("up") and VM > 1 then  
      VM = VM - 1
   elseif  controls.press("up") and VM == 1 then 
      VM = #tabla
   end
end

Me la podrías explicar xD?.

Imagen de Dioni0396

Si no entiendes eso

no entiendes ni las estructuras de control

Que es lo que no entiendes que parte?

Imagen de barney77

El difernte

El diferente de( ~= ) xD...

Sencillo

Sigamos la lógica del programa, la primera condición dice literalmente esto:

Si presiono la flecha abajo, y la variable VM es diferente del número de elementos que contiene la tabla llamada tabla, tomo el valor actual de VM y lo incremento en 1.

Lo único que hace falta conocer para seguir el flujo de ese código, es que el signo # antepuesto a una variable de tabla, te devuelve el número total de elementos de la tabla.

Imagen de barney77

Jeje

Jeje, no entiendo como siempre estas ahí para ayudarme, y de manera inmediata lo he entendido, muchas gracias rober!.

O así: function navegador()

O así:

function navegador()   
   if controls.press("down") then
     if VM >=#tabla then VM=1 else VM=VM-1 end
   elseif controls.press("down") then 
     if VM <=1 then VM=#tabla else VM=VM+1 end
   end
end

Imagen de cam-maker

gracias:D

aunque se te fue un down xD

function navegador()   
   if controls.press("up") then
     if VM >=#tabla then VM=1 else VM=VM-1 end
   elseif controls.press("down") then 
     if VM <=1 then VM=#tabla else VM=VM+1 end
   end
end
 

gracias por el aporte :D


"Las cosas brillantes siempre salen de repente, como la geometría de una flor"


Me sigue gustando mi forma

Me sigue gustando mi forma pero pues para los gustos ...

Imagen de cam-maker

es al gusto del programador :D

es al gusto del programador :D 

ademas no he editado el post, por eso no he puesto tu forma xD 

Saludos :D

Mas corta la Función de Navegador

function navegador()
if controls.press("down") and VM <= #tabla then
VM = math.min(VM + 1,table.getn(#tabla))
elseif controls.press("up") and VM >= 1 then
VM = math.max(VM - 1,1)
end
end

Tambien puedes simplificar el navegador de esta forma.

Imagen de NauTiluS1

O.O

O.O

Imagen de cam-maker

tienes razon D:

lo probare cuando este en mi casa xD creo que al final de pondre formas de hacerlo ;) este sera otra, gracias por tu aporte

Imagen de Kenta15

Exelente Cam-Maker lol espero

Exelente Cam-Maker lol espero las clases aparte tengo algunas cuantas dudas xD

Imagen de NauTiluS1

Jaja muy bueno maker a lo que

Jaja muy bueno maker a lo que veo ahy muchas formas de hacer menus

Imagen de Dioni0396

Esta imagen te iria bien

Imagen de cam-maker

:D

muchas gracias ;) aunque todavia no me concidero coder o.o

Que honesto eres...

Me has emocionado por momentos =)

Imagen de cam-maker

tu me impresionas xD

gracias a ti ahora anoto todo lo que tengo que hacer y un pequeño cronograma 

gracias ;) un saludo

Imagen de Dioni0396

Bueno

Pues vale :D

Imagen de pepingo el hacker

WoW

WoW Excelente Tutorial =D

Salu2

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.