본문 바로가기

Study/Engine

[SDL Tutorial] Lesson 1 - SDL 설치 및 설정과 화면에 그림 띄우기

사용자 삽입 이미지


안녕하세요, 나름 야심차게 준비한(?) 강의를 여기에 올려볼까합니다.

 제가 강의하려하는 것은 바로 SDL(Simple DirectMedia Layer)이라는 라이브러리입니다. SDL은 저수준의 오디오, 키보드, 마우스, 조이스틱, OpenGL을 이용한 3D 작업, 2D 비디오 프레임버퍼와 같은 멀티미디어 라이브러리를 통하여 제작하게 도와주는 크로스플랫폼(cross-platform)입니다. SDL을 이용하여 MPEG 재생, 에뮬레이터, 그리고 여러 종류의 게임을 제작할 수 있습니다.

 SDL은 Linux, Windows, Windows CE, BeOS, MacOS, Mac OS X, FreeBSD, NetBSD, OpenBSD, BSD/OS, Solaris, IRIX, and QNX 등에서 제작할 수 있게 되어있습니다. SDL은 C로 제작되었습니다만 C++로도 제작이 가능하며, 다른 언어들인 Ada, C#, D, Eiffel, Erlang, Euphoria, Guile, Haskell, Java, Lisp, Lua, ML, Objective C, Pascal, Perl, PHP, Pike, Pliant, Python, Ruby, Smalltalk, Tcl 등에서도 제작이 가능합니다.

 공식 홈페이지 주소는 여기를 클릭해주시기 바랍니다. 그리고 이 강의의 원본 소스는 Lazy Foo' Productions에 있음을 미리 알려드립니다. 그곳에 있는 강의를 제가 얼마 안되는 실력으로 번역과 함께 제 나름의 생각을 조합하여 써내려갈 예정입니다.


지겨운 서론은 여기까지 하고, 본격적으로 SDL을 설치하고, IDE에서의 설정하는 법을 기술해보도록 하겠습니다. 강의에 앞서, 제 강의를 보시는 분들은 이런 분들이어야 할 것 같습니다.

- Linux (Ubuntu) 사용자
- Eclipse C/C++ 사용자
- 어느 정도 C/C++에 대한 지식이 있으신 분


 다른 분들도 보셔도 상관은 없겠지만, 일부 설정이나 세팅이 다를 수가 있습니다.



1 - 1 : SDL 설치

 Ubuntu에서 터미널(콘솔)창을 켭니다. 그리고나서 아래와 같이 입력해줍시다.

사용자 삽입 이미지

$ sudo apt-get install libsdl1.2-dev libsdl-image1.2-dev libsdl-mixer1.2-dev libsdl-ttf2.0-dev



 엔터를 누르시고 비밀번호를 입력하신 후 설치하시면 됩니다.



1 - 2 : Eclipse에서의 SDL 설정

 먼저, 새로운 프로젝트를 만듭시다.

사용자 삽입 이미지


 그리고 메뉴에서 [프로젝트-특성]을 갑시다. (영문판에서는 [Project-Property])

사용자 삽입 이미지


 특성에서 C/C++ Build -> Settings에 가셔서 Tool Settings탭에 있는 GCC C++ Linker의 Libraries를 클릭합니다. 그리고나서 아래 그림에 있는 Add...를 누릅니다.

사용자 삽입 이미지


 아래처럼 추가해줍니다.

사용자 삽입 이미지


 이렇게 4개를 추가해주고 확인을 눌러줍시다.

사용자 삽입 이미지


 그리고나서 파일을 프로젝트에 추가한 후, 아래와 같은 코드를 쳐줍시다.

#include "SDL/SDL.h"

int main( int argc, char* argv[] ) {
    //Start SDL
    SDL_Init( SDL_INIT_EVERYTHING );

    //Quit SDL
    SDL_Quit();

    return 0;
}


세이브 후, 컴파일을 해봅시다. 에러가 안나면 잘 된 것이지요 ㅎㅎ 혹시나 실행을 해보셨나요? 아마 아무것도 안하는 것처럼 보일 겁니다. 당연하지요. 저 코드엔 의거하면 초기화와 종료하라는 함수만 덩그러니 있으니까요. 위의 코드에 대한 설명은 잠시 후에 해드리겠습니다.



1 - 3 : SDL에서 간단한 이미지 띄우기

사용자 삽입 이미지


 우리가 할 것이 바로 위와 같은 미즈키 나나 그림을 하나 띄우는 것입니다! [하앍...] 나나는 소중하니까요. 일단 위의 소스를 설명하면서 중간중간에 추가해야할 소스를 알려드리겠습니다. 먼저,

#include "SDL/SDL.h"


 이 헤더파일은 SDL을 함에 있어서 없어서는 안될 중요한 헤더 파일입니다. 저게 없으면 위와같은 창을 띄울 수가 없습니다. SDL에 대한 각종 함수와 기타 등등 여러가지를 담고있는 중요한 헤더랍니다.

int main(int argc, char* argv[])
{
    // 이미지
    SDL_Surface* image = NULL;
    SDL_Surface* screen = NULL;


 이미지라고 주석을 단 부분이 추가가 되었죠. 일단 메인함수는 다들 아실테고, 저 SDL_Surface라는 녀석이 뭘까 하시겠지만 이름만 봐도 대충 짐작이 가실거라 믿습니다. SDL_Surface라는 것은 화면에 이미지를 띄우기 위한 녀석인데, image와 screen을 선언하였죠. image는 미즈키 나나의 그림을 로딩할 변수, screen은 말그대로 화면 전체를 담당할 변수입니다. 변수이름은 사용자의 편의에 따라 바꾸셔도 상관은 없습니다만 ^^

    // SDL 초기화
    SDL_Init(SDL_INIT_EVERYTHING);

    // 화면 셋업
    screen = SDL_SetVideoMode(640, 480, 32, SDL_SWSURFACE);

    // 이미지 로드
    image = SDL_LoadBMP("bg.bmp");


 이부분은 초기화부분을 제외하곤 통째로 추가가 되었습니다. 전 챕터에서 보여드렸던 SDL_Init 함수는 프로그래머가 SDL 사용을 준비해주는 역할을 합니다. 특별한 경우가 아니면 함수안의 인자값은 변경하지 않습니다.

 SDL_SetVideoMode 함수는 좌변에 있는 SDL_Surface의 포인터 변수에 화면에 대한 세팅을 해줍니다. 아까 위에서 screen은 화면 자체라고 얘기해드린 이유가 바로 저 두번째 문장 때문입니다. 함수 구조를 살펴보자면, SDL_SetVideoMode(width, height, deep, flag); 순이 되겠네요. 순서대로 가로크기, 세로크기, 색상비트수, 그리고 플래그값인데, 플래그값에 SDL_SWSURFACE 라고 되어있습니다. 저게 뜻하는 말은 소프트웨어 메모리로 화면을 구성하겠다는 뜻입니다.

 그리고 3번째는 image라는 SDL_Surface 포인터 변수에 bg.bmp라는 BMP파일을 불러오겠다는 뜻입니다.

    // 불러온 이미지를 화면에 뿌림
    SDL_BlitSurface( image, NULL, screen, NULL );

    // 화면을 갱신
    SDL_Flip( screen );

    // 2초간 정지
    SDL_Delay( 2000 );


 첫번째 함수는 위에서 불러온 이미지(image)를 화면(screen)에 뿌려주는 역할을 합니다. 첫번째 인자는 source이고 세번째 인자는 destination입니다. 즉, image에 있는 걸 screen으로 복사한다는 얘기지요. 2, 4번째 인자값은 다음 챕터 때 알려드리도록 하겠습니다.

 SDL_Flip은 위에서 작업한 내용을 화면으로 갱신하는 함수합니다. SDL_Flip을 하지 않을 경우 위와같은 작업을 했어도 화면엔 아무것도 보여지지 않을 것입니다.

 SDL_Delay는 인자값만큼 프로그램을 멈추게 하는 함수입니다. 인자 값은 밀리세컨드(ms)단위로 되어있습니다. 즉, SDL_Delay(2000);이라고 하면 2초간 프로그램을 정지시키는 문장이 됩니다.

    // 불러왔던 이미지를 메모리에서 해제
    SDL_FreeSurface( image );

    // SDL 끝
    SDL_Quit();

    return 0;
}


 SDL에서는 메모리 관리를 효율적으로(?) 하기 위해서 불러왔던 데이터를 해제시킬 수 있습니다. 그 함수가 바로 SDL_FreeSurface입니다. 이 함수는 프로그램을 종료할 때나 더이상 Surface를 쓸 일이 없는 경우에 사용합니다.

 SDL_Quit을 사용하면 화면을 정리해주고, 프로그램을 종료할 준비를 합니다.


여기까지, 여러분의 첫번째 그림을 띄우는 프로그램을 완성했습니다! 축하합니다 +_+ 짝짝짝~ 처음부터 너무 빡시게 나간 것 같기도 하지만, 그림을 하나 띄우는 것으로 상당한 만족감(?)과 자신감을 가지셨으리라 믿습니다!

 그리고 오늘 했던 코드도 한번 올려봅니다 ^^


위의 파일을 누르시면 오늘 했던 내용을 받으실 수 있습니다.



- Lesson 1을 마무리하며...

 아마도 처음하는 강의 포스팅인데, 한번 이렇게 작성하는데 엄청난 시간이 걸린 것 같습니다; 거의 2시간 이상은 걸린 것 같네요. 그래도 집에서 할 짓 없이 던파만하는 생활보단, 이렇게 저도 포스팅하면서 공부하고, 다른 사람에게 도움이 된다고 생각하니 기분도 좋고 보람찬 것 같네요 ㅎㅎ SDL을 써보는게 처음은 아니지만, 이렇게 전에 했던 것들을 되돌아보면서 배우는 것도 있다고 생각합니다. 오랜만에 장문의 포스팅인 것 같기도 하구요 ^^;

 혹시나 오타나 잘못된 것, 그리고 궁금한 것이 있다면 주저말고 댓글이나 이메일로 연락해주시기 바랍니다. 아는 범위 내에서 성심껏 답변을 해드리겠습니다.

사용자 삽입 이미지

혹시나 오늘 새벽에 잠이 안온다면 두번째 강의도 포스팅해볼까요..ㅎㅎ