HTML5游戏引擎(十)-碰撞检测——矩形碰撞检测-hitTestPoint & 像素碰撞检测-传入参数true将会以实际的形状进行碰撞检测

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,表示没有发生碰撞,与矩形碰撞检测的结果不同。

这是因为:矩形碰撞检测,是判断显示对象的包围盒是否与一点相交;而像素碰撞检测,是判断显示对象的图案(非透明区域)是否与一点相交。

大量使用像素碰撞检测,会消耗更多的性能

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值