Aller au menu - Aller au contenu

Icône Écrire du texte avec SDL_ttf

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 22/01/2012
Difficulté : Facile Facile Creative Commons BY-NC-SA
114 794 visites depuis 7 jours, dont 928 sur ce chapitre classé 3/786
Je suis persuadé que la plupart d'entre vous se sont déjà posé cette question : « Mais bon sang, il n'y a donc aucune fonction pour écrire du texte dans une fenêtre SDL ? ». Il est temps de vous apporter la réponse : c'est non.

Cependant, il y a quand même moyen d'y arriver. Il suffit d'utiliser… la ruse ! On peut par exemple blitter des images de lettres une à une à l'écran. Ça fonctionne, mais ce n'est pas ce qu'il y a de plus pratique.

Heureusement, il y a plus simple : on peut utiliser la bibliothèque SDL_ttf. C'est une bibliothèque qui vient s'ajouter par-dessus la SDL, tout comme SDL_image. Son rôle est de créer une SDL_Surface à partir du texte que vous lui envoyez.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Installer SDL_ttf

Il faut savoir que, comme SDL_image, SDL_ttf est une bibliothèque qui nécessite que la SDL soit installée. Bon : si à ce stade du cours vous n'avez toujours pas installé la SDL, c'est grave, donc je vais supposer que c'est déjà fait !

Tout comme SDL_image, SDL_ttf est une des bibliothèques liées à la SDL les plus populaires (c'est-à-dire qu'elle est très téléchargée). Comme vous allez pouvoir le constater, cette bibliothèque est effectivement bien faite. Une fois que vous aurez appris à l'utiliser, vous ne pourrez plus vous en passer !

Comment fonctionne SDL_ttf ?



SDL_ttf n'utilise pas des images bitmap pour générer du texte dans des surfaces. C'est une méthode en effet assez lourde à mettre en place et on n'aurait pu utiliser qu'une seule police.
En fait, SDL_ttf fait appel à une autre bibliothèque : FreeType. C'est une bibliothèque capable de lire les fichiers de police (.ttf) et d'en sortir l'image. SDL_ttf récupère donc cette image et la convertit pour la SDL en créant une SDL_Surface.

SDL_ttf a donc besoin de la bibliothèque FreeType pour fonctionner, sinon elle ne sera pas capable de lire les fichiers .ttf.

Si vous êtes sous Windows et que vous prenez, comme je le fais, la version compilée de la bibliothèque, vous n'aurez pas besoin de télécharger quoi que ce soit de plus car FreeType sera incluse dans la DLL SDL_ttf.dll. Vous n'avez donc rien à faire.

Si vous êtes sous Linux ou Mac OS et que vous devez recompiler la bibliothèque, il vous faudra en revanche FreeType pour compiler. Rendez-vous sur la page de téléchargement de FreeType pour récupérer les fichiers pour développeurs.

Installer SDL_ttf



Rendez-vous sur la page de téléchargement de SDL_ttf.

Là, choisissez le fichier qu'il vous faut dans la section Binary

Sous Windows, vous remarquerez qu'il n'y a que deux fichiers .zip ayant le suffixe win32 et VC6.
Le premier (win32) contient la DLL que vous aurez besoin de livrer avec votre exécutable. Vous aurez aussi besoin de mettre cette DLL dans le dossier de votre projet pour pouvoir tester votre programme, évidemment.

Le second (VC6) contient les .h et .lib dont vous allez avoir besoin pour programmer. On pourrait penser d'après le nom que ça n'est fait que pour Visual C++, mais en fait, exceptionnellement, le fichier .lib livré ici marche aussi avec mingw32, il fonctionnera donc sous Code::Blocks.


Le fichier ZIP contient comme d'habitude un dossier include et un dossier lib. Placez le contenu du dossier include dans mingw32/include/SDL et le contenu du dossier lib dans mingw32/lib.

Vous devez copier le fichier SDL_ttf.h dans le dossier mingw32/include/SDL et non pas dans mingw32/include tout court. Attention aux erreurs !


Configurer un projet pour SDL_ttf



Il nous reste une dernière petite chose à faire : configurer notre projet pour qu'il utilise bien SDL_ttf. Il va falloir modifier les options du linker pour qu'il compile bien votre programme en utilisant la bibliothèque SDL_ttf.

Vous avez déjà appris à faire cette opération pour la SDL et pour SDL_image, je vais donc aller plus vite.
Comme je travaille sous Code::Blocks, je vais vous donner la procédure avec cet IDE. Ce n'est pas bien différent avec les autres IDE :
  • rendez-vous dans le menu Project / Build Options ;
  • dans l'onglet Linker, cliquez sur le petit bouton Add ;
  • indiquez où se trouve le fichier SDL_ttf.lib (chez moi, c'est dans C:\Program Files\CodeBlocks\mingw32\lib) ;
  • on vous demande Keep this as a relative path? Peu importe ce que vous répondez, ça marchera dans les deux cas. Je vous conseille quand même de répondre par la négative, car sinon votre projet ne fonctionnera plus si vous le déplacez dans un autre dossier ;
  • validez en cliquant sur OK.
On n'a pas besoin de linker avec la bibliothèque FreeType aussi ?


Non, car comme je vous l'ai dit FreeType est incluse dans la DLL de SDL_ttf. Vous n'avez pas à vous préoccuper de FreeType, c'est SDL_ttf qui gère ça, maintenant.

La documentation



Maintenant que vous commencez à devenir des programmeurs aguerris, vous devriez vous demander immédiatement : « Mais où est la doc' ? ». Si vous ne vous êtes pas encore posé cette question, c'est que vous n'êtes pas encore des programmeurs aguerris. ;)

Il y a certes des cours qui détaillent le fonctionnement des bibliothèques, comme ce livre. Toutefois…
  • Je ne vais pas faire un chapitre pour toutes les bibliothèques qui existent (même en y passant ma vie, je n'aurais pas le temps). Il va donc falloir tôt ou tard lire une doc', et mieux vaut commencer à apprendre à le faire maintenant !
  • D'autre part, une bibliothèque est en général assez complexe et contient beaucoup de fonctions. Je ne peux pas présenter toutes ces fonctions dans un chapitre, ce serait bien trop long !
En clair : les documentations ont l'avantage d'être complètes et on ne peut parfois pas y couper. Je vous conseille donc de mettre dès à présent dans vos favoris l'adresse de la doc' de SDL_ttf.

La doc' est disponible en plusieurs formats : HTML en ligne, HTML zippé, PDF, etc. Prenez la version qui vous arrange le plus.

Vous verrez que SDL_ttf est une bibliothèque très simple : il y a peu de fonctions (environ 40-50, oui, c'est peu !). Cela devrait être signe (pour les programmeurs aguerris que vous êtes ;-) ) que cette bibliothèque est simple et que vous saurez la manier assez vite.

Allez, il est temps d'apprendre à utiliser SDL_ttf, maintenant !
Retour en haut

Chargement de SDL_ttf

L'include



Avant toute chose, il faut ajouter l'include suivant en haut de votre fichier .c :

Code : C
1
#include <SDL/SDL_ttf.h>


Si vous avez des erreurs de compilation à ce stade, vérifiez si vous avez bien placé le fichier SDL_ttf.h dans le dossier mingw32/include/SDL et non dans mingw32/include tout court.

Démarrage de SDL_ttf



Tout comme la SDL, SDL_ttf a besoin d'être démarrée et arrêtée.
Il y a donc des fonctions très similaires à celles de la SDL :
  • TTF_Init : démarre SDL_ttf ;
  • TTF_Quit : arrête SDL_ttf.
Il n'est pas nécessaire que la SDL soit démarrée avant SDL_ttf.


Pour démarrer SDL_ttf (on dit aussi « initialiser »), on doit donc appeler la fonction TTF_Init().
Aucun paramètre n'est nécessaire. La fonction renvoie -1 s'il y a eu une erreur.

Vous pouvez donc démarrer SDL_ttf très simplement comme ceci :

Code : C
1
TTF_Init();


Si vous voulez vérifier s'il y a une erreur et être ainsi plus rigoureux, utilisez plutôt ce code :

Code : C
1
2
3
4
5
if(TTF_Init() == -1)
{
    fprintf(stderr, "Erreur d'initialisation de TTF_Init : %s\n", TTF_GetError());
    exit(EXIT_FAILURE);
}


S'il y a eu une erreur au démarrage de SDL_ttf, un fichier stderr.txt sera créé (sous Windows, du moins) contenant un message explicatif de l'erreur.
Pour ceux qui se poseraient la question : la fonction TTF_GetError() renvoie le dernier message d'erreur de SDL_ttf. C'est pour cela qu'on l'utilise dans le fprintf.

Arrêt de SDL_ttf



Pour arrêter SDL_ttf, on appelle TTF_Quit(). Là encore, pas de paramètre, pas de prise de tête. Vous pouvez appeler TTF_Quit avant ou après SDL_Quit, peu importe.

Code : C
1
TTF_Quit();


Chargement d'une police



Bon tout ça c'est bien beau mais ce n'est pas assez compliqué, on ne s'amuse pas. Passons aux choses sérieuses, si vous le voulez bien : maintenant que SDL_ttf est chargée, nous devons charger une police. Une fois que cela sera fait, nous pourrons enfin voir comment écrire du texte !

Là encore il y a deux fonctions :
  • TTF_OpenFont : ouvre un fichier de police (.ttf) ;
  • TTF_CloseFont : ferme une police ouverte.
TTF_OpenFont doit stocker son résultat dans une variable de type TTF_Font. Vous devez créer un pointeur de TTF_Font, comme ceci :

Code : C
1
TTF_Font *police = NULL;


Le pointeur police contiendra donc les informations sur la police une fois qu'on l'aura ouverte.

La fonction TTF_OpenFont prend deux paramètres :
  • le nom du fichier de police (au format .ttf) à ouvrir. L'idéal c'est de mettre le fichier de police dans le répertoire de votre projet. Exemple de fichier : arial.ttf (pour la police Arial) ;
  • la taille de la police à utiliser. Vous pouvez par exemple utiliser une taille de 22.
    • Ce sont les mêmes tailles que celles que vous utilisez dans un logiciel de traitement de texte tel que Word.
Il nous reste à trouver ces fameuses polices .ttf. Vous en avez déjà un certain nombre sur votre ordinateur, mais vous pouvez en télécharger sur Internet comme on va le voir.

Sur votre ordinateur



}Vous en avez déjà sur votre ordinateur !
Si vous êtes sous Windows, vous en trouverez beaucoup dans le dossier C:\Windows\Fonts.
Vous n'avez qu'à copier le fichier de police qui vous plaît dans le dossier de votre projet.

Si le nom contient des caractères « bizarres » comme des espaces, des accents ou même des majuscules, je vous conseille de le renommer. Pour être sûr de n'avoir aucun problème, n'utilisez que des minuscules et évitez les espaces.
  • Exemple de nom incorrect : TIMES NEW ROMAN.TTF ;
  • Exemple de nom correct : times.ttf.

Sur Internet



Autre possibilité : récupérer une police sur Internet. Vous trouverez plusieurs sites proposant des polices gratuites et originales à télécharger.

Je vous recommande personnellement dafont.com, qui est bien classé, très bien fourni et varié.

Les fig. suivante, suivante et suivante vous donnent un aperçu de polices que vous pourrez y trouver très facilement.

Police Alpha Wood


Police Raven


Police Angelina


Charger la police



Je vous propose d'utiliser la police Angelina pour la suite des exemples.

On ouvrira la police comme ceci :

Code : C
1
police = TTF_OpenFont("angelina.ttf", 65);


La police utilisée sera angelina.ttf. J'ai bien pris soin de mettre le fichier dans le dossier de mon projet et de le renommer pour qu'il soit tout en minuscules.
La police sera de taille 65. Ça paraît gros mais visiblement, c'est une police qu'il faut écrire en gros pour qu'on puisse la voir.

Ce qui est très important, c'est que TTF_OpenFont stocke le résultat dans la variable police. Vous allez réutiliser cette variable tout à l'heure en écrivant du texte. Elle permettra d'indiquer la police que vous voulez utiliser pour écrire votre texte.

Vous n'avez pas besoin d'ouvrir la police à chaque fois que vous écrivez du texte : ouvrez-la une fois au début du programme et fermez-la à la fin.


Fermer la police



Il faut penser à fermer chaque police ouverte avant l'appel à TTF_Quit().
Dans mon cas, ça donnera donc le code suivant :

Code : C
1
2
TTF_CloseFont(police); /* Doit être avant TTF_Quit() */
TTF_Quit();


Et voilà le travail !
Retour en haut

Les différentes méthodes d'écriture

Maintenant que SDL_ttf est chargée et qu'on a une variable police chargée elle aussi, plus rien ni personne ne nous empêchera d'écrire du texte dans notre fenêtre SDL !

Bien : écrire du texte c'est bien, mais avec quelle fonction ? D'après la doc', pas moins de 12 fonctions sont disponibles !

En fait, il y a trois façons différentes pour SDL_ttf de dessiner du texte.
  • Solid (fig. suivante) : c'est la technique la plus rapide. Le texte sera rapidement écrit dans une SDL_Surface. La surface sera transparente mais n'utilisera qu'un niveau de transparence (on a appris ça il y a quelques chapitres). C'est pratique, mais le texte ne sera pas très joli, pas très « arrondi », surtout s'il est écrit gros. Utilisez cette technique lorsque vous devez souvent changer le texte, par exemple pour afficher le temps qui s'écoule ou le nombre de FPS d'un jeu.
  • Shaded (fig. suivante) : cette fois, le texte sera joli. Les lettres seront antialiasées (cela signifie que leurs contours seront adoucis, ce qui est plus agréable à l'œil) et le texte apparaîtra plus lisse. Il y a un défaut, en revanche : le fond doit être d'une couleur unie. Il est impossible de rendre le fond de la SDL_Surface transparente en Shaded.
  • Blended (fig. suivante) : c'est la technique la plus puissante, mais elle est lente. En fait, elle met autant de temps que Shaded à créer la SDL_Surface. La seule différence avec Shaded, c'est que vous pouvez blitter le texte sur une image et la transparence sera respectée (contrairement à Shaded qui imposait un fond uni). Attention : le calcul du blit sera plus lent que pour Shaded.
Solid : mode d'écriture très rapide mais peu esthétique (texte non lissé)


Shaded : mode d'écriture lent mais plus joli car antialisé — fond obligatoirement uni


Blended : mode d'écriture lent (et blit lent) mais bien plus beau car antialisé et fonctionne sur un fond non uni



En résumé :
  • si vous avez un texte qui change souvent, comme un compte à rebours, utilisez Solid ;
  • si votre texte ne change pas très souvent et que vous voulez blitter votre texte sur un fond uni, utilisez Shaded ;
  • si votre texte ne change pas très souvent mais que vous voulez blitter sur un fond non uni (comme une image), utilisez Blended.
Voilà, vous devriez déjà être un peu plus familiers avec ces trois types d'écriture de SDL_ttf.

Je vous avais dit qu'il y avait 12 fonctions en tout.
En effet, pour chacun de ces trois types d'écriture, il y a quatre fonctions. Chaque fonction écrit le texte à l'aide d'un charset différent, c'est-à-dire d'une palette de caractères différente. Ces quatre fonctions sont :
  • Latin1 ;
  • UTF8 ;
  • Unicode ;
  • Unicode Glyph.
L'idéal est d'utiliser l'Unicode car c'est un charset gérant la quasi-totalité des caractères existant sur Terre. Toutefois, utiliser l'Unicode n'est pas toujours forcément simple (un caractère prend plus que la taille d'un char en mémoire), nous ne verrons donc pas comment l'utiliser ici.

A priori, si votre programme est écrit en français le mode Latin1 suffit amplement, vous pouvez vous contenter de celui-là.

Les trois fonctions utilisant le charset Latin1 sont :
  • TTF_RenderText_Solid ;
  • TTF_RenderText_Shaded ;
  • TTF_RenderText_Blended.

Exemple d'écriture de texte en Blended



Pour spécifier une couleur à SDL_ttf, on ne va pas utiliser le même type qu'avec la SDL (un Uint32 créé à l'aide de la fonction SDL_MapRGB).
Au contraire, nous allons utiliser une structure toute prête de la SDL : SDL_Color. Cette structure comporte trois sous-variables : la quantité de rouge, de vert et de bleu.

Si vous voulez créer une variable couleurNoire, vous devrez donc écrire :

Code : C
1
SDL_Color couleurNoire = {0, 0, 0};


Attention à ne pas confondre avec les couleurs qu'utilise habituellement la SDL !
La SDL utilise des Uint32 créés à l'aide de SDL_MapRGB.
SDL_ttf utilise des SDL_Color.


On va écrire un texte en noir dans une SDL_Surface texte :

Code : C
1
texte = TTF_RenderText_Blended(police, "Salut les Zér0s !", couleurNoire);


Vous voyez dans l'ordre les paramètres à envoyer : la police (de type TTF_Font), le texte à écrire, et enfin la couleur (de type SDL_Color).
Le résultat est stocké dans une SDL_Surface. SDL_ttf calcule automatiquement la taille nécessaire à donner à la surface en fonction de la taille du texte et du nombre de caractères que vous avez voulu écrire.

Comme toute SDL_Surface, notre pointeur texte contient les sous-variables w et h indiquant respectivement sa largeur et sa hauteur. C'est donc un bon moyen de connaître les dimensions du texte une fois que celui-ci a été écrit dans la SDL_Surface. Vous n'aurez qu'à écrire :

Code : C
1
2
texte->w /* Donne la largeur */
texte->h /* Donne la hauteur */


Code complet d'écriture de texte



Vous savez désormais tout ce qu'il faut connaître sur SDL_ttf. Voyons pour résumer un code complet d'écriture de texte en mode Blended :

Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
#include <SDL/SDL_image.h>
#include <SDL/SDL_ttf.h>

int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *texte = NULL, *fond = NULL;
    SDL_Rect position;
    SDL_Event event;
    TTF_Font *police = NULL;
    SDL_Color couleurNoire = {0, 0, 0};
    int continuer = 1;

    SDL_Init(SDL_INIT_VIDEO);
    TTF_Init();

    ecran = SDL_SetVideoMode(640, 480, 32, SDL_HWSURFACE | SDL_DOUBLEBUF);
    SDL_WM_SetCaption("Gestion du texte avec SDL_ttf", NULL);

    fond = IMG_Load("moraira.jpg");

    /* Chargement de la police */
    police = TTF_OpenFont("angelina.ttf", 65);
    /* Écriture du texte dans la SDL_Surface texte en mode Blended (optimal) */
    texte = TTF_RenderText_Blended(police, "Salut les Zér0s !", couleurNoire);

    while (continuer)
    {
        SDL_WaitEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
        }

        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));

        position.x = 0;
        position.y = 0;
        SDL_BlitSurface(fond, NULL, ecran, &position); /* Blit du fond */

        position.x = 60;
        position.y = 370;
        SDL_BlitSurface(texte, NULL, ecran, &position); /* Blit du texte */
        SDL_Flip(ecran);
    }

    TTF_CloseFont(police);
    TTF_Quit();

    SDL_FreeSurface(texte);
    SDL_Quit();

    return EXIT_SUCCESS;
}


Le résultat vous est présenté sur la fig. suivante.

Un texte écrit à l'aide de SDL_ttf


Si vous voulez changer de mode d'écriture pour tester, il n'y a qu'une ligne à modifier : celle créant la surface (avec l'appel à la fonction TTF_RenderText_Blended).

La fonction TTF_RenderText_Shaded prend un quatrième paramètre, contrairement aux deux autres. Ce dernier paramètre est la couleur de fond à utiliser. Vous devrez donc créer une autre variable de type SDL_Color pour indiquer une couleur de fond (par exemple le blanc).


Attributs d'écriture du texte



Il est aussi possible de spécifier des attributs d'écriture, comme gras, italique et souligné.

Il faut d'abord que la police soit chargée. Vous devriez donc avoir une variable police valide. Vous pouvez alors faire appel à la fonction TTF_SetFontStyle qui va modifier la police pour qu'elle soit en gras, italique ou souligné selon vos désirs.

La fonction prend deux paramètres :
  • la police à modifier ;
  • une combinaison de flags pour indiquer le style à donner : gras, italique ou souligné.
Pour les flags, vous devez utiliser ces constantes :
  • TTF_STYLE_NORMAL : normal ;
  • TTF_STYLE_BOLD : gras ;
  • TTF_STYLE_ITALIC : italique ;
  • TTF_STYLE_UNDERLINE : souligné.
Comme c'est une liste de flags, vous pouvez les combiner à l'aide du symbole | comme on a appris à le faire.

Testons :

Code : C
1
2
3
4
5
6
/* Chargement de la police */
police = TTF_OpenFont("angelina.ttf", 65);
/* Le texte sera écrit en italique et souligné */
TTF_SetFontStyle(police, TTF_STYLE_ITALIC | TTF_STYLE_UNDERLINE);
/* Écriture du texte en italique et souligné */
texte = TTF_RenderText_Blended(police, "Salut les Zér0s !", couleurNoire);


Résultat, le texte est écrit en italique et souligné (fig. suivante).

Écriture en italique et souligné


Pour restaurer une police à son état normal, il suffit de refaire appel à la fonction TTF_SetFontStyle en utilisant cette fois le flag TTF_STYLE_NORMAL.

Exercice : le compteur



Cet exercice va cumuler ce que vous avez appris dans ce chapitre et dans le chapitre sur la gestion du temps. Votre mission, si vous l'acceptez, consistera à créer un compteur qui s'incrémentera tous les dixièmes de seconde.

Ce compteur va donc progressivement afficher : 0,
100,
200,
300,
400,
etc. Au bout d'une seconde le nombre 1000 devrait donc s'afficher.

Astuce pour écrire dans une chaîne



Pour réaliser cet exercice, vous aurez besoin de savoir comment écrire dans une chaîne de caractères en mémoire.
En effet, vous devez donner un char* à TTF_RenderText mais vous, ce que vous aurez, c'est un nombre (un int par exemple). Comment convertir un nombre en chaîne de caractères ?

On peut utiliser pour cela la fonction sprintf.
Elle marche de la même manière que fprintf, sauf qu'au lieu d'écrire dans un fichier elle écrit dans une chaîne (le « s » de sprintf signifie « string », c'est-à-dire « chaîne » en anglais).
Le premier paramètre que vous lui donnerez sera donc un pointeur sur un tableau de char.

Veillez à réserver suffisamment d'espace pour le tableau de char si vous ne voulez pas déborder en mémoire !


Exemple :

Code : C
1
sprintf(temps, "Temps : %d", compteur);


Ici, temps est un tableau de char (20 caractères), et compteur est un int qui contient le temps.
Après cette instruction, la chaîne temps contiendra par exemple "Temps : 500".

À vous de jouer !

Correction



Voici une correction possible de l'exercice :

Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *texte = NULL;
    SDL_Rect position;
    SDL_Event event;
    TTF_Font *police = NULL;
    SDL_Color couleurNoire = {0, 0, 0}, couleurBlanche = {255, 255, 255};
    int continuer = 1;
    int tempsActuel = 0, tempsPrecedent = 0, compteur = 0;
    char temps[20] = ""; /* Tableau de char suffisamment grand */

    SDL_Init(SDL_INIT_VIDEO);
    TTF_Init();

    ecran = SDL_SetVideoMode(640, 480, 32, SDL_HWSURFACE | SDL_DOUBLEBUF);
    SDL_WM_SetCaption("Gestion du texte avec SDL_ttf", NULL);

    /* Chargement de la police */
    police = TTF_OpenFont("angelina.ttf", 65);

    /* Initialisation du temps et du texte */
    tempsActuel = SDL_GetTicks();
    sprintf(temps, "Temps : %d", compteur);
    texte = TTF_RenderText_Shaded(police, temps, couleurNoire, couleurBlanche);

    while (continuer)
    {
        SDL_PollEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
        }

        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));

        tempsActuel = SDL_GetTicks();
        if (tempsActuel - tempsPrecedent >= 100) /* Si 100 ms au moins se sont écoulées */
        {
            compteur += 100; /* On rajoute 100 ms au compteur */
            sprintf(temps, "Temps : %d", compteur); /* On écrit dans la chaîne "temps" le nouveau temps */
            SDL_FreeSurface(texte); /* On supprime la surface précédente */
            texte = TTF_RenderText_Shaded(police, temps, couleurNoire, couleurBlanche); /* On écrit la chaîne temps dans la SDL_Surface */
            tempsPrecedent = tempsActuel; /* On met à jour le tempsPrecedent */
        }

        position.x = 180;
        position.y = 210;
        SDL_BlitSurface(texte, NULL, ecran, &position); /* Blit du texte */
        SDL_Flip(ecran);

    }

    TTF_CloseFont(police);
    TTF_Quit();

    SDL_FreeSurface(texte);
    SDL_Quit();

    return EXIT_SUCCESS;
}


La fig. suivante vous présente le résultat au bout de 13,9 secondes très exactement.

Le compteur au bout de 13,9 secondes


N'hésitez pas à télécharger ce projet si vous souhaitez l'étudier en détail et l'améliorer. Il n'est pas encore parfait : on pourrait par exemple utiliser SDL_Delay pour éviter d'utiliser 100 % du CPU.

Télécharger le projet (437 Ko)


Pour aller plus loin



Si vous voulez améliorer ce petit bout de programme, vous pouvez essayer d'en faire un jeu où il faut cliquer le plus de fois possible dans la fenêtre avec la souris dans un temps imparti. Un compteur s'incrémentera à chaque clic de la souris.

Un compte à rebours doit s'afficher. Lorsqu'il atteint 0, on récapitule le nombre de clics effectués et on demande si on veut faire une nouvelle partie.

Vous pouvez aussi gérer les meilleurs scores en les enregistrant dans un fichier. Cela vous fera travailler à nouveau la gestion des fichiers en C.

Bon courage !
Retour en haut

Q.C.M.

De quelle bibliothèque se sert SDL_ttf pour fonctionner ?
Dans quel ordre les fonctions doivent être appelées ?
Lequel de ces modes d'écriture ne gère pas la transparence ?
Quel est le type de variable retourné par TTF_RenderText_Blended ?

Statistiques de réponses au QCM

Retour en haut

En résumé

  • On ne peut pas écrire de texte en SDL, à moins d'utiliser une extension comme la bibliothèque SDL_ttf.
  • Cette bibliothèque permet de charger un fichier de police au format .ttf à l'aide de la fonction TTF_OpenFont.
  • Il y a trois modes d'écriture du texte, du plus simple au plus sophistiqué : Solid, Shaded et Blended.
  • On écrit dans une SDL_Surface via des fonctions comme TTF_RenderText_Blended.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
73 commentaires pour "Écrire du texte avec SDL_ttf"
Note moyenne : 3.87 / 4 (3048 votes)
Pseudo Commentaire
Hors ligne mecatronicienne # Posté le 05/04/2012 à 15:00:39

Avis : Très bon

Bonjour,

J'ai Visual C++ express 2010 et j'ai réussi à afficher un texte sur ma fenêtre! le seul soucis c'est que la partie inférieure est tronquée. En fait je ne vois que la moitié des lettres...trop bizarre :lol:
Je n'arrive pas du tout à savoir à quoi c'est du. je pensais que SDL_ttf gérait la taille de l'image du texte!! Surtout que même en changeant la taille c'est toujours pareil!!

Si quelqu'un a une idée, aidez moi svp!!!

En réalité je vois tout avec la police angelina mais cela ne marche pas avec la police digital-7 que j'ai téléchargée
Hors ligne bill gates2 # Posté le 07/04/2012 à 22:10:45
Avatar

 Moi j'ai essayé de l'installer mais...je n'ai pas de dosser include dans mon mingw32, et je ne crois pas être le seul.

Je l'ai donc créer, mais dès qu'on utilise une fonction de la lib, ca plante, ça me dit que y'a une erreur application.

Si quelqu'un peut m'aider ;)
Hors ligne sophou # Posté le 08/04/2012 à 20:59:03

Bonjour,

J'ai essayer d'afficher un texte mais cela ne marche pas , donc j'ai fait un copier coller du programme donné pour afficher "salut les zéros" sur le fond de la ville de moraira et sa ne marche pas non plus.

Aider moi svp :( .
Je dois réaliser un didactitiel pour la rentrée et il me faut au plus vite régler ce souci .
Hors ligne sasorie # Posté le 16/04/2012 à 13:16:33
"Administrateur de Topi-RPG"
Avatar

Ville : Seyssin
Pays : France métropolitaine

 Il n'y a pas de fichier *.lib !
Topi-RPG
-------------------------------------Credit-------------------------------------
Administrateur : sasorie
Animateur officiel : Anonymus
Mappeur officiel : sasorie
Création de tile officiel : sasorie / rose37*
Musicien officiel : sasorie
Co-admin : a débattre (1 place)
Animateur : a débattre (2 places)
Mappeur : a débattre (2 places)
Création de tile : a débattre (3 places)
Musiciens : a débattre (3 places)
Testeur : Ouvert a tous !
Blanchisseur : a débattre (∞ places)
-----Merci tous le monde !----
* = rose37 n'est pas sur ce site.
 
Hors ligne Raphael Peim # Posté le 17/05/2012 à 14:27:37
Avatar

 J'ai un problème :
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
#include <SDL_image.h>
#include <SDL_ttf.h>

int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *texte = NULL, *texte2 = NULL;
    SDL_Rect position;
    SDL_Event event;
    TTF_Font *police = NULL;
    SDL_Color couleurNoire = {0, 0, 0}, couleurBlanche = {255, 255, 255};
    int continuer = 1;
    int tempsActuel = 0, tempsPrecedent = 0, compteur = 0, decompte = 5;
    char temps[20] = "", temps2[20] = ""; /* Tableau de char suffisamment grand */


    SDL_Init(SDL_INIT_VIDEO);
    TTF_Init();

    ecran = SDL_SetVideoMode(640, 480, 32, SDL_HWSURFACE | SDL_DOUBLEBUF);
    SDL_WM_SetCaption("Gestion du texte avec SDL_ttf", NULL);


    /* Chargement de la police */
    police = TTF_OpenFont("comicbd.ttf", 40);

    sprintf(temps2, "Temp restant : %d", decompte);
    texte2 = TTF_RenderText_Shaded(police, temps2, couleurNoire, couleurBlanche);

    sprintf(temps, "Clics : %d", compteur);
    texte = TTF_RenderText_Shaded(police, temps, couleurNoire, couleurBlanche);

    while (continuer)
    {
        SDL_PollEvent(&event);
        switch(event.type)
        {
           tempsActuel = SDL_GetTicks();
        if (tempsActuel - tempsPrecedent == 1000) 
        {
            decompte -= 1; 
            sprintf(temps2, "Temp restant : %d", decompte);
            SDL_FreeSurface(texte2); 
            texte2 = TTF_RenderText_Shaded(police, temps2, couleurNoire, couleurBlanche); 
            tempsPrecedent = tempsActuel; 
        }
        }

        position.x = 0;
        position.y = 0;
        SDL_BlitSurface(texte2, NULL, ecran, &position); 
        SDL_Flip(ecran);

        SDL_WaitEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
            case SDL_MOUSEBUTTONUP:
       if (event.button.button == SDL_BUTTON_LEFT)
        {
            compteur += 1;
            sprintf(temps, "Clics : %d", compteur); 
            SDL_FreeSurface(texte); 
            texte = TTF_RenderText_Shaded(police, temps, couleurNoire, couleurBlanche); 
        }
        }
        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));
        position.x = 180;
        position.y = 210;
        SDL_BlitSurface(texte, NULL, ecran, &position);
        SDL_Flip(ecran);

    }

    TTF_CloseFont(police);
    TTF_Quit();

    SDL_FreeSurface(texte);
    SDL_Quit();


    return EXIT_SUCCESS;
}

Le décompte ne marche pas !

Voir tous les commentaires