Skip to content

02_09.ImagesAndTextures

Jaedeok Kim edited this page Sep 30, 2023 · 5 revisions

텍스처 불러오기

이번 글에서는 raylib의 textures 모듈 (rtextures.c)에 정의된 이미지와 텍스처 관련 함수들에 대해 알아보자. raylib.h 헤더 파일에서 "Texture Loading and Drawing Functions"를 검색하면 이미지 (image) 또는 텍스처 (textures)와 관련된 나머지 함수들을 찾을 수 있다.

raylib에서 이미지는 주기억장치 (RAM)에 저장된 사진 또는 그림의 데이터가 저장된 배열을 뜻하며, CPU가 직접 처리한다. 그렇다면 텍스처는 무엇일까? 텍스처는 우리가 사용하는 그래픽 카드의 메모리 (VRAM)에 저장된 이미지 데이터를 의미하는 단어로, GPU가 직접 처리한다. raylib은 이미지를 그리는 함수는 따로 제공하지 않고, 텍스처를 그리는 함수만을 제공하기 때문에, 이미지 파일을 게임 화면에 그리려면 먼저 이미지 파일의 데이터를 메모리에 불러오고, 그 데이터를 그래픽 카드의 메모리로 보내서 텍스처로 만들어야 한다.

다행히도, raylib는 이미지 파일을 게임 화면에 바로 그릴 수 있게 텍스처로 자동 변환해주는 함수가 존재한다.

// 주어진 경로에 있는 이미지 파일을 메모리로 불러온 다음, 텍스처로 변환한다.
RLAPI Texture2D LoadTexture(const char *fileName);

// 주어진 이미지 데이터를 텍스처로 변환한다.
RLAPI Texture2D LoadTextureFromImage(Image image);

// 텍스처에 할당된 그래픽 카드 메모리를 해제한다.
RLAPI void UnloadTexture(Texture2D texture);

LoadTexture()의 매개 변수 fileName에는 파일의 경로를 전달해야 하는데, 이 경로는 게임 파일을 실행했을 때에 위치를 기준으로 한다. 또한, 우리가 메모리를 동적 할당하고 free()를 항상 사용하는 것처럼, LoadTexture()로 텍스처 파일을 불러왔으면 반드시 UnloadTexture()로 텍스처에 할당된 그래픽 카드 메모리를 해제해야 함을 꼭 기억하도록 하자.

// 6PM 로고 파일로 텍스처를 생성한다.
// 텍스처를 생성하기 전에 반드시 `InitWindow()`를 호출해야 함을 기억하자!
Texture2D texture = LoadTexture("res/images/6pm-logo_512x512.png");

/* ... */

// 6PM 로고 텍스처에 할당된 그래픽 카드 메모리를 해제한다.
UnloadTexture(texture);

텍스처 그리기

텍스처를 생성했으니, 이제 텍스처를 게임 화면에 그려보자! 아래 함수들은 앞으로 우리가 그림 파일을 불러와 게임 화면에 그릴 때 자주 사용할 함수들이다.

// 2차원 위치 (`posX`, `posY`)에 텍스처를 그린다.
RLAPI void DrawTexture(Texture2D texture, int posX, int posY, Color tint);

// 2차원 위치 `position`에 텍스처를 그린다.
RLAPI void DrawTextureV(Texture2D texture, Vector2 position, Color tint);

/* ... */

// 텍스처의 일부 영역 `source`를 게임 화면의 `dest` 영역에 그리고, 그 텍스처 영역을 
// 2차원 위치 `origin`을 기준으로 `rotation` (단위: ° (도))만큼 회전시킨다.
RLAPI void DrawTexturePro(Texture2D texture, Rectangle source, Rectangle dest, Vector2 origin, float rotation, Color tint);

나머지 함수들은 직접 텍스처를 그려보면 어떻게 텍스처가 그려지는지를 바로 이해할 수 있기 때문에, 우리는 아무리 주석을 읽어봐도 무슨 뜻인지 이해하기 어려운 DrawTexturePro() 함수만을 살펴보도록 하자. 이 함수가 특히 중요한 이유는, DrawTexture(), DrawTextureV(), DrawTextureEx() 등 텍스처를 그리는 거의 모든 함수가 DrawTexturePro() 함수를 내부적으로 호출하기 때문이다.

DrawTexturePro() 함수의 source 매개 변수는 원본 그림에서 우리가 게임 화면에 실제로 그릴 부분만을 나타낸다. 즉, "원본 그림에서 저 빨간 직사각형만큼을 자르겠다"라고 생각하면 된다. 그 다음 매개 변수 dest는 우리가 자른 영역을 게임 화면의 어느 영역에 그릴 것인지를 나타내며, 초록색 직사각형으로 표시가 되어 있다. 만약 rotation 값이 0.0f가 아니라면, DrawTexturePro() 함수는 dest 영역을 파란색으로 표시된 점 origin을 기준으로 평행 이동 및 rotation°만큼 회전시킨 다음, 하늘색 영역에 우리가 자른 텍스처 영역을 실제로 그리게 된다.

DrawTexturePro() 설명 그림