Patrocinadores

www.soporteoptico.com

www.zonavirtual.es

06. Sencillo menu

Tutoriales Avanzados Homebrewmex

El conocimiento no vale si no se comparte con los demás. Si estas empezando un nuevo proyecto en Lua y no tienes idea alguna de cómo hacer un bonito menú, sigue leyendo, ésto te interesa. En esta sección explicaré, paso a paso, cómo crear un sencillo menú a partir de imágenes. Sólo adáptalo a tu creación y listo. El código es nativo de Look Out!

Como expliqué el menú es a partir de imágenes (PNG), puedes empezar con imágenes simples, no muy elaboradas, sólo para ver cómo funciona.

Esto es muy parecido a una ilusión óptica, por lo tanto usaremos 2 imágenes; una tendrá marcada cierta opción, y la segunda tendra desmarcada la anterior y marcada otra.

*Ejemplo de imagen 1

*Ejemplo de imagen 2

El código nativo sólo opera con dos imágenes, si tu menú contiene más opciones adáptalo.

 


 

Cárgamos nuestras dos imágenes

miImagen1=Image.load("menu1.png")
miImagen2=Image.load("menu2.png")

Para realizar los cambios de las imágenes, necesitaremos otra variable, en este caso "current"

current=miImagen1

A current se le asigna la variable miImagen1. Esto lo explicaré más adelante.

while true do

pad = Controls.read()
screen:clear()

screen:blit(0,0,current)

Con este comando indicamos que se mostrará la variable current, y como a current le asignamos la variable miImagen1, se mostrará la imagen almacenada en miImagen1, es decir, menu1.png.

Lo siguiente establece el cambio de imágenes si apretamos cierto botón.

if pad:down() then
current=miImagen2
end

if pad:up() then
current=miImagen1
end

Si presionamos el Pad Digital Abajo, la variable current cambiará a miImagen2 (Recordemos que estaba establecida como miImagen1), y por lo tanto se mostrará la imágen almacenada en dicha variable (menu2.png).

Si presionamos el Pad Digital Arriba, la variable current cambiará a miImagen1, y por lo tanto se mostrará la imágen almacenada en dicha variable (menu1.png).

Ya no es necesario que volvamos a mostrar imágenes ya que ambas quedan almacenadas en la variable current, y siempre se muestra esa variable. Lo que hacemos, en pocas palabras, es cambiar la imagen que contiene current.

¿Qué es un menú sin opciones? Para que el menú abra otros códigos si se selecciona cierta opción necesitamos esto:

if pad:cross() and current==miImagen1 then
dofile("miScript1.lua")
end

Aquí se establece que si se presiona el botón X y en pantalla se está mostrando la imagen 1, se abrirá el script1.

if pad:cross() and current==miImagen2 then
dofile("miScript2.lua")
end

Aquí se establece que si se presiona el botón X y en pantalla se está mostrando la imagen 2, se abrirá el script 2.

Ahora sólo queda cerrar el bucle principal.

screen.waitVblankStart()
screen.flip()
end

Si quisieras agregar más imágenes basta con establecer sus respectivas variables y el siguiente condicional:

if pad:down() and current=miImagen2 then

current=miImagen3

end

Es prácticamente lo mismo, sólo que estableciendo que la imagen cambie sólo si current es igual a miImagen2, es decir que no cambiará a la imagen 3 si se está mostrando la imagen 1, únicamente lo hará si se está mostrando la imagen 2.

Lee bien y adapta el código a tu creación.

0

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 CALABATO64

Error: function arguments excepted near 'and'

Bueno, me da error, mi menu, tiene cuatro opciones, de derecha a izquierda(no de arriva a avajo)

este es el codigo, no se que hago mal, pero me da ese error mencionado en el titulo

juegos=Image.load("img/menu/menu1.png")
apps=Image.load("img/menu/menu2.png")
creditos=Image.load("img/menu/menu3.png")
salir=Image.load("img/menu/menu4.png")

current=juegos

while true do

pad = Controls.read()
screen:clear()

screen:blit(0,0,current)

if pad:right() and oldpad:right() == pad:right() and current==juegos then
current=apps
end

if pad:right() and oldpad:right() == pad:right and current==apps then
current=creditos
end

if pad:left() and oldpad:left() == pad:left and current==apps then
current=juegos
end

if pad:right() and oldpad:right() == pad:right and current==creditos then
current=salir
end

if pad:left() and oldpad:left() == pad:left and current==creditos then
current=apps
end

if pad:left() and oldpad:left() == pad:left and current==salir then
current=creditos
end

if pad:cross() and oldpad:cross() == pad:cross and current==juegos then
dofile("System/juegos.lua")
end

if pad:croos() and oldpad:cross() == pad:cross and current==apps then
dofile("System/apps.lua")
end

if pad:cross() and oldpad:cross() == pad:cross and current==creditos then
dofile("System/creditos.lua")
end

if pad:cross() and oldpad:cross() == pad:cross and current==salir then
os.exit()
end

screen.waitVblankStart()
screen.flip()
end

Por favor, decirme que pongo mal.

Gacias.


http://chytor.creatuforo.com/

Imagen de Guillermo_Cornielle

Cada vez

Que pongas pad:cross(), pad:right(), pad:up(), o calquier otro control, debes poner los dos parentesis (), o sino tedara error.

Un saludo.


psp.scenebeta.com más que una web una comunidad unida.

Quiero una DS!!!!!!!!!!!

Imagen de rubenelportero

ademas de eso

resiva la ortografia y no escribar rapido programando, que as escrito 1 vez croos en vez de cross

Imagen de adrian-SAYA

como publico mi homebrew en esta web

alguien me podria decir como publico mi aplicacion en esta pagina para que asi los usuarios puedan descargala....


SAYA...

Imagen de rubenelportero

m...

lo primero subbe tu juego a un servidor como megaupload, y en aportes de usuarios pones la url de donde as subido el juego y una descripcion del juego, los controles etc y asi algun editor (talvez sea yo quien save) te lo suba a portada como los demas juegos

Imagen de adrian-SAYA

gracias rubenelportero

te doy las gracias  rubenelportero por fin podre publicar mis aplicaciones a la luz...

saludos...


SAYA...

Imagen de rubenelportero

creo que esta mal tanos...

quiero hacer un menu de 3 opciones pero no funciona pongo lo de

if pad:down() and current=miImagen2 then

current=miImagen3

end

y

if pad:up() and current=miImagen3 then

current=miImagen2

end

y no funciona solo va de la foto "menu1.png" hacia "menu3.png" y viceversa  ¿y mi "menu2.png"? por eso digo que lo de arriba lo de la tercera opcuion puede estar mal, o bien, excplicame como se hace porque no me furula...

Imagen de Tanos

Utiliza

El método oldpad.


Llamado a los interesados en Lua: Terminemos juntos este proyecto.

Imagen de rubenelportero

HELP!!!!

si exacto no se porque pero no me funciona, osea me salta de la imagen "menu1" a la "menu3" y que yo sepa e puesto bien el olpad aqui pongo mi codigo haber si tu me sabrias decir que pongo mal...

 

amarillo = Color.new(255,255,0)
oldpad = Controls.read()
menu1 = Image.load("imagenes/menu1.png")
menu2 = Image.load("imagenes/menu2.png")
menu3 = Image.load("imagenes/menu3.png")

Mp3me.stop()

Mp3me.load("musica/spicegirls.mp3")
mp3mereprod = "false"
mp3mepause = "false"

current=menu1
while true do

Mp3me.play()

screen:blit(0, 0, current)

Mp3me.play()

pad = Controls.read()

if pad:down() and oldpad:down() ~= pad:down() then
current=menu2
end

if pad:up() and oldpad:up() ~= pad:up() then
current=menu1
end

if pad:down() and oldpad:down() ~= pad:down()  and current==menu2 then
current=menu3
end

if pad:up() and oldpad:up() ~= pad:up() and current==menu3 then
current=menu2
end

if pad:cross() and oldpad:cross() ~= pad:cross() and current==menu1 then
dofile("varios/alazar.lua")
end

if pad:cross() and oldpad:cross() ~= pad:cross() and current==menu2 then
dofile("varios/proximamente.lua")
end

if pad:cross() and oldpad:cross() ~= pad:cross() and current==menu3 then
System.Quit()
end

screen.waitVblankStart()
screen.flip()
oldpad = pad
end

salu2

Imagen de maxomilian

para que funcione ponelo asi

 eh "rubenelportero"

par que funcione ponelo asi

 

if pad:down() and oldpad:down() == pad:down() and current==miImagen1 then
current=miImagen2
end

if pad:up() and oldpad:up() ~= pad:up() and current==miImagen2 then
current=miImagen1
end

if pad:down() and oldpad:down() ~= pad:down()  and current==miImagen2 then
current=miImagen3
end

if pad:up() and oldpad:up() ~= pad:up() and current==miImagen3 then
current=miImagen2
end


http://i46.servimg.com/u/f46/11/66/38/26/firma11.png

Imagen de Tanos

Hmmm

Debería de funcionar así. Si no te queda otra opción, haz un estilo de contador que al presionar X sume Y cantidad a Z y que Z al llegar a Q pase a la siguiente imagen y se reinicie Z a 0.


Llamado a los interesados en Lua: Terminemos juntos este proyecto.

Imagen de rubenelportero

jeje

eso antes me lo pense pero me pense que en vez de que cambie la variable current hacer una variable para cada foto y un contador pero, de poco sirve si no funciona el olpad...

salu2

PD. gracias por responder

Imagen de Guillermo_Cornielle

Por que no mejor

Lo pones asi:

If pad:down() then

aqui va la opcion siguiente

end

y has lo mimso para ir hacia arriba, no crees que asi seria mejor, ademas asi esta en el tuto.


psp.scenebeta.com más que una web una comunidad unida.

Quiero una DS!!!!!!!!!!!

Imagen de rubenelportero

lo entendiste mal,

enn el tuyto es para hacer un menu de dos opciones y yo hago uno de 3 entonces se pogo dos veces if pad:down se confundiria

salu2

PD. lo intentare con olpad

Imagen de Guillermo_Cornielle

ok

Si me confundi, pero solo tienes que adaptarlo.


psp.scenebeta.com más que una web una comunidad unida.

Quiero una DS!!!!!!!!!!!

Imagen de CkFra

Una pregunta...

en vez de colocar current=miImagen1, se podría usar como variable vacía no? tendría el mismo resultado que poner current=nil

Es que toy con LUA y a ver si me sé la lección :D


Imagen de Tanos

Pues...

Podría ser, sólo que tendrías que cambiar el comando:

screen:blit(0,0,current)

ya que current, no tiene nada xD. 


Llamado a los interesados en Lua: Terminemos juntos este proyecto.

Imagen de CkFra

Es verdad

al tener vacía la variable y al poner screen:blit no se te carga... es lógico, porque le dice que carge nada xDD

Para que fuese como digo yo sería:

current=nil

...

if pad:up() then
current=miImagen1
screen:blit(0,0,current)
end

Pero ahora una cosa, poniendo esto, la imagen solo se carga cuando pulsamos "arriba", ¿Hay que escribir algo más para que al pulsar se quede fijo, o es como dice el tuto?


Imagen de Tanos

No hace falta na´...

Así como está el código, la imágen se queda fija.


Llamado a los interesados en Lua: Terminemos juntos este proyecto.

Imagen de CkFra

Pero

a cual te refieres, al del tuto o al que he puesto yo?


Imagen de Tanos

Mmmm...

Yo me refería al del tuto, pero creo que en ambos es igual xD.


Llamado a los interesados en Lua: Terminemos juntos este proyecto.

Imagen de CkFra

No

el del tuto es el que está bien, lo mío es lo que está mal xDDD

Además muchas gracias Tanos por poner el tuto, porque es lo que estaba buscando, porque a mi modo solo aparece la imagen cuando se pulsa el boton r, cuando se suelta deja de aparecer la imagen :S Con el modo que tu nos has puesto, al pulsar un boton la imagen se cambia aunque sueltes el boton...

De todos modos, he averiguado como hacerlo con una variable vacía:

[...]

marca=nil

while true do

pad = Controls.read()

screen:blit(0,0,clave)

if marca==recor then
screen:blit(308,141,marca)
end

if pad:r() then
 marca=recor
end

[...]

Esto valdría para usar una variable vacía y para que se mantenga la imagen al pulsar el boton r.

Saludos y gracias


Imagen de mapa1000000

Excelente!

muy buen tutorial ya estoy trabajando en el, :P

Imagen de Pana

Genial, muy bien explicado

Genial, muy bien explicado (aunque yo lo haría de otra forma :p. Ya se sabe que esto de la programacion....).  Muy bien hecho el tutorial, de verdad.

Solo hay una cosa que no me acaba de convencer.... Bueno, dices que se usen imagenes de 480x272 (no lo dices exactamente, pero si la imagen empieza en 0,0...). Esto es posible que nos cree serios problemas si el menú tiene muchas opciones:

El primer problema, y más evidente, esque nuestro juego va a pesar mucho (ocupará muchos MB). Lua, para los gráficos siempre tira de imagenes puras y duras, por lo que el tamaño del juego es un inconveniente.

Por otro lado, Un menú puede tener tranquilamente 20 opciones (sfx on-off, musica on-of, 1p, 2p, 3p, ...,  cargar partida, guardar partida, modo de juego, contrarreloj, etc.) Por tanto, cargar más de 15 imagenes de ese tamaño en memoria, puede ser un serio problema.

Así pues, yo recomendaría, meter un fondo (sin opciones), y asignar a current una imagen justo del tamaño de dicha opción. Como PNG guarda transparencias, no tiene que haber más problemas :P.

Saludos y repito, gran tutorial, seguro que ayuda a más de uno :). 


www.SceneBeta.com recomienda Mozilla FireFox.

Imagen de Tanos

Jejeje...

Tienes razón, pero como dijiste, ya sabes como esto de la programación xD.

Y para todos los novatos, recuerden que para esto no existen límites ;-)

Gracias por los cumplidos compañero :)

Saludos 


Llamado a los interesados en Lua: Terminemos juntos este proyecto.

Imagen de Arbër

Ja,ja,ja

¡Que ganas que tenia de ver un nuevo tutorial por aqui!

Esta muy bien explicado lo de crear el menu, muy bueno.

Un saludo 


Kingdom Hearts fan

¿Te gustan las noticias publicadas? ¿Porqué no votarlas?

¡El grupo SceneBeta no tiene límites!

Imagen de Unicorn

Vaya SORPRESA

todo un lujo actualizar la seccion Snipets :-).

Tengo aqui "durmiendo" un tutorial LUA mejorado del que tenemos, con imagenes, a ver si saco tiempo y lo subo...

Que asco que los dias solo tengan 24 H xD. 


Imagen de F Metal Alchemist

Muy bueno

Muy buen tuto tienes mi 10, lastima que voy a tener que empezar denuevo con el codigo de YPTR :(  porque por tratar de ordenar el codigo y separarlo de imagenes, sonidos y eso en carpetas dejo de funcionar, trate de volverlo a dejar como estaba pero ya no hacia nada :( revisare denuevo talves algo se me esta pasando y por eso no va

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.