02_06.PrimitiveShapes

픽셀, 선분과 기본 도형

이번 글에서는 raylib의 shapes 모듈 (rshapes.c)에 정의된 선분, 원, 다각형 등의 기본 도형을 게임 화면에 그리는 함수들 중에 자주 사용되는 함수들에 대해 알아보자. raylib.h 헤더 파일에서 "Basic Shapes Drawing Functions"를 검색하면 기본 도형과 관련된 나머지 함수들을 찾을 수 있다.

픽셀과 선분 그리기

// 2차원 위치 (`posX`, `posY`)에 색상이 `color`인 픽셀을 찍는다.
RLAPI void DrawPixel(int posX, int posY, Color color);

// 2차원 위치 `position`에 색상이 `color`인 픽셀을 찍는다.
RLAPI void DrawPixelV(Vector2 position, Color color);

// 시작점 (`startPosX`, `startPosY`)과 끝점 (`endPosX`, `endPosY`)을 잇는, 
// 색상이 `color`인 선분을 그린다.
RLAPI void DrawLine(int startPosX, int startPosY, int endPosX, int endPosY, Color color);

// 시작점 `startPos`과 끝점 `endPos`을 잇는, 색상이 `color`인 선분을 그린다.
RLAPI void DrawLineV(Vector2 startPos, Vector2 endPos, Color color);

// 시작점 `startPos`과 끝점 `endPos`을 이으며, 굵기가 `thick`이고
// 색상이 `color`인 선분을 그린다.
RLAPI void DrawLineEx(Vector2 startPos, Vector2 endPos, float thick, Color color);

이제 픽셀과 선분을 직접 그려보자.

#include "raylib.h"

#define TARGET_FPS     60

#define SCREEN_WIDTH   800
#define SCREEN_HEIGHT  600

int main(void) {
    SetTargetFPS(TARGET_FPS);
    
    InitWindow(SCREEN_WIDTH, SCREEN_HEIGHT, "6pm-crew/play");

    const Vector2 p1 = { 100.0f, 200.0f };
    const Vector2 p2 = { 100.0f, 210.0f };
    const Vector2 p3 = { 100.0f, 220.0f };

    const Vector2 q1 = { 300.0f, 100.0f };
    const Vector2 q2 = { 600.0f, 300.0f };

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

        // 주어진 위치에 픽셀을 찍는다.
        DrawPixelV(p1, RED);
        DrawPixelV(p2, BLUE);
        DrawPixelV(p3, GREEN);

        // 주어진 두 점을 잇는 선분을 그린다.
        DrawLineV(q1, q2, WHITE);

        EndDrawing();
    }
    
    CloseWindow();

    return 0;
}

프로그램을 실행하면 아래와 같이 3개의 픽셀과 1개의 선분이 그려지는 것을 확인할 수 있다.

원 그리기

// 중심점이 (`centerX`, `centerY`)이고 반지름이 `radius`이며 색상이 `color`인
// 원을 그린다.
RLAPI void DrawCircle(int centerX, int centerY, float radius, Color color);

// 중심점이 `center`이고 반지름이 `radius`이며 색상이 `color`인 원을 그린다.
RLAPI void DrawCircleV(Vector2 center, float radius, Color color);

// 중심점이 (`centerX`, `centerY`)이고 반지름이 `radius`이며 색상이 `color`인
// 원의 테두리를 그린다.
RLAPI void DrawCircleLines(int centerX, int centerY, float radius, Color color);

이제 원을 직접 그려보자.

#include "raylib.h"

#define TARGET_FPS     60

#define SCREEN_WIDTH   800
#define SCREEN_HEIGHT  600

#define CIRCLE_RADIUS  80

int main(void) {
    SetTargetFPS(TARGET_FPS);
    
    InitWindow(SCREEN_WIDTH, SCREEN_HEIGHT, "6pm-crew/play");

    const Vector2 center1 = { 500.0f, 200.0f };
    const Vector2 center2 = { 300.0f, 350.0f };

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

        // 주어진 위치에 원을 그린다.
        DrawCircleV(center1, CIRCLE_RADIUS, WHITE);

        // 주어진 위치에 원의 테두리를 그린다.
        DrawCircleLines(center2.x, center2.y, CIRCLE_RADIUS, WHITE);

        EndDrawing();
    }
    
    CloseWindow();

    return 0;
}

프로그램을 실행하면 아래와 같이 원과 원 테두리가 그려지는 것을 확인할 수 있다.

직사각형 그리기

// 시작점이 (`posX`, `posY`)이고 가로 및 세로 길이가 각각 `width`, `height`이며,
// 색상이 `color`인 직사각형을 그린다.
RLAPI void DrawRectangle(int posX, int posY, int width, int height, Color color);

// 색상이 `color`인 직사각형을 그린다.
RLAPI void DrawRectangleRec(Rectangle rec, Color color);

// 시작점이 (`posX`, `posY`)이고 가로 및 세로 길이가 각각 `width`, `height`이며,
// 색상이 `color`인 직사각형의 테두리를 그린다.
RLAPI void DrawRectangleLines(int posX, int posY, int width, int height, Color color);

// 색상이 `color`이고 선 굵기가 `lineThick`인 직사각형 테두리를 그린다.
RLAPI void DrawRectangleLinesEx(Rectangle rec, float lineThick, Color color);

이제 직사각형을 직접 그려보자.

#include "raylib.h"

#define TARGET_FPS      60

#define SCREEN_WIDTH    800
#define SCREEN_HEIGHT   600

int main(void) {
    SetTargetFPS(TARGET_FPS);
    
    InitWindow(SCREEN_WIDTH, SCREEN_HEIGHT, "6pm-crew/play");

    const Rectangle rec1 = {
        100.0f,
        100.0f,
        0.25f * SCREEN_WIDTH,
        0.25f * SCREEN_HEIGHT
    };

    const Rectangle rec2 = {
        200.0f,
        200.0f,
        0.5f * SCREEN_WIDTH,
        0.5f * SCREEN_HEIGHT
    };

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

        // 첫 번째 직사각형을 그린다.
        DrawRectangleRec(rec1, LIGHTGRAY);

        // 두 번째 직사각형의 테두리를 그린다.
        DrawRectangleLinesEx(rec2, 10.0f, GRAY);

        EndDrawing();
    }
    
    CloseWindow();

    return 0;
}

프로그램을 실행하면 아래와 같이 직사각형과 직사각형 테두리가 그려지는 것을 확인할 수 있다.