Apprenez à programmer en C !

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 uneSDL_Surfaceà partir du texte que vous lui envoyez.

Installer SDL_ttf

Il faut savoir que, commeSDL_image,SDL_ttfest 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 commeSDL_image,SDL_ttfest 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 fonctionneSDL_ttf?

SDL_ttfn'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_ttffait 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_ttfrécupère donc cette image et la convertit pour la SDL en créant uneSDL_Surface.

SDL_ttfa 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 DLLSDL_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.

InstallerSDL_ttf

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

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

Le fichier ZIP contient comme d'habitude un dossierincludeet un dossierlib. Placez le contenu du dossierincludedansmingw32/include/SDLet le contenu du dossierlibdansmingw32/lib.

Configurer un projet pourSDL_ttf

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

Vous avez déjà appris à faire cette opération pour la SDL et pourSDL_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 menuProject/Build Options;

• dans l'ongletLinker, cliquez sur le petit boutonAdd;

• indiquez où se trouve le fichierSDL_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 deSDL_ttf. Vous n'avez pas à vous préoccuper de FreeType, c'estSDL_ttfqui 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 queSDL_ttfest une bibliothèque très simple : il y a peu de fonctions (environ 40-50, oui, c'est peu !). Cela devrait être un 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 à utiliserSDL_ttf, maintenant !

Chargement de SDL_ttf

L'include

Avant toute chose, il faut ajouter l'includesuivant 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 fichierSDL_ttf.hdans le dossiermingw32/include/SDLet non dansmingw32/includetout court.

Démarrage deSDL_ttf

Tout comme la SDL,SDL_ttfa 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émarreSDL_ttf;

• TTF_Quit: arrêteSDL_ttf.

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

Vous pouvez donc démarrerSDL_ttftrè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 deSDL_ttf, un fichierstderr.txtsera créé (sous Windows, du moins) contenant un message explicatif de l'erreur.
Pour ceux qui se poseraient la question : la fonctionTTF_GetError()renvoie le dernier message d'erreur deSDL_ttf. C'est pour cela qu'on l'utilise dans lefprintf.

Arrêt deSDL_ttf

Pour arrêterSDL_ttf, on appelleTTF_Quit(). Là encore, pas de paramètre, pas de prise de tête. Vous pouvez appelerTTF_Quitavant ou aprèsSDL_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 queSDL_ttfest 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_OpenFontdoit stocker son résultat dans une variable de typeTTF_Font. Vous devez créer un pointeur deTTF_Font, comme ceci :

TTF_Font *police = NULL;

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

La fonctionTTF_OpenFontprend 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 dossierC:\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 personnellementdafont.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 seraangelina.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 queTTF_OpenFontstocke le résultat dans la variablepolice. 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 !

Les différentes méthodes d'écriture

Maintenant queSDL_ttfest chargée et qu'on a une variablepolicechargé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 pourSDL_ttfde dessiner du texte.

• Solid (fig. suivante) : c'est la technique la plus rapide. Le texte sera rapidement écrit dans uneSDL_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 laSDL_Surfacetransparente 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 laSDL_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 deSDL_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'uncharen 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 (unUint32créé à l'aide de la fonctionSDL_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 variablecouleurNoire, vous devrez donc écrire :

SDL_Color couleurNoire = {0, 0, 0};

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

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

Vous voyez dans l'ordre les paramètres à envoyer : la police (de typeTTF_Font), le texte à écrire, et enfin la couleur (de typeSDL_Color).
Le résultat est stocké dans uneSDL_Surface.SDL_ttfcalcule 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 touteSDL_Surface, notre pointeurtextecontient les sous-variableswethindiquant 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 laSDL_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 surSDL_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 fonctionTTF_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 variablepolicevalide. Vous pouvez alors faire appel à la fonctionTTF_SetFontStylequi 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 fonctionTTF_SetFontStyleen utilisant cette fois le flagTTF_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 unchar*àTTF_RenderTextmais vous, ce que vous aurez, c'est un nombre (unintpar exemple). Comment convertir un nombre en chaîne de caractères ?

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

Exemple :

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

Ici,tempsest un tableau dechar(20 caractères), etcompteurest unintqui contient le temps.
Après cette instruction, la chaînetempscontiendra 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 utiliserSDL_Delaypour é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èqueSDL_ttf.

• Cette bibliothèque permet de charger un fichier de police au format.ttfà l'aide de la fonctionTTF_OpenFont.

• Il y a trois modes d'écriture du texte, du plus simple au plus sophistiqué : Solid, Shaded et Blended.

• On écrit dans uneSDL_Surfacevia des fonctions commeTTF_RenderText_Blended.