Curso SFML C++: Crear una ventana de dibujo en Linux con g++ (paso a paso)

- mayo 25, 2014

¿Qué vamos a hacer en esta lección?

En esta lección vamos a escribir un programa sencillo en SFML que simplemente muestra una ventana en pantalla. Aunque tengamos instalado un IDE como Code::Blocks, es recomendable hacer las primeras pruebas con el compilador directamente. Vamos a escribir un programa con la librería SFML y compilarlo con g++ por consola o terminal en Linux: es la manera más directa de comprobar que todo está bien instalado antes de desarrollar nuestros programas. Más adelante haremos lo mismo desde Code::Blocks.

El proceso: compilar, enlazar y ejecutar

Para compilar, enlazar y crear un ejecutable con C++ y SFML usando el compilador GNU g++ en Linux, seguimos estos pasos:

Escribir el programa fuente en un editor de texto (por ejemplo gedit) y guardarlo con extensión .cpp.
Compilar la fuente con el comando g++ -c. Esto crea el archivo objeto con extensión .o.
Enlazar las librerías al archivo objeto para crear la aplicación ejecutable.
Ejecutar el programa.

Paso 1: Escribir el programa y guardarlo como ventana.cpp

#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(200, 200), "intellvirtual");

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        window.display();
    }
    return 0;
}

Antes de compilar, conviene entender qué hace este programa:

sf::RenderWindow es la ventana donde se dibuja todo. El constructor recibe dos argumentos: un modo de video de 200×200 píxeles (sf::VideoMode(200, 200)) y el título que aparecerá en la barra de la ventana.
El bucle while (window.isOpen()) es el corazón de todo videojuego: se repite una y otra vez mientras la ventana esté abierta.
Dentro del bucle, window.pollEvent(event) revisa si ocurrió algún evento (tecla, clic, mover la ventana...). Si el evento es sf::Event::Closed (el usuario pulsó la X), llamamos a window.close() para terminar.
window.display() muestra en pantalla todo lo que se haya dibujado en el frame actual.

Este ciclo de "procesar eventos → actualizar → dibujar → mostrar" es la estructura básica de cualquier juego que hagas con SFML.

Paso 2: Compilar el archivo fuente

g++ -c ventana.cpp

La opción -c le dice a g++ que sólo compile, sin enlazar todavía. Si no aparece ningún mensaje de error, el comando se ejecutó con éxito (en Linux, el silencio es buena señal). Debemos tener 2 archivos en la carpeta: ventana.cpp y ventana.o.

Paso 3: Enlazar el objeto para generar el ejecutable

g++ ventana.o -o ventana-app -lsfml-graphics -lsfml-window -lsfml-system

Aquí está la parte que suele fallar si SFML no está bien instalada. Analicemos el comando:

ventana.o — el archivo objeto que generamos en el paso anterior.
-o ventana-app — el nombre que tendrá el ejecutable resultante.
-lsfml-graphics -lsfml-window -lsfml-system — las tres librerías de SFML que necesitamos enlazar: gráficos, ventana y sistema. El prefijo -l (ele minúscula) significa "link" o enlazar.

Si el enlazador se queja con un error del tipo "cannot find -lsfml-graphics", significa que el sistema no encuentra las librerías: revisa la instalación de SFML en Linux. Ahora debemos tener 3 archivos en la carpeta: ventana.cpp, ventana.o y ventana-app.

Paso 4: Ejecutar el programa

Si damos doble clic sobre ventana-app se ejecutará el programa. Si lo queremos ejecutar por consola, introducimos el siguiente comando:

./ventana-app

El resultado:

Una ventana de 200×200 píxeles con el título "intellvirtual". Es sencilla, pero ya tienes funcionando tu primer programa SFML compilado desde la terminal.

Ejercicio: dibujar un círculo azul en la ventana

Podemos ir un paso más allá y dibujar algo dentro de la ventana. Copia el siguiente código, guárdalo con extensión .cpp y repite los pasos anteriores:

#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(200, 200), "IntellVirtual!");
    sf::CircleShape circulo(50.f);
    circulo.setFillColor(sf::Color::Blue);

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        window.clear();
        window.draw(circulo);
        window.display();
    }

    return 0;
}

Las diferencias con el programa anterior son tres líneas clave:

sf::CircleShape circulo(50.f); — crea una forma circular con radio de 50 píxeles.
circulo.setFillColor(sf::Color::Blue); — le asigna el color azul de relleno.
Dentro del bucle, antes de display(), ahora aparecen window.clear() (limpia la ventana con color negro) y window.draw(circulo) (dibuja el círculo en el frame actual). Este borrar-dibujar-mostrar es el orden obligatorio en cada frame.

El resultado: