Basics of SFML drawing

Much like in kindergarten, we will start with basic shapes and make our way up to more complex types. Let's work on rendering a rectangle shape by first declaring it and setting it up:

sf::RectangleShape rectangle(sf::Vector2f(128.0f,128.0f));
rectangle.setFillColor(sf::Color::Red);
rectangle.setPosition(320,240);

sf::RectangleShape is a derived class of sf::Shape that inherits from sf::Drawable, which is an abstract base class that all entities must inherit from and implement its virtual methods in order to be able to be drawn on screen. It also inherits from sf::Transformable, which provides all the necessary functionality in order to move, scale, and rotate an entity. This relationship allows our rectangle to be transformed, as well as rendered to the screen. In its constructor, we've introduced a new data type: sf::Vector2f. It's essentially just a struct of two floats, x and y, that represent a point in a two-dimensional universe, not to be confused with the std::vector, which is a data container.

Tip

SFML provides a few other vector types for integers and unsigned integers: sf::Vector2i and sf::Vector2u. The actual sf::Vector2 class is templated, so any primitive data type can be used with it like so:

sf::Vector2<long> m_vector;

The rectangle constructor takes a single argument of sf::Vector2f which represents the size of the rectangle in pixels and is optional. On the second line, we set the fill color of the rectangle by providing one of SFML's predefined colors this time. Lastly, we set the position of our shape by calling the setPosition method and passing its position in pixels alongside the x and y axis, which in this case is the centre of our window. There is only one more thing missing until we can draw the rectangle:

window.draw(rectangle); // Render our shape.

This line goes right before we call window.display(); and is responsible for bringing our shape to the screen. Let's run our revised application and take a look at the result:

Now we have a red square drawn on the screen, but it's not quite centered. This is because the default origin of any sf::Transformable, which is just a 2D point that represents the global position of the object, is at the local coordinates (0,0), which is the top left corner. In this case, it means that the top left corner of this rectangle is set to the position of the screen centre. That can easily be resolved by calling the setOrigin method and passing in the desired local coordinates of our shape that will represent the new origin, which we want to be right in the middle:

rectangle.setOrigin(64.0f,64.0f);

If the size of a shape is unknown for whatever reason, the rectangle class provides a nice method getSize, which returns a float vector containing the size:

rectangle.setOrigin(rectangle.getSize().x / 2, rectangle.getSize().y / 2);

Now our shape is sitting happily in the very middle of the black screen. The entire segment of code that makes this possible looks a little something like this:

#include <SFML/Graphics.hpp>

void main(int argc, char** argv[]){
  sf::RenderWindow window(sf::VideoMode(640,480),
    "Rendering the rectangle.");

  // Creating our shape.
  sf::RectangleShape rectangle(sf::Vector2f(128.0f,128.0f));
  rectangle.setFillColor(sf::Color::Red);
  rectangle.setPosition(320,240);
  rectangle.setOrigin(rectangle.getSize().x / 2, rectangle.getSize().y / 2);

  while(window.isOpen()){
    sf::Event event;
    while(window.pollEvent(event)){
      if(event.type == sf::Event::Closed){
        // Close window button clicked.
        window.close();
      }
    }
    window.clear(sf::Color::Black);
    window.draw(rectangle); // Drawing our shape.
    window.display();
  }
}