SFML - Partie 3 - Afficher un sprite

Cet article appartient à une série de tutoriels dédiés à SFML. Le lecteur est invité à se référer aux autres sections de ce tutoriel en suivant ce lien : SFML tutoriel.

Introduction

Cette page présente comment afficher un sprite avec SFML. L'exemple présenté sur cette page a été réalisé avec les versions suivantes :

Ubuntu 18.04 LTS
Qt Creator 4.5.2
Qt 5.9.5
GCC 7.3.0, 64 bits
SFML 2.4.2+dfsg-4

Cette vidéo vous donne un aperçu du résultat :

Explications

La première partie du code bascule l'affichage en mode plein écran en conservant la résultion du bureau. un object window (sf::RenderWindow window est créé avec l'attribut sf::Style::Fullscreen.

La synchronisation verticale est activée grâce à setVerticalSyncEnabled(true). SFML va limiter le nombre de trames affichées à la fréquence de l'écran. Cela va éviter des artéfacts visuel, et limiter la fréquence de rafraichissement à une valeur optimisée.

Le sprite est créé avec l'objet sf::Texture avant de charger l'image depuis un ficher avec la méthode loadFromFile().

Notez que le sprite (ou la texture) est lissée (smoothed) pour obtenir un meilleur rendu à l'écran. La texture apparait plus unifiée à l'écran et la pixelisation tend à l'éffacer. Toutefois, si vous souhaitez que la texture apparaisse exactement comme dans l'image initiale, vous pouvez commenter cette ligne.

Lorsque l'initialisation est terminée, la boucle principale démarre. Elle boucle jusqu'à ce que la fenêtre soit fermée, soit parce que l'utilisateur a cliqué sur la croix, soit parce qu'un événement a fermé la fenêtre.

La boucle principale répéte les 4 actions suivantes :

affiche le fpd dans la console ;
efface l'écran avec une couleur d'arrière plan (window.clear()) ;
place et affiche le sprite dans la fenêtre (sprite.setPosition() et window.draw()) ;
rafraichit l'écran avec le nouvelle affichage et attend la synchro.

Notons que le sprite est affiché au milieu de l'écran grâce à la méthode window.getSize().

Exemple et code source

Le programme suivant crée une fenêtre en mode plein écran et affiche un sprite sur l'écran :

/*!
 * \file    main.cpp
 * \brief   start SFML in full screen and display a sprite (https://lucidar.me/en/sfml/sfml-part-3-display-a-sprite/)
 * \author  Philippe Lucidarme
 * \version 1.0
 * \date    13/07/2018
 */

// SFML libraries
#include <SFML/Graphics.hpp>
#include <iostream>

int main()
{
    // _____________________
    // ::: Create window :::

    // Create a window with the same pixel depth as the desktop
    sf::VideoMode desktopMode = sf::VideoMode::getDesktopMode();

    sf::RenderWindow window(sf::VideoMode(  desktopMode.width,
                                            desktopMode.height,
                                            desktopMode.bitsPerPixel),
                            "SFML part 3",
                            sf::Style::Fullscreen);

    // Enable vertical sync. (vsync)
    window.setVerticalSyncEnabled (true);

    // ____________________
    // ::: Load texture :::

    // Create texture from PNG file
    sf::Texture texture;
    if (!texture.loadFromFile("../sfml-icon-small.png"))
    {
        std::cerr << "Error while loading texture" << std::endl;
        return -1;
    }
    // Enable the smooth filter. The texture appears smoother so that pixels are less noticeable.
    texture.setSmooth(true);

    // _______________________________________
    // ::: Create sprite and apply texture :::

    // Create the sprite and apply the texture
    sf::Sprite sprite;
    sprite.setTexture(texture);
    sf::FloatRect spriteSize=sprite.getGlobalBounds();
    sprite.setOrigin(spriteSize.width/2.,spriteSize.height/2.);

    // _________________
    // ::: Main loop :::

    sf::Clock timer;
    while (window.isOpen())
    {
        // Display fps
        std::cout << int(1./timer.restart().asSeconds()) << " fps" << std::endl;

        // Process events
        sf::Event event;
        while (window.pollEvent(event))
        {
            // Close the window if a key is pressed or if requested
            if (event.type == sf::Event::Closed) window.close();
            if (event.type == sf::Event::KeyPressed) window.close();
        }

        // Clear the window and apply grey background
        window.clear( sf::Color(127,127,127));

        // Draw the sprite in the middle of the screen
        sprite.setPosition(window.getSize().x/2., window.getSize().y/2.);
        window.draw(sprite);

        // Update display and wait for vsync
        window.display();
    }
    return 0;
}

Téléchargements

Le projet Qt pour cet exemple peut être téléchargé ci-dessous :

Voir aussi

Dernière mise à jour : 15/03/2021