• 售前

  • 售后

热门帖子
入门百科

怎样在CocosCreator中使用游戏手柄

[复制链接]
mbmwhfyn615732 显示全部楼层 发表于 2021-10-26 12:28:39 |阅读模式 打印 上一主题 下一主题
目次


  • 一.场景布置
  • 二. 添加手柄监听器

    • 1.监听变乱的厘革
    • 2.坐标设定
    • 3. 将手柄限制在托盘内

  • 三. 添加小车的控制

    • 1. 小车的旋转
    • 2. 小车的移动


一.场景布置




二. 添加手柄监听器


1.监听变乱的厘革

由原先的mouse系列的转换为touch系列的

       
  • touchstart 触摸按下,相当于 mousedown   
  • touchmove 触摸移动,相当于 mousemove   
  • touchend 触摸抬起,相当于 mouseup   
  • touchcancel 触摸取消,被其他变乱终止,相当于按下了ESC键

2.坐标设定

当触摸按下随推动位置厘革(要用天下坐标转换),触摸抬起后回归原位(直接设定0,0坐标默认相对坐标)。
setPosition()设定的为相对父节点的坐标
  1.   onTouchMove(e:cc.Event.EventTouch){
  2.          // e.getLocation() 为点击的位置,是世界坐标
  3.         // 需要把世界坐标转换为本地坐标
  4.         
  5.         let parent=this.node.parent;// 父节点 (圆形底盘)
  6.         let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
  7.         this.node.setPosition(pos);
  8.     }
  9.     onTouchCancel(){
  10.       this.node.setPosition(cc.v3(0,0,0));
  11.     }
复制代码


3. 将手柄限制在托盘内

利用方位角来定位边沿位置。pos.normalize()方法返回该点相对于(0,0)的(cos, sin),返回Vec2对象。
  1. let parent=this.node.parent;// 父节点 (圆形底盘)
  2. let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
  3. // 该点所在的方位 (cos, sin)
  4. let direction:cc.Vec2=pos.normalize();
  5. // 限制在边界之内
  6. let maxR = 100-20;   
  7. //点击的点到托盘中央的距离
  8. let r : number = cc.Vec2.distance(pos, cc.v2(0,0));
  9. if( r > maxR)
  10. {
  11.         pos.x = maxR * direction.x;
  12.         pos.y = maxR * direction.y;
  13. }
  14. // cc.log("相对位置: " + pos.x + ", " + pos.y);
  15. this.node.setPosition( pos);
复制代码


三. 添加小车的控制


1. 小车的旋转
  1.   cc.Node.angle
  2. 表示旋转的角度,逆时针为正
  3. 官方建议不要使用 cc.Node.rotationa.signAngle( b)
  4. a和b为两个向量,返回值是一a,b的夹角 (弧度值)
  5. radian = a.signAngle(b)
  6. (1) a位于b的顺时针方向:角度为正
  7. (2) a位于b的逆时针方向:角度为负
复制代码
旋转实现:
添加属性 car :cc.Node=null;获取小车节点。
cc.find()注意参数用"/"除号的斜杠,否则辨认不到
  1. onLoad () {
  2.      this.car=cc.find("Canvas/小车");
  3. }
复制代码
  1. let radian=pos.signAngle(cc.v2(1,0));//计算点击位置与水平的夹角
  2. let ang=radian/Math.PI*180;//弧度制转换为角度值
  3. this.car.angle=-ang;//逆时针为正,所以这里要调整至顺时针
复制代码


2. 小车的移动

       
  • 在小车的脚本中添加前进的动画,update(dt)方法中让x和y每帧加对应的速度在x和y轴的分量。   
  • 在手柄控制脚本中获取小车节点下的脚本。通过上面获取的direction的方向角,传入小车脚本中。通过控制direction来控制小车的移动。
小车活动脚本
  1. direction: cc.Vec2 = null;
  2. speed: number = 3;
  3. onLoad() {
  4. }
  5. start() {
  6. }
  7. update(dt) {
  8.         if (this.direction == null) return; //静止
  9.         let dx = this.speed * this.direction.x;
  10.         let dy = this.speed * this.direction.y;
  11.         let pos = this.node.getPosition();
  12.         pos.x += dx;
  13.         pos.y += dy;
  14.         this.node.setPosition(pos);
  15. }
复制代码
手柄控制脚本
  1. car: cc.Node = null;
  2. carscript: cc.Component = null;
  3. // LIFE-CYCLE CALLBACKS:
  4. onLoad() {
  5.         this.car = cc.find("Canvas/小车");
  6.         this.carscript = this.car.getComponent("CarMove");
  7. }
  8. start() {
  9.         this.node.on('touchstart', this.onTouchStart, this);
  10.         this.node.on('touchmove', this.onTouchMove, this);
  11.         this.node.on('touchend', this.onTouchCancel, this);
  12.         this.node.on('touchcancel', this.onTouchCancel, this);
  13. }
  14. onTouchStart() {
  15. }
  16. onTouchMove(e: cc.Event.EventTouch) {
  17.         // e.getLocation() 为点击的位置,是世界坐标
  18.         // 需要把世界坐标转换为本地坐标
  19.         // let parent=this.node.parent;// 父节点 (圆形底盘)
  20.         // let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
  21.         // this.node.setPosition(pos);
  22.         let parent = this.node.parent; // 父节点 (圆形底盘)
  23.         let pos: cc.Vec2 = parent.convertToNodeSpaceAR(e.getLocation());
  24.         // 该点所在的方位 (cos, sin)
  25.         let direction: cc.Vec2 = pos.normalize();
  26.         // 限制在边界之内
  27.         let maxR = 100 - 20;
  28.         let r: number = cc.Vec2.distance(pos, cc.v2(0, 0));
  29.         if (r > maxR) {
  30.                 pos.x = maxR * direction.x;
  31.                 pos.y = maxR * direction.y;
  32.         }
  33.         // cc.log("相对位置: " + pos.x + ", " + pos.y);
  34.         this.node.setPosition(pos);
  35.         let radian = pos.signAngle(cc.v2(1, 0)); //计算点击位置与水平的夹角
  36.         let ang = radian / Math.PI * 180; //弧度制转换为角度值
  37.         this.car.angle = -ang; //逆时针为正,所以这里要调整至顺时针
  38.         this.carscript.direction = direction;
  39. }
  40. onTouchCancel() {
  41.         this.node.setPosition(cc.v3(0, 0, 0));
  42.         //将方向置空,使汽车停止
  43.         this.carscript.direction = null;
  44. }
  45. // update (dt) {}
复制代码
最终效果

以上就是怎样在CocosCreator中利用游戏手柄的具体内容,更多关于CocosCreator手柄实例的资料请关注脚本之家其它相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作