Simple Shapes

Learn how to use SFML simple shapes

Source Code

The code for this tutorial can be found on Github : Learn SFML – Simple Shape Scene

SFML Shapes

The SFML Graphics library offers many classes for drawing simple shapes like Circles, Polygons and Lines. Let’s review them one by one.

Shapes can be used with Textures, you will learn about Textures in the next tutorial.

Circle and Regular Polygon

The class sf::CircleShape can be used to draw Circles and Regular Polygons. A regular polygon is a polygon for which all sides have the same length, examples : Equilateral triangle (3 sides), Square (4 sides), Pentagon (5 sides), Hexagon (6 sides) etc.

Why does SFML use the same class for Circle and Regular Polygon ? Simply because the more the number of sides increases the more a regular polygon will look like a circle. If you check the SFML documentation, you can see that by default your circle has 30 sides and is in fact a regular polygon.

Bonus lesson : How do you call a regular polygon with 30 sides ? a Regular Triacontagon.

CircleShape (float radius=0, std::size_t pointCount=30)

The code below shows how to create a circle and a regular polygon (pentagon).

Circles are defined by their radius
Regular polygons are defined by their radius and number of sides (or points)

//circle
mCircle.setRadius(50.f);
mCircle.setOrigin(50.f, 50.f);
mCircle.setFillColor(sf::Color::Yellow);
mCircle.setPosition(100.f, getSceneResolution().y/2.f);
//pentagon (5 sides)
mRegularPolygon.setPointCount(5); //5 points (the number of points equal the number of sides/faces)
mRegularPolygon.setRadius(50.f);
mRegularPolygon.setOrigin(50.f, 50.f);
mRegularPolygon.setFillColor(sf::Color::Yellow);
mRegularPolygon.setPosition(300.f, getSceneResolution().y/2.f);

Rectangle and Line

The class sf::RectangleShape can be used to draw Rectangles and Lines. Here we consider a Line to be a Rectangle with a very thin height. For example, the code below uses a height of 100 floats for the rectangle and a height of 2 floats for the line. SFML offers another way to draw “real” lines but this will not be covered in this tutorial.

Rectangles and Lines are defined by their size : width and height

//rectangle
mRectangle.setSize(sf::Vector2f(150.f, 100.f));
mRectangle.setOrigin(75.f, 50.f);
mRectangle.setFillColor(sf::Color::Yellow);
mRectangle.setPosition(500.f, getSceneResolution().y/2.f);
//line
mLine.setSize(sf::Vector2f(150.f, 2.f));
mLine.setOrigin(75.f, 1.f);
mLine.setFillColor(sf::Color::Yellow);
mLine.setPosition(700.f, getSceneResolution().y/2.f);

Convex Polygon

The class sf::ConvexShape can be used to draw any convex shape (I’ve tried to draw a car here !?). In order to create a convex shape, you have to define the number of points used, then provide the coordinates of each point.

The order in which you provide the coordinates is important, SFML allows you to go clockwise or counterclockwise, as you can see in the picture on the right, I’ve used a clockwise direction.

Important : The coordinates are relative to the origin (or center of mass) of the overall shape.

The code below shows how to create a convex shapes with 7 vertices (points).

//convex polygon
mConvexPolygon.setOrigin(100.f, 50.f);
mConvexPolygon.setPointCount(7);
mConvexPolygon.setPoint(0, sf::Vector2f(0.f, 0.f));
mConvexPolygon.setPoint(1, sf::Vector2f(100.f, 0.f));
mConvexPolygon.setPoint(2, sf::Vector2f(150.f, 50.f));
mConvexPolygon.setPoint(3, sf::Vector2f(200.f, 60.f));
mConvexPolygon.setPoint(4, sf::Vector2f(200.f, 100.f));
mConvexPolygon.setPoint(5, sf::Vector2f(-50.f, 100.f));
mConvexPolygon.setPoint(6, sf::Vector2f(-50.f, 50.f));
mConvexPolygon.setFillColor(sf::Color::Yellow);
mConvexPolygon.setPosition(950.f, getSceneResolution().y/2.f);

Common Shapes Properties

FillColor

The fill color is the actual color of the shape, you change the color with the method setFillColor(color).

Outline Thickness and Outline Color

You can add borders to all shapes. Borders are defined by their thickness and their color. Expand the section below (Shapes Outline) to see how we’ve added a red border of 4 floats to each shape.

Shapes Outline

//circle
mCircle.setOutlineThickness (4.f);
mCircle.setOutlineColor(sf::Color::Red);
//regular polygon
mRegularPolygon.setOutlineThickness (4.f);
mRegularPolygon.setOutlineColor(sf::Color::Red);
//rectangle
mRectangle.setOutlineThickness (4.f);
mRectangle.setOutlineColor(sf::Color::Red);
//line
mLine.setOutlineThickness (4.f);
mLine.setOutlineColor(sf::Color::Red);
//convex polygon
mConvexPolygon.setOutlineThickness (4.f);
mConvexPolygon.setOutlineColor(sf::Color::Red);

Transformation : position, rotation, scale

All shapes can be moved, rotated and scaled, you will learn about transformations in a later tutorial.

Texture

All shapes can be given a texture (an image), you will learn about textures in the next tutorial