HTML5游戏引擎(十)-碰撞检测——矩形碰撞检测-hitTestPoint & 像素碰撞检测-传入参数true将会以实际的形状进行碰撞检测
碰撞检测
Lol游戏——英雄闪躲
矩形碰撞检测
碰撞检测,判断显示对象是否与一点相交。
矩形碰撞检测,是判断显示对象的包围盒是否与一点相交。
Egret 提供 hitTestPoint()
方法进行碰撞检测,矩形碰撞检测的用法为:
var isHit:boolean = shp.hitTestPoint( x: number, y:number );
shp
是待检测的显示对象,(x, y)是待检测的点的位置。如果发生碰撞,则方法返回 true
,如果没有发生碰撞,则返回 false
。
- 示例代码1:
class HitTest extends egret.DisplayObjectContainer
{
public constructor()
{
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(event:egret.Event)
{
//碰撞检测-矩形
this.drawText();
var shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000 );
shp.graphics.drawRect( 0,0,100,100);
shp.graphics.endFill();
shp.width = 100;
shp.height = 100;
this.addChild( shp );
var isHit:boolean = shp.hitTestPoint( 10, 10 );//在矩形内,true;矩形外-false
this.infoText.text = "isHit: " + isHit;
}
private infoText:egret.TextField;
private drawText()
{
this.infoText = new egret.TextField();
this.infoText.y = 200;
this.infoText.text = "isHit";
this.addChild( this.infoText );
}
}
- 示例代码2:
class HitTest extends egret.DisplayObjectContainer
{
public constructor()
{
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(event:egret.Event)
{
//碰撞检测-圆形
this.drawText();
var shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000 );
shp.graphics.drawCircle( 0, 0, 20);
shp.graphics.endFill();
shp.width = 100;//半径50
shp.height = 100;
this.addChild( shp );
var isHit:boolean = shp.hitTestPoint( 25, 25 );//半径25
this.infoText.text = "isHit: " + isHit;//半径25,1/4扇形,在圆内,显示为true
}
private infoText:egret.TextField;
private drawText()
{
this.infoText = new egret.TextField();
this.infoText.y = 200;
this.infoText.text = "isHit: ";
this.addChild( this.infoText );
}
}
注意:该点并未与红色圆形直接相交,而是与红色圆形的包围盒相交。
像素碰撞检测
像素碰撞检测,是判断显示对象的图案(非透明区域)是否与一点相交。同样使用 hitTestPoint()
方法,用法为:
var isHit:boolean = shp.hitTestPoint( x: number, y:number, true:boolean );
相比于矩形碰撞检测,增加了第三个参数 true
,表示要使用像素碰撞检测。
- 示例代码1:
var shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000 );
shp.graphics.drawRect( 0,0,100,100);
shp.graphics.endFill();
shp.width = 100;
shp.height = 100;
this.addChild( shp );
var isHit:boolean = shp.hitTestPoint( 10, 10, true );
this.infoText.text = "isHit: " + isHit;
这段代码运行后效果与矩形碰撞检测的效果相同,如图:
- 示例代码2:
var shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000 );
shp.graphics.drawCircle( 0, 0, 20);
shp.graphics.endFill();
shp.width = 100;
shp.height = 100;
this.addChild( shp );
// hitTestPoint 默认情况下会以矩形的模式进行检测
// 如果你传入参数true将会以实际的形状进行碰推检测
var isHit:boolean = shp.hitTestPoint( 25, 25, true );
this.infoText.text = "isHit: " + isHit;
文本中返回碰撞的结果,显示为 false
,表示没有发生碰撞,与矩形碰撞检测的结果不同。
这是因为:矩形碰撞检测,是判断显示对象的包围盒是否与一点相交;而像素碰撞检测,是判断显示对象的图案(非透明区域)是否与一点相交。
大量使用像素碰撞检测,会消耗更多的性能