이번에는 간단한 공 튕기기에 대해서 알아보겠습니다.

여기서 알아야 할것들은 결국 좌표를 일정하게 더해주고 또 바닥면에 부딪쳤을 때 +  - 로 수정하면 됩니다.

한번 액션스크립트를 보겠습니다.

500/200 인 창에다가 ball 과 floor 란 두개의 무비 클립을 만들었습니다.

ball이란놈에게 속도를 줍시다.

위에서 아래로 떨어질때는 일정한 가속도가 더해집니다. 중력가속도라고 하죠?`ㅡ`?

만약 가속도가 0.2라고 할때 공이 움직이는 속도는 0.2 /0.4/ 0.6 이렇게 순차적으로 빨라져야 할것 입니다.

그럼 지정해주조

ball.speed = 0; // 요놈이 공의 속도를 저장할 변수입니다.
ball.gung = 0.5// 가속도를 0.5 라고 지정하죠
자그럼 ball.speed+=ball.gung;
속도를 지정해놓았습니다 안에 수치는 0.5씩 자꾸 커지겠죠?

그럼 공에 이 속도를 넣어봅시다
ball._y+=ball.speed;
다음은 평면상에 공이 닿았을때 반대방향으로 움직이게 합시다.(쉽습니다+_+생각이떠오르죵?)
나의사랑 if문
if(ball._y+ball._width/2>floor._y){
ball.speed=ball.speed*-1;
}
조건문은 공의 Y좌표(공의중간) + 공의 중간점에서 반지름 크기만큼 더해준 값이
바닥 floor 에 닿으면 -1의 값을 줌으로써 그 방향이 바뀌게 한다.
그럼 공에 닿는 순간 방향이 바뀌게 될것이고 거기에 계속해서 0.5라는 가속도값을 계속 더해줄 것이다.
ball.speed가 -값에서 다시 0이되면 멈추게되고 다시 0.5씩 더함으로 또 아래로 움직이게 됩니다.

바로 공 튕기기가 시작 된 것 입니다 + _ +

ball.speed = 0;
ball.gung=0.5;
_root.onEnterFrame = function(){
ball.speed+=ball.gung;
ball._y+=ball.speed;
if(ball._y+ball._width/2>floor._y){
ball.speed=ball.speed*-1;
//trace(ball.speed);
}
}

제가 실행한 총 소스 입니다. 아래 trace는 speed의 값의 변화를 보기 위해서 작성 했습니다.
공부하실때 보시면 좋습니다. 왜 공이 점점 튕기는 게 줄어드는지 같이 고민해봅시다+_+


-------------------------------------고민후
이유인즉 공이 바닥에 닿는 순간 -값이 되고 또 그동시에 가속도값이 더해짐으로
그 순간 속도 값만큼 차이가 나게 됩니다. 공이 떨어지는데 까지 10의 속도가 필요했으면
바닥에 닿는 순간 -10이됨과 동시에 0.5의속도가 더해짐으로 -9.5에서 다시 출반하는 거죠
이것이 반복 되다보니 0.5씩 자꾸 수치가 줄어듬으로 튕기는 높이가 줄어드는 것이죵-0-!!

다음 시간에는 - _ -b 엑스 축으로 값을 추가해줘 봅시당 - _ -오른쪽 왼쪽으로 공 튕기기 !!



게임 제작시에 탱크게임이나 간단한 슈팅게임을 제작할때 커서를 따라가는 식의 방식이 필요할때 자주쓰입니다
마우스 좌표 값을 수치로 확인하여 각도를 구합니다.

자 그럼 어떻게 움직이는 지 한번 봅시다.

_root.onEnterFrame = function() { //매프레임 마다~
ax=_xmouse - _root.angle._x;//x마우스좌표-포탄엑스좌표
ay=_ymouse - _root.angle._y;//y마우스좌표-포탄와이좌표
_root.angle._rotation=Math.atan2(ay, ax)*180/Math.PI;//각도 구하는 공식
}

아주  간단합니다^^

자 ax라는 변수에 엑스마우스 좌표 빼기 angle라는 인스턴스넴이있는 무비클립 좌표를 빼줬습니다.이유인 즉

저기 파란색 삼각형이 끝나는 지점이 마우스 입니다 회색으로 살짝 보이죠
우리가 필요한 것은 저기 파란색으로 표시되어있는 각도 값입니다.
저 각도를 알아야 포탄을 rotation 함수를 사용해서 움직이겠죠?

여기서 사용 되는 것이 Math.atan2(와이좌표, 엑스좌표) 입니다.
라디안 = Math.atan2(y좌표, x좌표) 이 함수를 사용하면 라디안 값을 출력하게 됩니다.

앞시간에 각도 값을 라디안으로 바꾸는 공식 기억하시죠? 라디안 = Math.PI/180*각도;
그럼 라디안을 각도 값으로 나오게 하겠습니다(rotation은 각도값으로 움직입니다)
라디안*180/Math.PI*라디안 = 각도;
설마 이해 안되시는 분은 없지요 그냥-_-각도 값만 놔두고 다 넘긴거에요~
자 정리하면
Math.atan2(y좌표, x좌표)*180/Math.PI = 각도;
우리가 원하는 각도 값이 나왔습니다.

그럼 다했습니다.

_root.onEnterFrame = function() { //매프레임 마다~
ax=_xmouse - _root.angle._x;//x마우스좌표-포탄엑스좌표
ay=_ymouse - _root.angle._y;//y마우스좌표-포탄와이좌표
_root.angle._rotation=Math.atan2(ay, ax)*180/Math.PI;//각도 구하는 공식
}
ax,ay는 마우스좌표와 무비클립의 거리를 구하는 것입니다~
angle이라는 무비클립에 로테이션 값을 = 우리가 구한 각도로 움직여라.

자 잘 움직이시나요~-0-? 뭐 다 아시겠지만 포탄의 중심점을 끝으로 해두셔야 포탄이 -_-
가운데에서 돌아가는 것을 방지 할수 있습니다~


게임 제작에 있어서 필요한 기본 문장에 대해서 간단하게 설명하고 지나가겠습니다.

이번에 배운 것은 Math.PI/180*Angle 이것입니다. 처음 이것을 보았을때 뭐지라고 했는데

별로 어려운 개념이 아니라 금방 잡았습니다.

Math.PI/180*pAngle 이놈이 바로 우리가 무비클립을 회전시키는데 필요한 문장입니다.

이녀석이 알려주는 것이 무엇이냐고 하면 바로 호의 길이를 나타내 주는데요 .. 그 호의 길이를

바탕으로 X축Y축 좌표값을 구해낼것입니다.

Math.PI는 우리가 알고있는 파이(3.14) 같은 것 입니다.

파이/180도 곱하기 각도 이 공식은 호도법에 의해서 나온 공식입니다.

각도를 알때 그 호의 길이를 알아내는 간단한 수학적 공식입니다.

그럼 이 호의 길이를 가지고 어떻게 회전을 시키는 지 알아 봅시다.

Angle = 60;
Radian = Math.PI/180*Angle
var X = r*Math.cos(Radian);
var Y = r*Math.sin(Radian);

자 일단 각도에 따라 회전하는 액션스크립트를 짜기 위해서는

수치에 따라서 x축 y축의 좌표변화량을 알아내야 합니다.

그러기 위해서 사용되는것이 cos, sin 입니다.

액션스크립트에서 이 문법을 사용하기 위해서는 코사인안에 호의 길이를 넣어줘야지

값을 출력하게 되어있습니다. 그래서 앞에 Math.PI/180*Angle 이 문장이 필요한 것이구요

자 x축 y축 값을 구하는데 싸인 코싸인이 왜 필요한지 궁금하신분은 위에 그림을 참조해주세요~

var X = r*Math.cos(Radian); 이것을 위에 a,b로 바꿔서 말하면 b=a*cos(세타);

요런 식이 됩니다. 당연히 b는 x축 좌표가 될것이고요 c가 y축 좌표값이 될 것입니다.

그럼 x축y축의 변화량을 구할수 있습니다. 그럼 이 두가지를 함께 설정해주면

각도에 따른 X축Y축 좌표 값을 알아 낼수 있습니다.

자 그럼 간단하게 코드를 작성해 봅시다

Angle = 60;// 각도를 지정했습니다.
r=20;// 반지름도 설정해주구요~
this.onEnterFrame = function() {//매 프레임 마다~
Angle += 10;//각도를 10씩 더해주라
Radian = Math.PI/180*Angle//각도에따라서 호의 길이를 나타내주고
var X = 60+r*Math.cos(Radian);//그 호의길이를 바탕으로 x축좌표 알아내고
var Y = 60+r*Math.sin(Radian);// y축 좌표도 알아내고
one._x = X;//좌표값을 무비클립 one 이라는 놈에게 대입시키고
one._y = Y;// 마찬가지로 y축도 대입시키고~
}

자 깔끔하게 정리 되었습니다. 화면에서 뱅글뱅글 도는 원을 보실수 있습니다^^;;

아 저기 엑스축 와이축에 60을 왜 더했는지는  아시죠 `ㅡ`?
원이 화면안에 어디쯤에서 돌아라 좌표값으로지정해준 겁니다 + _ +~



loadMovie를 하실때 조심해야할 사항이 있습니다.

상대경로와 절대경로 인데요 `ㅡ` 이게 잘못 지정 되어있을때는 swf파일을 불러와도
버튼이나 액션이 안먹는 상황이 생깁니다. 초보자들이 자주 하는 실수니 `ㅡ`꼭 알아두세요~

어떤 main이 될 플래시에 로드무비하여서 부수적인 버튼이 있는 swf파일을 불러왔습니다.
swf 버튼 액션중에 _root.무비클립.액션..
이런식으로 들어가 있는 버튼이나 액션은 하나도 안먹힙니다. `ㅡ`
왜냐면 main 플래시에 swf파일을 불러오는순간 swf의 절대경로 자체가 바껴버립니다.

나무가 있으면 뿌리 위로 잘라서 붙여놨는데 뿌리에서 부터 명령을 내리면 당연히 안먹는다고 
생각하시면 되겠습니다. 

이럴 때 상대적으로 경로를 지정해주시면 깔끔하게 실행되는 것을 알수있습니다.

잊지마세요~_root  와 this 절대 경로와 상대경로의 차이점을    -0- ㅎ 


eval함수는 두가지를 합쳐서 하나의 변수를 보내줍니다.

간단하게 예를 들어보겠습니다.

tip=1;
tip2=1;
var mm1_sm1=10;
wow = eval("mm"+tip+"_sm"+tip2);
trace(wow);

여기서 팁과 팁2가 1로 지정해 두었구요
mm1_sm1을 십으로 선언 해봤습니다.
mm1_sm1을 직접 쳐서 출력하는것이 아니라 eval을 이용해서 출력해보겠습니다.

wow = eval("mm"+tip+"_sm"+tip2); 자 여기서 보시면 eval 괄호안에 "mm"이란 문자에 팁을 더해 주었습니다.
mm1 이 될것이구요 거기다가 _sm팁2 을 더했습니다 결과적으로 eval이 주는 값은 mm1_sm1 < 이변수입니다.
그래서 wow에는 저 변수를 넣어주게 되고

wow를 출력해보니 당연히 mm1_sm1의 값 10이 출력 됩니다.

eval은 1+1이 2가아니라 11 이라는 것만 기억하시면 되겠습니다.^^


이번에는 미스터백님의 블로그에 있는 스프라이트 애니메이션 구현방법에 대해서 배워 봅시다.ㅋ

일단 게임의 구현이 있어서 가장 중요한 그림을 연속해서 보여주면서 움직이는 효과를 내야됩니다.

그럼 몇장의 사진을 차례대로 출력하면 될텐데...그 방법에 대해서 알아봅시다.

이 이미지 인데요 4개를 연속해서출력하면
움직이는 거 처럼 보일겁니다 + _ +

자 해봅시다.ㅋㅋ

사용자 삽입 이미지


사용자 삽입 이미지










자 일단 무엇무엇을 할거라고 저장공간을 마련해줍시다.

이걸 구현하는데 있어서 필요한것은 이미지가 4개 있는데 각 이미지 좌표를 설정해서
여기여기여기를 출력하라고 말할겁니다.
4장이 붙어서 있으니까 한장한장이아니라 그 이미지안에서 좌표값에 따라 출력시키면
되겠습니다.

그럼 먼저 해야될 작업이
차례대로 이미지 저장공간을 마련하구요 좌표값 저장할 부분 설정하구요~
현재 이미지가 몇번째인지 알게할 anim을 설정하고 총 이미지 갯수도 설정합니다.

자이제 설정한 공간에 값을 넣어봅시다.


사용자 삽입 이미지














Initialize()
초기화를 담당하는 곳에 가서 값을 넣어 줍시다.

 flightrect = new Rectangle[4];
총 4개의 좌표값을 넣어주겠습니다.
anim은 0으로 초기화 시키고 총 이미지숫자는 4개입니다.

new Rectangle (엑스좌표,와이좌표,가로크기,세로크기입니다.)
 flightrect 0번~4번까지 고유 좌표 값을 넣어놨습니다.


사용자 삽입 이미지










이미지 로드해주시구요~


사용자 삽입 이미지


Update 실시간으로 계속 실행되는 구문이라고 생각하시면됩니다.~
anim의 수치를 1식 더해주시구요 ++
그리고 if로 이미지갯수보다 수치가 올라가면 다시 0으로 만들어줍니다.

이제 출력하면 되겠습니다.


사용자 삽입 이미지











spriteBatch.Draw(imgflight, Vector2.Zero,flightrect[anim], Color.White);
spriteBatch.Draw(이미지경로, 그림위치 ,그림내좌표,색깔);

여기서 주목할 것은 그림내좌표 설정인데요 flightrect[anim] 이거입니다.
우리가 배열로 아까 flightrect[0~4]까지 좌표값을 넣어놨습니다.
anim이 1식더해지면서 4가되면 다시0이되고 이렇게 그림내좌표가 계속 바뀌면서
그림은 움직이는 것처럼 보이게 출력됩니다.


사용자 삽입 이미지







간단하지만 꼭 숙지하고 넘어가야할 부분입니다.~컬러키도 적용시켜주시구요~ㅎ

+ Recent posts