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.

4.625
Tu voto: Ninguno Votos totales: 4.6 (16 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 fran98

Error

Cuando lo inicio me sale este error:

script.lua:2: attempt to index global Image (a nil value)

Este es mi codigo:

os.luadevsplash()
miImagen1=Image.load("menu1.png")
miImagen2=Image.load("menu2.png")
miImagen3=Image.load("menu3.png")
dofile("RGSplashLib.lua")
 
splash("src/splash.png",3000,3)
 
while true do
 
pad = Controls.read()
screen:clear()
 
screen:blit(0,0,current)
 
if pad:down() then
current=miImagen2
end
 
 
if pad:down() and current==miImagen2 then
current=miImagen3
end
 
 
if pad:up() then
current=miImagen2
end
 
 
if pad:up() and current==miImagen2 then
current=miImagen1
end
 
 
if pad:cross() and current==miImagen1 then
dofile("src/miscript1.lua")
end
 
 
if pad:cross() and current==miImagen2 then
dofile("src/miscript2.lua")
end
 
 
if pad:cross() and current==miImagen3 then
dofile("src/miscript3.lua")
end
 
screen.waitVblankStart()
screen.flip()
end


Imagen de barney77

Este tutorial es para lúa HM

Este tutorial es para lúa HM y tu estas usando lua DEv.

Imagen de fran98

¿Y como lo hago en LuaDev?

¿Y como lo hago en LuaDev?

Leete la documentación de

Leete la documentación de LuaDEV, para que sepas cuáles son las funciones que tienes disponibles.

Así por encima, te puedo decir que en LuaDEV todas las funciones van en minúsculas, y ya no se usa eso de pad = bla, bla.

EDITO: Pásate por este tuto, te será de mucha ayuda. Si quieres un menu con imágenes, hay otro tuto de nautilus aquí. Quieres más? Pásate por el foro de aportes y el de programación, hay varios tutos ;)

Imagen de fran98

Muchas gracias, me sirvio de

Muchas gracias, me sirvio de mucha ayuda.

Saludos.

Imagen de Duende68

Error En El Tutorial

El error en el tutorial es este:

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

 En esta Parte. Hay Que Poner Esto:

 

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

Son Dos = En current==miImagen2

 

Y aun Asi pasa de La Imgen 1 A La 3 Sin Pasar Por La 2.

Corrijanme si me equivoco.


              Mod VS Spammer"Si Se Puede Soñar, Se Puede Lograr"

               ¿Quieres Un IPad 2 Gratis? Pasate por aqui.

Imagen de albertpra

grasias esta bueno el toto

grasias esta bueno el tuto

Imagen de sting18

No te equibocas pero lo mejor

No te equibocas pero lo mejor seria poner elseif en vez de solo if y poner la pulsacion asi pad:down() and oldpad:down() ~= pad:down() y asi podras poner las que quieras.


Imagen de Duende68

Tambien queria poner eso pero

Tambien queria poner eso pero no sabia como XD

Pero tambien asi:

--Cargar Variables

miImagen1=Image.load("ms0:/PSP/GAME/LUA/System/Menus/miImagen1.jpg")
miImagen2=Image.load("ms0:/PSP/GAME/LUA/System/Menus/miImagen2.jpg")
miImagen3=Image.load("ms0:/PSP/GAME/LUA/System/Menus/miImagen3.jpg")

current=miImagen1

--Empieza El Programa

while true do
 
pad = Controls.read()
screen:clear()
 
screen:blit(0,0,current)

if pad:right() and current==miImagen1 then
current=miImagen2
end
 
if pad:left() and current==miImagen2 then
current=miImagen1
end

if pad:up() and current==miImagen3 then
current=miImagen1
end

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

screen.waitVblankStart()
screen.flip()
end


              Mod VS Spammer"Si Se Puede Soñar, Se Puede Lograr"

               ¿Quieres Un IPad 2 Gratis? Pasate por aqui.

Imagen de sting18

Mira lo mejor es aserlo asi....

Es mas practico y mas funcional si tienes mas de 3 imagenes y tambien hay que limpiar ram antes de cargar otro script este es un ejemplo para un menu con la opcion de imagen 4 para salir al XMB.

menu1 = Image.load("Imagenes/menu1.jpg")
menu2 = Image.load("Imagenes/menu2.jpg")
menu3 = Image.load("Imagenes/menu3.jpg")
menu4 = Image.load("Imagenes/menu4.jpg")

function LimpiarRam()
menu1 = nil menu2 = nil
menu3 = nil menu4 = nil
System.memclean()
collectgarbage()
end

current = menu1

while true do
pad = Controls.read()
screen:clear()
screen:blit(0,0,current)
if pad:down() and oldpad:down() ~= pad:down() and current == menu1 then
current = menu2
elseif pad:down() and oldpad:down() ~= pad:down() and current == menu2 then
current = menu3
elseif pad:down() and oldpad:down() ~= pad:down() and current == menu3 then
current = menu4
elseif pad:up() and oldpad:up() ~= pad:up() and current == menu4 then
current = menu3
elseif pad:up() and oldpad:up() ~= pad:up() and current == menu3 then
current = menu2
elseif pad:up() and oldpad:up() ~= pad:up() and current == menu2 then
current = menu1
elseif pad:cross() and oldpad:cross() ~= pad:cross() and current == menu1 then
LimpiarRam()
dofile("XXXXXXX.lua")
elseif pad:cross() and oldpad:cross() ~= pad:cross() and current == menu2 then
LimpiarRam()
dofile("XXXXXXX.lua")
elseif pad:cross() and oldpad:cross() ~= pad:cross() and current == menu then
LimpiarRam()
dofile("XXXXXXX.lua")
elseif pad:cross() and oldpad:cross() ~= pad:cross() and current == menu4 then
System.Quit()
end
oldpad = pad
screen:flip()
screen.waitVblankStart()
end

se que le servira a mas de 1 saludos a todos ;)


Help

mira pongo el codigo

miImagen1=Image.load("menu1.png")
miImagen2=Image.load("menu2.png")
current=miImagen1
while
true do
 
pad = Controls.read()
screen:clear()
 
screen:blit(0,0,current)
if
pad:down() then
current=miImagen2
end
 
 
if pad:up()
then
current=miImagen1
end
if pad:cross() and
current==miImagen1 then
dofile("miScript1.lua")
end
if
pad:cross() and current==miImagen2 then
dofile("miScript2.lua")
end
screen.waitVblankStart()
screen.flip()
end

y no me carga las imagenes que hago?(la pantalla se queda en negro)

Imagen de --Gomasz--

pues

Porque no pones la ruta de la imagen : miImagen1=Image.load("Ruta de la imagen") lo que hiciste es copiar el codigo asi como esta en el tuto por eso no lee las imagenes.

saludos



\\m// ₪₪₪₪₪₪--  ☠ ☠ ☠ ☠ ☠ ☠ --₪₪₪₪₪₪ \\m//

error

ami me sale un error, un archivo que al abrilo con el bloc de notas decia esto:

Stack trace:
Frame     Function  Args
End of stack trace

no se que es y el lua player se cierra diganme por favor manden un mp plis este es el codigo que estoi poniendo

 

 

miImagen1=Image.load("menu1.png")
miImagen2=Image.load("menu2.png")
current=miImagen1
while true do
 
pad = Controls.read()
screen:clear()
 
screen:blit(0,0,current)
if pad:down() then
current=miImagen2
end
 
 
if pad:up() then
current=miImagen1
end
if pad:cross() and current==miImagen1 then
dofile("miScript1.lua")
end
if pad:cross() and current==miImagen2 then
dofile("miScript2.lua")
end
screen.waitVblankStart()
screen.flip()
end



Imagen de sting18

muchos no podemos poner 3

muchos no podemos poner 3 imagenes podrian poner un ejemplo que funcione para darnos una idea de como tiene que quedar para un menu con 3 imagenes gracias.


Imagen de corinv3

ayudenme

oigan con k programa ago mis imagenes

p.d. grax de antemano

mmm

GIMP, photshop, corel...
Saludos ;D

Problema

Hola.

He intentado hacer un menu basandome en este tutorial pero con tres opciones. El problema esque cuando pulso abajo y estoi en miImagen1 ( tengo miImagen1, miImagen2 y miImagen3) pasa directamente ha miImagen 3..

 

este es el codigo:

miImagen1 = Image.load("./Imagenes/menu_1.png")
miImagen2 = Image.load("./Imagenes/menu_2.png")
miImagen3 = Image.load("./Imagenes/menu_3.png")
current = miImagen1
oldpad = Controls.read()
while true do

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

screen:blit(0,0,current)

if pad:down() and  oldpad:down() ~= pad:down()  and current == miImagen1 then
current = miImagen2
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 == miImagen2 then
current = miImagen1
end
if pad:up() and  oldpad:up() ~= pad:up() and current == miImagen3 then
current = miImagen2
end

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


rivaschristian94 [at] gmail [dot] com

Imagen de va2ron1

hablare...

Hablare contigo por MSN ys estas añadido.

Imagen de Monty - Calabato64

Se puede hacer un tutorial

Se puede hacer un tutorial de como hacer un menú bajo las ondas oficiales en Lua PGE, como el de UltraPandora Installer v4, pero en Lua PGE, no en C


- Monty (anteriormente, Calabato64)

Imagen de Monty - 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.


- Monty (anteriormente, Calabato64)

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.


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

TheGCProjects

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....

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...

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.

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

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.

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.


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

TheGCProjects

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.

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. 

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.

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.

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

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 

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 

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. 


Para recibir ayuda más rápidamente, recomendamos que pongas títulos descriptivos y no utilices abreviaturas (estilo MSN) en tus post de los foros. Recuerda revisar el Manual del perfecto forero y las Normas de la Comunidad.

Imagen de -Ermac-

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 


rooтѕ rocĸ reggae ♪♫

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.