cocos中物体跟随触点旋转及缩放

本文介绍如何通过计算触点与物体中心连线与y轴正半轴的夹角,实现物体随触点旋转,及通过触点移动调整物体尺寸的缩放,包括角度计算、比例控制等关键步骤。

需求一:让被控制物体随着触点移动而进行旋转(计算角色中心到触摸点形成的连线与与y轴正半轴之间的夹角)

function getAngle(px,py,mx,my){//获得人物中心和鼠标坐标连线,与y轴正半轴之间的夹角
        var x = Math.abs(px-mx);
        var y = Math.abs(py-my);
        var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        var cos = y/z;
        var radina = Math.acos(cos);//用反三角函数求弧度
        var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

        if(mx>px&&my>py){//鼠标在第四象限
            angle = 180 - angle;
        }

        if(mx==px&&my>py){//鼠标在y轴负方向上
            angle = 180;
        }

        if(mx>px&&my==py){//鼠标在x轴正方向上
            angle = 90;
        }

        if(mx<px&&my>py){//鼠标在第三象限
            angle = 180+angle;
        }

        if(mx<px&&my==py){//鼠标在x轴负方向
            angle = 270;
        }

        if(mx<px&&my<py){//鼠标在第二象限
            angle = 360 - angle;
        }



            return angle;
    }

node.angle = this.getAngle(px,py,mx,my)
如果在控制物体的脚本中进行touch监听,在touch_move阶段持续(如果只想让物体原地旋转,就不需要在touch_move中不断为物体赋值新的坐标)获得触点与物体中心的连线与y轴正半轴之间的夹角,那么物体就会跟随触点进行以锚点为中心的旋转。

需求二:物体的尺寸随着触点移动而进行缩放

思路:
1、计算touch_start时触点的坐标与物体中心坐标的距离dist1;
2、计算touch_move时触点的坐标与物体中心坐标的距离dist2;
3、取得两个距离的比值rate = dist2/dist1;
4、物体的scale = node.scale * rate
5、如果不想让物体的尺寸被无限放大或者无限缩小至0,那么需要设置rate的最大最小值,让物体的尺寸控制在一个范围;
6、有一点需注意,触点坐标和物体坐标需转换至同一坐标系下
代码:

onload(){
this.touch_time = 0 // 用于控制物体的坐标等于第一次touch_start时的物体所在的坐标
},
 touch_start(event) {
        if (this.touch_time > 1) {
            this.node_position = this.node.getChildByName('decorate').position
        }
        this.decorate_node_scale = this.decorate_node.scale
        this.touch_location = event.getLocation()
        let nodePos = this.node.convertToNodeSpaceAR(this.touch_location)
        this.nodeX = this.node_position.x
        this.nodeY = this.node_position.y
        this.dist1 = cc.v2(this.nodeX, this.nodeY).sub(nodePos).mag();// 计算touch_start的触点与物体坐标的距离
    },

    touch_move(event) {
        this.touch_time++
        this.touch_location2 = event.getLocation()
        let nodePos = this.node.convertToNodeSpaceAR(this.touch_location2)
        this.dist2 = cc.v2(this.nodeX, this.nodeY).sub(nodePos).mag();// 计算移动过程中的触点坐标与物体坐标的距离




        let decorate_node = this.node.getChildByName('decorate') // 被控制物体
        let rate = this.dist2 / this.dist1 // 距离比值
        // 控制比值的最大不大于3,最小不小于0.5
        if (rate > 3) {
            rate = 3
        } else if (rate <= 0.5) {
            rate = 0.5
        }
        this.decorate_node.scale = this.decorate_node_scale * rate
        },

本人为行业新人,欢迎各位朋友在评论中分享你们的真知灼见。

Cocos Creator中实现点击物体后使其跟随鼠标移动,可以按照以下步骤进行: ### 1. 创建节点和脚本 首先,在场景中创建一个需要跟随鼠标移动的节点,例如一个精灵节点。然后,创建一个新的脚本文件,例如 `FollowMouse.js`。 ### 2. 编写脚本代码 以下是 `FollowMouse.js` 的代码示例: ```javascript cc.Class({ extends: cc.Component, properties: { // 可以在这里添加一些需要的属性 }, onLoad () { // 监听触摸开始事件 this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this); // 监听触摸移动事件 this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this); // 监听触摸结束事件 this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this); this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this); // 用于记录触摸开始时的偏移量 this.offset = cc.v2(0, 0); }, onTouchStart (event) { // 获取触摸点在世界坐标系中的位置 let touchPos = event.getLocation(); // 将触摸点的位置转换为节点所在的本地坐标系位置 let localPos = this.node.parent.convertToNodeSpaceAR(touchPos); // 计算触摸点相对于节点锚点的偏移量 this.offset = localPos.sub(this.node.position); }, onTouchMove (event) { // 获取触摸点在世界坐标系中的位置 let touchPos = event.getLocation(); // 将触摸点的位置转换为节点所在的本地坐标系位置 let localPos = this.node.parent.convertToNodeSpaceAR(touchPos); // 根据偏移量计算节点的新位置 this.node.position = localPos.sub(this.offset); }, onTouchEnd () { // 触摸结束时可以做一些清理工作 }, start () { }, update (dt) { }, }); ``` ### 3. 挂载脚本 将 `FollowMouse.js` 脚本挂载到需要跟随鼠标移动的节点上。 ### 4. 运行测试 运行项目,点击挂载了脚本的节点,然后拖动鼠标,节点就会跟随鼠标移动。 ### 代码解释 - `onLoad` 方法中,为节点添加了触摸开始、触摸移动和触摸结束事件的监听。 - `onTouchStart` 方法中,记录了触摸点相对于节点锚点的偏移量。 - `onTouchMove` 方法中,根据触摸点的位置和偏移量计算节点的新位置,并更新节点的位置。 - `onTouchEnd` 方法中,可以进行一些清理工作。 通过以上步骤,就可以在Cocos Creator中实现点击物体后使其跟随鼠标移动的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值