Cycle de leçon SDL 2.0: Leçon 6 - Téléchargement de polices avec SDL_ttf

image

D'un traducteur:

Ceci est la suite d'une série de traductions de didacticiels Twinklebear, disponibles dans l'original ici . La traduction est partiellement gratuite et peut contenir des modifications ou des ajouts mineurs du traducteur. Traduction des deux premières leçons - paternitéInvalidPointeret les troisième et quatrième pour k1-801.


Liste des cours:


Téléchargement de polices à l'aide de SDL_ttf


Dans ce didacticiel, nous allons apprendre à afficher les polices de police True Type à l'aide de la bibliothèque d'extension SDL_ttf. L'installation de la bibliothèque est identique à l'installation de SDL_image dans la leçon 3 , mais au lieu de «image», nous écrivons simplement «ttf» (les utilisateurs de Windows doivent également copier la dll freetype incluse). Alors téléchargez SDL_ttf , jetez un œil à la documentation et lancez le tutoriel!

La première chose dont nous avons besoin pour travailler avec SDL_ttf est la police ttf. À l'aide de BitFontMaker , l'auteur a créé une police plutôt horrible que vous pouvez télécharger à partir du référentielmais si vous avez déjà votre belle police, vous pouvez l’utiliser. Cette police ne fournit que des caractères ASCII simples, donc si vous essayez d'afficher des caractères non ASCII, vous ne réussirez probablement pas. Le code de cette leçon sera écrit sur la base de la leçon 5, comme d'habitude, vous pouvez le télécharger depuis Github . Les images, les sprites en tranches et les dessins seront modifiés dans ce didacticiel.

Afficher le texte


SDL_ttf offre plusieurs façons d'afficher des polices de vitesse et de qualité variées, ainsi que la possibilité d'afficher des caractères UTF8 et Unicode. La documentation fournit un bon aperçu des différentes méthodes d'affichage, vous devez donc les lire et en savoir plus à leur sujet, quand et quelle méthode vous souhaitez utiliser en fonction de vos exigences de qualité et de vitesse. Dans ce tutoriel, nous utiliserons TTF_RenderText_Blended, car nous n'avons aucune limite de temps et voulons que notre texte soit beau. Diverses fonctions d'affichage de texte acceptent la couleur RVB SDL_Color , que nous pouvons utiliser pour sélectionner la couleur du texte à dessiner.

Malheureusement, SDL_ttf ne peut s'afficher qu'en surface, vous devez donc effectuer une étape supplémentaire après le rendu du texte pour en créer une texture que nous pouvons dessiner à l'aide du moteur de rendu. Bien sûr, vous devrez toujours télécharger la police, que nous utiliserons, ce qui se fait en utilisant TTF_OpenFont , où vous pouvez également spécifier la taille de police souhaitée.

Écrire une fonction renderText


Pour nous faciliter la vie, nous allons créer une fonction renderText qui recevra du texte, un fichier contenant la police TTF, la couleur, la taille souhaitée et le rendu pour charger la texture finale. La fonction ouvre la police, affiche le texte, le convertit en texture et renvoie la texture. Étant donné que des problèmes peuvent survenir, vous devez vérifier les erreurs de chaque appel de bibliothèque et les gérer correctement, par exemple, nettoyer les ressources, consigner les erreurs et renvoyer nullptr afin que nous sachions que quelque chose de mauvais s'est produit. SDL_ttf signale toutes ses erreurs via SDL_GetError, vous pouvez donc continuer à utiliser logSDLError pour consigner les erreurs.

Gardant ces exigences à l'esprit, écrivons la fonction renderText:

/**
*      
* @param message ,   
* @param fontFile ,   
* @param color ,     
* @param fontSize  
* @param renderer ,     
* @return SDL_Texture,     nullptr,  -   
*/
SDL_Texture* renderText(const std::string &message, const std::string &fontFile,
        SDL_Color color, int fontSize, SDL_Renderer *renderer)
{
        // 
        TTF_Font *font = TTF_OpenFont(fontFile.c_str(), fontSize);
        if (font == nullptr){
                logSDLError(std::cout, "TTF_OpenFont");
                return nullptr;
        }       
        //       TTF_RenderText,
        //    
        SDL_Surface *surf = TTF_RenderText_Blended(font, message.c_str(), color);
        if (surf == nullptr){
                TTF_CloseFont(font);
                logSDLError(std::cout, "TTF_RenderText");
                return nullptr;
        }
        SDL_Texture *texture = SDL_CreateTextureFromSurface(renderer, surf);
        if (texture == nullptr){
                logSDLError(std::cout, "CreateTexture");
        }
        //   
        SDL_FreeSurface(surf);
        TTF_CloseFont(font);
        return texture;
}

Avertissement de performance


Il est très important de noter que chaque fois que nous voulons afficher le texte, rouvrir et fermer la police, ce qui convient dans notre cas, car nous affichons le texte une fois, mais si nous voulons afficher beaucoup de texte et / ou trop souvent, il est préférable de garder police ouverte autant que nécessaire. Notre version de renderText pour ce cas plus fréquent acceptera TTF_Font * au lieu du nom du fichier de police et ne s'ouvrira pas et ne se fermera pas, car la durée de vie du fichier de police sera ajustée séparément.

Initialiser SDL_ttf


Comme pour SDL, nous devons initialiser la bibliothèque avant de l'utiliser. Cela se fait en utilisant TTF_Init , qui retournera 0 en cas de succès. Pour initialiser SDL_ttf, nous n'appelons cette fonction qu'après avoir initialisé SDL et vérifions la valeur de retour pour nous assurer que tout va bien.

if (TTF_Init() != 0){
        logSDLError(std::cout, "TTF_Init");
        SDL_Quit();
        return 1;
}

Utilisation de renderText


Avec notre fonction renderText pratique, nous pouvons afficher du texte en un seul appel. Pour ce didacticiel, affichez le texte «Les polices TTF sont cool!» blanc, taille 64 dans la police que nous avons téléchargée auparavant. Ensuite, nous pouvons demander la largeur et la hauteur de la même manière que pour toute autre texture, et calculer les coordonnées x / y pour dessiner un message au centre de la fenêtre.

const std::string resPath = getResourcePath("Lesson6");
//   "TTF fonts are cool!"
//   RGBA
SDL_Color color = { 255, 255, 255, 255 };
SDL_Texture *image = renderText("TTF fonts are cool!", resPath + "sample.ttf",
        color, 64, renderer);
if (image == nullptr){
        cleanup(renderer, window);
        TTF_Quit();
        SDL_Quit();
        return 1;
}
//    ,     
int iW, iH;
SDL_QueryTexture(image, NULL, NULL, &iW, &iH);
int x = SCREEN_WIDTH / 2 - iW / 2;
int y = SCREEN_HEIGHT / 2 - iH / 2;

Dessinez le texte


Au final, nous pouvons dessiner la texture, comme nous l'avons fait avant d'utiliser la fonction renderTexture.

//:     
SDL_RenderClear(renderer);
//    ,     ,  
//    
renderTexture(image, renderer, x, y);
SDL_RenderPresent(renderer);

Si tout s'est déroulé comme prévu, vous verrez quelque chose comme ceci:

image

Fin de la leçon 6


C'est tout ce que vous devez savoir pour commencer à utiliser SDL_ttf! N'oubliez pas de consulter la documentation pour voir de quoi cette bibliothèque est capable. Comme d'habitude, si vous avez des problèmes avec la leçon, vous pouvez écrire dans les commentaires.

L'auteur est devenu occupé avec d'autres projets et ne pouvait plus écrire de leçons, donc c'était la dernière leçon du cycle. Vous pouvez regarder les didacticiels de Lazy Foo ou lire des exemples et de la documentation sur le wiki SDL .

All Articles