cocos creator2.x 橡皮擦擦除效果

20.31

于 2023-09-13 17:09:30 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

分类专栏： cocos2.x功能模块记录文章标签： cocos2d 游戏引擎

本文链接：https://blog.youkuaiyun.com/weixin_59909266/article/details/132857443

本文档记录了使用Cocos Creator2.x 制作橡皮擦擦除效果的过程。主要涉及节点设置和JavaScript实现，包括在节点node01上挂载EraserCtrl脚本，设置擦除半径Cr，并创建一个MaskNode节点，其上应用Mask组件，启用反向遮罩功能。此外，node02作为被擦除的精灵。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仅作个人学习记录用，参考的好像是在Cocos论坛还是在哪的文章忘了所以无链接，js实现的

节点关系

node01是个sprite，挂载EraserCtrl脚本，Cr为擦除半径，Mask为MaskNode节点

MaskNode挂载Mask组件，勾上反向遮罩

node02是个sprite

cc.Class({
    extends: cc.Component,

    properties: {
        cr: {
            default: 30,
            tooltip: '涂抹圆的半径'
        },
        mask: cc.Mask
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        let self = this;
        this.node.on(cc.Node.EventType.TOUCH_START, (event) => {
            cc.log('touch start');
            let point = event.touch.getLocation();
            point = self.mask.node.convertToNodeSpaceAR(point);
            self._addCircle(point);
        }, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, (event) => {
            let point = event.touch.getLocation();
            point = self.mask.