CreatorPrimer|可拖拽组件

最新推荐文章于 2025-07-16 14:54:54 发布

原创

最新推荐文章于 2025-07-16 14:54:54 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#组件化 #CocosCreator #触摸事件 #教程应用

本文介绍了如何在Cocos Creator中创建一个可拖拽组件，详细讲解了从创建测试场景到实现节点拖动及设置移动目标的步骤，并提供了相关视频演示，适合策划和美术人员学习。

在游戏中实现节点的可拖动是一个比较常见情况，比如：可以给小朋友做一个将果皮投进垃圾箱的教学练习、角色换装、物品包裹界面等。在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);
    }
});

代码主要是设置节点的触摸监听，在监听事件中修改节点的位置。将组件代码挂载到节点上，其它什么都不用做，运行起来看看效果：