【组件】刮刮卡 (论坛水友分享的)

标签：Node cc mask cover 刮刮卡 水友 graphics 组件 Mask

版本：2.4.10

参考：Cocos论坛-刮刮卡实现

 

一 显示效果

 

二 实现原理

实现是利用一张纯灰色cover图片盖在谢谢惠顾图片上方，将图片cover放在cc.Mask节点下。

将cc.Mask设置为反向遮罩，并设置高宽为0，并使用Mask的cc.Graphcis进行线段绘制，这样有线段的地方灰色图片cover就会透明，露出下方的"谢谢惠顾"。

 

三 刮刮卡实现

创建空节点cc.Node，从右边属性面板选择添加组件-渲染组件-Mask。（直接在cc.Node上右键创建节点-渲染组件-是没有Mask的）

 

 

设置mask高宽为0，勾选反向遮罩Inverted，遮罩方式Type选择RECT。

 

 

 找一张纯灰色图片

 

 

将图片放在cover节点下

 

 

因为反向遮罩是遮挡的地方才会变透明，当mask高宽为0时啥也没遮挡，这时cover图片是可以全部看见的。

 

 

尝试把mask高宽修改成50x50，可以看到会透明了一个50x50的矩形。（实际运行时记得把mask高宽改回成0）

 

 

把谢谢惠顾图片放在cover图片下

 

 

 

 

 

完整代码：

/**
 * 刮刮卡
 * @author chenkai 2022.9.27
 */
@ccclass
export default class MainScene extends cc.Component {

    @property({ type: cc.Mask, tooltip: "遮罩" })
    mask: cc.Mask = null;
    @property({ type: cc.Node, tooltip: "纯灰色图片" })
    cover: cc.Node = null;

    public onl oad() {
        //设置线段
        let graphics: cc.Graphics = (this.mask as any)._graphics;
        graphics.lineWidth = 20;
        graphics.lineCap = cc.Graphics.LineCap.ROUND;
        graphics.lineJoin = cc.Graphics.LineJoin.ROUND;
        graphics.strokeColor = cc.color(255, 255, 255, 255);

        //触摸事件
        this.cover.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.cover.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    }

    /**触摸开始 */
    private onTouchStart(e: cc.Event.EventTouch) {
        //记录触摸起始点，将触摸点世界坐标转成cover本地坐标
        let pos = this.cover.convertToNodeSpaceAR(e.getLocation());
        //将画线起点移动到触摸起始点
        let graphics: cc.Graphics = (this.mask as any)._graphics;
        graphics.moveTo(pos.x, pos.y);
    }

    /**触摸移动 */
    private onTouchMove(e: cc.Event.EventTouch) {
        //将触摸点世界坐标转成cover本地坐标
        let pos = this.cover.convertToNodeSpaceAR(e.getLocation());
        //画线
        let graphics: cc.Graphics = (this.mask as any)._graphics;
        graphics.lineTo(pos.x, pos.y);
        graphics.stroke();
    }
}

　　

 

 

 

搜索

复制

标签：Node,cc,mask,cover,刮刮卡,水友,graphics,组件,Mask
From： https://www.cnblogs.com/gamedaybyday/p/16735479.html