creator 学习之mask（刮刮卡效果）

飞猪001

于 2021-11-07 21:58:07 发布

阅读量719

点赞数

分类专栏： creator 文章标签： creator

本文链接：https://blog.youkuaiyun.com/m0_63275099/article/details/121192537

版权

1.效果

2.原理

creator的刮刮卡是由mask的反向遮罩实现的，这是因为遮罩的内部功能是由画笔（graphics）实现的。利用遮罩的画笔功能将需要涂抹的地方进行修改达到刮刮卡的效果，至于百分比的判断我是利用了将整个图片分为n*m的各种在涂抹过程中判断格子的状态来达到涂抹百分比的判断

3.代码

const { ccclass, property } = cc._decorator;

@ccclass
export default class MaskCardModule extends cc.Component {

    @property(cc.Mask)
    private card_mask: cc.Mask = null;

    @property(cc.Node)
    private maskNode: cc.Node = null;

    @property(cc.Label)
    private progress_label:cc.Label = null;

    /**
     * 遮罩的画笔
     */
    private mask_graphics: cc.Graphics = null;

    /**
     * 画笔的宽度
     */
    private graphics_width: number = 40;

    /**
     * 划线的格子
     */
    private progress_rect: Array<ProgressRectData> = [];

    /**
     * 进度
     */
    private mask_p