cocos creator3.x 触控方向键实现

import { CCFloat, Component, Enum, error, EventTouch, macro, Node, UIOpacity, UITransform, Vec2, Vec3, _decorator } from "cc";

const { ccclass, property } = _decorator;
//全局触摸控制
export let GameEvent=0;
//滑动方向
export let Dir=new Vec2(0,0);
//滑动角度
export let Angle=270;
//角度方向
export let RoleDirection=4;
//触控检测
export let CheckTouch=false;
/** 摇杆 */
@ccclass("Joystick")
export class Joystick extends Component {

    //外图节点
    @property(Node)              
    RockerOut:Node
     //内图节点
    @property(Node)              
    RockerIn:Node
    //最大滑动半径
    Max_r= 50;
    //角色方向
    RoleAngle = Enum({
        Up : 0,
        LeftUp : 1,
        Left : 2,
        LeftDown : 3,
        Down : 4,
        RightDown : 5,
        Right : 6,
        RightUp : 7
    });
    onLoad() {
        let RockerInSize=this.Max_r;
        let RockerOutSize=this.Max_r*2;
        console.log(RockerInSize);
        this.RockerIn.getComponent(UITransform).setContentSize(RockerInSize,RockerInSize);
        this.RockerOut.getComponent(UITransform).setContentSize(RockerOutSize,RockerOutSize);
    
        //开始触摸
        this.RockerOut.on(Node.EventType.TOUCH_START,function(e){
            if(GameEvent == 0){
            var w_pos = e.getUILocation();
            var pos = this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(w_pos.x, w_pos.y, 0))
            var len = pos.length();
            if(len>0){
                CheckTouch=true;
            }
            Dir.x = pos.x / len;
            Dir.y = pos.y / len;
            this.checkAngle();
            if(len > this.Max_r){
                    pos.x = this.Max_r * pos.x / len;
                    pos.y = this.Max_r * pos.y / len;
            }
            this.RockerIn.setPosition(pos);
        }},this);
         //触摸中
        this.RockerOut.on(Node.EventType.TOUCH_MOVE,function(e){
            if(GameEvent == 0){
           var w_pos = e.getUILocation();
           var pos = this.RockerOut.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(w_pos.x, w_pos.y, 0))
           var len = pos.length();
           if(len>0){
            CheckTouch=true;
           }
           Dir.x = pos.x / len;
           Dir.y = pos.y / len;
           this.checkAngle();
           if(len > this.Max_r){
                pos.x = this.Max_r * pos.x / len;
                pos.y = this.Max_r * pos.y / len;
           }
           this.RockerIn.setPosition(pos);
        }},this);
        //触摸结束
        this.RockerOut.on(Node.EventType.TOUCH_END,function(e){
           CheckTouch=false;
           this.RockerIn.setPosition(0,0);
 		   Dir = new Vec2(0,0);
           this.checkAngle();
        },this);
        //触摸取消
        this.RockerOut.on(Node.EventType.TOUCH_CANCEL,function(e){
            CheckTouch=false;
            this.RockerIn.setPosition(0,0);
 			Dir = new Vec2(0,0);
            this.checkAngle();
        },this);
    }
    checkAngle(){
        //根据朝向计算出夹角弧度
        var angle = Dir.signAngle(new Vec2(1,0));
        //将弧度转换为欧拉角
        var degree = angle / Math.PI * 180;
        //获取角度
        Angle = -degree
        //右侧
        if(0<=Angle&&Angle<=22.5||Angle<=0&&Angle>=-22.5){
            RoleDirection=this.RoleAngle.Right
        }
        //右上
        if(22.5<Angle&&Angle<=67.5){
            RoleDirection=this.RoleAngle.RightUp
        }
        //上
        if(67.5<Angle&&Angle<=112.5){
            RoleDirection=this.RoleAngle.Up
        }
        //左上
        if(112.5<Angle&&Angle<=167.5){
            RoleDirection=this.RoleAngle.LeftUp
        }
        //左
        if(167.5<Angle&&Angle<=180||-180<Angle&&Angle<=-167.5){
            RoleDirection=this.RoleAngle.Left
        }
        //左下
        if(-167.5<Angle&&Angle<=-112.5){
            RoleDirection=this.RoleAngle.LeftDown
        }
        //下
        if(-112.5<Angle&&Angle<=-90){
            RoleDirection=this.RoleAngle.Down
        }
        //右下
        if(-90<Angle&&Angle<=-22.5){
            RoleDirection=this.RoleAngle.RightDown
        }
        console.log(RoleDirection);
    }

}

 RockerOut 背景的精灵节点

RockerInt 内控制精灵节点