添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

如何检测矩形和圆形的碰撞?

1.画一个黄色矩形和一个蓝色圆形,再放置一个旋转的按钮。
在这里插入图片描述
2.拖动黄色矩形,当矩形碰到圆形时,圆形会变为绿色。
在这里插入图片描述
3.通过旋转按钮,改变矩形旋转角度,再次碰撞,亦可变为绿色。

在这里插入图片描述
Laya的实现代码,如下:

export default class HitRect extends Laya.Sprite {
    public w:number = 100;
    public h:number = 50;
    public r:number = 40;
    public spRect:Laya.Sprite;
    public spCircle:Laya.Sprite;
    constructor() {
        super();
    public draw():void{
        this.spRect = new Laya.Sprite();
        this.spRect.width = this.w;
        this.spRect.height = this.h;
        this.spRect.graphics.drawRect(0,0,this.w,this.h,0xffff00);
        this.addChild(this.spRect);
        this.spRect.mouseEnabled = true;
        this.spRect.on(Laya.Event.MOUSE_DOWN,this,this.mouseDown);
        this.spRect.rotation= 0;
        this.spRect.x =0;this.spRect.y=200;
        this.spRect.pivotX= this.w/2;
        this.spRect.pivotY= this.h/2;
        this.spRect.graphics.drawCircle(this.spRect.pivotX,this.spRect.pivotY,6,0xff0000);
        this.spCircle = new Laya.Sprite();
        this.spCircle.graphics.drawCircle(0,0,this.r,0x00ffff);
        this.spCircle.x = 150;
        this.spCircle.y = 200;
        this.addChild(this.spCircle);
        let button = new Laya.Button();
        button.width = 80;
        button.skin = "comp/button.png";
        button.label = "旋转1";
        this.addChild(button);
        button.on(Laya.Event.MOUSE_DOWN, this, this.onButtonClick);
        let button5 = new Laya.Button();
        button5.skin = "comp/button.png";
        button5.x = 100;
        button5.label = "旋转5";
        this.addChild(button5);
        button5.on(Laya.Event.MOUSE_DOWN, this,  this.onButtonClick5);
    private onButtonClick(e: Laya.Event) {
        this.spRect.rotation+=1;
    private onButtonClick5(e: Laya.Event) {
        this.spRect.rotation+=5;
    private mouseDown():void{
        this.spRect.on(Laya.Event.MOUSE_MOVE,this,this.mouseMove);
        this.spRect.stage.on(Laya.Event.MOUSE_UP,this,this.mouseUp);
    private mouseUp():void{
        this.spRect.off(Laya.Event.MOUSE_MOVE,this,this.mouseMove);
        this.spRect.stage.off(Laya.Event.MOUSE_UP,this,this.mouseUp);
    private mouseMove(evt:Laya.Event):void{
        this.spRect.x = evt.stageX;
        this.spRect.y = evt.stageY;
        let pos:any = this.getNewPos(this.spRect.x,this.spRect.y,this.spCircle.x,this.spCircle.y,this.spRect.rotation);
        let  boool = this.ComputeCollision(this.w,this.h, this.r, pos.x, pos.y);
        if(boool){
            this.spCircle.graphics.drawCircle(0,0,this.r,0x00ff00);
        }else{
            this.spCircle.graphics.drawCircle(0,0,this.r,0x00ffff);
     * 计算碰撞
     * @param w 宽度
     * @param h 高度
     * @param rx 圆形x
     * @param ry 圆形y
    private ComputeCollision(w, h, r, rx, ry):boolean{
        var dx = Math.min(rx, w * 0.5);
        var dx1 = Math.max(dx, -w * 0.5);
        var dy = Math.min(ry, h * 0.5);
        var dy1 = Math.max(dy, -h * 0.5);
        return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) * (dy1 - ry) <= r * r;
    private  getNewPos(x1,y1,x2,y2,rotation):any{
        var pos:any = {};
        var distance = Math.pow((Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)), 0.5);
        var angle:number = Math.atan((y1-y2)/(x1-x2))*180/Math.PI;
        //兼容矩形的旋转角度
        var newAngle = angle - rotation;
        pos.x = Math.cos(newAngle/180*Math.PI) * distance;
        pos.y = Math.sin(newAngle/180*Math.PI) * distance;
        return pos;
本文初探LayaAir2.0引擎,记录学习历程
其实学习Laya引擎是很早之前定下的目标。但有一些事情耽搁了就晚了一些时间。这两天初窥门径,当然期间也踩过不少的坑。我的想法是先从Laya的2D游戏下手,老项目——先使用Laya完成水管鸟实操再说。
1:循环滚动的背景图
在CocosCreator的学习日志里,我也写过这个功能,但在creator中我是在update中直接缩减节点的x来实现节点向左移动的效果,在Laya中我使用的是刚体通过设置linearVelocity来设置刚体的线性速度来控制
                                    前言本文是使用laya实现的flappy bird。先来看下整个游戏过程: 本文从2个方面介绍,首先介绍下涉及到的Laya重点知识,然后再简单介绍下实现flappybird的要点。Laya基础知识游戏中的常用术语刚接触游戏,时常一脸懵逼里面的各种词汇:预制体、刚体。当然物理好的童鞋例外。下面我来介绍下几个常用术语:首先认识碰撞器什么是碰撞器?在游戏中比如 一架飞机发射了子弹,那么当这个子弹和敌人,...
			发生物理碰撞时,也就是碰撞生命周期内的第一次进入碰撞,自动执行的生命周期虚方法。
		onTriggerEnter
			发生持续的物理碰撞时,也就是碰撞生命周期内的第二次碰撞碰撞离开前,自动执行的生命周期虚方法。
		onTriggerExit
			物理碰撞结束时,自动执行的生命周期虚方法。
                                    常用的功能和常见问题,一般官方文档或网上可以直接搜到,但仍有一些问题,官方文档里是没提到的,然后网上搜到同样问题的帖子,却没人回答。作为一个开源免费的引擎,不是每个问题,官方都能准时解答的,甚至你发个帖子,很长一段时间都没有一个答案,这时只能自己慢慢摸索一下了。这里我就把自己遇到的一些小问题及解决思路记录下来,希望对那些遇到同样问题的人有帮助。这些问题并不大,却有点烦人,你明知道实现某个功能可能就...
                                    北京掌趣科技股份有限公司(简称“掌趣科技”)与北京蓝亚盒子科技有限公司(简称“蓝亚盒子”,英文名 LAYABOX)达成战略合作协议后,双方共同致力于打造一款具有创新意义的AI 游戏引擎,为广大游戏开发者提供更加智能、自动化的解决方案,推动游戏产业技术革新,共建高质量的 AIGC 开发生态体系。经过几个月的努力, 我们终于在今天推出了具有AIGC开发生态的LayaAir3.1的测试版本:3.1.0...
这种的  够蛋疼了吧。 本来想通过 点击位置的坐标链接成向量,然后 计算向量的 角度 来判断点击的到底是哪个位置。
后来返现Layaari 对向量的封装 没有像Unity3D那么友好。 角度计算有点费劲
后来看见一片文章:Layaari 不规则热区的实现   
发现其实 Layaair 已经为我们提供好了 不规则形状 的点击 ...
                                    图片一般是正方形,x、y坐标一般都是左上角,所以碰撞公式一般为
// hitRange 碰撞距离
if(Math.abs(shootball.x-ball.x) &lt; hitRange &amp;&amp; Math.abs(shootball.y-ball.y)&lt;hitRange)
	   trace("碰撞了");
   if(MathUtils.distance(s...