Ecole Polytechnique Fédérale de Lausanne
Section Sciences de la vie
Programmation Orientée Objet
Tutoriel librairie graphique (SFML)

I. Ouvrir une fenêtre et compiler un premier programme SFML

Pour commencer, nous allons simplement créer une application affichant une fenêtre vide (noire), notre première application graphique!

Simultanément, nous allons voir comment utiliser le gestionnaire de compilation scons.

Dans un dossier de votre choix, créez un dossier nommé pong. A l'intérieur de celui-ci, créez les dossiers suivants:

A l'intérieur de src, créez un fichier main.cpp avec le contenu suivant:

#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "InfoSV Pong");
    
    sf::RectangleShape rectangle;
	rectangle.setSize(sf::Vector2f(100, 50)); // Taille (100x50)
	rectangle.setPosition(10, 20); //Position sur l\'écran");
    while (window.isOpen())
    {
		sf::Event event;
		while (window.pollEvent(event)){
			// Les événements seront gérés plus tard ici
		}
		
        window.clear();
        window.draw(rectangle);
        window.display();
    }

    return EXIT_SUCCESS;
}

Ce code sera expliqué sous peu. Avant cela, nous allons le compiler à l'aide de scons.

Dans le dossier principal, créez un fichier nommé SConstruct avec le contenu suivant:

SConscript('src/SConscript', variant_dir='build', duplicate=0)

Ce fichier indique à scons que la compilation se fera dans le dossier build (créé automatiquement) avec les instructions situées dans le fichier src/SConscript. Créez donc ce dernier en téléchargeant le fichier SConscript (clic droit, puis enregistrer sous).

Exécutez maintenant la commande scons dans le dossier principal. Votre programme devrait se compiler. Vous pouvez maintenant exécuter la commande ./build/pong pour exécuter le programme et vous devriez obtenir une fenêtre noire comme ci-dessous.

Note
Remarquez qu'il n'est pas possible de la fermer en cliquant sur le bouton; il faudra donc quitter le programme par un Ctrl+C dans la console. Cela vient du fait que nous n'avons pas encore implémenté la gestion des événements, qui viendra dans un prochain chapitre

Vous pouvez télécharger une solution de cette étape.

Expliquons maintenant le fonctionnement du code ci-dessus, à savoir:

#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "InfoSV Pong");
    
    sf::RectangleShape rectangle;
	rectangle.setSize(sf::Vector2f(100, 50)); // Taille (100x50)
	rectangle.setPosition(10, 20); //Position sur l\'écran");
    while (window.isOpen())
    {
		sf::Event event;
		while (window.pollEvent(event)){
			// Les événements seront gérés plus tard ici
		}
		
        window.clear();
        window.draw(rectangle);
        window.display();
    }

    return EXIT_SUCCESS;
}

La ligne 5 instancie un objet de type sf::RenderWindow (cliquez pour accéder à la documentation), qui représente comme son nom l'indique une fenêtre où il sera possible d'afficher des éléments graphiques. Entre parenthèses se trouvent des paramètres: la taille de la fenêtre et son titre. Il s'agit en fait de paramètres passés au constructeur de cette classe (une méthode particulière permettant d'initialiser l'objet).

Les lignes 7 à 9 définissent un rectangle (taille et position) à dessiner (nous y reviendrons plus tard).

La boucle while des lignes 11 à 16 est ce que l'on appelle communément la boucle de rendu. Le fonctionnement typique d'une application graphique est basé sur une boucle infinie (jusqu'à fermeture du programme) effectuant les opérations suivantes dans l'ordre:

  1. Gestion des événements (à voir)
  2. Effacement de la vue (ligne 13), en appelant la méthode clear de sf::RenderWindow
  3. Dessin (à voir)
  4. Rafraîchissement de la vue (ligne 15 ici), en appelant la méthode display de sf::RenderWindow

Cette boucle est effectuée aussi souvent que possible, ou alors à une certaine fréquence (par exemple 60 images par secondes).

On peut comparer ce système à la fabrication d'un dessin animé artisanal:

  1. La précédente image est enlevée de la table de travail
  2. Une nouvelle image est dessinée
  3. La nouvelle image est photographiée

et ceci 24 fois par seconde...

Tutorial SFML
Corentin Perret, Jamila Sam - 2013-2019