CocosCreator制作地图外物品位置向导(指引/地图标点)

  1. 演示
    请添加图片描述

  2. 图解
    在这里插入图片描述

  3. code
    goldTips:指引节点,更改位置使用
    goldTipRotate:指引节点的子节点中具有指向性的节点,一般为带箭头,尖角等。

protected lateUpdate(dt: number): void {
        //可以不在lateUpdate中操作,而是初始化调用一次后再摇杆移动时调用
        this.checkGoldTips();
    }

checkGoldTips() {
        //需要显示的物品node
        let goldNode = World.Instance.goldNode;
        //人物node
        let player = World.Instance.player;
        //局部坐标转全局坐标
        let guidePos = goldNode.convertToWorldSpaceAR(cc.v2(0, 0));
        let playerPos = player.convertToWorldSpaceAR(cc.v2(0, 0));
        //返回以player为坐标原点,x,y为坐标系轴的新的guidePos;
        let disPos = guidePos.sub(playerPos);
        let earlyPos = disPos.clone();
        //屏幕左下角坐标和右上角坐标
        let min = cc.v2(-cc.winSize.width/2 + this.goldTips.width /2, -cc.winSize.height/2 + this.goldTips.height / 2)
        let max = cc.v2(cc.winSize.width/2 -  this.goldTips.width / 2, cc.winSize.height/2 - this.goldTips.height / 2)
        //坐标约束,可以将坐标约束到一定的范围内
        let rotatePos = disPos.clampf(min, max);
        //判断约束后的向量模长是否和约束前一样,一样则认定为在屏幕内。不需要显示指引
        if(rotatePos.mag() == earlyPos.mag()) {
            this.goldTips.active = false;
        } else {
            //向量归一化
            let dir = rotatePos.normalize();
            //以X轴正方向为旋转0度方向(应与指引图片中的箭头方向一致)
            let angle = dir.signAngle(cc.v2(1, 0));
            let degree = angle / Math.PI * 180;
            //设置指引箭头方向
            this.goldTipRotate.angle = -degree;
            //设置指引节点的位置
            this.goldTips.setPosition(rotatePos.x, rotatePos.y);
            this.goldTips.active = true;
        }
    }
  1. 预览
    ctrl + p
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蟹 !

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值