3편 : 애니메이션

저번에 팩맨을 설명할 때는 애니메이션을 이야기하려다 그만 뒀는데
지금 이야기하도록 하겠습니다.
뭐, 그때 애니메이션과 지금 애니메이션은 다르지만... 그렇다 치고.

어제까지 제대로 하셨다면 아래와 같은 코드가 되어 있을 겁니다.

 int main(char* arg[])

{

     //창 생성

     if(!MainInitialize("Sample", TRUE, FALSE, window_mode))return 0;

     //윈도우창 이동

     if(window_mode)

     {

          jdd->OnMove(100, 100);

          SetCursor(LoadCursor(0, IDC_ARROW));

     }

     jdd->LoadPicture("배경", "던젼6.jpg", NULL, true);

     jdd->LoadPicture("걷기1", "w1.gif", NULL, true);

     jdd->LoadPicture("걷기2", "w2.gif", NULL, true);

     jdd->LoadPicture("걷기3", "w3.gif", NULL, true);

     int x = 100;

     int y = 100;

     //메인 실행

     while(!GetKey(vkey_esc))

     {

          if(!ProcessMessage())break;

          if(GetKey(vkey_up,1))y-=5;

          if(GetKey(vkey_down,1))y+=5;

          if(GetKey(vkey_left,1))x-=5;

          if(GetKey(vkey_right,1))x+=5;

          if(x<0)x=0;

          if(x>SCREEN_X-19)x=SCREEN_X-19;

          if(y<0)y=0;

          if(y>SCREEN_Y-29)y=SCREEN_Y-29;

          jdd->DrawPicture(backbuffer, "배경", 0, 0, NULL);

          jdd->DrawPicture(backbuffer, "걷기1", x, y, NULL);

          jdd->Render();

     }

     //정리하고 끝내기

     jdd->DeleteFont(global_font);

     return 0;

}

오늘은 눈에 거슬리는 두가지를 고쳐봅시다.
1) 주위의 파란 박스
2) 움직이지 않는 캐릭터

일단 파란박스의 경우는 투명색으로 바꿔서 없애야 합니다.
투명색이란 뭐냐면 화면에 찍을 때 표시하지 않는 색입니다.
즉, 파란 색을 투명색으로 하면 파란 부분은 화면에 표시되지 않기 때문에 캐릭터는 자연스럽게 찍히게 됩니다.

여기서 문라이브의 그림찍기의 중요한 원리를 알고 넘어갑시다.
몰라도 일단 그림은 찍을 수 있지만 나중에 응용에 도움이 될 겁니다.
문라이브에서는 2가지 정보를 이용해서 그림을 출력합니다.

1) 그림 데이터
2) 그림 정보

그림 데이터는 말그대로 눈에 보고 있는 그림이죠.
이건 사실 별로 상관할 것도 아니고 직접 접근하기도 어렵습니다.
중요한 것은 그림 정보(JPictureInfo)입니다.
그림 정보는 어떻게 그림을 찍을까를 정하는 정보입니다.
이 정보는 기본적으로 한 그림당 하나씩 가지지만 보통 설정하지 않으면
투명색 없음, 보통 레이어, 불투명도 100%로 자동 설정됩니다.
즉, 이것을 건드리는 것 만으로 그림 데이터 자체에는 아무 변화없이
화면에 출력되는 그림의 투명색, 레이어 종류, 불투명도를 바꿀 수 있는 겁니다.

그럼 한번 그림 정보를 만들어 봅시다.
그림 로드 부분을 아래와 같이 고칩니다.

JPictureInfo jpi;
jpi.SetColorKey(JColor(0,0,255));

jdd->LoadPicture("배경", "던젼6.jpg", NULL, true);
jdd->LoadPicture("걷기1", "w1.gif", &jpi, true);
jdd->LoadPicture("걷기2", "w2.gif", &jpi, true);
jdd->LoadPicture("걷기3", "w3.gif", &jpi, true);


jpi가 바로 그림 정보 변수입니다.
다시 변수 이야기가 나오는데 int가 정수형 변수를 선언하는 거라면
JPictureInfo는 문라이브용 그림 정보의 형태로 jpi를 선언하는 겁니다.
물론 int는 기본 제공이지만 JPictureInfo는 프로그래머가 임의로 만들어낸 형식이죠.

그건 그렇다치고 둘째 줄은 SetColorKey를 이용해서 투명색을 지정하고 있습니다.
그 값은 JColor(0,0,255), 즉 RGB값으로 R:0 G:0 B:255 = 파랑색인 셈입니다.

그리고 로딩시에 전에는 NULL로 해두었던 3번째 파라미터에 &jpi라고 써넣으면
그 그림에 그 정보가 적용됩니다.
그림 정보를 넣을 때는 &를 앞에 붙여야 하는데 일단 이건 넘어갑시다.
그냥 붙이세요.

제대로 적었다면 아래와 같이 파란 상자가 없어져서 출력될 겁니다.



이 투명색에 관해서 하나 덧붙일 게 있는데
문라이브는 윈도우 모드에서 투명색이나 투명도에 관해서 선이 남거나 제대로 표시되지 않는 현상이 발생합니다.
그건 윈도우가 32비트 컬러로 설정되어 있을 때 일어나는 현상인데 16비트 컬러로 바꾸면 정상 작동합니다.
원래 문라이브는 전체화면 게임을 기본으로 한 것이기 때문에 전체화면 모드로 바꾸면 이 문제는 전혀 일어나지 않습니다.
하지만 일단 테스트나 만들어 볼 때는 윈도우 모드가 좋으니 이대로 갑시다.

그럼 다음은 애니메이션을 해봅시다.
걷기1, 걷기2, 걷기3 세가지를 불러놓고 걷기1만 썼는데 이젠 다 써보겠습니다.
일단 애니메이션을 하려면 변수 하나가 필요합니다.
x와 y를 선언한 아래에 다음과 같은 변수를 만들어 봅시다.

int delay = 0;

이건 시간 재기 용입니다.
무조건 애니메이션을 1프레임당 한번씩 하면 1초에 100프레임
즉, 100이나 바뀌기 때문에 눈으로 보기엔 뭔가 파바바박 하는 느낌이 되버리죠.
보고 싶으면 해봐도 되지만 일단 이걸로 가겠습니다.

애니메이션 속도는 0.3초로 하겠습니다.
0.3초마다 그림이 바뀌도록 아래와 같이 출력부분을 바꿉니다.

if(delay<30)jdd->DrawPicture(backbuffer, "걷기1", x, y, NULL);
     else if(delay<60)jdd->DrawPicture(backbuffer, "걷기2", x, y, NULL);
     else jdd->DrawPicture(backbuffer, "걷기3", x, y, NULL);

++delay;
if(delay >= 90)delay=0;

일단 밑부분 부터 봅시다.
++delay는 delay를 1씩 증가시키란 말입니다.
우리는 delay의 30 간격으로 그림을 바꿀 테니 그림은 총 3장.
즉, 총 90/100초의 애니메이션입니다.
그러므로 90/100초가 넘어간 후에는 다시 처음으로 리셋해줘야 겠죠?

if(delay >= 90)delay=0;
만약 delay가 90보다 크거나 같으면 delay를 0으로 만들어라.

이런 뜻입니다. 사실 ==(같으면)으로 해도 되는데 만약을 대비해서 크거나 같으면(>=)으로 비교했습니다.

그럼 다시 위쪽을 볼까요?
delay가 30보다 작을 때, 즉 0~29인 동안은 걷기1을 보여줍니다.
그리고 delay가 30~59인 동안은 걷기2를 보여줍니다.
마지막으로 그 외의 경우에는 걷기3을 보여줍니다.

여기서 if-else를 모르시는 분이 있을까봐 설명하자면
if가 만약이라면 else는 그렇지 않은 경우를 말합니다.
단순히 else라고 하면 앞의 if에 해당하지 않는 경우 무조건 실행하지만
앞의 경우는 아니지만 또 다른 경우를 검사해보고 싶을 때는 else if가 됩니다.
이런 if-else 구조는 상당히 중요한 것이 숙지하고 계십시오.

제대로 실행하면 그림이 움직이는 것을 볼 수 있을 겁니다.
그런데 뭔가 이상합니다. 다리를 벌리더니 바로 오므려 버립니다.
어색하죠. 왜냐면 걷기3에서 바로 걷기1이 되었기 때문입니다.
자연스럽게 걷는 동작을 하려면

걷기1 - 걷기2 - 걷기3 - 걷기2

순서로 보여줘야 겠죠?
그럼 그렇게 바꿔 봅시다.
아주 간단합니다.

if(delay<30)jdd->DrawPicture(backbuffer, "걷기1", x, y, NULL);
     else if(delay<60)jdd->DrawPicture(backbuffer, "걷기2", x, y, NULL);
     else if(delay<90)jdd->DrawPicture(backbuffer, "걷기3", x, y, NULL);
     else jdd->DrawPicture(backbuffer, "걷기2", x, y, NULL);