# 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.

//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