포물선 운동과 공 step05:그림자 만들기

   포물선 운동과 공

step05 : 그림자 만들기

바운드 되는 위치에 그림자를 만들어 보겠다.

_eclipse 라는 Sprite 데이터형의 객체를 한개 만들고 graphics 속성을 이용하여 타원을 그릴텐데

그림자 특유의 blur 처리를 위해 필터도 적용해 보도록 한다.

import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;

var _eclipse:Sprite = new Sprite();
_eclipse.graphics.beginFill(0x000000, 0.7);
_eclipse.graphics.drawEllipse(0, 0, 80, 20);
_eclipse.graphics.endFill();

var blur:BlurFilter = new BlurFilter(10, 5, BitmapFilterQuality.HIGH);
_eclipse.filters = [blur];

addChild(_eclipse);

 

그런데 drawEllipse(0, 0, 80, 20); 을 보면 원점 0,0에서 가로 80, 세로 20인 타원그리는 메서드인데

원점 x, y가 0,0 으로 되어 있으면 축구공(ball)의 중심점과 맞지 않으므로

drawEllipse(-ball.width/2, -20/2, ball.width, 20); 로 표현하여 아래 그림과 같이

x는 공의 절반만큼 마이너스 해주고, 높이인 20도 절반만큼 마이너스 해주어서 공과 원점을 맞추어 준다.

소스에는 단순히 그림자 객체를 추가 해준것 밖에 없다.

소스)

step05.fla

import flash.events.Event;
import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;

var g:Number = 1;
var vy:Number = 8;
var bottom:Number = stage.stageHeight - (ball.height/2) - 20;

var _eclipse:Sprite = new Sprite();
_eclipse.graphics.beginFill(0x000000, 0.7);
_eclipse.graphics.drawEllipse(-ball.width/2, -20/2, ball.width, 20);
_eclipse.graphics.endFill();

_eclipse.x = ball.x;
_eclipse.y = bottom + (ball.height/2);

var blur:BlurFilter = new BlurFilter(10, 5, BitmapFilterQuality.HIGH);
_eclipse.filters = [blur];

addChild(_eclipse);

var num:int = this.numChildren;
this.setChildIndex(ball, num-1);
//addChild(ball);

this.addEventListener(Event.ENTER_FRAME, function(e:Event):void{
					  	  vy += g;
						  ball.y += vy;
						  if( ball.y > bottom ) {
							ball.y = bottom;
							vy = -vy;
						  }
						  if( ball.y < (ball.height/2) ) {
							ball.y = ball.height/2;
							vy = -vy;
						  }
					  });

 

8 : 공이 바운드 되는 바닥이 너무 내려가면 그림자가 보이지 않으므로 - 20을 하여 y 좌표를 조금 올렸다.

     stage.stageHeight - (ball.height/2) - 20;

17 : 그림자의 y는 바닥 변수인 bottom을 이용해야 하는데, bottom변수는 ball.height/2 가 마이너스 되어 있으므로

      그림자.y = bottom 으로 그대로 쓰게되면 공과 그림자가 겹치게 되므로 bottom에서 + (ball.height/2) 를 더해준다.

21 : 그림자가 addChild 되면 공보다 위에 렌더링 되므로 아래의 좌측과 같이 될 것이다.

      

오른쪽 공처럼 그림자 보다 위에 렌더링 시켜 주기 위해서는 다음의 두가지 정도의 방법이 있다.

23 ~ 24 : this인 MainTimeLine에 렌더링된 객체의 갯수를 this.numChildren으로 구한다 ( 출력해 보면 int 2 가 나온다)

              갯수인 2를 구했으므로 setChildIndex 메서드에 (ball객체를, num-1) 즉 0부터 쌓이는 뎁스에서 ball객체를 1로

        

              바꿔 넣음르로 "0 : 볼, 1 : 그림자" 에서 "0 : 그림자, 1: 볼" 로 바꾸어 넣는 것이다.

25 : 23~24 라인에서 처리한 방법 말고도 25번 과 같이 addChild(ball)을 해줌으로써 새로 addChild하여 그림자보다 위에 렌더링되게 

      하는 방법도 있다.

결과)