En los tutoriales anteriores, cubrimos configuración, bucle de juegoy finalmente manejo del teclado. Hoy vamos a pasar a los conceptos básicos de la programación de gráficos en SFML. Vamos a comenzar con primitivas geográficas simples, luego, en el siguiente tutorial, pasaremos a los sprites. Notará de inmediato que SFML es notablemente consistente en su enfoque de los gráficos, tal como lo es con los Eventos.

Como siempre, hay un video HD de este tutorial. disponible aquí.

Empecemos con un ejemplo simple que dibuja un círculo azul en la pantalla.

// Demonstrate primitve drawing in SFML

#include "SFML/Graphics.hpp"

int main(int argc, char ** argv){
  sf::RenderWindow renderWindow(sf::VideoMode(640, 480), "Demo Game");

  sf::Event event;

  sf::CircleShape circleShape(200);
  circleShape.setFillColor(sf::Color::Blue);

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

    renderWindow.clear();
    renderWindow.draw(circleShape);
    renderWindow.display();
  }


}

Ejecuta este código y verás:

Este ejemplo crea un círculo con un radio de 200 píxeles que se rellena con el color azul. Dibujar es simplemente una cuestión de pasar la forma al método draw() de RenderWindow. Esta es la forma de dibujar casi todo en SFML. Si echas un vistazo a la referencia de clase para Dibujablela clase base de cualquier objeto pasado a draw(), puede hacerse una buena idea de qué clases están disponibles.

Como puede ver, nuestro CircleShape es parte de esa jerarquía. Además de mostrar cómo dibujar cosas en una ventana, este ejemplo nos muestra algunos conceptos clave. Primero, observe que no especificamos la ubicación de nuestro círculo y, de forma predeterminada, se dibujó en la esquina superior izquierda de la pantalla. Esto nos muestra dos cosas críticas. Primero, que el origen (0,0) de una ventana en SFML es la esquina superior izquierda. En segundo lugar, que el origen/pivote (el punto dentro de una forma con respecto al cual se dibuja un Drawable) también es su esquina superior izquierda. ¿Qué pasaría si, por ejemplo, quisiéramos colocar nuestro círculo en relación con su punto medio? Afortunadamente, esto es bastante simple:

  sf::CircleShape circleShape(200);
  circleShape.setOrigin(circleShape.getRadius(), circleShape.getRadius());
  // or you could have calculated the mid point like so:
  // circleShape.setOrigin(circleShape.getLocalBounds().width / 2.0f, circleShape.getLocalBounds().height / 2.0f);

  circleShape.setFillColor(sf::Color::Blue);

Aquí estamos configurando las llamadas de dibujo de puntos en relación con las llamadas a setOrigin(). Esta llamada establece ese punto en coordenadas de píxeles en relación con la esquina superior izquierda del Drawable. Ahora este código dará como resultado lo siguiente:

Otro concepto que no cubrimos es el posicionamiento de nuestros objetos. Es simplemente cuestión de llamar a setPosition() así:

circleShape.setPosition(100.0f, 100.0f);

Esto dará como resultado que la forma se dibuje 100 píxeles a la derecha y 100 píxeles hacia abajo desde la esquina superior izquierda de la ventana. Por supuesto, el valor de origen influirá en cómo se realiza ese sorteo.

Otro concepto importante a cubrir es el orden de dibujo. Lancemos otro círculo, esta vez uno rojo, para ilustrar lo que quiero decir:

  sf::CircleShape circleShape(200);
    circleShape.setFillColor(sf::Color::Blue);
    circleShape.setPosition(100.0f, 100.0f);

    sf::CircleShape circleShape2(200);
    circleShape2.setPosition(0.0f,0.0f);
    circleShape2.setFillColor(sf::Color::Red);
  
    //snip

    renderWindow.clear();
    renderWindow.draw(circleShape);
    renderWindow.draw(circleShape2);
    renderWindow.display();

Ahora ejecútalo y:

El orden de las llamadas de sorteo es de vital importancia. Cambia el código, así:

  renderWindow.clear();
    renderWindow.draw(circleShape2);
    renderWindow.draw(circleShape);
    renderWindow.display(); 

Y obtienes:

Como puede ver, cuanto más tarde se llame al sorteo, mayor será el orden z. O simplemente, las cosas que se dibujan primero se dibujan primero, luego las llamadas de sorteo posteriores se dibujan sobre la parte superior. Para referencia futura, este orden a menudo se denomina índice z.

Ahora que tenemos gráficos con los que jugar, hay algunas cosas que podemos hacer con ellos… como mover, girar y escala. Cada una de esas funciones se transforma en relación con la posición actual. También puede establecer directamente los tres valores usando posición de ajuste, establecerrotación y establecerEscala. Con las formas, también tienes control sobre el contorno o la línea que compone la forma, así:

 sf::CircleShape circleShape(200);
  circleShape.setFillColor(sf::Color::Blue);
  circleShape.setPosition(50.0f, 50.0f);
  circleShape.setOutlineThickness(10);
  circleShape.setOutlineColor(sf::Color::Green);

Aquí establecemos el ancho de línea en 10 píxeles y el color en verde, lo que da como resultado:

Como habrás notado en el diagrama de herencia anterior, existen otras formas, ConvexShape y RectangleShape. RectangleShape debería explicarse por sí mismo, pero ConvexShape requiere un toque de explicación. La forma Convexa representa un casco convexo, es decir, una forma cerrada de líneas que nunca se cruzan ni superan los 180 grados. Usted define una ConvexShape como una serie de puntos, pero es importante que dibuje su forma en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj para que SFML sepa cómo dibujarla. Aquí hay un ejemplo creando un ConvexShape:

 sf::ConvexShape convexShape;
  convexShape.setPointCount(5);
  convexShape.setFillColor(sf::Color(147, 112, 227)); // PURPLE!
  convexShape.setOutlineThickness(3.0f);
  convexShape.setOutlineColor(sf::Color::White);
  convexShape.setPoint(0, sf::Vector2f(0.0f, 0.0f));
  convexShape.setPoint(1, sf::Vector2f(renderWindow.getSize().x, 0.0f));
  convexShape.setPoint(2, sf::Vector2f(renderWindow.getSize().x, renderWindow.getSize().y));
  convexShape.setPoint(3, sf::Vector2f(renderWindow.getSize().x / 2, renderWindow.getSize().y / 2));
  convexShape.setPoint(4, sf::Vector2f(0, renderWindow.getSize().y));

Resultando en

Eso es todo para los gráficos básicos y la representación de formas. En el próximo tutorial, ampliaremos este conocimiento de gráficos y comenzaremos a ver el uso de sprites.

El video