第10章碰撞检测

第10章碰撞检测10.1什么是碰撞检测10.2Flash现成的碰撞检测方法10.3像素级碰撞检测方法10.1什么是碰撞检测在Flash互动设计中，特别是在Flash游戏设计制作中，需要知道两个或多个影片剪辑是否重叠或相交，如运动的炮弹碰到物体发生爆炸，两辆汽车发生碰撞产生翻车效果等。要想创建这种类型的交互对象，首先需要使用一种方法，来判断一个对象是否与另一个对象接触，这种方法叫碰撞检测。10.2Flash现成的碰撞检测方法FlashAS3.0中有两种现成的碰撞检测方法：一、hitTestObject方法二、hitTestPoint方法4

一、hitTestObject方法

可以用来检测任意两个显示对象DisplayObject是否发生碰撞。格式如下：

publicfunctionhitTestObject(obj:DisplayObject):Boolean

调用这个函数作为影片剪辑的方法，将另一个影片剪辑

的引用作为参数传入。通常在if语句中使用：

if(DisplayObject1.hitTestObject(DisplayObject2)){//碰撞后的动作}5

二、hitTestPoint方法

判断某个点与显示对象间是否发生了碰撞，可以使用显示对象DisplayObject的hitTestPoint方法。格式如下：

publicfunctionhitTestPoint(x:Number,y:Number):Boolean

计算显示对象，以确定它是否与x和y参数指定的点重叠或相交。

x和y参数指定舞台的坐标空间中的点。6实例制作1-碰花游戏

本项目是当鼠标碰触到舞台中随机分布的五彩花朵，花朵会立即“躲开”到别处。

制作思路：

通过复制库的花元件在舞台显示多只花，并且需要为舞台注册侦听鼠标移动事件，在鼠标移动事件处理函数中逐一判断舞台上的花是否鼠标光标发生碰撞，如果是，则改变此花位置。

案例效果vari:uint=0;while(i<10){ varflower_mc:Flower=newFlower(); this.addChild(flower_mc); flower_mc.x=Math.random()*(stage.stageWidth-flower_mc.width/2); flower_mc.y=Math.random()*(stage.stageHeight-flower_mc.height/2); flower_mc.scaleX=flower_mc.scaleY=0.6+Math.random()*0.4;

i=i+1;}this.addEventListener(MouseEvent.MOUSE_MOVE,moveHandle);functionmoveHandle(e:MouseEvent){ varj:uint=0; while(j<10){ if(this.getChildAt(j).hitTestPoint(this.mouseX,this.mouseY)){ this.getChildAt(j).x=Math.random()*stage.stageWidth; this.getChildAt(j).y=Math.random()*stage.stageHeight; this.getChildAt(j).alpha=Math.random();this.getChildAt(j).scaleX=this.getChildAt(j).scaleY=Math.random(); } j=j+1; }}9实例制作2-射箭游戏

用鼠标来控制箭的移动，当松开鼠标的时候，将箭发射出去，如果发出的箭刺中花朵，则花朵播放一段花朵刺中的动画，箭不管刺中花朵与否，最终都会减速飞出舞台上方。

制作思路：

通过复制库的花元件在舞台显示多只花，并且这些花的位置、大小和颜色都是随机的。鼠标按下弓箭时，生成一只箭的影片剪辑实例，这只箭在响应自身的进入帧事件时不断减少Y轴坐标，同时逐一判断是否与舞台上的花进行了碰撞。案例效果for(vari:uint=0;i<10;i++){ varf_mc:Flower=newFlower(); this.addChild(f_mc); f_mc.x=Math.random()*(this.stage.stageWidth-f_mc.width)+f_mc.width/2; f_mc.y=Math.random()*(this.stage.stageHeight-f_mc.height)+f_mc.height/2; f_mc.scaleX=f_mc.scaleY=Math.random()*0.1+0.2;f_="flow_"+i;}bow_mc.stop();//弓箭影片剪辑停止在第1帧bow_mc.startDrag(true);//弓箭可以被拖动bow_mc.addEventListener(MouseEvent.MOUSE_DOWN,playAllow);//如果弓箭被按下，则播放bow_mc影片剪辑中的拉弓动作functionplayAllow(e:MouseEvent){ bow_mc.gotoAndPlay(1);}//鼠标释放之后送出箭头bow_mc.addEventListener(MouseEvent.MOUSE_UP,createAllow);functioncreateAllow(e:MouseEvent){ vararrow_mc:Arrow=newArrow(); arrow_mc.scaleX=0.3; arrow_mc.scaleY=0.3; arrow_mc.x=this.mouseX; arrow_mc.y=this.mouseY; this.addChild(arrow_mc); arrow_mc.addEventListener(Event.ENTER_FRAME,flyAllow); arrow_mc.flySpeed=12;//设定弓箭的初始速度}functionflyAllow(e:Event):void{ varmoveArrow:Arrow=e.targetasArrow; moveArrow.flySpeed=moveArrow.flySpeed*0.98;//由于地球引力的缘故，飞行速度逐渐减慢

moveArrow.y-=moveArrow.flySpeed; for(varj:uint=0;j<10;j++){ if(this.getChildByName("flow_"+j).hitTestObject(moveArrow)){ this.getChildByName("flow_"+j).x=-this.getChildByName("flow_"+j).width; this.getChildByName("flow_"+j).y=-this.getChildByName("flow_"+j).height; break; } } if(moveArrow.y<=-moveArrow.height){ moveArrow.removeEventListener(Event.ENTER_FRAME,flyAllow); this.removeChild(moveArrow); }}10.3像素级碰撞检测方法Flash现成的碰撞检测方法虽然简单，但是精确度比较低，因为这种检测方法，是以影片的矩形边界来判断的，而不是以影片内图形的实际可见像素判断，误差比较大，应用起来有一定的局限性。

在游戏、用户界面和很多应用程序类型中，时常需要精确度更高的像素级别的碰撞检测，检测的精确度越高，则实现起来就越复杂。

Flash没有提供像素级别的检测方法，这就需要我们自定义函数来实现像素级别的碰撞检测方法。

像素级碰撞检测基本思路：

将要检测的显示对象DisplayObject转化为BitmapData，

然后用其内置的hitTest方法检测是否发生碰撞。

如下就是一个自定义的第三方像素级碰撞检测方法hitTestPixel(shape1:DisplayObject,shape2:DisplayObject),

该方法用于检测两个显示对象是否发生像素级碰撞，如果发生碰撞则返回true，否则返回false。

函数实现代码如下：functionhitTestPixel(shape1:DisplayObject,shape2:DisplayObject):Boolean{ vars1x:Number=shape1.getRect(shape1).x; vars1y:Number=shape1.getRect(shape1).y; vars2x:Number=shape2.getRect(shape2).x; vars2y:Number=shape2.getRect(shape2).y; vars1w:Number=shape1.width; vars1h:Number=shape1.height; vars2w:Number=shape2.width; vars2h:Number=shape2.height; s1w=s1w<1?1:s1w; s1h=s1h<1?1:s1h; s2w=s2w<1?1:s2w; s2h=s2h<1?1:s2h; varBmpData1:BitmapData=newBitmapData(s1w,s1h,true,0x00000000); varBmpData2:BitmapData=newBitmapData(s2w,s2h,true,0x00000000); BmpData1.draw(shape1,newMatrix(1,0,0,1,-s1x,-s1y)); BmpData2.draw(shape2,newMatrix(1,0,0,1,-s2x,-s2y)); vargp1:Point=shape1.localToGlobal(newPoint(s1x,s1y)); vargp2:Point=shape2.localToGlobal(newPoint(s2x,s2y)); varisHit:Boolean=BmpData1.hitTest(gp1,0x05,BmpData2,gp2,0x05); BmpData1.dispose(); BmpData2.dispose(); returnisHit;}第17页/共152页17实例制作-形状认知游戏

舞台下方放置的物体形状与灰色的物体形状之间一一对应，如果用鼠标拖动下方的物体形状与对应的灰色物体形状发生了碰撞，则吸附在一起，且大小一致。否则拖动的物体形状返回原处。制作思路：

利用鼠标拖曳对象功能和碰撞检测实现形状认知游戏，当鼠标按下的时候，让影片剪辑可以被拖曳，当鼠标被放开的时候，让影片剪辑停止被拖曳，如果此时拖曳的影片剪辑对象与特定拖目标进行了像素级碰撞，则自动将拖曳的影片剪辑吸附重叠在一起。否则被拖曳的对象自动返回原处。案例效果for(vari:uint=1;i<=8;i++){ varpicture_mc:MovieClip=this.getChildByName("t"+i+"_mc")asMovieClip; //监听鼠标按下事件

picture_mc.addEventListener(MouseEvent.MOUSE_DOWN,downHandle); //监听鼠标放开事件

picture_mc.addEventListener(MouseEvent.MOUSE_UP,upHandle);

}functiondownHandle(e:MouseEvent):void{ //记录下原始位置以便匹配不成功时可以返回去

e.target.startX=e.target.x; e.target.startY=e.target.y; e.target.startDrag(true);}functionupHandle(e:MouseEvent):void{ vartarget_mc:MovieClip=e.targetasMovieClip; targe