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"
Gracias
Lo estoy utilizando en mi homebrew.
Gracias
La verdad no entiendo muy bien lo de las tablas pero gracias igual
que parte o.o
quizas te lo pueda explicar ^^
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
Yo
Yo no entiendo está parte:
Me la podrías explicar xD?.
Si no entiendes eso
no entiendes ni las estructuras de control
Que es lo que no entiendes que parte?
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.
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í:
gracias:D
aunque se te fue un down xD
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 ...
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.
O.O
O.O
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
Exelente Cam-Maker lol espero
Exelente Cam-Maker lol espero las clases aparte tengo algunas cuantas dudas xD
Jaja muy bueno maker a lo que
Jaja muy bueno maker a lo que veo ahy muchas formas de hacer menus
Esta imagen te iria bien
:D
muchas gracias ;) aunque todavia no me concidero coder o.o
Que honesto eres...
Me has emocionado por momentos =)
tu me impresionas xD
gracias a ti ahora anoto todo lo que tengo que hacer y un pequeño cronograma
gracias ;) un saludo
Bueno
Pues vale :D
WoW
WoW Excelente Tutorial =D
Salu2