Como hacer un botón

 Aquí os muestro como quedan los botones que vamos a aprender a hacer en este tutorial. Concretamente son botones de textos simples, con un color de fondo.

Para ello se va a crear una clase que la he llamado ALLEGRO_MIBOTON. Esta clase consta de una parte pública que son los métodos para poder utilizar la clase.

Tenemos el método crea, que se encarga de inicializar y calcular todo lo necesario para crear nuestro botón.

Para crear un botón necesitaremos 4 parámetros:

• x,y que indica la posición donde quieres colocar el botón.
• el tipo de fuente del texto para el botón.
• El texto que va a mostrar el botón.

ejemplo:

boton.crea(100, 50, font, "Aceptar");

Crea un botón con el texto Aceptar en la posición x = 100 e y = 50, con el tipo de fuente dado por la variable font.

El método pinta, se encarga de pintar el botón en cuestión, según los datos que previamente tiene del método crea, comprueba si el ratón esta encima o esta pulsado para pintar el botón con el estado correspondiente.

En el botón se puede distinguir tres estados: 

1. estado normal
2. estado seleccionado, que es cuando el ratón esta situado encima del botón
3. estado pulsado, cuando el ratón está encima del botón y está pulsado.

Para pintar el botón es tan sencillo como escribir:

boton.pinta();

Antes de pintar, tienes que crear el botón, sino dará error.

La función pulsado, devuelve verdadero si el ratón está situado encima del ratón y se ha pulsado.

Para comprobar si esta pulsado el botón debes de escribir lo siguiente:

boton.pulsado();

Recuerda que se trata de una función así que devuelve un valor booleano.

Para este ejemplo se ha creado dos botones llamados boton1, y boton2. Cuando alguno de ellos es pulsado se muestra un texto indicando que se ha pulsado dicho botón.

Código

class ALLEGRO_MIBOTON

{

    int x, y;

    int alto;

    int ancho;

    const char* texto;

    ALLEGRO_FONT* fuente;

public:

    void crea(int _x, int _y, ALLEGRO_FONT* font, const char* _texto)

    {

        fuente = font;

        x = _x;

        y = _y;

        texto = _texto;

        alto = al_get_font_line_height(fuente) + 8;

        ancho = al_get_text_width(fuente, texto) + 20;

    }

    void pinta()

    {

        ALLEGRO_COLOR grey;

        ALLEGRO_COLOR grey2;

        ALLEGRO_COLOR grey3;

        ALLEGRO_COLOR black;

        ALLEGRO_COLOR white;

        grey = al_map_rgb(0xe0, 0xe0, 0xe0);

        grey2 = al_map_rgb(0xc0, 0xc0, 0xc0);

        grey3 = al_map_rgb(0x90, 0x90, 0x90);

        black = al_map_rgb(0, 0, 0);

        white = al_map_rgb(155, 155, 155);

        if (ratonEstado.x >= x && ratonEstado.x < x + ancho + 1 && ratonEstado.y >= y && ratonEstado.y < y + alto + 1)

        {

            if (al_mouse_button_down(&ratonEstado, 1))

            {

                //pulsa el raton

                al_draw_filled_rectangle(x, y, x + ancho, y + alto, grey3);

                al_draw_text(fuente, black, x + 9.5, y, 0, texto);

            }

            else

            {

                // sin pulsar

                al_draw_filled_rectangle(x, y, x + ancho, y + alto, grey);

                al_draw_text(fuente, white, x + 9.5, y, 0, texto);

            }

        }

        else

        {

            al_draw_filled_rectangle(x, y, x + ancho, y + alto, grey2);

            al_draw_text(fuente, black, x + 9.5, y, 0, texto);

        }

        al_draw_rectangle(x + 0.5, y + 0.5, x + ancho - 0.5, y + alto - 0.5, black, 0);

    }

    bool pulsado()

    {        

        return (ratonEstado.x >= x && ratonEstado.x < x + ancho + 1 && ratonEstado.y >= y && ratonEstado.y < y + alto + 1) && al_mouse_button_down(&ratonEstado, 1);

    }

}

Las variables que utiliza la clase son privadas, por tanto no se pueden acceder desde fuera. Por ello debes utilizar los métodos.

La clase almacena la posición (x,y), el alto y ancho del botón, el texto a mostrar en el botón, y la fuente en la que se muestra el texto.

Los tres métodos son públicos, de los tres el mas complejo quizás sea el de pintar, ya que se encarga de pintar el botón según si la posición del ratón está encima del botón o no, y si esta pulsado.

Si estás interesado en probar el código, te dejo el código del ejemplo que se muestra en el video.

Haz click aquí para descargar el Código.