Afficher un sprite

Un sprite est une image représentant un personnage, un élément de décoration, un objet, etc. En gros, tout élément affiché à l'écran, dans un environnement en 2D est considéré comme un sprite.

Afficher un sprite n'est pas difficile en soit, mais il requiert une certaine gymnastique relativement importante.

Ressources

Avant de commencer, vous retrouverez ici les différentes ressources utilisées dans ce tutoriel.

Démarrage

Pour démarrer facilement, reprenez le code du tutoriel Ouvrir une fenêtre, ce qui vous permettra de ne pas repartir d'un projet totalement vierge.

La gestion des ressources avec CMake

Nous avons une petite particularité avec l'utilisation de CMake pour lancer la chaîne de compilation : les ressources (images, DLL/SO...) doivent se trouver dans le dossier de compilation (cmake-build-x).

Ca implique donc de mettre dans ce ou ces dossiers, vos différents fichiers nécessaires. Pour ne pas s'embêter, nous allons modifier la configuration de CMake et lui ajouter deux instructions supplémentaires.

Suppression des assets

Pour commencer, nous allons demander à CMake de supprimer de son dossier de compilation, le dossier contenant nos ressources. Pour se conformer aux usages des moteurs type Unity ou Unreal Engine, nous mettons nos ressources dans un dossier assets.

Si vous reprenez les ressources fournies dans ce tutoriel, vous avez dans le fichier ZIP ce dossier.

Ajoutons donc notre commande sous le target_link_libraries:

add_custom_command(
    TARGET cible PRE_BUILD
    COMMAND ${CMAKE_COMMAND} -E remove_directory
    "$<TARGET_FILE_DIR:cible>/assets"
    COMMENT "Cleaning assets"
)

Cette commande se découpe comme ceci : en premier on lui indique la cible (remplacer cible par le nom de votre projet) et qu'elle est déclenchée juste avant la compilation.

Ensuite, on lui indique une commande, ici une commande CMAKE, lui indiquant que nous souhaitons supprimer un dossier. Dessous on lui indique le dossier concerné. Enfin et c'est optionnel, on peut indiquer un commentaire à afficher dans la console.

Ajout des assets

Maintenant que nous avons la suppression des anciens assets avant la compilation, ajoutons lui une seconde commande juste dessous, permettant de copier le dossier des assets :

add_custom_command(
    TARGET cible POST_BUILD
    COMMAND ${CMAKE_COMMAND} -E copy_directory
    "$<TARGET_FILE_DIR:cible>/assets"
    COMMENT "Copy assets"
)

Le fonctionnement est identique à part deux choses :

On l'exécute après la compilation et non avant ;
On copie un dossier, on ne supprime pas.

Notre premier sprite

Pour qu'un sprite puisse s'afficher, nous avons besoin de deux éléments :

sf::Texture
sf::Sprite

La texture

Ce qu'on appelle une texture dans le monde de la 2D, c'est l'image qui va être utilisée par le sprite. Cet élément est très important car, toute modification d'une texture, entraine automatiquement la répercussion sur le sprite qui va alors utiliser la nouvelle texture, et ce, sans avoir besoin de la lui fournir à nouveau.

sf::Texture texture;

texture.loadFromFile("assets/character.png");

Vous n'avez besoin de rien de plus pour déclarer une texture d'après une image. Attention cependant, je vous recommande de vérifier la présence de la texture et d'arrêter le programme en cas d'absence, à moins que votre élément puisse ne pas s'afficher.

En l'occurrence, tant que vous n'êtes pas avec un moteur ayant des textures de base qui sont automatiquement appliquées, je vous recommande de provoquer l'arrêt du programme.

Le sprite

Maintenant que nous avons notre texture de définie, nous pouvons définir le sprite. Le sprite se compose :

d'une texture ;
d'une position ;
d'une taille ;
...

Pour rappel, le sprite c'est ce qui est affiché sur votre jeu et qui dépends d'une image ou d'un ensemble de pixels chargés en mémoire.

sf::Sprite sprite;

sprite.setTexture(texture);
sprite.setPosition(793, 439);
sprite.setScale(4.0f, 4.0f);

Nous définissons en premier lieu sa texture afin d'éviter d'oublier. Pour rappel, la texture est un ensemble de pixels chargés en mémoire (via un fichier ou un tableau). Si cette texture est modifiée après que vous ayiez fait le setTexture, votre sprite reflètera cette modification.

Il faut donc faire très attention en particulier si vous avez plusieurs personnages affichés à l'écran avec le même sprite et qu'un seul doit être changé à un moment donné de votre jeu.

Ensuite, nous définissons sa position, ici au centre de notre fenêtre 16/9 (1600x900). Comme notre sprite est relativement petit et peut visible, on multiplie sa taille par contre avec le setScale. Le scale, c'est la multiplication de la taille du sprite.

Maintenant que nous avons créé notre sprite, nous devons l'afficher. Pour cela, allez dans la boucle du jeu, entre le window.clear et window.display, et ajoutez un window.draw:

window.draw(sprite);

Quand vous allez mettre successivement vos différents sprite, pensez au fait qu'un sprite peut passer par-dessus un autre. L'ordre d'affichage est donc très important, sinon OpenGL derrière, ne vous donnera pas le rendu attendu.

Conclusion

Nous venons de votre comment afficher un sprite à l'écran. Pour un jeu 2D, tout est soit un sprite (dérivée d'un ensemble de pixele), soit des "shape", c'est à dire des formes de base (cercle, rectangle, ligne).

Le plus souvent, même l'interface est un ensemble de sprite, mais pas les textes qui eux, sont des sf::Text mais nous verrons cela plus tard.

24 août 2025