Biblioteca de gráficos SFML | Tutorial rápido

Entonces, en este tutorial muy rápido, aprendamos los conceptos básicos de la poderosa biblioteca de gráficos SFML con tecnología OpenGL.

¿Qué es SFML?

En pocas palabras, SFML es una biblioteca multimedia para C++ con enlaces disponibles para otros lenguajes como Python, Rust, etc. No solo le permite usar gráficos 2D acelerados por hardware con OpenGL, sino que también tiene una variedad de métodos relacionados con diferentes tipos de medios. como fuentes, audio, etc. Significa Biblioteca multimedia simple y rápida. Bueno, ¿qué tan simple es? Tan simple que podrías poner en marcha un juego de serpientes en menos de 15 minutos. ¿Qué tan rápido es? Es tan rápido que estaría ejecutando la aplicación a varios miles de fotogramas por segundo.

¿Dónde se utiliza SFML?

SFML se usa mucho en la creación de juegos e incluso en motores de juegos. Y aunque SFML no es compatible con la representación en 3D, se usa para la creación de contexto. Dado que OpenGL no puede crear una ventana, los programadores de gráficos 3D usan SFML (al menos la mayor parte del tiempo) para la tarea.

Configuración del entorno

¡Antes de programar en SFML debemos configurar el entorno! Con suerte, no es un gran dolor de cabeza, ¡especialmente si estás en Linux! Los usuarios de Debian Linux (y cualquier otro tipo de Linux con apt/apt-get) pueden instalar SFML con el siguiente comando:

sudo apt-get install libsfml-dev

Los usuarios de Windows pueden descargar SFML desde este enlace y seguir la guía para instalarlo.

Primeros pasos con SFML

Esta es la aplicación SFML más básica que jamás encontrarás: 

CPP

#include <SFML/Graphics.hpp>
int main()
{
    sf::Window window(
        sf::VideoMode(640, 480),
        "Hello World");
    return 0;
}

Ahora, para compilar el programa, dado que SFML es una biblioteca vinculada dinámicamente, es necesario vincular el programa a la biblioteca. Este paso depende del componente de SFML que se esté usando. Como estamos usando Graphics.hpp, decimos: –

g++ main.cpp -lsfml-graphics -lsfml-window -lsfml-system

¡ Asumiendo que el nombre del archivo de origen usó main.cpp ! El paso será diferente si alguien usa Visual Studio. Puede consultar aquí para ver cómo compilar un proyecto SFML con Visual Studio. Ahora, una vez que ejecute el programa, puede notar que la ventana se crea pero desaparece automáticamente. Esto se debe a que nuestra función principal del controlador crea una ventana y, una vez que se crea, pasa a la segunda instrucción, que es return 0; y por lo tanto sale del programa! Entonces, lo que necesitamos es un bucle básico que seguirá ejecutándose mientras el usuario no cierre la ventana. Así que refactoricemos nuestro código y esta vez comprendamos línea por línea lo que realmente está sucediendo: 

CPP

#include <SFML/Graphics.hpp>
int main()
{
    sf::Window window(
        sf::VideoMode(640, 480),
        "Hello World");
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event))
            if (event.type ==
            sf::Event::Closed)
                window.close();
    }
    return 0;
}

¡Antes de ejecutar el programa, entendamos qué está pasando! Explicación

  1. La primera declaración crea un objeto de ventana usando el constructor de Ventana. En esto, pasamos el modo de video y el título de la ventana. Y, por cierto, VideoMode es simplemente un tipo que define las dimensiones de la ventana (y bits por píxel, pero no lo necesitamos ahora). Y también tenga en cuenta que estamos usando el espacio de nombres ‘sf’ ya que todas las clases y métodos de SFML se definen en esta clase.
  2. En la segunda declaración tenemos una nueva lógica. Básicamente, estamos ejecutando un bucle siempre que la ventana esté abierta. Resulta que la clase Window proporciona un método isOpen que devuelve si hay una ventana abierta o no. Ahora dentro de este ciclo buscamos eventos. Creamos un objeto de evento que luego pasamos en window.pollEvent. Lo que hace básicamente el método pollEvent es verificar si la cola de eventos no está vacía. Actualiza el evento con el siguiente evento en la cola y luego, en el bucle de eventos , verificamos si el evento no fue sf::Event::Closed, que es solo una forma críptica de preguntarle a SFML si el usuario X..ed la ventana ? De forma predeterminada, no sucede nada cuando el usuario presiona el botón de cerrar, por lo que anulamos este comportamiento cerrando la ventana.

¡Tenga en cuenta que cerrar la ventana no finaliza el programa! Pero dado que nuestra ventana ahora está cerrada, el método isOpen ahora devolverá falso y regresaremos de lo que se llama: ¡ el bucle principal del programa! Ahora, si ejecuta el programa, obtendrá una ventana de aspecto extraño (como se muestra a continuación). Claro que puedes cerrarlo, pero se ve raro, los contenidos anteriores de la pantalla están asignados a él y se ven súper raros. ¡ Esto está sucediendo porque no estamos despejando la ventana! En el siguiente ejemplo, vamos a hacer exactamente eso (limpiar la ventana) y también dibujar formas en la pantalla. ¡Suena divertido! Empecemos-

Representación de formas simples con SFML

SFML no se trata solo de la creación de ventanas (aunque muchas personas lo usan solo para eso). Se puede usar para renderizar gráficos acelerados por hardware (incluidas algunas formas básicas y complejas). En este ejemplo, nos limitaremos a dibujar una forma básica (un círculo): – 

CPP

#include <SFML/Graphics.hpp>
int main()
{
    sf::RenderWindow window(
        sf::VideoMode(640, 480),
        "Hello World");
    sf::CircleShape shape(200);
 
    while (window.isOpen())
    {
        sf::Event event;
        while (
            window.pollEvent(event))
            if (event.type ==
            sf::Event::Closed)
                window.close();
 
        window.clear();
        window.draw(shape);
        window.display();
    }
    return 0;
}

Esto produciría el siguiente resultado: – Explicación: 

  1. Nota: se ha utilizado RenderWindow en lugar de Window. Esto se debe particularmente a que estamos renderizando algo en la ventana. ¡ La clase Window en realidad está destinada a los programadores de OpenGL o cualquier persona que simplemente quiera crear y dibujar una ventana! Si tenemos que representar algo en la ventana, debemos usar la clase RenderWindow . La diferencia fundamental entre los dos es que uno está destinado simplemente a crear una ventana en blanco para la creación de contexto y el otro es específicamente para la representación 2D que no puede usar fuera de SFML.
  2. Pasando de RenderWindow, en la línea 06 creamos una forma de círculo y pasamos en un radio de 100. Ahora, exactamente después del bucle de eventos, borramos el contenido de la ventana. Esto es importante, de lo contrario, el círculo dibujado en el cuadro anterior (iteración anterior) todavía estaría allí y si tenemos un círculo en movimiento, ¡tendría el efecto de crear muchos círculos! ¡Así que borramos la pantalla para borrar las cosas que se dibujaron en el cuadro anterior y en la nueva pantalla nueva dibujamos nuestra forma de círculo! Tenga en cuenta que dado que no configuramos la posición del círculo, estaría predeterminado en (0, 0). Después de dibujar la forma, tenemos que mostrar el contenido de la ventana. Esto es importante porque la forma no se dibuja primero en la ventana, sino en un lienzo vacío en blanco, y mientras SFML dibuja en este lienzo vacío, muestra el contenido de la iteración anterior. Y cuando se completa el proceso de dibujo en el lienzo, voltea el contenido de la ventana con el lienzo recién creado. Todo este proceso se llamadoble almacenamiento en búfer si tiene curiosidad.

Ventajas de SFML

Las ventajas de SFML sobre otras bibliotecas multimedia son:
 

  1. SFML es gratuito y de código abierto (a diferencia de DirectX, que es de código cerrado o Metal, que es propietario)
  2. SFML es multiplataforma . Puede ejecutarse en Windows, Linux/Unix, Mac y ya se están realizando experimentos para hacerlo portátil con Android e iOS (en comparación con otras bibliotecas gráficas como la API de Windows, etc., que solo admiten una única plataforma).
  3. SFML es súper rápido Su aplicación se ejecutará la mayor parte del tiempo a varios miles de fotogramas por segundo en comparación con algunas API gráficas que no alcanzan ni siquiera los 500 fps.
  4. SFML es multilenguaje. En este artículo usamos C++, ¡pero podrías haber creado lo mismo usando Python o incluso GoLang! Es decir, SFML proporciona enlaces oficiales para varios idiomas principales. ¡ La mayoría de las API gráficas apenas proporcionan más de un enlace de idioma, mientras que SFML proporciona enlaces para más de una docena de lenguajes de programación diferentes!

Desventajas de SFML

También hay algunas desventajas de SFML que aparecen en el camino: –

  1. ¡SFML no puede hacer 3D ! SFML está estrictamente escrito para proporcionar renderizado de gráficos 2D acelerado por hardware de bajo nivel. Para 3D quizás tengas que usarlo en combinación con OpenGL
  2. ¡ Sin soporte firme para Android e iOS ! Aunque se están realizando experimentos, actualmente no existe un soporte tan firme para Android, iOS u otras plataformas móviles.

Otras lecturas

Ahora terminaría este artículo. Espero que hayas aprendido algo o a. Aquí hay algunos libros que puedes leer para aprender más en SFML

Por supuesto, el wiki original de sfml es encantador, también puede consultarlo allí. Además, la gente de los foros es muy útil y estará encantada de ayudarte si tienes alguna duda. Le deseo buena suerte en su viaje de aprendizaje de SFML. También puede leer más sobre las bibliotecas dinámicas (y en qué aspecto difieren de sus contrapartes estáticas) en esta publicación .

Referencias

https://www.sfml-dev.org/tutorials/2.0/start-linux.php https://www.sfml-dev.org/tutorials/2.0/window-window.php https://www.sfml- dev.org/tutorials/2.0/graphics-shape.php

Publicación traducida automáticamente

Artículo escrito por youngneer y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *