Tutoriels >>

Nos tutoriels sur la programmation >>

Apprendre à créer vos logiciels >>

Passez au multimédia avec la SFML.

Chapitre 1: Présentation de la SFML

Présentation

Obtenir la SFML

Chapitre 2: Installation de la SFML

Installation sous Code::Blocks

Chapitre 3: Première fenêtre

Construction de la fenêtre

Mise en place de la boucle principale

Chapitre 4: Du texte avec la SFML

Créer et Afficher du Texte

Charger une police

Mise en forme du Texte

Chapitre 1: Présentation de la SFML

Vous avez toujours voulu concevoir vous même vos jeux vidéos de A à Z mais vous pensez que c'est réservé aux élites de la programmation ?
Et bien sachez qu'avec la SFML c'est tout le contraire, en effet cette API vous permettra de réaliser facilement vos propres petits jeux.

Prérequis

Malheureusement, on ne peut pas se lancer comme cela. Il vous faudra au préalable avoir de bonnes connaissances du langage C++ et savoir ce qu'est une bibliothèque.

Présentation

La SFML est une bibliothèque multimédia permettant de construire rapidement et facilement des applications multimédias ou des jeux vidéos. Elle permet aussi de servir de systèmes de fenêtrage pour l'API3D OpenGL.

SFML signifie : Simple and Fast Multimedia Library.

Elle est écrite en langage C++ mais elle est disponible dans de nombreux autres langages comme le C, le langage Python, etc.

De plus elle est multi-plateforme ce qui veut dire que nos programmes pourront être compilés sur plusieurs systèmes d'exploitation différents.

Un autre point original de la SFML, c'est que contrairement à d'autres API, comme la SDL par exemple, elle est divisée en plusieurs petits modules de manière à ne pas surcharger le programme en fonctions inutiles. Le développeur peut choisir de quels modules il a besoin. Ainsi si il souhaite uniquement utiliser la SFML pour le fenêtrage il utilisera uniquement les modules système et de fenêtrage. Si il souhaite ajouter du contenu multimédia il ajoutera le module graphique.
La SFML dispose de 5 modules distincts :

Module système
Module de fenêtrage
Module graphique
Module audio
Module réseau

Nous essayerons dans ce tutoriel de voir les 4 premiers modules, le 5ème sera ignoré (pour le moment).

Obtenir la SFML

Pour obtenir la SFML, il vous suffit d'aller la télécharger sur le site officiel :

Site officiel de la SFML

Une fois sur le site cliquez sur cette image en haut à droite de la page d'accueil :

Puis téléchargez, en fonction de votre OS et/ou de votre IDE le SDK complet en C++. Ainsi si vous êtes sous Windows et que vous utiliser l'IDE Code::Blocks vous téléchargerez le fichier, sur cette image, entouré de rouge.

Dans le prochain chapitre nous verrons comment installer la SFML puis nous verrons un premier petit programme exemple.

Chapitre 2: Installation de la SFML

Voilà vous avez maintenant chez vous le dossier complet de la SFML mais pour pouvoir l'utiliser il va falloir que nous l'installions. A savoir que je détaillerais seulement l'installation sous Code::Blocks. Si vous êtes sous Visual C++ Express, il existe, sur le site officiel de la SFML, un tutoriel d'installation. De même si vous utilisez Gcc sous Linux

Installation sous Code::Blocks

Tout d'abord rendez vous dans le répertoire d'installation de Code::Blocks puis chercher le répertoire MinGW (ou une déclinaison de ce genre car le nom peut varier en fonction de la version de code::blocks ou du mode d'installation que vous avez choisi) Puis dans le dossier include créer un nouveau dossier appelé SFML dans lequel vous collerez tous les headers de la SFML(contenu dans le dossier include, SFML du dossier de la SFML).

Ce qui devrait vous donner ceci (le chemin du dossier doit sans doute être différent chez vous, mais le but est de vous montrer ou je place les headers dans le dossier MinGW) :

Une fois cela fait rendez vous dans le dossier " lib\mingw " du dossier de la SFML. Copier tout les fichiers qui s'y trouvent puis retourner dans le dossier MinGW de Code::Blocks et de la même manière dans le dossier "lib" créer un dossier SFML et collez y tous les fichiers. :

Maintenant créez un nouveau projet vide dans Code::Blocks ("Empty Project"). Une fois cela fait, allez dans Settings >> Compiler and Debugger puis dans l'onglet Search Directory >> onglet Compiler, indiquez le dossier contenant les headers de la SFML (cliquez sur Add, puis allez selectionner le dossier). De la même manière dans l'onglet Linker, ajoutez le dossier ou se situe les libs de la SFML.

Ce qui donne chez moi pour les headers :

Et pour les libs :

Maintenant créez le fichier main.cpp et ajoutez y le code suivant :

Code cpp:

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

int main()
{
    return EXIT_SUCCESS;
}

Plus qu'une manipulation et ce sera bon !!! allez

Allez maintenant dans Settings >> Compiler and Debugger puis l'onglet linker et ajoutez les 3 librairies suivantes :

-lsfml-system
-lsfml-window
-lsfml-graphics

En respectant bien cet ordre sinon ça ne compilera pas !

Comme ceci :

Ouf

vous pouvez maintenant compiler le code de test que je vous est donné plus haut, si une erreur apparait, re-vérifiez bien toutes les étapes vous en avez surement ratée une. Si vraiment vous avez une erreur que vous n'arrivez pas à régler rendez vous sur le forum ou une aide supplémentaire pourra vous être apporté pour l'installation de la SFML.

N'oubliez pas de sauvegarder votre projet comme template pour ne pas avoir à refaire tout depuis le début (File >> Save project as User-Template

Si tout se passe bien vous devez obtenir un exécutable qui ne fait ... rien.

Si c'est le cas c'est que tout est ok et que nous allons maintenant pouvoir créer notre première application.

Chapitre 3: Première fenêtre

Voilà tout est près nous allons maintenant pouvoir créer notre premier programme.

Construction de la fenêtre

Sans plus attendre rajoutez donc les headers nécessaires au fonctionnement du programme à savoir :

Code cpp:

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

Par convention lorsqu'on inclut les headers on fait comme cela :

"#include <SFML/nomDuModule.hpp>"

On voit donc ici qu'on utilisera le module Window et le module System.

Créons ensuite notre main :

Code cpp:

int main(void)
{
   return EXIT_SUCCESS;
}

C'est bien beau tout ça mais maintenant pour dessiner une fenêtre on fait quoi ?

Et bien nous allons utiliser une classe de fenêtre qui nous permettra de dessiner à l'intérieur, de récupérer les évènements (comme les touches pressées, nous détaillerons tout cela plus tard). Cette classe c'est RenderWindow, elle est contenue dans le namespace sf

Toutes les classes de la SFML sont contenues dans le namespace sf

Créons donc une instance de la classe RenderWindow :

Code cpp:

sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Hello World");

On créé ici l'objet App de type RenderWindow. On envoie deux paramètres au constructeur. Le mode vidéo de la fenêtre, suivit du nom de la fenêtre (de type std::string).

sf::VideoMode prend 3 arguments comme paramètres, le premier (800) est la largeur, en pixels , de notre fenêtre, le second (600) est la hauteur en pixels. Le troisième (32) est un peu plus délicat puisqu'il s'agit de la profondeur de couleurs. C'est en fait le nombre de bits nécessaire à la représentation d'une couleur par pixel. Si vous souhaitez en savoir plus je vous invite à lire cet article de Wikipédia

On créé donc ici une fenêtre de 800*600 pixels avec une profondeur de 32 bits par pixels dont le titre sera "Hello World".

Ensuite on appel la méthode Clear qui permettra de remplir notre fenêtre d'une couleur définit par nous, plutôt que d'avoir des pixels aléatoires à l'intérieur.

Par défaut à l'appel de Clear la fenêtre est remplie en noir. Mais vous pouvez définir une couleur en envoyant en paramètre la couleur que vous souhaitez en envoyant sf::Color().

Ainsi si l'on souhaite avoir du blanc on fera de cette manière :

Code cpp:

App.Clear(sf::Color(255, 255, 255));

Les 3 paramètres de sf::Color sont les composantes rouge, vert et bleu de la couleur. En effet les couleurs "primaires" sont donc le rouge, le vert et le bleu. Si vous ne savez pas quelles combinaisons donnent quelles couleurs vous pouvez utiliser la palette de couleur de MS Paint.

Ainsi si l'on veut du bleu comme celui sur l'image on sait qu'il faudra une combinaison Rouge, Vert, Bleu de (62 99 227). Essayons donc :

Code cpp:

App.Clear(sf::Color(62, 99, 227));

Maintenant notre fenêtre est fin prête nous allons pouvoir l'afficher. Pour cela il faut utiliser la méthode Display qui va nous permettre d'afficher le contenu de la fenêtre.

Code cpp:

App.Display();

Vous devriez donc avoir le code suivant :

Code cpp:

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

int main()
{
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Hello World");

    App.Clear(sf::Color(62, 99, 227));

    App.Display();

    return EXIT_SUCCESS;
}

Compilons

... Et ... Ha nous avons à peine le temps de voir notre belle fenêtre bleu qu'elle se ferme aussitôt

Mise en place de la boucle principale

Pour qu'elle reste afficher le temps que nous voulons nous devons donc ajouter une boucle dans notre programme pour qu'il affiche la fenêtre autant de temps que nous le souhaitons. Certains penserons aussitôt au while(1), mais cette technique assez rustre est très fortement déconseillée

Ajoutez donc dans votre programme la boucle suivant (juste après la création de notre variable App, elle doit aussi englober les 2 méthodes), n'essayez pas de comprendre ce qu'elle fait pour le moment, contentez vous de comprendre les 2 méthodes vu plus haut ainsi que la manière de créer une fenêtre.

Code cpp:

 while (App.IsOpened())
    {
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            if (Event.Type == sf::Event::Closed)
                App.Close();

            if (Event.Type == sf::Event::KeyPressed)
            {
                if (Event.Key.Code == sf::Key::Escape)
                    App.Close();
            }
        }
      App.Clear(sf::Color(62, 99, 227));


      App.Display();
    }

Nous obtenons donc le code suivant :

Code cpp:

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

int main()
{
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Hello World");


    while (App.IsOpened())
    {
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            if (Event.Type == sf::Event::Closed)
                App.Close();

            if (Event.Type == sf::Event::KeyPressed)
            {
                if (Event.Key.Code == sf::Key::Escape)
                    App.Close();
            }
        }

    App.Clear(sf::Color(62, 99, 227));


    App.Display();
    }

    return EXIT_SUCCESS;
}

Avant de compiler vérifiez bien que vous avez mis les dlls de la SFMl soit dans votre dossier Windows, soit avec l'exécutable, si vous ne les mettez pas votre application ne pourra pas fonctionner. Vous devez placer les dlls qui correspondent aux modules que vous utilisez, ainsi pour notre programme 3 dlls sont nécessaires : (même si ce n'est pas évident pour certains nous utilisons bel et bien le module système, nous ne l'avons pas inclut car c'est automatiquement fait par le module graphics.)

sfml-system.dll
sfml-window.dll
sfml-graphics.dll

Vous les trouverez dans le dossier lib de la SFML.

Compilez et vous obtenez enfin notre belle fenêtre d'un bleu très reposant

Voilà vous êtes maintenant capable de créer votre fenêtre SFML. Comme petite exercice essayer donc de refaire cela en mettant un fond noir cette fois ci. Bonne chance.

Nous verrons ensuite comment afficher du texte dans notre fenêtre.

Chapitre 4: Du texte avec la SFML - SFML - Apprendre la SFML

Maintenant que nous savons créer une fenêtre, peut être serait il intéressant d'y ajouter des éléments. Nous allons donc voir dans ce chapitre comment insérer et mettre en forme notre texte.

Créer et Afficher du Texte

Nous allons nous baser sur le code du chapitre précédent, à la différence que le fond de notre fenêtre sera noir. Vérifier donc que votre code de base soit celui-ci :

Code cpp:

#include <SFML/System.hpp>
#include <SFML/Window.hpp>
#include <SFML/Graphics.hpp>



int main(void)
{
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Du texte avec la SFML");

    while(App.IsOpened())
    {
        sf::Event Event;
        while(App.GetEvent(Event))
        {
            if(Event.Type == sf::Event::Closed)
                App.Close();
        }

        App.Clear();

        App.Display();
    }

    return EXIT_SUCCESS;
}

La classe qui permet de créer une chaîne de caractères avec la SFML se nomme String (contenue dans le namespace sf). Ainsi pour créer un texte affichable à l'écran il suffira de créer une instance de la classe String. Elle prend 3 paramètres :

Le texte à afficher
La police de la Chaîne
La taille des caractères de la chaîne

Par défaut la police utilisée est la police Arial et la taille des caractères est de 30 c'est pourquoi nous ne nous en occuperons pas pour le moment et nous y reviendrons au prochain chapitre.

Nous allons créer cette instance en envoyant comme paramètre le texte que nous souhaitons afficher à l'écran. Ici ce sera (non sans une pointe d'originalité

) : "Bonjour tout le monde".

Code cpp:

sf::String Texte("Bonjour tout le monde");

Notre chaîne est créer cependant si vous compilez, et que vous lancez l'application rien ne s'affichera à l'écran.

On peut affecter un texte à notre instance après la création en utilisant la méthode SetText, qui prend en paramètre le texte que contiendra la variable.

Pour faire cela il va nous falloir appeler la méthode Draw qui prend en paramètre l'objet que vous souhaitez afficher à l'écran, nous l'appellerons juste après avoir vider notre fenêtre avec Clear.

Petite parenthèse : la classe String hérite de la classe abstraite Drawable, (tout comme la classe Sprite qui nous servira à afficher des sprites à l'écran dans le prochain chapitre), toutes les classes permettant d'afficher des "objets" à l'écran dérivent cette classe abstraite.

Ce qui nous donne donc le code suivant :

Code cpp:

int main(void)
{
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Hello World !");

    sf::String Texte("Bonjour tout le monde");

    while(App.IsOpened())
    {
        sf::Event Event;
        while(App.GetEvent(Event))
        {
            if(Event.Type == sf::Event::Closed)
                App.Close();
        }

        App.Clear();

        App.Draw(Texte);

        App.Display();
    }

    return EXIT_SUCCESS;
}

Et le résultat suivant :

A noter que la SFML gère aussi les accents

. Voyons maintenant comment changer la police de notre texte.

Charger une police

C'est bien beau tout ça mais la police Arial, n'est sans doute pas la plus élégante. Pourquoi ne pas en utiliser une autre ?

C'est donc ce que nous allons faire. Et pour ce tutoriel j'utiliserais la police Eraser Dust disponible sur DaFont. Une fois fait prenez le fichier nommé : "erasdust".

Pour charger une police, il nous faudra d'abord utiliser la classe Font, qui ne fait rien d'autre que charger une police en mémoire.

Code cpp:

sf::Font Police;

Une police prend de la place en mémoire et la charger peut prendre du temps si celle si à une taille conséquente ou si votre ordinateur se fait ancien. Faites donc bien attention de ne charger qu'une fois la police que vous utiliserez et appliquer la pour toutes les variables de types sf::String qui utiliserons cette police.

Pour charger une police on utilise la fonction LoadFromFile qui renvoie un bool en fonction de si oui, ou non, votre police a pu être chargée en mémoire. Il est donc important de tester cela.

Code cpp:

if(!Police.LoadFromFile("erasdust.ttf"))
        return EXIT_FAILURE;

Pensez à bien mettre votre fichier ttf dans le même repertoire que l'exécutable ou sinon à bien spécifier l'endroit ou se trouve le fichier.

Notre police chargée en mémoire, il nous reste plus qu'à l'appliquer a notre texte en utilisant simplement la méthode SetFont ou en envoyant Police comme paramètre lors de la création de notre instance de String.

Code cpp:

int main(void)
{
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Hello World !");

    sf::Font Police;
    if(!Police.LoadFromFile("erasdust.ttf"))
        return EXIT_FAILURE;

    sf::String Texte("Bonjour tout le monde");
    Texte.SetFont(Police);

    // Ou Encore :
    //sf::String Texte("Bonjour tout le monde", Police);

    while(App.IsOpened())
    {
        sf::Event Event;
        while(App.GetEvent(Event))
        {
            if(Event.Type == sf::Event::Closed)
                App.Close();
        }

        App.Clear();

        App.Draw(Texte);

        App.Display();
    }

    return EXIT_SUCCESS;
}

Ce qui nous donne ceci :

Voyons maintenant comment mettre en forme notre texte.

Mise en forme du Texte

Dans cette partie je ne vous présenterais pas quelque chose de concret je vous montrerais simplement plusieurs fonctions permettant de mettre en forme notre texte.

Changer la taille du texte

Pour cela on utilise la fonction SetSize qui prend en paramètre la taille à appliquer au texte.

Code cpp:

Texte.SetSize(60);
//Les caractères auront une taille de 60.

Modifier la couleur du texte

On utilise la méthode SetColor.

Code cpp:

Texte.SetColor(sf::Color(162, 64, 162));
// Notre texte sera violet

Modifier le style du texte

Pour cela, on utilise la fonction SetStyle qui prend en paramètre les flags suivants :

sf::String::Bold : Pour un texte en gras
sf::String::Italic : Pour un texte en italique
sf::String::Underlined : Pour un texte souligné
sf::String::Regular : Par défaut, texte normal

On peut combiner plusieurs styles en utilisant l'opérateur |

Code cpp:

Texte.SetStyle(sf::String::Bold | sf::String::Underlined);
//Texte en gras et souligné

Modifier la position du Texte

On utilise la fonction Move qui prend en paramètre le déplacement à effectuer en x et en y de l'objet. Ainsi pour bouger notre texte de 130 pixels en largeur et de 240 et hauteur on fera comme ceci :

Code cpp:

Texte.Move(130, 240);

Et ce n'est pas tout ! Comme sf::String dérive de sf::Drawable vous pouvez donc utiliser toutes les méthodes de cette classe pour modifier et mettre en forme votre texte.

En utilisant ce qu'on vient de voir on obtient donc le résultat suivant :

Code cpp:

int main(void)
{
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Hello World !");

    sf::Font Police;
    if(!Police.LoadFromFile("erasdust.ttf"))
        return EXIT_FAILURE;

    sf::String Texte("Bonjour tout le monde");
    //On créer notre Texte
    Texte.SetFont(Police);
    //On lui applique la Police
    Texte.SetSize(60);
    //Puis la taille
    Texte.SetColor(sf::Color(162, 64, 162));
    //On lui applique la couleur violette
    Texte.SetStyle(sf::String::Bold | sf::String::Underlined);
    //On le met en gras et souligné
    Texte.Move(130, 240);
    //Et on le bouge de 130 en largeur et 240 en hauteur

    while(App.IsOpened())
    {
        sf::Event Event;
        while(App.GetEvent(Event))
        {
            if(Event.Type == sf::Event::Closed)
                App.Close();
        }

        App.Clear();

        App.Draw(Texte);

        App.Display();
    }

    return EXIT_SUCCESS;
}

Dans le prochain chapitre nous verrons comment afficher une image à l'écran.

Auteur	ppierro
Date de création	24/08/2009 à 16h06
Dernière date d'édition	31/01/2010 à 12h59
Avancement	15 %
Nombre de fois consultés	5288
Commentaires	Ajouter un commentaire
Affichage complet du tutorial
Connecté(s)	1 connectés (0 membres, 1 invités)

Commentaire(s)

Vous devez être membre pour laisser des commentaires. Inscrivez-vous, c'est rapide et gratuit!

Alex dit

18/09/2009 à 23h10

hello !

Merci bien pour ton commentaire ! je suis heureux que le site puisse rendre service !

Si tu as quelconque soucis n'hésite pas à venir demander de l'aide sur le forum !

Alex

ppierro dit

17/09/2009 à 12h44

Merci du commentaire :)

MwM dit

17/09/2009 à 12h37

Bonjour à tous et merci pour l'invitation dans votre site apprendre Informatique;
très coul, je m'intéresse, avec toute sincérité c'est bien! Le
SFML qui a attisé ma curiosité, car découverte! Effectivement le peu de lecture que j'ai accordé hier soir, m'a motivé de tester
SFML, mais je tiens a vous préciser que je connait pas un clou dans ce milieu qui me semble peu à peu accessible aux novice comme moi.
Je désire abordé la 3D et la programmation d'une manière un peu différente dans l'informatique. J'espère que je ne me trompe pas, car les logs si et ça sa ne manque pas, après il faut voir, certes chacun a son efficacité.
Merci ->+
Très cordialement

MwM dit

17/09/2009 à 12h37