Crear Una Ventana openGL con SFML - Ejemplo y Explicación Detallada

 

Introducción a la Pantalla: El Lienzo de la Magia

Cuando pensamos en el desarrollo de aplicaciones gráficas o videojuegos, el punto de partida es la pantalla: un lienzo rectangular donde cobra vida todo lo que visualizamos. Este espacio está compuesto por miles o incluso millones de pequeños puntos llamados pixeles. Cada píxel es el bloque básico de cualquier imagen digital y puede tener su propio color.

¿Cómo se organizan los píxeles?

Para ubicar un píxel en la pantalla, utilizamos un sistema de coordenadas cartesianas bidimensional. Las posiciones de los píxeles se determinan mediante dos valores:

• Coordenada X: Indica la posición horizontal del píxel. El valor 0 se encuentra en el extremo izquierdo de la pantalla y aumenta a medida que nos desplazamos hacia la derecha.
• Coordenada Y: Representa la posición vertical del píxel. A diferencia del sistema de coordenadas matemáticas tradicional, en las aplicaciones gráficas como las de SFML, el origen (0, 0) se encuentra en la esquina superior izquierda de la pantalla. El valor de y aumenta hacia abajo, acercándose al borde inferior del lienzo.

Por ejemplo, si tienes una pantalla de 800 píxeles de ancho por 600 píxeles de alto, el píxel (0, 0) estará en la esquina superior izquierda, mientras que (800, 600) corresponderá a la esquina inferior derecha.

 

La linea azul representa el eje de las x y la linea de color rojo el ejes de las y.

SFML: Manipulando el Lienzo

SFML (Simple and Fast Multimedia Library) facilita el trabajo con gráficos al abstraer la complejidad de dibujar directamente sobre los píxeles. En lugar de manipular cada punto de color individualmente, permite trabajar con objetos gráficos como líneas, figuras geométricas, imágenes y sprites.

Antes de empezar a crear gráficos en SFML, es fundamental comprender este sistema de coordenadas, ya que determinará cómo posicionamos, movemos y dibujamos los elementos en pantalla.

En el siguiente paso, configuraremos una ventana básica de SFML y aprenderemos a abrir nuestro lienzo interactivo para comenzar a dibujar. ¡Prepárate para ver tus primeras creaciones cobrar vida en el mundo digital!

 Como crear una ventana en SFLM

¿Por qué necesitamos una ventana para dibujar?

En el mundo de la programación gráfica, no dibujamos directamente sobre la pantalla física del dispositivo. En su lugar, creamos una ventana, que actúa como una sección definida del espacio en pantalla donde podemos controlar todo lo que sucede:

• Delimitación: La ventana nos permite limitar el área en la que trabajamos, evitando interferencias con otras aplicaciones o elementos del sistema operativo.
• Control de Renderizado: Dibujar gráficos en una ventana implica usar un proceso controlado conocido como renderizado, que permite actualizar los contenidos de forma eficiente y fluida.
• Interacción: Las ventanas facilitan la interacción con el usuario al capturar eventos como clics de mouse, teclas presionadas y redimensionamientos.

 

Las ventanas en SFML se definen mediante la clase sf::Window. Se puede crear una ventana y abrirla directamente durante la construcción:

 

 

 

 

#include <sfml/Graphics.hpp>

int main()
{
    sf::Window window;
    window.create(sf::VideoMode(800, 600),  "My window");
    
    //...
}

 

 

El primer paso para dibujar cualquier cosa en SFML es crear una ventana donde nuestros gráficos puedan visualizarse. Esto se logra utilizando el constructor de la clase sf::RenderWindow. Veamos los argumentos clave que se necesitan:

1. Modo de video: Define el tamaño interior de la ventana, excluyendo la barra de título y los bordes. En este caso, configuramos una ventana de 800x600 píxeles.
2. Título de la ventana: Una cadena de texto que aparece en la barra superior de la ventana.

Si ejecutas un código que solo contiene la creación de la ventana sin ninguna lógica adicional, te encontrarás con un par de problemas importantes:

• El programa termina inmediatamente: Al no haber un bucle de control, el código finaliza justo después de crear la ventana.
• Sin control de eventos: Incluso si introduces un bucle infinito para mantener la ventana abierta, esta se comportará como una ventana "muerta", sin responder a acciones del usuario. No podrás moverla, redimensionarla ni cerrarla.

La siguiente imagen muestra un instante en el que la ventana aparece y desaparece casi de inmediato debido a la ausencia de un bucle de ejecución:

 

---

Haciendo la Ventana Interactiva

Para mejorar nuestro programa, necesitamos agregar un bucle que mantenga la ventana activa y gestione los eventos del usuario. Esto es fundamental para que podamos interactuar con la aplicación, controlar cuándo se cierra la ventana y actualizar el contenido que se muestra. En el próximo paso, añadiremos esta lógica para hacer que nuestra ventana sea dinámica y funcional.

---

 Cómo dar vida a la ventana

Agreguemos algo de código para hacer que este programa sea un poco más interesante:

 

 

#include <sfml/Graphics.hpp>

int main()
{
    
    sf::Window ventana(sf::VideoMode(800, 600), "Mi ventana");
                                                          
	// corre el programa hasta que la ventana se cierre       
while (ventana.isOpen())                                  
{                                                         
    // chequear todos los eventos realizados en la ventana 
    sf::Event evento;                                     
    while (ventana.pollEvent(evento))                     
    {                                                     
        // evento: cerramos la ventana, solicitud de cierr
        if (evento.type == sf::Event::Closed)             
            ventana.close();                              
    }                                                     
}                                                         
                                                          
return 0;                                                 
    
}

 

Entendiendo el Bucle Principal en SFML

El código anterior abre una ventana que permanece activa hasta que el usuario decide cerrarla. A continuación, desglosamos su funcionamiento para comprender los elementos esenciales del desarrollo con SFML:

---

El Bucle Principal: Manteniendo la Aplicación Viva

En casi todas las aplicaciones gráficas, incluido SFML, existe lo que se conoce como bucle principal o bucle de juego. Este se encarga de mantener la aplicación en ejecución, actualizando su contenido y procesando las interacciones del usuario.

¿Qué hace el bucle principal?

1. Verificación de eventos: Dentro del bucle, utilizamos pollEvent() para capturar los eventos que se producen mientras la aplicación está abierta. Esto puede incluir:

   • El cierre de la ventana.
   • La pulsación de una tecla.
   • El movimiento del ratón.
   • La conexión de un joystick, entre otros.

   Como pueden ocurrir múltiples eventos seguidos, utilizamos un bucle while para procesarlos todos uno por uno. La función pollEvent() devuelve un evento si hay uno pendiente, o std::nullopt si no lo hay.

2. Procesamiento de eventos: Una vez capturado un evento, verificamos su tipo para decidir cómo reaccionar. En este ejemplo simple, solo nos interesa el evento sf::Event::Closed, que se dispara cuando el usuario intenta cerrar la ventana. Para completar esta acción, llamamos explícitamente a la función close() de la ventana. Esto permite realizar acciones previas al cierre, como guardar datos o mostrar mensajes de confirmación si fuera necesario.

---

Importancia del Bucle de Eventos

Un error común entre principiantes es olvidar el bucle de eventos, especialmente si aún no les interesa procesar eventos específicos y prefieren usar entradas en tiempo real. Sin este bucle, la ventana no responderá correctamente:

• No podrás moverla, redimensionarla ni cerrarla.
• La propia ventana no podrá procesar sus eventos internos.

Por tanto, aunque no planees manejar eventos personalizados, el bucle de eventos es esencial para que la ventana funcione correctamente.

---

¿Y el Dibujado?

Hasta ahora solo hemos aprendido a abrir y cerrar una ventana, pero no hemos dibujado nada en ella. Como mencionamos en la introducción, el módulo sfml-window no está diseñado para gráficos avanzados. Si deseas trabajar con sprites, formas o texto, deberás pasar al módulo sfml-graphics, que proporciona funciones para dibujar elementos visuales fácilmente.

Alternativamente, si prefieres trabajar a bajo nivel, puedes usar directamente OpenGL, ya que sf::Window crea un contexto OpenGL listo para aceptar tus comandos. Esto permite una integración directa con gráficos avanzados si así lo deseas.

---

¿Qué Verás en la Ventana?

No esperes algo espectacular en esta fase:

• Podrías ver un color uniforme (negro o blanco).
• Podrías ver el último contenido de la aplicación anterior que usó OpenGL.
• O tal vez algo inesperado.

Pronto aprenderás cómo llenar esa ventana con gráficos dinámicos y visualmente atractivos, haciendo que tu aplicación cobre vida.

 

 

El Papel de OpenGL en SFML

OpenGL es una poderosa biblioteca de gráficos que permite dibujar directamente en la pantalla, controlando cada detalle del renderizado. Aunque trabajar con OpenGL directamente puede ser complejo, SFML simplifica ese proceso al ofrecer herramientas que permiten centrarse en el desarrollo de aplicaciones gráficas sin preocuparse por configuraciones complicadas.

Cuando creas una ventana en SFML, ya sea con sf::Window o sf::RenderWindow, internamente se genera un contexto OpenGL. Esto significa que la ventana está lista para aceptar comandos gráficos de OpenGL.

• Si usas sf::Window, puedes enviar comandos manuales de OpenGL para dibujar objetos directamente en la ventana.
• Si usas sf::RenderWindow, SFML se encarga de gestionar la mayor parte del trabajo gráfico, permitiéndote dibujar formas, sprites y texto sin necesidad de conocer OpenGL.

En otras palabras, OpenGL actúa como el motor gráfico subyacente de SFML, mientras que SFML facilita el acceso a ese poder con una interfaz más amigable y sencilla. Si necesitas más control gráfico o deseas integrar efectos avanzados, siempre puedes combinar las funciones de SFML con comandos directos de OpenGL.