jueves, 23 de febrero de 2012

Como creo un menu en C++

A continuación vamos a explicar paso a paso como hacer nuestro propio menu, concretamente un menu de un juego.
Lo primero de todo es tener bien claro lo que deseamos hacer, por ejemplo:  cuantas opciones va a tener nuestro menu, si el menu se manejará por el teclado o raton, si tendra alguna imagen de fondo.

Concretamente se hará dos ejemplos, una pantalla de menu muy simple y otro menu mas completo. Para nuestros ejemplos se ha cojido capturas de menus de juegos existentes. La finalidad de este pequeño tutorial es que se pueda llega a hacer un buen menu para nuestro juego.




Menu simple.
Descripcion: El menu simple será muy basico, se utilizará una imagen de fondo y un boton, que se pueda seleccionar mediante el raton.

En este tipo de menus la imagen elegida de fondo será importante para nuestro proyecto ya que gracias a la imagen podra dar una idea al usuario del tipo de juego del que se trata.



En el ejemplo incluido tenemos dos menus, la diferencia entre ellos es la imagen de fondo y el lugar del boton. En el primero podemos salir pulsando la tecla ESC y en el segundo con la tecla ENTER.

Se inicializa el entorno.

allegro_init();
install_keyboard();
install_mouse();

set_color_depth(32);
set_gfx_mode(GFX_AUTODETECT_WINDOWED, 640, 480, 0, 0);

Se carga las imagenes que vamos a utilizar

fondo = load_bitmap("simple1f.bmp",NULL);
fondo2 = load_bitmap("simple1n.bmp",NULL);
cursor = load_bitmap("cursor.bmp",NULL);

Se inicia el bucle, que finalizara cuando salida sea true

    bool salida = false;

    while ( !salida )
    {

    }

Dentro del bucle, se comprueba si el cursor se encuentra sobre el boton. Segun la posicion del raton cambiamos la imagen de fondo.

         if ( mouse_x > 270 && mouse_x < 370 &&
              mouse_y > 295 && mouse_y < 340)
         {
            blit(fondo2, buffer, 0, 0, 0, 0, 640, 480);
         
            // se ha pulsado el boton del raton
            if ( mouse_b & 1 )
            {
                  salida = true;
            }
         }else{
            blit(fondo, buffer, 0, 0, 0, 0, 640, 480);  
         }

Todas las imagenes se ponen sobre la imagen buffer, que al final es mostrada por pantalla.

         // pinta el cursor
         masked_blit(cursor, buffer, 0, 0, mouse_x, mouse_y, 13,22);
       
         // se muestra todo por pantalla
        blit(buffer, screen, 0, 0, 0, 0, 640, 480);


Antes de acabar se debe eliminar todas la imagenes utilizadas para liberar la memoria ocupada

destroy_bitmap(buffer);
destroy_bitmap(fondo);
destroy_bitmap(fondo2);
destroy_bitmap(cursor);

Si desea descargar el ejemplo pulse aqui

Menu completo.
Descripcion: En este menu se pondrá cuatro opciones, auque se puede tener muchas mas. El manejo de este menu se realiza mediante el teclado.

Al igual que en el menu simple, es muy importante el diseño del menu, si se escoje una buena imagen se le puede dar un mejor aspecto al menu.




En el ejemplo, se muestran tres pasos:

  1. Escojer opciones que tendrá el menu.
  2. Situarlos por pantalla las opciones.
  3. Añadir una imagen de fondo para decorar el menu.


En este ejemplo se puede salir en cualquier momento pulsando la tecla ESC, o escojiendo la opcion salir dentro del menú.

Para descargar el proyecto del programa pulse aqui.

11 comentarios:

  1. buenos días tengo una duda, como hago para que no me salga el menú cuando le doy alguna opción????, es que ando haciendo un juego le doy partida nuevo me sale el tablero, pero me sigue saliendo el menú! muchas gracias

    ResponderEliminar
    Respuestas
    1. Tendría que ver el código para poder ayudarte. Si has utilizado el ejemplo, debes de comprobar el valor de la variable op que sea igual a 1, y si se ha pulsado la tecla "enter", en ese caso llame a nuestra función juego.

      If ( op == 1 && key[KEY_ENTER] )
      {
      juego();
      }

      En juego() tenemos el juego en si, de manera de que cuando acabe la partida vuelva al menu principal.

      Eliminar
  2. Hola, segui tu ejemplo del menu que es manejado a través del teclado y al momennto de elegir una opcion me pasa lo mismo que al usuario de arriba, entra al juego, pero el texto que conforma el menu no desaparece.
    ¿Que puedo hacer para borrar ese texto y no salga en mi juego?
    Muchas gracias por esta excelente pagina. Saludos.

    ResponderEliminar
  3. que allegro utilizas para eso?

    ResponderEliminar
  4. Hola, estoy intentando descargar los ejemplo y se encuentran los links caidos lo puedes solucionar por favor?

    ResponderEliminar
    Respuestas
    1. Gracias por avisar. En breve estará solucionado.

      Eliminar
  5. Te hago una consulta.. quiero meter una imagen de fondo y solo me anda con tus imagenes, si descargo una y la meto por el blits me crashea el programa.

    Alguna idea del porque?

    int main()
    {
    allegro_init();
    install_keyboard();
    install_mouse();

    set_color_depth(32);
    set_gfx_mode(GFX_AUTODETECT_WINDOWED, 1024, 769, 0, 0);

    BITMAP *buffer = create_bitmap(1024,769);
    BITMAP *fondo;
    BITMAP *cursor;

    clear_to_color(buffer, 0x999999);
    fondo=load_bitmap("selva.bmp",NULL);
    cursor=load_bitmap("cursor.bmp",NULL);

    bool salida = false;

    while (!salida)
    {
    blit(fondo, buffer, 0,0,0,0,1024,769);
    masked_blit(cursor,buffer,0,0,mouse_x,mouse_y,13,22);
    blit(buffer,screen,0,0,0,0,1024,769);
    if (key[KEY_ESC]){
    salida = true;
    }
    }
    return 0;
    }
    END_OF_MAIN();

    Y ya de paso te pregunto, el cursor no se borra, es como que se va copiando en todas las posiciones.

    ResponderEliminar
    Respuestas
    1. La imagen que utilices tiene que estar en formato BMP. Con respecto a borrar el cursor, según el código que has puesto debe borrarse, siempre que exista la imagen selva.bmp, y tenga el mismo tamaño o superior que la imagen del buffer.
      Dentro del bucle primero copias el contenido del fondo sobre el buffer, de esta manera cuando se ejecuta por segunda vez o mas, la imagen mostrada anteriormente se borra volviendo al contenido del fondo, luego copias sobre el buffer el cursor, y finalmente muestra el contenido de la imagen buffer en la pantalla. Por tanto debería desplazarse el cursor de forma correcta, sin dejar rastro.

      Eliminar
  6. Eres un grande, necesitaba ver como crear un menu para mi proyecto final que tengo que entregar en menos de un mes, me alegra que tu blog siga activo, muchas gracias.
    P.D: Has pensado en crearte un canal de youtube? ayudarias mucho a los principiantes en allegro.

    ResponderEliminar
  7. ya tengo el menu..pero como le hago para que salga imagen al escoger la primera opcion...me sale pero se quita..no dura nada...gracias

    ResponderEliminar

Antes de publicar un comentario

Todos los comentarios que se realicen en el blog son moderados.

Debido a esto es muy probable que tu comentario no aparezca de inmediato ya que previamente debe ser revisado para evitar un mal uso (SPAM).

Podrán realizar comentario cualquiera que tenga una cuenta de Google.

Related Posts Plugin for WordPress, Blogger...