cocos creator 摇杆制作

最新推荐文章于 2024-03-04 11:08:41 发布

cutgod

最新推荐文章于 2024-03-04 11:08:41 发布

阅读量287

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/cutgod/article/details/109843128

版权

本文详细介绍了如何使用Cocos Creator实现虚拟摇杆的交互逻辑，包括触摸开始、移动及结束等事件处理，并通过实例展示了如何根据摇杆的位置来控制角色移动速度及方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先触摸事件注册

initTouchEvent() {

        this.node.on(cc.Node.EventType.TOUCH_START, this.touchStartEvent, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);

        this.node.on(cc.Node.EventType.TOUCH_END, this.touchEndEvent, this);

        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchEndEvent, this);

    }

固定的点击出现，跟随的点击出现在点击位置再判断

touchStartEvent(event) {
        let startTouchPos = this.node.convertToNodeSpaceAR(event.getLocation());
        if (this.joyStickType == JoyStickType.FIXED) {
            this.stickPos = this.rockerNode.getPosition();
            let distance = startTouchPos.sub(this.rockerNode.getPosition()).mag();
            if (this.radius > distance) {
                this.smallrockerNode.active = true;
                this.smallrockerNode.setPosition(startTouchPos);
            }
        }
        else if (this.joyStickType == JoyStickType.FOLLOW) {
            this.stickPos = startTouchPos;
            this.rockerNode.opacity = 255;
            this.smallrockerNode.opacity = 255;
            this.touchPos = event.getLocation();
            this.rockerNode.setPosition(startTouchPos);
            this.smallrockerNode.setPosition(startTouchPos);
        }
    }

移动摇杆的时候获得移动距离 dis 选择快速移动或者慢速移动
获得p 向量方向

   touchMoveEvent(event) {
        if (this.joyStickType == JoyStickType.FOLLOW) {
            if (this.touchPos == event.getLocation()) {
                return;
            }
        }

        //将触摸坐标 转化到 bg 下， 此时 的dis 就是 触摸点相对于bg 的距离
        let touchP = this.rockerNode.convertToNodeSpaceAR(event.getLocation());
        let dis = touchP.mag();
        console.log(dis, "disdisdisdisdisdisdis")

        let posX = this.stickPos.x + touchP.x;
        let posY = this.stickPos.y + touchP.y;

        //向量归一(获取方向)
        let p = cc.v2(posX, posY).sub(this.rockerNode.getPosition()).normalize();

        if (this.radius > dis) {
            this.smallrockerNode.setPosition(cc.v2(posX, posY));
            this.playerScr.speedType = SpeedType.NORMAL;
        }
        else {
            //摇杆在圈边
            let nowPosX = this.stickPos.x + p.x * this.radius;
            let nowPosy = this.stickPos.y + p.y * this.radius;
            this.smallrockerNode.setPosition(cc.v2(nowPosX, nowPosy));
            this.playerScr.speedType = SpeedType.FAST;
        }
        this.playerScr.moveDir = p;
    }

结束时隐藏

 touchEndEvent(event) {
        this.smallrockerNode.setPosition(this.rockerNode.getPosition());
        if (this.joyStickType == JoyStickType.FOLLOW) {
            this.rockerNode.opacity = 0;
            this.smallrockerNode.opacity = 0;
        }
        this.playerScr.speedType = SpeedType.STOP;
    }

update里做移动

 move() {
        //radiansToDegrees弧度转角度。atan2返回从 x 轴到点 (x,y) 之间的角度 Math.atan2(y,x)，结果为弧度
        if (this.playerScr.moveDir) {
            this.playerScr.rotation = 90 - cc.misc.radiansToDegrees(Math.atan2(this.playerScr.moveDir.y, this.playerScr.moveDir.x));
            //缩放向量
            let newPos = this.playerScr.position.add(this.playerScr.moveDir.mul(this.moveSpeed / 60));
            this.playerScr.setPosition(newPos);
        }
        //子弹移动
        for (let i = 0; i < this.node.childrenCount; i++) {
            if (this.node.children[i].name == "bullet" && this.node.children[i].newPos) {
                let newbulletPos = this.node.children[i].position.add(this.node.children[i].newPos.mul(this.bulletSpeed / 60))
                this.node.children[i].setPosition(newbulletPos)
            }

        }
    }

发射子弹时获得坦克的方向

 Firingbullets() {
        let bulletNode = cc.instantiate(this.bulletNode);
        bulletNode.parent = this.node;
        bulletNode.setPosition(this.playerScr.x, this.playerScr.y);
        bulletNode.rotation = 90 - cc.misc.radiansToDegrees(Math.atan2(this.playerScr.moveDir.y, this.playerScr.moveDir.x))
        //缩放向量
        let p = this.playerScr.moveDir;
        bulletNode.newPos = p
    }

cocos creator 摇杆制作

效果