Ciclo de lecciones de SDL 2.0: Lección 6 - Descarga de fuentes con SDL_ttf

imagen

De un traductor:

Esta es una continuación de una serie de traducciones de tutoriales Twinklebear, disponibles en el original aquí . La traducción es en parte gratuita y puede contener pequeñas modificaciones o adiciones del traductor. Traducción de las dos primeras lecciones - autoríaPuntero inválidoy el tercero y cuarto para k1-801.


Lista de lecciones:


Descargar fuentes usando SDL_ttf


En este tutorial, aprenderemos cómo mostrar las fuentes tipográficas True Type usando la biblioteca de extensiones SDL_ttf. La instalación de la biblioteca es idéntica a la instalación de SDL_image en la Lección 3 , pero en lugar de “imagen” simplemente escribimos “ttf” (los usuarios de Windows también deben copiar el dll freetype incluido). ¡ Descargue SDL_ttf , eche un vistazo a la documentación y comience el tutorial!

Lo primero que necesitamos para trabajar con SDL_ttf es la fuente ttf. Usando BitFontMaker , el autor creó una fuente bastante horrible que puede descargar del repositoriopero si ya tienes tu propia fuente hermosa, puedes usarla. Esta fuente proporciona solo caracteres ASCII simples, por lo que si intenta mostrar caracteres no ASCII, lo más probable es que no tenga éxito. El código para esta lección se escribirá en función de la lección 5, como de costumbre, puede descargarlo de Github . Las imágenes, los sprites cortados y los dibujos se cambiarán en este tutorial.

Mostrar texto


SDL_ttf proporciona varias formas de mostrar fuentes de distinta velocidad y calidad, así como la capacidad de mostrar caracteres UTF8 y Unicode. La documentación proporciona una buena visión general de los diversos métodos de visualización, por lo que debe leer y aprender más sobre ellos, cuándo y qué método desea utilizar, según sus requisitos de calidad y velocidad. En este tutorial usaremos TTF_RenderText_Blended, ya que no tenemos límites de tiempo y queremos que nuestro texto sea hermoso. Varias funciones de visualización de texto aceptan el color RGB SDL_Color , que podemos usar para seleccionar el color del texto a dibujar.

Desafortunadamente, SDL_ttf solo puede mostrarse en la superficie, por lo que debe realizar un paso adicional después de representar el texto para crear una textura a partir de él que podamos dibujar utilizando el renderizador. Por supuesto, aún tendrá que descargar la fuente, que usaremos, que se realiza mediante TTF_OpenFont , donde también puede especificar el tamaño de fuente deseado.

Escribir una función renderText


Para facilitarnos la vida, crearemos una función renderText que recibirá texto, un archivo que contiene la fuente TTF, el color, el tamaño deseado y el renderizador para cargar la textura final. La función abre la fuente, muestra el texto, lo convierte en una textura y devuelve la textura. Como pueden surgir problemas, debe verificar cada llamada a la biblioteca en busca de errores y manejarlos correctamente, por ejemplo, limpiar recursos, registrar errores y devolver nullptr para que sepamos que algo malo ha sucedido. SDL_ttf informa todos sus errores a través de SDL_GetError, por lo que puede continuar usando logSDLError para registrar errores.

Teniendo en cuenta estos requisitos, escribamos la función 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;
}

Advertencia de rendimiento


Es muy importante tener en cuenta que cada vez que queremos mostrar el texto, volvemos a abrir y cerrar la fuente, lo cual es adecuado en nuestro caso, ya que mostramos el texto una vez, pero si queremos mostrar mucho texto y / o con demasiada frecuencia, entonces es mejor mantener fuente abierta tanto como necesitemos. Nuestra versión de renderText para este caso más frecuente aceptará TTF_Font * en lugar del nombre del archivo de fuente y no se abrirá ni cerrará, ya que la vida del archivo de fuente se ajustará por separado.

Inicializar SDL_ttf


Al igual que con SDL, necesitamos inicializar la biblioteca antes de usarla. Esto se hace usando TTF_Init , que devolverá 0 si tiene éxito. Para inicializar SDL_ttf, solo llamamos a esta función después de inicializar el SDL y verificamos el valor de retorno para asegurarnos de que todo esté bien.

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

Usando renderText


Con nuestra conveniente función renderText, podemos mostrar texto en una simple llamada. Para este tutorial, muestre el texto "¡Las fuentes TTF son geniales!" blanco, tamaño 64 en la fuente que descargamos antes. Luego podemos solicitar el ancho y la altura de la misma manera que para cualquier otra textura, y calcular las coordenadas x / y para dibujar un mensaje en el centro de la ventana.

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;

Dibujar el texto


Al final, podemos dibujar la textura, como lo hicimos antes de usar la función renderTexture.

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

Si todo salió según lo planeado, verá algo como esto:

imagen

Fin de la lección 6.


¡Esto es todo lo que necesita saber para comenzar a usar SDL_ttf! Asegúrese de consultar la documentación para ver de qué es capaz esta biblioteca. Como de costumbre, si tiene problemas con la lección, puede escribir en los comentarios.

El autor se ocupó de otros proyectos y ya no podía escribir lecciones, así que esta fue la última lección del ciclo. Puede ver los tutoriales de Lazy Foo o leer ejemplos y documentación de la wiki de SDL .

All Articles