Unmaintained Introduction to coding - 3. Drawing into the window

Drawing into the window​

View attachment 598

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.

// 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.
View attachment 599
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);

View attachment 600
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);

View attachment 601

The portion of the texture displayed​

By default, a sprite displays the entire texture it is assigned with:
View attachment 602
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.
View attachment 603
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));

View attachment 604
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));

View attachment 605
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);

View attachment 606
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);

View attachment 607

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​

#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;
}