1. 程式人生 > >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); },

接下來只需要將指令碼增添到可以拖動的物體節點上即可。