Ciclo de aula do SDL 2.0: Lição 6 - Fazendo download de fontes com SDL_ttf

imagem

De um tradutor:

Esta é uma continuação de uma série de traduções de tutoriais do Twinklebear, disponíveis no original aqui . A tradução é parcialmente gratuita e pode conter pequenas alterações ou acréscimos do tradutor. Tradução das duas primeiras lições - autoriaInvalidPointere o terceiro e quarto para k1-801.


Lista de lições:


Fazendo Download de Fontes Usando SDL_ttf


Neste tutorial, aprenderemos como exibir fontes de fonte True Type usando a biblioteca de extensões SDL_ttf. A instalação da biblioteca é idêntica à configuração SDL_image na Lição 3 , mas em vez de "imagem", simplesmente escrevemos "ttf" (os usuários do Windows também devem copiar a dll freetype incluída). Faça o download do SDL_ttf , consulte a documentação e inicie o tutorial!

A primeira coisa que precisamos trabalhar com SDL_ttf é a fonte ttf. Usando o BitFontMaker , o autor criou uma fonte bastante horrível que você pode baixar do repositóriomas se você já tiver sua própria fonte bonita, poderá usá-la. Essa fonte fornece apenas caracteres ASCII simples; portanto, se você tentar exibir caracteres não ASCII, provavelmente não terá êxito. O código desta lição será escrito com base na lição 5, como de costume, você pode baixá-lo no Github . Imagens, sprites fatiados e desenhos serão alterados neste tutorial.

Exibir texto


O SDL_ttf fornece várias maneiras de exibir fontes de várias velocidades e qualidade, além da capacidade de exibir caracteres UTF8 e Unicode. A documentação fornece uma boa visão geral dos vários métodos de exibição; portanto, você deve ler e aprender mais sobre eles, quando e qual método deseja usar, dependendo dos requisitos de qualidade e velocidade. Neste tutorial, usaremos TTF_RenderText_Blended, pois não temos limites de tempo e queremos que nosso texto seja bonito. Várias funções de exibição de texto aceitam a cor RGB SDL_Color , que podemos usar para selecionar a cor do texto a ser desenhado.

Infelizmente, o SDL_ttf pode ser exibido apenas na superfície, portanto, é necessário executar uma etapa adicional após renderizar o texto para criar uma textura a partir dele que podemos desenhar usando o renderizador. Obviamente, você ainda precisará fazer o download da fonte, que usaremos, o que é feito usando TTF_OpenFont , onde você também pode especificar o tamanho da fonte desejada.

Escrevendo uma função renderText


Para facilitar nossa vida, criaremos uma função renderText que receberá texto, um arquivo contendo a fonte TTF, cor, tamanho desejado e renderizador para carregar a textura final. A função abre a fonte, exibe o texto, converte-o em uma textura e retorna a textura. Como os problemas podem surgir, é necessário verificar se há erros nas chamadas de cada biblioteca e tratá-los corretamente, por exemplo, limpar recursos, registrar erros e retornar nullptr para que saibamos que algo de ruim aconteceu. O SDL_ttf relata todos os seus erros por meio do SDL_GetError, para que você possa continuar usando o logSDLError para registrar erros.

Mantendo esses requisitos em mente, vamos escrever a função 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;
}

Aviso de desempenho


É muito importante observar que toda vez que queremos exibir o texto, reabra e feche a fonte, o que é adequado no nosso caso, já que exibimos o texto uma vez, mas se queremos exibir muito texto e / ou com muita frequência, é melhor manter fonte aberta tanto quanto precisamos. Nossa versão do renderText para esse caso mais frequente aceitará TTF_Font * em vez do nome do arquivo de fonte e não abrirá e fechará, pois a vida útil do arquivo de fonte será ajustada separadamente.

Inicializar SDL_ttf


Como no SDL, precisamos inicializar a biblioteca antes de usá-la. Isso é feito usando TTF_Init , que retornará 0 se for bem-sucedido. Para inicializar o SDL_ttf, chamamos essa função somente depois de inicializar o SDL e verificamos o valor de retorno para garantir que está tudo bem.

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

Usando renderText


Com nossa conveniente função renderText, podemos exibir texto em uma chamada simples. Para este tutorial, exiba o texto "As fontes TTF são legais!" branco, tamanho 64 na fonte que baixamos anteriormente. Em seguida, podemos solicitar a largura e a altura da mesma maneira que para qualquer outra textura e calcular as coordenadas x / y para desenhar uma mensagem no centro da janela.

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;

Desenhe o texto


No final, podemos desenhar a textura, como fizemos antes de usar a função renderTexture.

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

Se tudo correu conforme o planejado, você verá algo assim:

imagem

Fim da lição 6


É tudo o que você precisa saber para começar a usar o SDL_ttf! Verifique a documentação para ver do que essa biblioteca é capaz. Como sempre, se você tiver problemas com a lição, escreva nos comentários.

O autor ficou ocupado com outros projetos e não conseguiu mais escrever lições, portanto essa foi a última lição do ciclo. Você pode assistir aos tutoriais do Lazy Foo ou ler exemplos e documentação no wiki do SDL .

All Articles