在Cocos2d中拖動元件並吸附到節點

最近在學習製作小遊戲，要實現乙個拖動吸附效果，這裡簡單實現一下

**實現

定義節點和函式功能

在properties裡新建乙個物件，用來接收目標區域的節點

properties:
}

然後在小車節點裡繫結這個指令碼，將要測試的目標節點拖動到屬性檢查器的sense這裡用小車來表示要移動的元件，先在onload()內定義小車元件，設定位置，以及定義三個觸控事件函式

onload()

然後就是對三個觸控事件定義

touchstart(event) 
console.log(posinnode.x + " " + posinnode.y);
// 測試，列印當前觸控位置
},    
touchmove(event) 
},touchend(event)  else 
this.touchtile = null;
// 重置觸控元件為空
},    
worldconvertlocalpoint(node, worldpoint) 
return null;
}

最終效果

拖入目標區域

沒拖到指定區域

修正這裡要把小車放到目標區域的正中心，需要對座標進行修正。在cocos creator裡，有節點座標和世界座標這兩個概念

而在屬性檢查器裡，我們所設定的position，也就是錨點的位置，是相對于父節點的，例如圖中我把position設為0和0，就是相對于父節點，該元件定位在父節點的幾何中心。

那麼，哪些座標值和最終放置的位置座標有關聯呢？

在沒有修正之前，把targetpos的值設為this.sense.converttoworldspace(cc.v2(0, 0))，拖動後的效果如下圖

並且log列印目標位置的座標，水平值離螢幕寬度一半還有一定的差距，這時我又列印了拖動結束後小車的座標值，好傢伙，我輕點小車沒有拖動，控制台輸出的座標值為(0,0)，而圖中很明顯，小車的位置不在世界座標的原點上，即此時小車的座標參照點為小車的初始位置

那問題來了，怎麼修正？

只需在onload()中定義乙個變數儲存小車的世界座標值

this.origin = this.node.converttoworldspace(cc.v2(0, 0))，然後在touchend()中新定義乙個向量值correctvalue，新建乙個向量cc.v2(-this.origin.x, -this.origin.y)，並返回給correctvalue，再將correctvalue轉化為世界座標賦給targetpos，此時小車會自動吸附到目標區域左下角，展現的效果如下

如果要把小車定位到目標區域的正**，還需要考慮小車元件和目標區域的長寬，相應地，correctvalue應該設為cc.v2(this.sense.width / 2 - this.node.width / 2 - this.origin.x, this.sense.height / 2 - this.node.height / 2 - this.origin.y)

參考鏈結

(61條訊息) cocoscreator的拖動小遊戲主要邏輯_天才派大星 !的部落格-csdn部落格_cocos creator 拖動

原文出處：cocos2d拖動元件吸附效果 | jayden's blog (jaydenchang.top)

在Cocos2d中拖動元件並吸附到節點

cocos 2d中CCUserDefault的使用

cocos2d中實現滾動層

cocos2d學習 CCLayer中的touch

在Cocos2d中拖動元件並吸附到節點

cocos 2d中CCUserDefault的使用

cocos2d中實現滾動層

cocos2d學習 CCLayer中的touch

相關推薦