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

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.

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.

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 !

L'include

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

#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.

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 :

TTF_Init();

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

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.

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 :

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.

Charger la police

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

On ouvrira la police comme ceci :

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.

Fermer la police

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

TTF_CloseFont(police); /* Doit être avant TTF_Quit() */
TTF_Quit();

Et voilà le travail !

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.

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 :

SDL_Color couleurNoire = {0, 0, 0};

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

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 :

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 :

#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.

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).

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 :

/* 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).

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.

Exemple :

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 :

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.

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 !

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.