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);
    },

接下来只需要将脚本增添到可以拖动的物体节点上即可。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页