02_08.UsingBitmapFonts

글꼴의 종류

컴퓨터의 글꼴은 표현 방식에 따라 비트맵 글꼴 (bitmap font)과 벡터 글꼴 (vector font)로 나눌 수 있다. 비트맵 글꼴은 모니터가 표현할 수 있는 가장 작은 점 또는 디지털 화면을 구성하는 기본 단위인 픽셀 (pixel)로 글자를 표현하는 방식이고, 벡터 글꼴은 여러 개의 곡선 (Bézier curves)을 이용하여 글자를 표현하는 방식이다. 비트맵 글꼴은 처리 속도가 매우 빠르고, 프로그래밍할 때 쉽게 사용할 수 있다는 장점이 있지만, 다양한 크기의 글꼴을 표현하기 위해서는 크기에 맞는 이미지 파일이 필요하다는 단점이 존재한다. 벡터 글꼴은 비트맵 글꼴과 다르게 픽셀이 아닌 곡선으로 이루어져 있기 때문에 크기 등을 자유롭게 조정할 수 있다는 장점이 있지만, 처리 속도가 비트맵 글꼴에 비해 상대적으로 느리다는 단점이 존재한다.

raylib에서는 비트맵 글꼴 (.fnt)과 벡터 글꼴 (.ttf, .otf)을 모두 지원하는데, 우리는 게임을 만들 때 벡터 글꼴이 아닌 비트맵 글꼴을 사용할 것이다. 그 이유는 벡터 글꼴을 사용하여 한글을 표현하기 위해서는 벡터 글꼴에서 매우 많은 글자 데이터를 불러와야 하고, 이로 인해 게임의 로딩 시간이 길어질 수 있기 때문이다. 혹시 비트맵 글꼴을 직접 만들어보고 싶다면, 여기를 참고하자.

비트맵 글꼴 불러오기

raylib에서 한글 문자열을 출력하려면 먼저 유니코드 (Unicode)가 무엇인지 알아야 한다. 유니코드는 한글을 포함한 전 세계의 모든 문자를 컴퓨터에서 표현하기 위해 유니코드 협회 (Unicode Consortium)에서 설계한 산업 표준이다. 이러한 문자들을 컴퓨터에 저장하기 위한 방법을 인코딩 (encoding) 또는 문자 인코딩 (text encoding)이라고 하는데, raylib에서는 UTF-8이라는 인코딩 방식으로 저장된 한글 문자열만을 처리할 수 있다. 따라서 우리가 게임에서 한글 문자열을 출력하려면, 반드시 문자열을 UTF-8로 인코딩해서 상수 또는 매크로에 저장해야 한다. 여기서 한글 문자열을 입력하면, UTF-8로 인코딩된 문자열을 C언어에서 바로 사용할 수 있는 형태로 제공해주니 자주 사용하도록 하자.

이제 raylib의 text 모듈 (rtext.c)에 정의된 비트맵 글꼴 관련 함수를 살펴보자.

// 주어진 경로에 위치한 글꼴 파일을 불러오고, 글꼴 데이터를 그래픽 카드 메모리에 저장한다.
RLAPI Font LoadFont(const char *fileName);

// 글꼴 데이터에 할당된 그래픽 카드 메모리를 해제한다.
RLAPI void UnloadFont(Font font);

한글 문자열 그리기

raylib에서는 아래와 같이 게임 화면에 문자열을 그리는 함수를 제공한다.

// 2차원 위치 (`posX`, `posY`)에 FPS 카운터를 그린다.
RLAPI void DrawFPS(int posX, int posY);

// raylib의 기본 글꼴을 사용하여, 2차원 위치 (`posX`, `posY`)에 글꼴 크기가 `fontSize`이고 
// 색상이 `color`인 문자열 `text`를 그린다.
RLAPI void DrawText(const char *text, int posX, int posY, int fontSize, Color color);

// 주어진 글꼴을 사용하여, 2차원 위치 `position`에 글꼴 크기가 `fontSize`이고 간격이 `spacing`이며, 
// 색상이 `color`인 문자열 `text`를 그린다.
RLAPI void DrawTextEx(Font font, const char *text, Vector2 position, float fontSize, float spacing, Color tint);

이제 게임 화면에 한글 문자열을 직접 그려보자.

#include "raylib.h"

#define TARGET_FPS     60

#define SCREEN_WIDTH   800
#define SCREEN_HEIGHT  600

int main(void) {
    // "안녕하세요!"를 UTF-8로 인코딩한 문자열을 나타낸다.
    const char *text = "\xEC\x95\x88\xEB\x85\x95\xED\x95\x98\xEC\x84\xB8\xEC\x9A\x94\x21";

    InitWindow(SCREEN_WIDTH, SCREEN_HEIGHT, "6pm-crew/play");

    SetTargetFPS(TARGET_FPS);

    // 한글 비트맵 글꼴을 그래픽 카드 메모리로 불러온다.
    Font font = LoadFont("res/fonts/neodgm-32pt.fnt");

    while (!WindowShouldClose()) {
        BeginDrawing();

        ClearBackground(BLACK);

        // 게임 화면에 FPS 카운터를 그린다.
        DrawFPS(8, 8);

        // 한글 문자열을 게임 화면에 그렸을 때의 가로 및 세로 길이를 계산한다.
        Vector2 dimensions = MeasureTextEx(font, text, font.baseSize, 2.0f);

        // 한글 비트맵 글꼴을 사용하여, 게임 화면에 한글 문자열을 그린다.
        DrawTextEx(
            font,
            text,
            (Vector2) { 
                0.5f * (SCREEN_WIDTH - dimensions.x), 
                0.5f * (SCREEN_HEIGHT - dimensions.y)
            },
            font.baseSize,
            2.0f,
            WHITE
        );

        EndDrawing();
    }

    // 글꼴에 할당된 그래픽 카드 메모리를 해제한다.
    UnloadFont(font);

    CloseWindow();

    return 0;
}

프로그램을 실행하면 아래와 같이 게임 화면의 가운데에 한글 문자열이 그려지는 것을 확인할 수 있다.