Diario de un programador.- Dia 94
MENU GRAFICO
Recuerdo que por allá en el
capítulo 8, hice un menú con opciones... Este menú me refiero.
Sería interesante ver cómo
puede ser implementado en modo gráfico, así que voy a ver qué tal me
resulta esto:
Lo primero que se me ocurre,
es crear esas opciones como botones que pueden ser presionadas con el mouse.
Como este programa tiene un
código más o menos largo, iré paso a paso implementándolo.
Lo primero será dimensionar
el tamaño de la ventana. La dejaré de un tamaño de 300 x 400
'Alto y
ancho de la ventana
GraphicsWindow.Height
= 300
GraphicsWindow.Width = 400
Lo siguiente será buscar o crear
un fondo para la ventana. Se puede añadir un color de fondo o agregar una
imagen, es cosa de gustos. Yo crearé una imagen con Paint.
No es algo muy llamativo
pero servirá para el asunto. Esta imagen la cargo con el siguiente código
'fondo de la ventana
fondo = "c:\img\03.png"
GraphicsWindow.DrawImage(fondo,0,0)
En
estos momentos, esto es lo que tengo.
'Alto y ancho de la ventana
GraphicsWindow.Height = 300
GraphicsWindow.Width = 400
'fondo de la ventana
fondo = "c:\img\03.png"
GraphicsWindow.DrawImage(fondo,0,0)
Ahora, lo que voy a hacer es
añadir el título, ocupando una fuente de color blanco y de tamaño 18
'titulo
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "INVENTARIO")
Ahora voy a añadir los botones...
'opciones
GraphicsWindow.FontSize = 14
GraphicsWindow.BrushColor = "black"
objetos = Controls.AddButton("1) Objetos",20,60)
armas = Controls.AddButton("2) Armas",20,100)
accesorios = Controls.AddButton("3)
Accesorios",20,140)
estado = Controls.AddButton("4) Estado",20,180)
salir = Controls.AddButton("5) Salir",20,220)
Para cubrir un poco de
espacio, agregaré otra imagen. Esta la descargué desde la siguiente página:
'terra
terra = "c:\img\terra.png"
GraphicsWindow.DrawResizedImage(terra,230,80, 128,128)
Ahora viene una parte un
poco más laboriosa. Se trata de darle “vida” al programa mediante la
interacción de los botones. Lo primero que haré será “activar” el botón
“objetos”
'Control de lo botones
Controls.ButtonClicked =
botonPresionado
Sub botonPresionado
ultimoBoton = Controls.LastClickedButton
If ultimoBoton = objetos Then
GraphicsWindow.Clear()
EndIf
EndSub
Al presionar el botón
“objetos”, se limpia la pantalla. Entonces, solo faltaría rellenar la
información que corresponde a este botón. Esa información la agregaré en otra
subrutina y cuando esté lista, se agregará el nombre de esa subrutina después
de limpiar la pantalla.
Esto quedaría de la siguiente manera:
'Control de lo botones
Controls.ButtonClicked =
botonPresionado
Sub botonPresionado
ultimoBoton = Controls.LastClickedButton
If ultimoBoton = objetos Then
GraphicsWindow.Clear()
menuObjetos()
EndIf
EndSub
Sub menuObjetos
GraphicsWindow.BackgroundColor
= "black"
GraphicsWindow.PenColor = "white"
GraphicsWindow.PenWidth = 4
GraphicsWindow.DrawRectangle(5,5, 390,290)
pocion = "c:\img\potion.png"
GraphicsWindow.DrawResizedImage(pocion,230,80, 128,128)
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "OBJETOS")
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(20,50, "Poción
curativa x 10")
GraphicsWindow.DrawText(20,80, "Cola de
fenix x 5")
GraphicsWindow.DrawText(20,110, "Poción de mana x 3")
EndSub
Entonces, al presionar el botón, esto es lo que muestra:
Ahora que se muestra esta
pantalla, se querrá volver a la anterior, por lo que un botón de “volver” hace
falta, pero para ello es necesario hacer lo mismo que se hizo para llegar hasta
aquí, o sea que hay que borrar la pantalla y llamar al menú que debería estar
en una subrutina.
El menú principal no se
encuentra en una subrutina, así que se tendrá que crear una y meter dentro el
menú principal para que pueda ser llamado.
Al final de todo el código,
agregué el llamado al menú, para que pueda iniciar el programa:
Ahora que el menú principal
está en una subrutina, agregaré el botón “volver”
El código para volver lo
agregué al final del menú de objetos, de esta forma:
Sub menuObjetos
GraphicsWindow.BackgroundColor
= "black"
GraphicsWindow.PenColor = "white"
GraphicsWindow.PenWidth = 4
GraphicsWindow.DrawRectangle(5,5, 390,290)
pocion = "c:\img\potion.png"
GraphicsWindow.DrawResizedImage(pocion,230,80, 128,128)
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "OBJETOS")
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(20,50, "Poción
curativa x 10")
GraphicsWindow.DrawText(20,80, "Cola de fenix x 5")
GraphicsWindow.DrawText(20,110, "Poción de
mana x 3")
GraphicsWindow.BrushColor = "black"
volver = Controls.AddButton("Volver",20,150)
EndSub
Luego de esto, agregué una
instrucción “elseif” en la subrutina “botonPresionado”, que permite borrar la
pantalla y luego llamar a la subrutina “menú” cuando el botón “volver” es
presionado
Sub botonPresionado
ultimoBoton = Controls.LastClickedButton
If ultimoBoton = objetos Then
GraphicsWindow.Clear()
menuObjetos()
ElseIf ultimoBoton
= volver then
GraphicsWindow.Clear()
menu()
EndIf
EndSub
Ahora que ya se tiene
construida esta parte, hay que hacer lo mismo con el resto del menú que falta.
El resto del menú me quedó
de la siguiente forma:
Las imágenes fueron descargadas desde los siguientes enlaces:
Finalmente, el código completo es el siguiente:
Sub menu
'Alto y ancho
de la ventana
GraphicsWindow.Height =
300
GraphicsWindow.Width = 400
GraphicsWindow.CanResize = "false"
'fondo de la ventana
fondo = "c:\img\03.png"
GraphicsWindow.DrawImage(fondo,0,0)
'titulo
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "INVENTARIO")
'opciones
GraphicsWindow.FontSize = 14
GraphicsWindow.BrushColor = "black"
objetos = Controls.AddButton("1) Objetos",20,60)
armas = Controls.AddButton("2) Armas",20,100)
accesorios = Controls.AddButton("3)
Accesorios",20,140)
estado = Controls.AddButton("4) Estado",20,180)
salir = Controls.AddButton("5) Salir",20,220)
'terra
terra = "c:\img\terra.png"
GraphicsWindow.DrawResizedImage(terra,230,80, 128,128)
EndSub
'Control de lo botones
Controls.ButtonClicked =
botonPresionado
Sub botonPresionado
ultimoBoton = Controls.LastClickedButton
If ultimoBoton = objetos Then
GraphicsWindow.Clear()
menuObjetos()
ElseIf
ultimoBoton =
volver then
GraphicsWindow.Clear()
menu()
Elseif
ultimoBoton =
armas then
GraphicsWindow.Clear()
menuArmas()
elseif
ultimoBoton =
accesorios then
GraphicsWindow.Clear()
menuAccesorios()
elseif ultimoBoton = estado then
GraphicsWindow.Clear()
menuEstado()
elseif
ultimoBoton =
salir then
Program.End()
EndIf
EndSub
Sub menuObjetos
GraphicsWindow.BackgroundColor
= "black"
GraphicsWindow.PenColor = "white"
GraphicsWindow.PenWidth = 4
GraphicsWindow.DrawRectangle(5,5, 390,290)
pocion = "c:\img\potion.png"
GraphicsWindow.DrawResizedImage(pocion,230,80, 128,128)
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "OBJETOS")
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(20,50, "Poción
curativa x 10")
GraphicsWindow.DrawText(20,80, "Cola de
fenix x 5")
GraphicsWindow.DrawText(20,110, "Poción de
mana x 3")
GraphicsWindow.BrushColor = "black"
volver = Controls.AddButton("Volver",20,150)
EndSub
Sub menuArmas
GraphicsWindow.BackgroundColor
= "black"
GraphicsWindow.PenColor = "white"
GraphicsWindow.PenWidth = 4
GraphicsWindow.DrawRectangle(5,5, 390,290)
hacha = "c:\img\hacha.png"
GraphicsWindow.DrawResizedImage(hacha,230,80, 128,128)
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "ARMAS")
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(20,50, "Mandoble x 1")
GraphicsWindow.DrawText(20,80, "Hacha x 1")
GraphicsWindow.DrawText(20,110, "Daga x 1")
GraphicsWindow.BrushColor = "black"
volver = Controls.AddButton("Volver",20,150)
EndSub
Sub menuAccesorios
GraphicsWindow.BackgroundColor
= "black"
GraphicsWindow.PenColor = "white"
GraphicsWindow.PenWidth = 4
GraphicsWindow.DrawRectangle(5,5, 390,290)
aro = "c:\img\aros.png"
GraphicsWindow.DrawResizedImage(aro,230,80, 128,128)
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "ACCESORIOS")
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(20,50, "Aro de
fuerza x 1")
GraphicsWindow.DrawText(20,80, "Collar de
magia x 1")
GraphicsWindow.DrawText(20,110, "Guante
Gengi x 1")
GraphicsWindow.BrushColor = "black"
volver = Controls.AddButton("Volver",20,150)
EndSub
Sub menuEstado
GraphicsWindow.BackgroundColor
= "black"
GraphicsWindow.PenColor = "white"
GraphicsWindow.PenWidth = 4
GraphicsWindow.DrawRectangle(5,5, 390,290)
warrior = "c:\img\warr.png"
GraphicsWindow.DrawResizedImage(warrior,230,80, 128,128)
GraphicsWindow.FontSize = 18
GraphicsWindow.BrushColor = "white"
GraphicsWindow.DrawText(20,20, "ESTADO")
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(20,50, "Nivel :
10")
GraphicsWindow.DrawText(20,80, "Ataque:
15")
GraphicsWindow.DrawText(20,110, "Defensa:
3")
GraphicsWindow.DrawText(20,140, "Inteligencia:
3")
GraphicsWindow.DrawText(20,170, "Agilidad:
9")
GraphicsWindow.DrawText(20,200, "Destreza:
12")
GraphicsWindow.DrawText(20,230, "Suerte: 2")
GraphicsWindow.BrushColor = "black"
volver = Controls.AddButton("Volver",20,260)
EndSub
menu()
Espero
que haya sido entretenida la clase. Hasta la próxima.
Gustavo J. Cerda Nilo
Febrero 2016, última actualización Julio 2016
No hay comentarios:
Publicar un comentario