Cocos Creator基础教程(11)—可拖拽组件
在游戏中实现节点的可拖动是一个比较常见情况，比如：可以给小朋友做一个将果皮投进垃圾箱的教学练习、角色换装、物品包裹界面等。在Cocos Creator中实现一个可拖动组件，只需对目标节点拖拽配置就能让节点任意移动，这对策划、美术人员来说是不是很有杀伤力！
1. 创建测试场景
在实现一个组件代码之前最好新建一个测试场景，组件代码在测试场景中通过了基本测试之后再放入正式环境使用。而且在组件完成后，测试场景最好也不要丢弃了，等我们以后为组件升级或修改BUG时，可用于快速检验修改是否正确。
2. 实现可拖拽组件
我们来看下组件代码非常简单，就算你不会编程，根着注释相信也能明白个大概：
cc.Class({
extends: cc.Component,
onLoad() {
//注册TOUCH_MOVE事件
this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
},
_onTouchMove(touchEvent) {
//通过touchEvent获取当前触摸坐标点
let location = touchEvent.getLocation();
//修改节点位置，注意要使用父节点进行对触摸点进行坐标转换
this.node.position = this.node.parent.convertToNodeSpaceAR(location);
}
});代码主要是设置节点的触摸监听，在监听事件中修改节点的位置。将组件代码挂载到节点上，其它什么都不用做，运行起来看看效果：
https://v.qq.com/txp/iframe/player.html?vid=y1347540osq&width=500&height=375&auto=0
3. 设置移动目标
有了这个组件，可以控制节点任意移动了，但是很多情况下，需要将节点移动到指定位置，比如将果皮投进垃圾箱，我们增强一下组件代码：
cc.Class({
extends: cc.Component,
properties: {
target: cc.Node,
},
onLoad() {
//缓存原始父节点
this._oldPosition = this.node.position;
this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
},
_onTouchMove(touchEvent) {
let location = touchEvent.getLocation();
this.node.position = this.node.parent.convertToNodeSpaceAR(location);
},
_onTouchEnd(touchEvent) {
if (!this.target) {
return;
}
//获取target节点在父容器的包围盒，返回一个矩形对象
let rect = this.target.getBoundingBox();
//使用target容器转换触摸坐标
let location = touchEvent.getLocation();
let point = this.target.parent.convertToNodeSpaceAR(location);
//if (cc.rectContainsPoint(rect, targetPoint)) {
//Creator2.0使用rect的成员contains方法
if (rect.contains(point)) {
//在目标矩形内，修改节点坐标
point = this.target.convertToNodeSpaceAR(location);
this.node.position = point;
//修改父节点
this.node.parent = this.target;
return;
}
//不在矩形中，还原节点位置
this.node.position = this._oldPosition;
}
});代码变复杂了，简单说明一下：
是增加了一个target节点属性，他是节点要移动到的目标
增加TOUCH_END事件，当手指抬起时，检查当前节点是否在目标节点之中
在目标范围，修改节点父子关系
不在目标范围，还原节点位置（提前缓存节点原始坐标）
组件有了锁定目标的功能，现在就可以实现将果皮投进垃圾箱了，当然也可以用来实现给角色换装、物品包裹之类的操作，请看下面的演示：
https://v.qq.com/txp/iframe/player.html?vid=x1347c69boc&width=500&height=375&auto=0
我给目标节点挂载了一个Layout组件，设置成GRID模式，实现自动网格排列，很像游戏中的物品包裹功能，这个组件真的是物超所值哦！
4. 小结
这次主要运用了节点的触摸事件监听，在触摸事件的touchEvent参数中获取当前触摸坐标点。同时还需要对坐标点在不同节点坐标系下进行转换，需要理解的是拖动节点的本质是：修改节点在父节点上的位置，需要使用this.node.parent.convertToNodeSpaceAR进行转换。同时还有使用了最简单的碰撞检测函数rect.contains（在Cocos Creator 1.9.3之前用cc.rectContainsPoint），检查一个坐标点是否在矩形内。
好了这次的代码有点多非程序员同学要好好消化下，发挥你的想像，可以使用这个组件做出更有趣的东西。
欢迎关注「奎特尔星球」微信公众号，来我们一起成长！
热门文章TOP10，带你遨游奎特尔星球