Cocos gamepad control example

1. Scene layout

2. Add handle listener

1. The change of listening event is
   converted from the original mouse series to the touch series

   1. touchstart touch press, equivalent to mousedown
      2. touchmove touch move, equivalent to mousemove
   2. touchend touch up, equivalent to mouseup
   3. touchcancel Touch to cancel, terminated by other events, equivalent to pressing the ESC key

2. Coordinate setting: When the touch is pressed, the position changes with the push (the world coordinate conversion is required), and the touch is lifted to return to the original position (directly set 0, the 0 coordinate is the default relative coordinate).
   setPosition() sets the coordinates relative to the parent node

  onTouchMove(e:cc.Event.EventTouch){
    
    

         // e.getLocation() 为点击的位置，是世界坐标
        // 需要把世界坐标转换为本地坐标
        
        let parent=this.node.parent;// 父节点 (圆形底盘)
        let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
        this.node.setPosition(pos);

    }

    onTouchCancel(){
    
    
      this.node.setPosition(cc.v3(0,0,0));
    }

3. Limit the handle to the tray. Use the azimuth to locate the edge position. The pos.normalize() method returns the point (cos, sin) relative to (0, 0), and returns the Vec2 object.

  let parent=this.node.parent;// 父节点 (圆形底盘)
        let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
        // 该点所在的方位 (cos, sin)
        let direction:cc.Vec2=pos.normalize();
         // 限制在边界之内
         let maxR = 100-20;   
         //点击的点到托盘中央的距离
         let r : number = cc.Vec2.distance(pos, cc.v2(0,0));
        
         if( r > maxR)
         {
    
    
             pos.x = maxR * direction.x; 
             pos.y = maxR * direction.y;
         }
         // cc.log("相对位置: " + pos.x + ", " + pos.y);
         this.node.setPosition( pos);

3. Add control of the car

1. The rotation of the trolley

1. cc.Node.angle
   represents the angle of rotation, counterclockwise is positive. The
   official recommendation is not to use cc.Node.rotation
2. a.signAngle( b)
   a and b are two vectors, the return value is an angle between a and b (radian value)
   radian = a.signAngle(b)
   (1) a is in the clockwise direction of b: the angle is positive
   (2) a is in the counterclockwise direction of b: the angle is negative

Rotation realization:
add attribute car: cc.Node=null; get car node.
cc.find() Note that the parameter is divided by "/" with a slash, otherwise it will not be recognized

   onLoad () {
    
    
         this.car=cc.find("Canvas/小车");
     }

        let radian=pos.signAngle(cc.v2(1,0));//计算点击位置与水平的夹角
        let ang=radian/Math.PI*180;//弧度制转换为角度值
        this.car.angle=-ang;//逆时针为正，所以这里要调整至顺时针

2. Movement of the trolley

1. . Add a forward animation to the script of the dolly. In the update (dt) method, add the corresponding speed components on the x and y axes for each frame of x and y.
2. Get the script under the trolley node in the handle control script. Pass the direction angle of the direction obtained above into the trolley script. Control the movement of the trolley by controlling the direction.

Trolley movement script

   direction: cc.Vec2=null;
     speed:number=3;

     onLoad () {
    
    
       
     }

    start () {
    
    

    }

  update (dt) {
    
    
      if(this.direction==null) return;//静止
     let  dx=this.speed*this.direction.x;
     let  dy=this.speed*this.direction.y;

     let pos=this.node.getPosition();
     pos.x+=dx;
     pos.y+=dy;
     this.node.setPosition(pos);
  }

Handle control script

  car :cc.Node=null;
     carscript:cc.Component=null;
    // LIFE-CYCLE CALLBACKS:

     onLoad () {
    
    
         this.car=cc.find("Canvas/小车");
         this.carscript=this.car.getComponent("CarMove");
     }

    start () {
    
    
        this.node.on('touchstart', this.onTouchStart, this);
        this.node.on('touchmove', this.onTouchMove, this);
        this.node.on('touchend', this.onTouchCancel, this);
        this.node.on('touchcancel', this.onTouchCancel, this);
    }

    onTouchStart(){
    
    
     
    }

    onTouchMove(e:cc.Event.EventTouch){
    
    

       // e.getLocation() 为点击的位置，是世界坐标
       // 需要把世界坐标转换为本地坐标
        
        // let parent=this.node.parent;// 父节点 (圆形底盘)
        // let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
        // this.node.setPosition(pos);

        let parent=this.node.parent;// 父节点 (圆形底盘)
        let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
        // 该点所在的方位 (cos, sin)
        let direction:cc.Vec2=pos.normalize();
         // 限制在边界之内
         let maxR = 100-20;   

         let r : number = cc.Vec2.distance(pos, cc.v2(0,0));
        
         if( r > maxR)
         {
    
    
             pos.x = maxR * direction.x; 
             pos.y = maxR * direction.y;
         }
         // cc.log("相对位置: " + pos.x + ", " + pos.y);
         this.node.setPosition( pos);

        let radian=pos.signAngle(cc.v2(1,0));//计算点击位置与水平的夹角
        let ang=radian/Math.PI*180;//弧度制转换为角度值
        this.car.angle=-ang;//逆时针为正，所以这里要调整至顺时针

        this.carscript.direction=direction;

    }

    onTouchCancel(){
    
    
      this.node.setPosition(cc.v3(0,0,0));
      //将方向置空，使汽车停止
      this.carscript.direction=null;
      
    }
    // update (dt) {}

final effect