CocosCreator学习5:实现物体拖动,今天来学习一下如何实现物体拖动。
通过CocosCreator内置的cc.Node.EventType.MOUSE_MOVE鼠标事件实现,其返回参数为鼠标的坐标值delta.x,delta.y。将节点的位置坐标x、y等于鼠标事件返回的坐标值delta.x,delta.y即可实现物体的拖动。脚本代码如下:
cc.Class({ extends: cc.Component, properties: { }, // use this for initialization onLoad: function () { this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) { this.opacity = 255; var delta = event.touch.getDelta(); this.x += delta.x; this.y += delta.y; }, this.node); }, // called every frame update: function (dt) { }, });
为了改善体验,增加一个反馈效果,可以设置鼠标选中物体时,物体变透明,释放时物体还原。修改onLoad:function方法,其实应该设置为鼠标点击时改变透明度,这里可以进行简化,在物体拖动时,透明度为100,结束时透明度恢复255,效果一样。代码如下:
onLoad: function () { this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) { this.opacity = 100; var delta = event.touch.getDelta(); this.x += delta.x; this.y += delta.y; }, this.node); this.node.on(cc.Node.EventType.TOUCH_END, function () { this.opacity = 255; }, this.node); },
接下来只需要将脚本增添到可以拖动的物体节点上即可。