Cocos Create新手引导

本教程使用Cocos create 2.0.10其他版本未测试不知可行否

本教程主要为碰撞区域可以穿透到下面的触摸节点以及椭圆的碰撞检测

做过新手引导的都知道需要挖洞如这样：

QQ图片20200120235605.png

大家可能也想到是用遮罩实行。可是create的跟Cocos2d-x不一样了有点区别；
现在说说create 的方法

在Cocos create里面添加一个node节点。在节点上添加一个组件cc.Mask如图所示

image.png

然后添加一个js组件也就是脚本。
如下图绘制mask

image.png

接下来给节点添加触摸事件
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