Glusoft

Textures, Sprites and Shapes with SFML

In this tutorial we will dive deep into the differences between textures, sprites and shapes with SFML.

Textures : sf::Texture

The texture is basically an image loaded into the VRAM, the VRAM is the memory of the graphics card if you have a graphic card with dedicated memory. If you have an integrated memory card the RAM of the computer is used instead.
That is good to know but what does it means concretly for a texture ?

The texture is use for the sprite if you want to display it on the screen.

If you want to access the pixels and do some images manipulation other than size and rotation you need to have the image in the RAM.
For that that you will use the class sf::Image, keep in mind if you want to display the image after some pixels modifications you will need to convert bakc the image to a texture.

The operation of loading textures/images, converting between texture and image are slow operations.

So if you really need to do it, do the work once and cache it!
If you want to know all the methods available for the sf:Texture go check the sf:Texture Documentation
For the sf::Image : sf::Image Documentation

Sprites : sf::Sprite

If you want to display a texture you must use a sprite. Why ? Well to display something you need to have a sf::RenderWindow or a sf::sf::RenderTexture. In the documentation the draw methods are:

void 	draw (const Drawable &drawable, const RenderStates &states=RenderStates::Default)
void	draw (const Vertex *vertices, std::size_t vertexCount, PrimitiveType type, const RenderStates &states=RenderStates::Default)
void 	draw (const VertexBuffer &vertexBuffer, const RenderStates &states=RenderStates::Default)
void 	draw (const VertexBuffer &vertexBuffer, std::size_t firstVertex, std::size_t vertexCount, const RenderStates &states=RenderStates::Default)
classes Hierarchy

Shapes

Circles : sf::CircleShape

To draw a circle you must use the class sf::CircleShape, in the constructor you must specify the radius of the circle. Then you can set the filling color and the outline color.

sf::CircleShape shape(30.f);
shape.setFillColor(sf::Color(0, 0, 255));
shape.setOutlineThickness(5.f);
shape.setOutlineColor(sf::Color(255, 0, 0));

You can also set a texture with shape.setTexture(&tex); and only take a small part of the texture with shape.setTextureRect(sf::IntRect(2, 5, 50, 20));

Rectangle

To draw a rectangle you will need to use the class sf::rectangleShape:

sf::RectangleShape rectangle(sf::Vector2f(10.f, 30.f));
rectangle.setSize(sf::Vector2f(200.f, 50.f));

Polygon

To display a polygon you can use the class sf::ConvexShape:

sf::ConvexShape poly;

poly.setPointCount(6);
poly.setPoint(0, sf::Vector2f(142.f, 112.f));
poly.setPoint(1, sf::Vector2f(204.f, 74.f));
poly.setPoint(2, sf::Vector2f(234.f, 101.f));
poly.setPoint(3, sf::Vector2f(261.f, 145.f));
poly.setPoint(4, sf::Vector2f(176.f, 184.f));
poly.setPoint(4, sf::Vector2f(135.f, 143.f));
poly.setFillColor(sf::Color(255, 0, 0));

The points need to be in clockwise order or anti-clowise order !
If you have a concave shape you can split it into a convex shape into triangles with a Delaunay triangulation, you can find libraries and algorithm to compute the decompositon.

Now you now the difference between textures, sprites and shapes with SFML.