# SDL2: 文字

###### tags: `SDL`

## 前言

本章節我們要探討如何將文字渲染到屏幕上。使用的方式其實和圖片一樣，我們必須將文字製作成圖片，再以LTexture儲存。至於將文字轉換成圖片的部分，內建的SDL_ttf已經幫我們處理好這個問題了，我們只需要學習呼叫和調整就好。

## TTF_Font: 字體的載體

SDL_ttf裡面，有獨特的Class處理字體檔案，就是這個TTF_Font。如同SDL_Window、SDL_Renderer等等，它也是以指標的形式存在。

我們立刻來看第一個函數。

### TTF_OpenFont: 打開字體檔案

語法:

TTF_Font* TTF_OpenFont(const char *file, int ptsize);

第一個參數是傳入字體檔案的檔案路徑(與exe的相對路徑)，第二個是以pt計算的字體大小。

在這裡我**強烈建議使用Ai或Canva這類軟體先排版好，再去找出他們的字體大小**，因為大多數人對於字體的大小不是那麼有概念，如果一個一個嘗試會耗掉很多時間(每次微調都要重新編譯!)

關於字體檔案，官方的documents並沒有提到哪些格式是可接受的，實測後發現.ttf和.otf都是可以的檔案類型!

### TTF_CloseFont: 消滅字體檔案

語法:

void TTF_CloseFont(TTF_Font *font);

## LTexture::loadFromRenderedText

這個函數宣告在上一個章節我們創造的class裡面。看名字就可以知道這個函數的功能是將文字轉換成Texture。具體實現如下:

bool LTexture::loadFromRenderedText( std::string text, SDL_Color textColor, SDL_Renderer* renderer, TTF_Font* font)
{
    //Get rid of preexisting texture
    free();

    //check if the font is loaded
    if( font == NULL )
    {
        printf( "Failed to load font! SDL_ttf Error: %s\n", TTF_GetError() );
    }

    //Render text surface
    SDL_Surface* textSurface = TTF_RenderUTF8_Solid(font, text.c_str() , textColor );
    if( textSurface == NULL )
    {
        printf( "Unable to render text surface! SDL_ttf Error: %s\n", TTF_GetError() );
    }
    else
    {
        //Create texture from surface pixels
    mTexture = SDL_CreateTextureFromSurface( renderer, textSurface );
        if( mTexture == NULL )
        {
            printf( "Unable to create texture from rendered text! SDL Error: %s\n", SDL_GetError() );
        }
        else
        {
            //Get image dimensions
            mWidth = textSurface->w;
            mHeight = textSurface->h;
        }

        //Get rid of old surface
        SDL_FreeSurface( textSurface );
    }

    this->setBlendMode( SDL_BLENDMODE_BLEND );
    //Return success
    return mTexture != NULL;
}

我們暫時先撇開這個函數如何實現的這個問題，先學會怎麼使用。首先這個函數需要的參數有:

| 名稱 | 功能 |
| --------- | ------------------------------------------------------------------ |
| text | 你想渲染的文字。以string的方式儲存，所以要記得#include <string> |
| textColor | 文字的顏色。格式是SDL_Color。實際上就是一組三個0~255之間的數值，對應到(r,g,b)色碼。在下方會解釋如何宣告和使用。 |
| renderer | 渲染器指標。 |
| Font | 已建立的字體。 |

使用建立字體TTF_Font + 這個函數，我們就可以建立一個文字的texture，從而可以使用上一章學到的渲染方式將它們當作圖片渲染到螢幕上了!

## SDL_Color: 色碼

簡單說一下，**電腦儲存顏色的其中一種方式是用三原色RGB的比例去調配而成**，**每種顏色都可以是0~255之間的一個數**(剛好使用一個Byte儲存)。例如:(255, 174, 201)代表一個粉色。**有時三組顏色會以16進位方式表示**，例如255=0xFF, 174=0xAE…，那麼一組顏色就可以用6個字母或數字表示，例如: (255, 174, 201) = #FFAEC9。稱為**色碼。**

想知道一個顏色的色碼，最簡單的方式是打開小畫家，使用滴管工具吸取顏色後，點擊”編輯色彩”之後，便會顯示該色的色碼。所以在設計遊戲時，使用小畫家調色也是很好的選擇。

SDL_Color是建立在色碼系統上的一個struct，用三個變數分別儲存R,G,B三種顏色。所以在使用上，只需要將色碼分開就可以了! 例如:

SDL_Color PINK = {0xFF, 0xAE, 0xC9, 0xFF};

至於最後的0xFF(255)呢，就是指這個顏色的不透明度。對於所有在小畫家上看到的純色，不透明度都是100%。**我建議不要動這個參數**，**在建立成texture以後再用setAlpha處理即可**，若兩邊同時更動參數，其效果會疊加，不好操作。

## 問題: 我TM去哪弄來字體啊?

### 1. 挖出你電腦內已經有的字體

在使用Word、PowerPoint這類軟體時，一定有用過挑選字體的功能，這些字體就是安裝在你電腦裡的! 對於Windows用戶，所有的字體檔案都安裝在C:\WINDOWS\Fonts這個路徑下，只要到這個路徑下找出你想要使用的字體(可先用Word預覽)，再將檔案錄製出來即可。

### 2. Google Fonts

這個網站提供很多開源的字體，可以自由使用。在選擇好想要的字體後按下下載即可。
[點我前往](https://fonts.google.com/)

### 3. Adobe Fonts

同上，不過該網站內有些是需要付費的，有些是只能非商業用途的，在授權上要注意。

另外，Adobe Fonts的下載方式比較奇特，它要求使用者下載桌面應用程式。**你必須創建一個Adobe帳號(免費，但不要綁信用卡，容易”不小心”刷到)，然後點選”開啟字體”。**這些字體會經由應用程式被安裝到C:\WINDOWS\Fonts，再從這裡提取出來即可。
[點我前往](https://fonts.adobe.com/)