CocosCreator学习5：实现物体拖动
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);
接下来只需要将脚本增添到可以拖动的物体节点上即可。菜鸟一只，多多包涵
CocosCreator学习5：实现物体拖动
今天来学习一下如何实现物体拖动。
通过CocosCreator内置的cc.Node.EventType.MOUSE_MOVE鼠标事件实现，其返回参数为鼠标的坐标值delta.x，delta.y。将节点的位置坐标x、y等于鼠标事件返回的坐标值delta.x，delta.y即可实现物体的拖动。脚本代码如下：
cc.Class({
extends: cc.Component,
properties: {
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);
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)
接下来只需要将脚本增添到可以拖动的物体节点上即可。
cocos Creator拖动效果
cocos2dx实现手指控制物体移动
cocos creator学习笔记3——坐标空间
学习笔记 8_Cocos Creator_IDE智能提示选择_Webstorm
cocos-creator 开发路程一实现可移动的游戏选择窗口（一）
CocosCreator中使玩家移动到点击位置的代码
没有更多推荐了，菜鸟一只，多多包涵
CocosCreator学习6：碰撞系统
今天来通过一个简单的例子学习碰撞系统。
首先来看碰撞组件。CocosCreator提供了三种碰撞组件：Box Collider，Circle Collider，Polygon Collider。增添十分简单，只需要选中节点在属性检查器中选择添加组件。
这里使用的是Box Collider，可以看到节点周围多了一个绿色的框，这就是碰撞体。
在属性检查器中可以看到碰撞体的属性，选中Editing可以通过拖动对其大小进行修改。
另外两种碰撞组件和Box Collider就是形状区别。
碰撞脚本控制
下面来看碰撞的脚本。首先需要开启碰撞检测系统和debug绘制接口，默认情况下是禁用的。碰撞检测系统功能不需要多说，debug绘制是用于显示碰撞组件的碰撞检测范围的。
cc.director.getCollisionManager().enabled = true
cc.director.getCollisionManager().enabledDebugDraw = true
如果希望显示碰撞组件的包围盒，可以开启另一个接口，我没有发现这个接口的用处。
cc.director.enabledDrawBoundingBox = true
接下来看下碰撞系统的回调函数，主要有三个：
碰撞产生时调用onCollisionEnter: function (other, self)
碰撞保持时调用onCollisionStay: function (other, self)
碰撞结束时调用onCollisionExit: function (other, self)
other是产生碰撞的另一个碰撞组件，self是产生碰撞的自身的碰撞组件。
示例的具体代码如下：
cc.Class({
extends: cc.Component,
properties: {
default: null,
url: cc.Texture2D,
// optional, default is typeof default
serializable: true, // optional, default is true
visible: true,
// optional, default is true
displayName: 'Foo', // optional
readonly: false,
// optional, default is false
// use this for initialization
onLoad: function () {
cc.director.getCollisionManager().enabled = true;
cc.director.getCollisionManager().enabledDebugDraw = true;
cc.director.getCollisionManager().enabledDrawBoundingBox = true;
this.touchingNumber = 0;
onCollisionEnter: function (other) {
this.node.color = cc.Color.RED;
this.touchingNumber ++;
cc.log(this.touchingNumber);
onCollisionStay: function (other) {
// console.log('on collision stay');
onCollisionExit: function () {
this.touchingNumber --;
cc.log(this.touchingNumber);
if (this.touchingNumber === 0) {
this.node.color = cc.Color.WHITE;
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
效果如图：
【用Cocos Creator给暗恋的女生写一个游戏(9)】——(Run Game) 游戏逻辑与碰撞检测
cocos creator 学习（八）刚体、碰撞组件、物理组件小结
cocos creator学习11——碰撞检测系统
cocos2dx 精灵的碰撞检测和消灭（3）
cocos2dx碰撞检测实现
【Cocos Creator实战教程(7)】——猴子摘月亮(平台动作，碰撞检测详解)
碰撞检测 总结
cocos Creator碰撞检测
cocosCreator碰撞组件的知识点
Cocos Creator 预制件设置碰撞分组
没有更多推荐了，1添加评论分享收藏感谢收起写回答}