제7강 뛰어 넘기(포물선 운동) 구현하기

1. 학습목표    ① 포물선 운동을 이해할 수 있다.    ② 뛰어 넘기를 구현할 수 있다.   지난 강좌에서 배운 내용 복습하기   1. 파일->라이브러리로 가져오기를 이용하여 움직이는 gif 파일을 이용하여 움직이는 무비클립     을 만든다. 2. -width/2의 값을 x에 -height/2의 값을 y에 넣어 무비클립을 중심에 놓는다. 3. 레이어를 하나 더 만든 후 첫번째 프레임에 stop(); 입력한 후 무비클립을 빠져 나오고 장면1    의 바탕화면에 붙여 넣고 속성의 인스턴스 이름을 붙여 넣는다. 4. 레이어를 하나 더 추가한 후 첫번째 프레임에 다음과 같은 액션을 입력한다. function go() {    if (Key.isDown(Key.RIGHT)) {       _root.sonic._x += 5;       _root.sonic._xscale=100;         _root.sonic.play();             } else if (Key.isDown(Key.LEFT)) {       _root.sonic._x -= 5;       _root.sonic._xscale=-100;       _root.sonic.play();             }else    {       _root.sonic.stop();      } } setInterval(go, 25);   5. 무비 클립이 자동으로 움직이게 하고 싶으면 무비클립 내에 stop()이라는 액션을 사용하지     않은 채 장면1의 첫번째 프레임에 다음과 같은 액션을 추가한다. worm_v=2;   6. 바탕화면에 있는 무비클립의 액션에 다음과 같은 액션을 입력한다.(무비클립 누르고 마우스     오른쪽 버튼 클릭하여 액션 선택하는 거 아시죠? ^^) onClipEvent (enterFrame) {                if (this._x>450 || this._x<300) {          _root.worm_v *= -1;                     }                                          this._x += _root.worm_v;        }     2. 속력과 가속도(포물선 운동을 이해하기 위한 기초 중의 기초)   @ 속력과 가속도의 개념   #속력 : 초등학교 때 속력은 이동거리를 시간으로 나누어준 것 정도로 배웁니다. 그래서 속력이            무엇이냐고 물어보면 "시간 분의 이동거리"라고 대답합니다. (초딩 수준)   #속력 : 중학교 때 배우는 과학 교과서에 속력은 다음과 같이 정의 되어 있습니다.            "단위 시간 동안에 이동한 거리" 단위 시간으로 보통 1초, 혹은 1시간(이 때는 거리도            km를 사용합니다.)을 사용하므로 쉽게 말해 속력이란 "1초 동안 이동한 거리"를 나타냅            니다. 즉 5m/s는 1초에 5m이동하는 정도의 빠르기라는 뜻이죠.              똑같은 식을 배우지만 초등학교 때보다 약간 심화된 내용입니다. 원리 적용   * 밀도는 부피 분의 질량입니다.(초딩 버전) 이를 중딩 버전으로 바꾸면 "단위 부피당    질량"이 됩니다. 좀 더 쉽게 "1cm^3(가로 1cm, 세로 1cm, 높이 1cm)의 질량(g)"이    밀도라는 얘기죠.     물의 밀도가 1g/cm^3인데, 이는 물 1cm^3의 질량이 1g이라는 뜻입니다.   한편 금의 밀도는 대략 13g/cm^3죠. 이는 1cm^3의 질량이 13g이라는 뜻으로   물보다 13가량 무겁다는 것을 알 수 있습니다. 그래서 영화에서 금괴를 운반할 때   그렇게 낑낑대면서 운반하는 것입니다.   (이 원리를 제대로 이해하면 물리 공식 대부분이 쉽게 이해되요. ^^)   #가속도 : "단위 시간당 속도의 변화량"으로 쉽게 말해 "1초당 속도의 변화"라고 할 수 있죠.  중력에 의해 가속되는 가속도를 "중력 가속도"라고 합니다. 기호로 g(gravity라는 영어의 첫자)  를 사용하구요, 그 값은 위와 같이 9.8m/s^2입니다. 이는 1초에 9.8m/s씩 속도가 변한다는  의미죠. 쉽게 말해 옥상에 올라가서 돌맹이를 떨어뜨리면 1초 후에는 9.8m/s, 2초 후에는 19.6  m/s가 된다는 거예요. (대략 2초 후에는 20m/s. 이를 시속으로 바꾸면 72km/h가 되죠. ^^)   고급 이해   * 어떤 물리량의 단위는 그 물리량을 구하는 식에 의해 결정됩니다.  가속도는 m/s라는 속도의 단위를 s라는 시간의 단위로 나누어준 단위와 같습니다.   * 가속도를 정의할 때 "속력"이라는 말대신 "속도"라는 말을 썼습니다. 얼핏 같은   의미같지만 조금 다릅니다. 속력은 마이너스(-)값이 없습니다. 하지만 속도는 -값이   있죠. 어떤 차이냐구요? 매우 중요한 차이인데요, 바로 방향을 고려한 물리량이   속도라는 것입니다.     예를 들어 3m/s로 가던 것이 1초 후에 5m/s가 되었다고 합시다. 방향을 고려하지   않으면 가속도가 2m/s^2이라고 말하겠죠. 하지만 오른쪽으로 3m/s로 가던 것이   1초 후에 왼쪽으로 5m/s로 움직인다면 속도의 변화는 2m/s라고 말할 수 없게 됩니   다. 이 때의 속도의 변화는 8m/s입니다.     오른쪽을 +로 정하면 처음 속도는 +3m/s이구요, 나중 속도는 -5m/s가 됩니다.   나중속도-처음속도=-5m/s - 3m/s = -8m/s가 됩니다. 그려면 가속도 값도 마이너   스 값이 되겠죠? 가속도는 -8m/s^2가 됩니다. 이는 왼쪽 방향으로 가속되었다는   의미죠. 이 방향을 정확히 이해하고 있어야 액션 구현이 이해됩니다. ^^   @ 속력과 가속도 액션으로 구현하기   # 속력 적용하기   2강에서 배웠던 코드를 분석해 봅시다.        function go(){            if (_root.car._x < 300){                _root.car._x = _root.car._x + 2;            }        }        setInterval(go, 25);     여기서 setInterval은 일정한 시간 간격을 만들어 줍니다. 속력이 "단위 시간당 이동거리"인데 그 "단위 시간"을 만들어 주는 것이 setInterval이죠. 여기에서의 단위 시간은 0.025초입니다. 그러니까 위의 코드는 "0.025초당 2픽셀만큼 이동하라"는 뜻으로 속력을 적용한 것입니다. 어차피 단위 시간은 정하는 사람 맘이라서 중요한 것은 단위 시간당 이동하는 거리 2가 중요한 의미가 되죠. 단순히 2라고 썼지만 그 의미는 속력의 의미가 있는 것입니다.     위의 코드는 다음과 같이 속력의 개념을 써서 적용할 수도 있습니다.    velocity = 2;     function go(){        if (_root.car._x < 300){            _root.car._x = _root.car._x + velocity;        }    }    setInterval(go, 25);     차라리 저 위의 코드가 더 편하다구요? ^^ 이렇게 단순 무식한 표현일 경우에는 그렇다고 할 수 있습니다. 하지만 가속도를 표현한다든지 하는 고급 내용에 가서는 반드시 변수를 이용해야 만 쉽게 응용할 수 있거든요. 아무튼 이제부터는 웬만한 숫자는 다 변수로 활용하는 것을 원칙 으로 하겠습니다.     # 가속도 적용하기   가속도는 "단위 시간당 속도의 변화량"입니다. 따라서 일정한 시간 간격으로 속도를 변화시켜 주어야 합니다. 이를 액션으로 적용하면 다음과 같습니다. velocity = 2;   //속도를 영어로 쓴 거예요. 그냥 v로 해도 무방합니다. acceleration = 0.1; //가속도를 영어로 썼죠. 그냥 a로 해도 되겠죠? function go(){     if (_root.car._x < 300){         velocity += acceleration;  //일정한 시간 간격으로 속도를 증가         _root.car._x = _root.car._x + velocity;  //가속도가 적용된 속도     } } setInterval(go, 25);     위 액션을 실행시켜 보면 오른쪽으로 속력이 일정하게 빨라지는 등가속도 운동 하는 것을 볼 수 있을꺼예요... 가속도가 0.1만 되어도 빨라지는 것이 눈에 보입니다. 못 믿겠으면 1로 해보세요... 어떻게 되나... ^^   고급 팁 : 튕겨내기   * 가속도와 같은 고급 액션에서는 부드러움을 위해 프레임 비율을 24로 바꾸어 주는 것이 좋습니다. "프레임 비율"아시죠?  (2강 사전팁 참조...) * 아래로 자유낙하하는 공을 튕겨내는 것을 다음과 같이 구현할 수 있습니다. v = 2;  a = 0.1;  function go(){     if (_root.ball._y+v+a < 400){          v += a;         _root.ball._y = _root.ball._y + v;     }else{         v *= -1;  //속도의 방향을 반대로...     } } setInterval(go, 25);     위에서 빨간색으로 되어 있는 거 이해되시나요? if문에서 실행될 내용을 미리 적용시켜서 400이라는 값과 비교시키는 것입니다. 지난번에 설명한 내용인데... 그냥 _root.ball._y<400 이라고만 쓰면 공이 튕겨 오르지 않습니다. 왜냐하면 공의 y값이 400보다 작아 if문을 실행시켜 놓으면 그 값은 이미 400을 넘거든요. 그러면 속도가 -값이 되기만 하지 이를 공의 y좌표에 실현시키지 못하니까 그런 거죠.     공이 바닥에 부딪치면 이상적인 경우 그 속력 그대로 위로 튕겨집니다. 반대 방향으로 속력이 변하는 것을 우리는 속도라고 하며 마이너스(-)를 붙여서 이해한다고 위에서 이미 배운바 있습니다. 속력이라는 변수를 사용하면 왜 편한지 이제는 이해되시는지요.... ^^       3. 포물선 운동 이해하기(포물선 운동을 이해할 수 있다.) 일일이 다 설명하긴 좀 어렵구요, 다음의 사이트를 참고하세요... (제 홈페이지에 있는 내용임돠!) 영화속의 포물선 운동을 설명한 내용입니다. 기본 개념을 잡을 수 있습니다. 수식적인 내용은 모르더라도 개념만큼은 반드시 잡아야합니다. 반드시... http://mulinara.net/movie/01/04/index.html   수식적인 이해는 다음의 페이지를 이용하시면 됩니다. 꽤 어려운 내용입니다. 꾸준히 공부하지 않으면 이해하기 힘든 내용들 뿐이죠... 보통은 포기하라고 권유하고 싶기도 하고... 그래도 한번 제대로 배워보고 싶다는 생각이 들면 참고해 보세요... ^^ http://mulinara.net/physics/mechanic/acceler/k31.html http://mulinara.net/physics/mechanic/acceler/k32.html   핵심 요약 : 포물선 운동   수평방향 - 등속 운동 (속력이 일정한 운동-단위 시간당 이동거리가 일정) 수직방향 - 등가속도 운동(단위 시간당 속도의 변화가 일정한 운동)       3. 포물선 운동 구현하기(뛰어 넘기를 구현할 수 있다.)     포물선 운동을 구현하기 위한 기본 개념 및 액션은 이미 다 배웠습니다. 다만 따로 따로 배워서 문제이긴 하지만요. 우선 수평 방향(_x)으로는 등속운동을 하면서 수직방향(_y)는 등가속도 운동을 합니다.   위에서 배운 튕겨내기를 이용하여 포물선 운동을 구현해 보겠습니다. 어떻게 액션으로 구현해야할지 좀 생각하고나서 다음의 글을 보기 바랍니다....               생각중....               다 생각하셨나요?             그래도 님들을 믿어야죠. 열심히 생각해 보았으리라 생각하고 적어보겠습니다.           vx = 2;   //수평방향의 초기 속도 (계속 변하지 않음) vy = 2;   //수직 방향의 초기 속도 (시간에 따라 계속 변함) a = 0.3; function go() {    if (_root.ball._y+vy+a<400) {       vy += a;           //가속도 운동은 수직방향만 적용됩니다. 그래서...       _root.ball._x += vx;  //수평방향으로는 등속운동       _root.ball._y += vy;  //수직 방향으로는 등가속도 운동    } else {       vy *= -1;    } } setInterval(go, 25); 자, 근데 두 가지 문제가 있어요... 첫째, 오른쪽으로 계속 움직이다가 시야에서 사라진다. 둘째, 튀어 오르는 높이가 점점 줄어든다.   첫번째 문제를 해결합니다. vx값을 특정 범위를 벗어나게 생겼으면 속도의 방향을 반대로 해주면 됩니다. 아래와 같이... vx = 2;   vy = 2;   a = 0.3; function go() {    if (_root.ball._y+vy+a<400) {       vy += a;                  if(_root.ball._x+vx<0 ||_root.ball._x+vx>400){          vx *=-1;       //위와 같은 범위에서 수평방향의 속도를 반대로...       }       _root.ball._x += vx;                         _root.ball._y += vy;      } else {       vy *= -1;    } } setInterval(go, 25);   두번째 문제를 해결합니다. _y값이 400을 넘기 전에 튀어 오르고 그 값은 400에 도달했을 때보다 작기 때문에 튀어오르는 높이가 줄어드는 것입니다. 해결 방법은 아주 간단합니다. 400을 넘었을 때의 값을 적용시켜 주는 거죠. 단 속도의 방향이 바뀐 후에... vx = 2;   vy = 2;   a = 0.3; function go() {    if (_root.ball._y+vy+a<400) {       vy += a;                  if(_root.ball._y<0 ||_root.ball._y+vx>400){          vx *=-1;             }       _root.ball._x += vx;                         _root.ball._y += vy;      } else {       vy *= -1;       _root.ball._y += vy;    } } setInterval(go, 25);     그렇다고 문제가 100% 해결된 것은 아닙니다. 마지막 문제는 공이 400선에 부딪쳐서 튕겨 오르지는 않는다는 거죠. 이 또한 해결책이 없는 것은 아닙니다. 다만 포물선 운동을 수식적으로 정확히 이해해야만 가능하죠...   원하시는 분이 있다면 한번 마련해 보지요... ^^     4. 과제(뛰어 넘기를 구현할 수 있다.)   1. 위쪽 방향키를 누르면 무비클립이 위로 뛰어 오르게 할려면 어떻게 해야할까? (힌트 : _y, -v, a) 2. 오른쪽 방향키와 위쪽 방향키를 함께 누르면 장애물을 건너뛰게 할려면 어떻게 해야할까?    (힌트 : _x, _y, -v, a) 3. 장애물을 뛰어 넘다가 장애물과 부딪쳤을 때 무비클립이 위 아래 뒤집어지고 아래쪽으로 떨어지     게 할려면 어떻게 해야할까? (힌트 : _x, _y, -v, a, hitTest, _yscale)   # 6강, 7강을 통해 고전게임 "너구리"를 완성할 수 있는 기초가 충분히 이루어졌습니다. 그래픽, 사운드와 구성 등만 제대로 한다면 "너구리"를 흉내낼 수 있을 꺼예요... ^^