本教程使用Cocos create 2.0.10其他版本未測試不知可行否
本教程主要為碰撞區域可以穿透到下面的觸摸節點以及橢圓的碰撞檢測
做過新手引導的都知道需要挖洞如這樣：
大家可能也想到是用遮罩實行。可是create的跟Cocos2d-x不一樣了有點區別；
現在說說create 的方法
在Cocos create里面添加一個node節點。在節點上添加一個組件cc.Mask如圖所示
然后添加一個js組件也就是腳本。
如下圖繪制mask
接下來給節點添加觸摸事件
this.node.on( cc.Node.EventType.TOUCH_END, this.onTouchEndSelf, this );
this.node.on( cc.Node.EventType.TOUCH_START, this.onTouchStartSelf, this );
方法的實現
//在start的時候檢查是否碰撞到了mask節點如果碰撞到了。可以讓事件穿透
onTouchStartSelf( touchEvent ) {
let isHitTest = this._hitTestMask( touchEvent.getLocation() );
if ( isHitTest ) {
this.node._touchListener.swallowTouches = false;
} else {
this.node._touchListener.swallowTouches = true;
}
}
//需要判斷玩家手指松開后是否還在碰撞區域
onTouchEndSelf( touchEvent ) {
do {
let isHitTest = this._hitTestMask( touchEvent.getLocation() );
if ( isHitTest ) {
//穿透下去表示點擊成功了哦
this.node._touchListener.swallowTouches = false;
} else {
this.node._touchListener.swallowTouches = true;
}
} while ( 0 );
}
//判斷時候在橢圓范圍內
//復制了官方的代碼。加了位置偏移
_hitTestMask( location ) {
let testPt = this.mask.node.convertToNodeSpace( location );
let rx = this.ellipseSize.width, ry = this.ellipseSize.height;
let px = testPt.x - this.ellipseSize.width - this.ellipseV2.x;
let py = testPt.y - this.ellipseSize.height - this.ellipseV2.y;
let result = px * px / (rx * rx) + py * py / (ry * ry) < 1;
return result;
}
以上就是新手引導初步教程；
如果有不明白歡迎留言；
隨便提一下如何禁止scrollview 滾動
官方人員提供的隨便記錄一下。就是：
scrollView.horizontal = false;
scrollView.vertical = false;
這兩個值設置成false
