메뉴 건너뛰기

창작에 관련된 질문이나 간단한 팁, 예제를 올리는 곳

4편 : 애니메이션2

여러분 혹시 그거 아십니까?
지금까지 가르쳐 드린 것은 비효율적인 코딩이란 것을...
하지만 효율적으로 짜면 이해도가 떨어지기 때문에 풀어서 썼습니다.
최적화는 모든 것을 이해한 다음에 하기로 하죠.

그럼 애니메이션에 대해 이야기 하기 전에
저번에 했던 애니메이션에서 아주 사소한 부분을 수정하겠습니다.

걷기 그림을 보면 걷기2.gif만이 세로 크기가 29입니다.
이것을 그냥 0,0에 출력했는데 사실 이 그림은 바닥을 중심으로 해서 그려놓은 거라
걷는 모습이 약간 부자연스럽게 보였습니다.

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

다음과 같이 걷기2일 경우는 y좌표를 1을 뺀 상태에서 출력하게 합시다.
조금 어깨를 들썩이는 것 같아서 괜찮아 보이죠.
그래도 어색하기는 하지만 일단 넘어가고...

현재는 아무 입력없이 걷기 애니메이션만 하고 있지만
상황에 따라 여러가지 애니메이션을 하도록 바꿔 봅시다.
일단 애니메이션 상태를 기억할 변수 하나를 만듭니다.

int state = 0;

이것을 임의로
0 : 기본 애니메이션
1 : 펀치
2 : 킥

이라고 생각합시다.
그렇다면 일단 평상시에는 0입니다.
펀치에 해당하는 키(임의로 Z를 쓰겠습니다.)를 누르면 1의 상태가 됩니다.
하지만 펀치는 누르는 동안 계속 내밀고 있으면 안 되니까
내민 후 일정 시간이 지나면 자동으로 0의 상태로 돌아가게 합니다.
킥도 펀치와 마찬가지.
이것을 코드로 표현해 볼까요?

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));
     }

     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);
     jdd->LoadPicture("펀치1", "p1.gif", &jpi, true);
     jdd->LoadPicture("펀치2", "p2.gif", &jpi, true);
     jdd->LoadPicture("킥", "k1.gif", &jpi, true);

     int x = 100;
     int y = 100;
     int delay = 0;
     int state=0;

     //메인 실행
     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(GetKey(vkey_z))
          {
               state=1;
               delay=0;
          }
          if(GetKey(vkey_x))
          {
               state=2;
               delay=0;
          }

          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);

          //평상시
          if(state==0)
          {
               if(delay<30)jdd->DrawPicture(backbuffer, "걷기2", x, y-1, NULL);
                    else if(delay<60)jdd->DrawPicture(backbuffer, "걷기1", x, y, NULL);
                    else if(delay<90)jdd->DrawPicture(backbuffer, "걷기3", x, y, NULL);
                    else jdd->DrawPicture(backbuffer, "걷기1", x, y, NULL);

                    ++delay;
                    if(delay >= 120)delay=0;
          }
          //펀치
          else if(state==1)
          {
               jdd->DrawPicture(backbuffer, "펀치1", x-4, y-1, NULL);

               ++delay;
               if(delay>=10)state=0;
          }
          //킥
          else if(state==2)
          {
               jdd->DrawPicture(backbuffer, "킥", x-3, y, NULL);

               ++delay;
               if(delay>=10)state=0;
          }

          jdd->Render();
     }

     //정리하고 끝내기
     jdd->DeleteFont(global_font);

     return 0;
}

제대로 작성하셨다면
Z나 X키에 의해 펀치, 발차기를 날리는 주인공을 볼 수 있습니다.




그럼 새로 추가된 코드를 하나하나 봅시다.
그림 불러 오는 것과 state 변수는 설명할 필요가 없겠죠.
다음은 키 입력 부분.

if(GetKey(vkey_z))

Z키를 누르면 작동이 되게 해두었습니다.
여기서 두번째 파라미터가 설정되어 있지 않기 때문에
방향키와 다르게 한 번 누르면 한번만 작동하게 됩니다.
아무리 누르고 있어도 두번 공격하지 않는 것이죠.

Z키를 누르면 어떤 일이 일어나는지 봅시다.

state=1;
delay=0;

state를 1로 만듭니다. 그리고 delay도 0으로 만드는 군요.
왜 delay를 0으로 만드냐면 뒤에 보면 아시겠지만 10을 센 후
시간이 지나면 원래 동작으로 복귀하기 위해서입니다.
만약 0으로 초기화 시키지 않았을 때 delay가 7이라면
10/100초 동안 동작이 지속되지 않고 3/100초 만에 끝나게 될 겁니다.

=====================================================
추가 팁 - 다양한 키 입력
GetKey에서 Z키는 vkey_z로 정의되어 있습니다.
X는 vkey_x로 정의되어 있습니다.
그럼 다른 키를 쓰기 위해서 어떻게 해야 할까요?
바로 vkey_a ~ vkey_z 식으로 알파벳 키는 모두 입력 받을 수 있습니다.
덧붙여 숫자키는 vkey_0~vkey_9로 숫자키를 입력받을 수도 있습니다.
하지만 나머지 키들은 vkey_enter, vkey_esc 같은 특유의 이름이 있으니
쓰려면 donglib.h에 있는 정의 값을 봐야 할 겁니다.
======================================================

그 다음으로 애니메이션 부분은 확 달라졌다는 것을 아실겁니다.
하지만 자세히 보면 그전에 있던 애니메이션이

if(state==0)
{
}

이 안으로 들어가고 나머지 상태에 대한 정의가 추가된 것입니다.
일단 평상시는 지금까지 했으니 펀치를 봅시다.

그림출력은 x좌표를 x-4로 출력하는 것 빼고는 별 것 없습니다.
4를 빼서 출력하는 이유는 펀치의 동작이 다른 그림보다 가로가 4픽셀 크기 때문입니다.
만약 주인공이 오른쪽을 보고 있다면 상관없지만, 지금은 왼쪽을 바라보고 있습니다.
그러므로 주먹을 내미는데 출력좌표를 똑같이 0,0으로 한다면 주먹을 내민만큼 몸이 뒤로 물러나는 것 처럼 보이게 됩니다.
이건 직접 값을 바꿔보며 눈으로 보시면 편이 좋을 거라고 봅니다.


그럼 이걸로 주인공의 공격 애니메이션도 끝났습니다.
하지만 펀치2를 불러놓고 안 쓰면 허전하니 펀치2도 써봅시다.
이건 어떨까요? Z키를 누르면 누를 때마다 교대로 왼팔, 오른팔 식으로 나가는 겁니다.
그럼 일단 지금이 왼팔이 나갈 차례인지 오른팔이 나갈 차례인지를 확인하는 변수를 만듭니다.

bool left_punch = false;

int가 아니고 bool형이군요.
int는 정수형으로 -2147483649~2147483648의 영역을 표현할 수 있다면
bool은 0, 1. 단 두 값밖에 가지지 못 합니다.
스위치처럼 ON, OFF 상태를 기억할 뿐이지요.
보통은 참, 거짓이라고 부릅니다.
위의 선에서는 거짓(false)으로 선언한 것입니다.

이것을 적용하려면 애니메이션 부분과 키 부분을 고쳐야 겠습니다.
일단 키 입력 부분은 이렇게 고칩니다.

if(GetKey(vkey_z))
{
     state=1;
     delay=0;

    if( left_punch)left_punch=false;
        else left_punch=true;
}

if(left_punch)는 if(left_punch==true)와 같은 뜻입니다.
만약 left_punch가 참이면 거짓상태로 바꾸고(left_punch=false)
아니면(left_punch가 거짓이면) 참 상태로 바꾸라는 거죠.(else left_punch=true)

애니메이션 부분도 마찬가지입니다.

if(left_punch)jdd->DrawPicture(backbuffer, "펀치1", x-4, y-1, NULL);
     else jdd->DrawPicture(backbuffer, "펀치2", x-4, y-1, NULL);

left_punch가 참이면 펀치1을 보여주고, 아니면 펀치2를 보여주는 겁니다.
실행 후 z버튼을 여러번 눌러보면 확인 할 수 있으실 겁니다.
하지만 빨라서 잘 안 보인다면 주먹 애니메이션의 delay>=10 부분의 10의 숫자를 높게 바꿔 봅시다.


조회 수 :
3213
등록일 :
2008.04.20
19:43:00 (*.193.78.73)
엮인글 :
게시글 주소 :
https://hondoom.com/zbxe/index.php?mid=study&document_srl=191151

A.미스릴

2008.04.21
06:19:59
(*.234.10.203)

if(GetKey(vkey_z) && state == 0 )
if(GetKey(vkey_x) && state == 0 )
가 좋지 않을까영
공격이 끝나기 전에 delay가 초기화되서 공격이 연장되는 버그가 있음

똥똥배

2008.04.21
07:20:46
(*.239.144.2)
그게 좋겠죠.
말씀드렸듯이 지금은 비효율적이라도 알기쉽게 가고 있는 중입니다.
실력이 되시는 분은 맘대로 변형해서 쓰십시오.
List of Articles
번호 제목 글쓴이 조회 수 추천 수sort 날짜 최근 수정일
45 멘탈붕괴의 절정을 부르는 파일입출력 노루발 273   2013-09-17 2013-09-17 08:18
Love2D의 love.filesystem.load는 훼이크입니다. 파일을 로드하는 것 같지만 사실 lua 파일을 불러옴. love.filesystem.read도 그리 믿음직하지 못함. (고정 크기의 파일만 읽어옴) 우리가 믿을 수 있는 최후의 보루는 love.filesystem.lines 이었던 것입니다....  
44 Love2D? 개요, 설치, 실행. 노루발 465   2013-09-17 2013-09-17 08:20
love2d.org/Love2D 홈페이지. Lua로 2D 게임을 만드는 프레임워크입니다. 무료고, 오픈 소스이며, 윈도우, 맥, 리눅스에서 동작하며, 안드로이드에서 동작하게 하는 논의도 활발하다 합니다. 그럼 일단 받아봅시다. 아무리 좋아도 내 컴퓨터에 못 깔면 소용없...  
43 Love2D를 사용하기 위한 Lua 강좌: 입출력과 기본 노루발 707   2013-09-17 2013-09-17 08:21
Love2D 엔진은 Lua 기반이라 좋던 싫던 우리는 이미 Lua를 쓰고 있는 것입니다. 그래서 원활한 개발을 원한다면 Lua 언어를 알아두는 것이 좋습니다. 어 차피 Lua라는 게 알아먹기 쉽고 가벼우므로 게임 업게에 종사하는 디자이너 혹은 작가, 게임 디자이너가 ...  
42 Love2D를 사용하기 위한 Lua 강좌: 코딩 스타일, 변수 노루발 585   2013-09-17 2013-09-17 08:22
안녕하세요, 노루발입니다. 어제는 Lua에 대해 대강 알아보고 입력과 출력을 다뤄봤습니다. 출력은 print([출력할 것]), 입력은 io.read()였습니다. 일단 본격적인 프로그램 작성에 앞서 Lua의 코딩 스타일에 대해 알아보겠습니다. 코드를 작성하는 것을 코딩...  
41 Love2D를 사용하기 위한 Lua 강좌: 변수형 노루발 446   2013-09-17 2013-09-17 08:23
안녕하세요, 노루발입니다. 저번에 변수에 대해 다뤄보았습니다. 변수는 값을 담는 그릇이라고 했습니다. 그리고 루아는 변수 안에 있는 값이 숫자던 문자던 그냥 변수로 취급한다고 했고 "몇개를 살까요?" 라는 질문에 "ㄹ개" 라고 답할 수도 있다고 했습니...  
40 love.graphics.print 한국어 출력 노루발 431   2013-09-17 2013-09-17 08:24
Love2D 사용 시 한국어가 ㅁㅁㅁ이나 ??? 등으로 깨져 나와 해결책을 수소문하여 겨우 찾았다. 원래 중국어 등을 출력하기 위한 것이었으니 적절한 폰트를 쓴다면 한자나 히라가나등도 출력할 수 있을 것이다. function love.load() korfont = love.graphics....  
39 Love2D: 콜백 함수들 노루발 538   2013-09-17 2013-09-17 08:25
Love의 콜백 함수들은 love.run(가장 메인이 되는 겁니다.)에 의해 호출되며, 많은 작업들을 수행합니다. 이것들이 없다고 게임이 실행되지 않는다거나 하지는 않지만 좋은 게임을 만들기 위해선 이것들을 적재적소에 활용해야 합니다. 이미 아시는 분들도 있...  
38 [Love2D] 일단 뭔가 해보자 노루발 458   2013-09-17 2013-09-17 08:27
감기를 딛고 다시 재기... Lua로 초 간단한 원시적인 게임을 만들려고 합니다. 뭐냐하면 소코반이라고, 이렇게 말하시면 모르지만 푸쉬푸쉬라면 아시는 분들이 엄청 많으실겁니다. 이걸 그래픽조차 씌우지 않은 아스키로. ########## #    ..      # #    o  o...  
37 소코반: 맵을 초기화하자. 노루발 588   2013-09-17 2013-09-17 08:27
8*8 맵의 데이터가 담길 2차원 배열(테이블)을 초기화하는 코드이다. Map = {} for a = 1, 8 do     Map[a] = {}     for b = 1, 8 do         Map[a][b] = 0     end end Map 테이블의 [1][1]부터 [8][8]까지 모두 0이라는 값이 담기고 Map[0][0]이나 Map[1][...  
36 Lua 소코반: 맵을 뿌리자. 노루발 833   2013-09-17 2013-09-17 08:29
-- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for a = 1, 8 do     map[a] = {}     for b = 1, 8 do         map[a][b] = 0     end end -- 맵 데이터 초기화 map[1][1] = 1 map[1][2] = 1 map[1][3] = 1 map[1][4] = 1 map[1][5] = 1 map[1]...  
35 Lua 소코반: 플레이어를 그리고 움직이게 해보자 노루발 758   2013-09-17 2013-09-17 08:30
오늘자 전체 코드입니다. 어제처럼 바뀐 부분만 설명해 봅니다. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for...  
34 Lua 소코반: 벽을 뚫고 나가지 않게 해보자! 노루발 696   2013-09-17 2013-09-17 08:31
전체 코드입니다.슬슬 길어지니 요약글 기능이 필요해진달지.. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for ...  
33 Lua 소코반: 상자를 만들고 옮기고 상자와 상자가 겹치거나 상자와 벽이 겹치지 않게 해 보자! 노루발 677   2013-09-17 2013-09-17 08:32
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for a = 1, 8 do     ma...  
32 Lua 소코반: 목표 지점을 만들고, 상자가 모두 옮겨지면 게임을 끝내자! 노루발 754   2013-09-17 2013-09-17 08:33
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...  
31 이미지 그리는 방법 1편 노루발 812   2013-09-17 2013-09-17 08:35
이미지가 중요한 글인데 이미지가 다 짤렸네요. 압박. 준비물은 일단 이미지입니다. 예제 이미지로 럭키♥를 준비했습니다. 럭키! 럭키! 럭키! 와아아아! 어쨌든 이 럭키를 가지고 예제를 진행하겠습니다! 와아아! 글쓸 맛 난다! 일단 Love2D에서 뭔가 그린다는...  
30 이미지 그리는 방법: 2편. 부제: 쿼드! 노루발 821   2013-09-17 2013-09-17 08:37
(역시 이미지가 중요한 글인데 이미지가 모두 잘렸습니다. 문화재 손실에 슬픔을 표합니다.) Quad에 대해 알아본댔습니다. 쿼드? 쿼드가 뭐지? 생소한 개념인데? 하나의 큰 그림을 로드해서 쪼개서 쓰는 겁니다. 타일 깔듯이요. 우리가 포켓몬스터 같은 걸 하...  
29 게임의 기본 설정을 담당하는 love.conf 노루발 763   2013-09-17 2013-09-17 08:39
안녕하세요, 노루발입니다. 여태까지 이것저것 많이 Love2D를 다뤄와서 제가 만든 소코반에 그래픽을 씌울 수준까지 되었지만 (물론 키 입력은 논외로 치죠, 나중에 다룰게요.) 아직 이걸로 정식 게임을 만든다면 모자라도 한참 모자랍니다. 창의 이름도 실행...  
28 Lua 소코반 EX: 그래픽 준비 노루발 1084   2013-09-18 2013-09-18 08:00
안녕하세요, 노루발입니다. 얼마 전 만든 Lua 소코반을 게임다운 게임을 만들기 위해 그래픽을 씌워보려고 합니다. 저번에 한 Love2D로 살펴본 뭐가 뭔지 모르는 복잡한 그리기 함수들도 사실은 모두가 소코반을 그래픽으로 만들기 위한 훼이크였습니다. 후후....  
27 Lua 소코반 EX: 포팅: 1 노루발 856   2013-09-18 2013-09-18 08:03
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...  
26 Lua 소코반 EX: 포팅: 2 (키가 눌리면 이동하게 해 보자) 노루발 832   2013-09-18 2013-09-18 08:04
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...