ゲームを作りたい!

プログラミングをしているからには、いつかはゲームを作ってみたい。勉強したことを備忘録的に綴るBLOG。

SDL2で文字を表示する

先日は、C言語+SDL2でプログラムをするための環境を整えてウィンドウを表示するコードを書いた。
今回はそのウィンドウ上に文字を表示してみようと思う。
ちなみに、SDL2の日本語リファレンスは-> ここを参照。 使用する関数はリファレンスを確認しながら使おう思う。

フォントの用意

まずは、文字を表示するためにフォントを用意する。
ゲームっぽいフォントを探していたら以下のフォントが見つかった。
-> PixelMplus 8bitビットマップふうフリーフォント - itouhiroはてなブログ
これを、ダウンロードして展開しテストコードと同じ階層に置いておく。階層はこんな感じ。

sdl2_test/
  |--sdl2_ttf.c
  |--PixelMplus12-Regular.ttf

文字の表示

文字を表示するために以下のテストコードを作成した。
基本的には前回ウィンドウを表示するために作成したコードに文字表示分を追加した形になっている。

#include <SDL2/SDL.h>
#include <SDL2/SDL_ttf.h>

#define FONT_PATH "PixelMplus12-Regular.ttf"

const int SCREEN_WIDTH = 640;
const int SCREEN_HEIGHT = 480;

int main( int argc, char* args[] ) {

    SDL_Window* window = NULL;
    SDL_Renderer* renderer = NULL;

    SDL_Surface *surface;
    SDL_Texture *texture;
    SDL_Event ev;

    TTF_Font *font;

    //Initialize SDL
    if( SDL_Init( SDL_INIT_VIDEO ) < 0 )
    {
        printf( "SDL could not initialize! SDL_Error: %s\n", SDL_GetError() );
    } else {

        window = SDL_CreateWindow("Draw Text Test", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN );
        renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);

        if( window == NULL ) {
            printf( "Window could not be created! SDL_Error: %s\n", SDL_GetError() );
        } else {

            //Initialize TTF
            if ( TTF_Init() < 0 ) {
                printf("TTFcould not initialize! TTF_Error: %s\n", TTF_GetError());
            } else {

                font = TTF_OpenFont(FONT_PATH, 40);

                if (!font) {
                    printf("TTF_OpenFont: %s\n", TTF_GetError());
                }else {
                    //TTF_SetFontOutline(font, 1);//枠抜きで描写するとき
                    surface = TTF_RenderUTF8_Blended(font, "HelloWorld!", (SDL_Color){255,255,255,255});

                    //surfaceからTextureを作る    
                    texture = SDL_CreateTextureFromSurface(renderer, surface);

                    SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
                    SDL_RenderClear(renderer);

                    //文字を描写したTextureのサイズを取得する      
                    int iw,ih;
                    SDL_QueryTexture(texture, NULL, NULL, &iw, &ih);

                    SDL_Rect txtRect=(SDL_Rect){0,0,iw,ih};
                    SDL_Rect pasteRect=(SDL_Rect){200,200,iw,ih};

                    //Textureを描写する      
                    //描写元の描写する部分,描写先の描写する部分)      
                    //サイズが違うと勝手にTextureを伸展してくれる      
                    SDL_RenderCopy(renderer, texture, &txtRect, &pasteRect);
                    //windowにレンダリングする      
                    SDL_RenderPresent(renderer);

                    SDL_Delay(3000);
                }

            }
        }
    }

    SDL_FreeSurface(surface);
    SDL_DestroyTexture(texture);
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();

    TTF_CloseFont(font);
    TTF_Quit();

    return 0;

}

使用した関数についてメモっておく。使用方法は、リンク先に書いてある。
-> TTF_Init
-> TTF_OpenFont
-> TTF_RenderUTF8_Blended
-> SDL_CreateTextureFromSurface
-> SDL_QueryTexture
-> SDL_RenderCopy
-> SDL_SetRenderDrawColor -> SDL_FreeSurface
-> SDL_DestroyTexture
-> TTF_CloseFont
-> TTF_Quit

コンパイル

gcc -g -o sdl2_ttf sdl2_ttf.c `sdl2-config --cflags --libs` -lSDL2_ttf

このような形でコンパイルを行う。
SDL2_ttfを使用するためには、前回ウィンドウを表示したコードをコンパイルした引数に加え、-lSDL2_ttfを追加する必要がある。

実行結果

./sdl2_ttfで実行する。
f:id:K38:20181012060723p:plain:w300
このように、ウィンドウにHelloWorldを表示することができた。

終わりに

今回は、SDL2で文字を扱う方法を調べた。次回は、画像の扱い方を調べようかなと思う。