游戏摇杆制作

首先简单制作游戏遥杆2个圆形图片素材，以及精灵素材

摇杆背景

摇杆

精灵素材

节点管理

将素材放入编辑器中，使用一个命名为Rocker的空节点作为父节点放入两个圆形素材，调色。作为摇杆的大圆命名为rock_bg，摇杆命名为stick，精灵素材命名为player

简单摇杆代码编写

properties属性原理

作为摇杆，需要有一个节点进行触摸，因此添加一个Rocker属性，绑定这个stick节点
第二个属性是约束摇杆能够走的范围，通过相似三角形等比例限定(x,y)。如下图

   properties: {Rocker:{type:cc.Node,default:null,},Max_r:100,},

start()部分

可以知道用户使用摇杆时，有触摸开始，触摸移动，触摸结束，触摸取消4个状态。因而引出代码的4个监听事件TOUCH_START、TOUCH_MOVE、TOUCH_END、TOUCH_CANCEL。TOUCH_START和TOUCH_MOVE让用户点到哪里摇杆指向到哪里，在TOUCH_END、TOUCH_CANCEL的时候stick归位。

start () {this.Rocker.on(cc.Node.EventType.TOUCH_START,function(e){var w_pos = e.getLocation();var pos = this.node.convertToNodeSpaceAR(w_pos);var len = pos.mag();//获取向量长度if(len > this.Max_r){pos.x = this.Max_r * pos.x / len;pos.y = this.Max_r * pos.y / len;}this.Rocker.setPosition(pos);},this);this.Rocker.on(cc.Node.EventType.TOUCH_MOVE,function(e){var w_pos = e.getLocation();var pos = this.node.convertToNodeSpaceAR(w_pos);var len = pos.mag();if(len > this.Max_r){pos.x = this.Max_r * pos.x / len;pos.y = this.Max_r * pos.y / len;}this.Rocker.setPosition(pos);},this);this.Rocker.on(cc.Node.EventType.TOUCH_END,function(e){this.Rocker.setPosition(cc.v2(0,0));},this);this.Rocker.on(cc.Node.EventType.TOUCH_CANCEL,function(e){this.Rocker.setPosition(cc.v2(0,0));},this);},

将编写好的组件绑定到Rocker父节点中

效果

辨别方向

通过摇杆的位置得出方向只需要在上述代码上面加上一个变量dir

var len = pos.mag();this.dir.x = pos.x / len;           //cosαthis.dir.y = pos.y / len;           //sinα

让x与y形成一个与stick向量一样，这个向量的方向就与stick一致了，触摸事件结束后归零
修改后的代码：

 start () {this.Rocker.x = 0;this.Rocker.y = 0;this.dir = cc.v2(0,0);this.Rocker.on(cc.Node.EventType.TOUCH_START,function(e){var w_pos = e.getLocation();var pos = this.node.convertToNodeSpaceAR(w_pos);//将世界坐标转化为父节点的相对坐标var len = pos.mag();this.dir.x = pos.x / len;this.dir.y = pos.y / len;if(len > this.Max_r){pos.x = this.Max_r * pos.x / len;pos.y = this.Max_r * pos.y / len;}this.Rocker.setPosition(pos);},this);this.Rocker.on(cc.Node.EventType.TOUCH_MOVE,function(e){var w_pos = e.getLocation();var pos = this.node.convertToNodeSpaceAR(w_pos);//将世界坐标转化为父节点的相对坐标var len = pos.mag();this.dir.x = pos.x / len;this.dir.y = pos.y / len;if(len > this.Max_r){pos.x = this.Max_r * pos.x / len;pos.y = this.Max_r * pos.y / len;}this.Rocker.setPosition(pos);},this);this.Rocker.on(cc.Node.EventType.TOUCH_END,function(e){this.Rocker.setPosition(cc.v2(0,0));this.dir = cc.v2(0, 0);},this);this.Rocker.on(cc.Node.EventType.TOUCH_CANCEL,function(e){this.Rocker.setPosition(cc.v2(0,0));this.dir = cc.v2(0, 0);},this);},

编写精灵移动代码

通过精灵与按钮的关系1、方向一致。2、角度一致。3、速度、数值合理
新建一个组件文件挂载到player节点上如图

cc.Class({extends: cc.Component,properties: {Rocker:{type:require("Rocker"),default:null,},speed:100,},onLoad () {},start () {},update (dt) {if(this.Rocker.dir.mag()<0.5){return;}var vx = this.Rocker.dir.x * this.speed;var vy = this.Rocker.dir.y * this.speed;var sx = vx * dt;var sy = vy * dt;
//移动this.node.x += sx;this.node.y += sy;
//方向计算var r = Math.atan2(this.Rocker.dir.y,this.Rocker.dir.x);var degree = r * 180/(Math.PI);degree = 360 - degree + 90;this.node.rotation = degree;},
});

实测效果

总结

分析触摸事件种类
绑定stick节点
限制stick活动范围
设置变量存储方向
限制按钮数值变化幅度
将精灵与按钮方向相关联

cocos creator编写简易游戏摇杆以及通过摇杆控制精灵移动相关推荐

【10086个赞】Cocos Creator助力H5游戏大爆发
梦想起航,共筑辉煌.4月21日,"资本助推H5行业发展--2017·H5-GAME资深大咖荟"在厦门创+会议中心正式拉开帷幕. 作为一个新兴行业,H5游戏至去年年末便被众多从业者炒 ...
cocos creator 浅塘游戏开发(2) 搭建初始界面
cocos creator 浅塘游戏开发(2) 文章目录 cocos creator 浅塘游戏开发(2) 前言一.创建一个新的工程二. 1.初始配置 2.初始界面总结前言此次文章将会搭建浅塘 ...
cocos creator 微信小游戏接口
cocos creator 微信小游戏接口 /** @Description:微信小游戏* @version: * @Author: lvpeijun* @Date: 2019-12-02 10:43 ...
cocos creator vivo 小游戏 mac电脑
cocos creator vivo 小游戏 mac电脑接入文档文档链接 vivo调试调试文档浏览器真机调试 1:使用cocos creator 进行打包要勾选调试模式生成了com.exma ...
解决cocos creator微信小游戏本地缓存文件超过限制问题
cocos creator微信小游戏开发,如果游戏包内资源超过包体大小限制,那么可以通过远程加载的方式加载资源(代码脚本文件除外). 小游戏在迭代过程中因为缓存资源的积累,在加载资源的时候会出现超过缓 ...
Cocos Creator—定制H5游戏首页loading界面
Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有 ...
微信小游戏实战--cocos creator实现wordle游戏（六）
就wordle游戏本身而言它已经完成了,但我并不打算就到此为止."麻雀虽小五脏俱全",从"完整"的角度来看,它还缺少一些"必不可少"的功能: ...
微信小游戏实战--cocos creator实现wordle游戏（一）
前言前段时间赋闲在家,整理电脑上的资料时才发现从业这么多年都是在给公司打工,没为自己写过点什么,所以决定为自己写一个完整的"产品".同时,为了检验一下自己的学习能力,选择了从未接 ...
微信小游戏实战--cocos creator实现wordle游戏（五）
到目前为止我们已经实现了整个游戏的界面以及"空格"和键盘按钮的动画,接下来完成游戏的基础玩法流程. 完整代码一.初始化游戏由于在游戏中"空格"的背景和Lab ...
cocos creator实现棋牌游戏滑动选牌的功能
最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑,效果如下: 有一点不好的 ...

cocos creator编写简易游戏摇杆以及通过摇杆控制精灵移动