주제 : 플래시로 만들어 보는 포물선 운동과 포트리스 게임
☐ 주제설정의 취지 및 목적
앞에서 우리는 플래시를 이용한 등속도 운동의 표현방법과, 등가속도 운동의 표현 방법에 대해서 공부했다. 이 장에서는 등속운동과, 등가속도 운동이 혼합된 운동, 포물선 운동에 대해서 공부하고자 한다. 실제 세계에서는 다양한 운동이 나타난다. 그런 다양한 운동을 표현하기 위해서는 그 물체에 작용하는 여러 가지 힘과, 마찰력, 운동방향등을 고려해 주어야 한다. 하지만 사실 이러한 물리적 현상을 모두 고려한다는 것은 쉬운 일은 아니다. 이 장에서는 간단한 방법을 이용하여 정확하지는 않지만 실제 세계와 유사한 상황을 표현할 수 있도록 좀더 접근해 보고자 한다. 간단한 포물선 운동을 통해 실제세계의 운동에 좀더 비슷하게 접근할 수 있을 것이다. 다행하게도 속도는 벡터 값으로써 x축과 y축으로 속도를 분해할 수 있기 때문에 속도의 분해를 이용하여 포물선운동을 구현할 것이다. 속도를 분해하기 위해서는 삼각함수 공식을 사용하게 될 것이며, 포물선 운동을 응용하여, 대포쏘기(포트리스) 게임까지 만들어 보고자 한다. 궁극적으로는 실제 세계와 유사하게 마찰력, 바람의 방향 그리고 중력의 세기까지 고려 할 수 있는 포트리스 게임을 제작해보도록 하자.
☐ 학습목표
○ 포물선 운동 공식 유도
○ 포물선 운동을 컴퓨터로 구현할 수 있다.
○ 키보드를 이용한 상호작용 방법 구현
○ 초기속도와 각도를 변화해 가며 포물선 운동을 시킬 수 있다.
☐배울 내용
1. 포물선 운동을 공식으로 유도해 본다.
가. 포물선 운동에서 x축과 y축의 운동 분석
나. x축 등속운동
다. y축 등가속도 운동
라. 시간에 따른 운동 분석과 공식 유도
2. 포물선 운동을 운동을 컴퓨터로 구현할 수 있다.
가. 포물선 운동 표현방법 구상
나. 포물선 운동 시뮬레이션
3. 포트리스 게임을 위한 키보드 입력방법을 알아본다.
가. 키보드를 통한 상호작용
나. 무비클립 회전과 각도변화방법
다. 발사 방법 연구
4. 초기속도와 각도를 변화해 가며 포물선 운동을 시킬 수 있다.
가. 각도에 따른 공의 운동 표현(삼각함수)
나. 초기속도에 따른 공의 운동 표현
다. 포트리스 게임 제작
5. 응용
가. 키보드를 이용하여 포의 위치를 이동시켜 본다.
나. 바람에 따라 바뀌는 포탄의 운동을 구현해 본다.
다. 공기저항과 중력변화에 의한 포탄의 운동 구현
라. 지면과의 충돌 여부
1. 포물선 운동을 공식으로 유도해 본다.
가. 포물선 운동에서 x축과 y축의 운동 분석
비스듬히 던져 올린 물체는 수평 방향으로는 공기의 저항을 무시 할 때 아무런 힘이 작용하지 않으므로 수평방향으로는 등속 운동을 하게되고 수직방향으로는 중력만이 작용하므로 지구중심방향으로 등가속도 운동을 하게 된다. 이러한 운동을 포물선 운동이라고 한다. 아래 그림처럼 포물선 운동을 플래시를 통해 구현하고자 할때 일단은 x 축 속도와 y축 속도를 따로 따로 고려하는 것이 문제에 접근하기가 편리할 것이다. x 축은 등속운동을 하므로 시간이 지남에 따라 일정한 거리만큼 x축의 이동거리를 증가시켜 주면 될 것이고, y축은 중력가속도가 작용하므로 앞에서 배운 자유낙하 운동을 이용하면 될 것이다.
나. x축 등속운동
포물선 운동을 하는 공은 x축으로 등속운동을 해야 하므로, 벽돌깨기에서 사용했던 것처럼 프레임 액션스크립트에 다음과 같은 명령을 넣는다. 공의 x좌표는 항상 일정한 속도록 매 프레임 마다 이동하게 될 것이다.
| vx=1; //x축으로의 속도 결정 onEnterFrame = function () { ball._x = ball._x+vx; // x축으로 등속운동 } |
다. y축 등가속도 운동
자유낙하 운동에서 사용했던 등가속도 운동방법을 그대로 사용한다.
| //초기값 g = 1; //중력가속도 값 vy = 0; // 속도값 초기화 onEnterFrame = function () { vy = vy+g; // vy 속도에 중력가속도 값 더해서 속도 변화 ball._y = ball._y+vy; } |
라. 시간에 따른 운동 분석과 공식 유도
일반적인 포물선 운동의 공식은 다음과 같다.
컴퓨터로 표현하기 위해 포물선 운동의 공식을 좀 더 구체적으로 나타내 보면, 플래시상에서는 앞에서 배운 것처럼 시간이 흘러가는 것을 프레임이 지나갈 때 마다 처리하므로, 시간 변수를 따로 사용하지 않고, 매 프레임 마다 다시 속력과 거리를 계산해 주면 된다. 따라서 처음 발사속도 v 와 발사각도 a 만 알 수 있다면 속도 v로 수평과 a 각도로 던졌을 때 x축의 속력과 y축의 속력은 다음과 같이 나타낼 수 있다.
| x축 속력 vx = v × cos(a) y축 속력 vy = v × sin(a) |
매프레임이 지날 때 마다 x축의 속력과 y축의 속력은 다음과 같이 나타낼 수 있다. (단 g 는 중력가속도라 하자)
| x축 속력 vx : 변화없다.(등속운동이므로 항상 일정) y축 속력 vy = vy + g |
매프레임이 지날 때 마다 x축의 이동거리와 y축의 이동거리는 다음과 같이 나타낼 수 있다.
| x축 이동거리 sx = sx + vx y축 이동거리 sy = sy + vy |
2. 포물선 운동을 운동을 컴퓨터로 구현할 수 있다.
가. 포물선 운동 표현방법 구상
컴퓨터 화면상에서 포물선 운동을 표현하기 위해서 ball을 화면의 왼쪽에서 오른쪽으로 날아가게 해보자. 그리고 중력을 아랫방향으로 향한다고 가정하자. 왼쪽아래에서 공을 던져 오른쪽으로 날아가게 하려면 x 좌표값은 조금씩 증가시켜야 할 것이고, 중력이 아래 방향으로 작용하게 하려면, y좌표값도 시간이 지남에 따라 아래 방향으로 점점 증가하게 만들어야 할 것이다.
나. 포물선 운동 시뮬레이션
우선 ball 이라는 무비클립을 만들어 화면 왼쪽에서 오른쪽으로 이동시켜 보자.
| vx=1; //x축으로의 속도 결정 onEnterFrame = function () { ball._x = ball._x+vx; // x축으로 등속운동 } |
화면위쪽으로 초기속도로 던져지면 중력 때문에 올라가다가 아래쪽으로 떨어지게 해보자.
| //초기값 g = 1; //중력가속도 값 vy = -25; // 속도값 초기화(위로 던져 올리기 위한 초기값) onEnterFrame = function () { vy = vy+g; // vy 속도에 중력가속도 값 더해서 속도 변화 ball._y = ball._y+vy; } |
vy 의 처음 속력을 - 값을 준 이유는 전에 공부했던 것처럼 컴퓨터 화면상에서 y축의 좌표는 우리가 일반적으로 수학에서 사용하는 좌표와 달리 위로 올라갈수록 값이 작아진다고 했다. 즉 원점좌표가 왼쪽상단이 된다. 그래서 vy 값을 - 로 주어야만 공이 위로 올라갈 수 있고, 반대로 중력방향은 + 로 주어야 아랫방향으로 떨어지게 할 수 있다.
이번에는 x 축의 운동과 y축의 운동을 함께 사용하여 포물선 운동을 나타내 보자. ball 이라는 무비클립을 만들어 좌측 아래쪽에 위치시키고, 메인프레임에 아래와 같은 액션스크립트를 작성해 보자.
| //기초값 g = 1; //중력가속도 값 vx = 10; // x축의 초기 속도 vy = -20; // 속도값 초기화(위로 던져 올리기 위한 초기값) onEnterFrame = function () { vy = vy+g; // vy 속도에 중력가속도 값 더해서 속도 변화 ball._y = ball._y+vy; //y축으로 운동 ball._x = ball._x+vx; // x축으로 등속운동 } |
<버튼을 눌러 공을 날려 보자>
<토의> 초기값(중력값 g 와 vx, vy) 값을 바꾸어 가면서 실행시켜 보자.
