Drawing into the window

Location
  1. Tutorials

    /

  2. Introduction to coding

    /

  3. Drawing into the window

Window filled with a grass background

Textures

The class sf::Texture is used to store pictures in the memory of the graphic card, ready to be drawn.

Its method loadFromFile loads the picture from the file located at the path received in argument. Note that, in C++, text is surrounded by quotes.

1
2
3
4
5
6
// Defines an object of type sf::Texture. sf::Texture grassTex; /* Loads, to memory, the picture inside the file 'grass.png', located inside the folder 'resources', relatively to the location of the executable file. */ grassTex.loadFromFile("resources/grass.png");

Sprites

To draw pictures, we must use sprites. A sprite defines how a picture should be drawn (Example: Its position, scale, rotation...).

sf::Sprite grass; // Assigns the picture loaded by the object 'grassTex' to the sprite 'grass'. grass.setTexture(grassTex);

Drawing sprites

To display a sprite inside a window, we must call the method 'draw' of the window, with the sprite as argument.

win.draw(grass);

By default, sprites are displayed at the position (0,0), relatively to the top-left of the window, and the position of a sprite is the position of its top-left corner.

Window with a tiny picture

The picture is very small, so it only takes a tiny portion of the window.

Positioning and scaling sprites

Let us scale the picture by 15 (Horizontally and vertically):

grass.setScale(15, 15);
Window with a scaled up picture

Because the sprite scales the picture up, we can clearly see its pixels.

Let us set the position of the sprite to 200 pixels from the left of the window and 100 pixels from the top:

grass.setPosition(200, 100);
Window with a scaled up and translated picture

The portion of the texture displayed

By default, a sprite displays the entire texture it is assigned with:

Window with a checked picture

The class sf::IntRect represents a rectangle. At its creation, the first two arguments are the coordinates of its position and the next two parameters are its size (In pixels):

sf::IntRect rect(0, 0, 100, 100);

The method 'setTextureRect' of the class sf::Sprite defines the portion of the texture the sprite should display. It takes an object of type sf::IntRect as argument.

sprite.setTextureRect(rect);

Note that the size of the texture of the following sprite is 200 by 200 pixels.

Window with one-fourth of the checkered picture

Note that the following line does the same as the two lines above:

sprite.setTextureRect(sf::IntRect(0, 0, 100, 100));

Let us make the sprite display an other portion of the texture:

sprite.setTextureRect(sf::IntRect(100, 0, 100, 200));
Window with half the checkered picture

By default, if the sf::IntRect given to the sprite is bigger than the texture, the last pixels are stretched:

sprite.setTextureRect(sf::IntRect(0, 0, 400, 400));
Window with the checkered picture stretched

By calling the method 'setRepeated', from the sf::Texture object used by the sprite, with the value 'true' as argument, we can make the sprite repeat the texture rather than stretch its pixels:

texture.setRepeated(true);
Window with the checkered picture repeated

If the sf::IntRect used by the sprite is 400 by 400 pixels and that its scale is of 1.5 by 1.5, the resulting dimensions of the sprite are 600 by 600 pixels:

sprite.setScale(1.5, 1.5);
Window with the checkered picture scaled and repeated

Drawing the grass

We now know enough to display the grass of the game. Here is the code loading the texture of the grass:

sf::Texture grassTex; grassTex.loadFromFile("resources/grass.png"); grassTex.setRepeated(true);

Here is the code creating the sprite displaying the grass:

sf::Sprite grass; grass.setTexture(grassTex); grass.setScale(5, 5); grass.setTextureRect(sf::IntRect(0,0,160,120));

And we display the grass, inside the window, like such:

win.draw(grass);

The code of the game so far

main.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#include <SFML/Graphics.hpp> int main() { sf::RenderWindow win(sf::VideoMode(800, 600), "Introduction to coding", sf::Style::Close); // Grass sf::Texture grassTex; grassTex.loadFromFile("resources/grass.png"); grassTex.setRepeated(true); sf::Sprite grass; grass.setTexture(grassTex); grass.setScale(5, 5); grass.setTextureRect(sf::IntRect(0,0,160,120)); // Game loop sf::Event event; while(win.isOpen()) { while(win.pollEvent(event)) { if(event.type == sf::Event::Closed) win.close(); } win.clear(); win.draw(grass); win.display(); } return 0; }