草庐IT

CocosCreator实战篇 | 实现刮刮卡和橡皮擦 | 擦除效果

肩匣与橘 2023-07-01 原文

  • 📢博客主页:https://blog.csdn.net/dxt19980308

  • 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

  • 📢本文由肩匣与橘编写,首发于CSDN🙉

  • 📢生活依旧是美好而又温柔的,你也是✨


🏳️‍🌈实现刮刮卡和橡皮擦 | 擦除效果

📢前言

🏳️‍🌈使用方法

🏳️‍🌈技术细节

🏳️‍🌈案例实现

①场景布局

②脚本编写

③脚本和组件挂载

🏳️‍🌈实现效果

📢前言

        Cocos Creator是一款广泛使用的游戏开发引擎,其中包含了许多强大的功能,包括Mask._graphics技术。本文将深入探讨Mask._graphics技术的实现原理和应用场景。         Mask._graphics是Cocos Creator中用于实现遮罩效果的一个关键技术。在游戏中,我们常常需要对某些元素进行遮罩,以达到特定的视觉效果,比如实现圆形头像、矩形裁剪等。


🏳️‍🌈使用方法

        使用 Mask._graphics 功能可以将一个节点或者一个图片或者任何其他的Cocos Creator 控件转换为遮罩层。使用 Mask._graphics 功能的步骤如下:

  1. 创建一个新节点或选择一个已有的节点。
  2. 将Mask 组件添加到节点上。
  3. 在Mask 组件中选择要使用的 MaskType 类型。
  4. 在 Mask 组件中的 Graphics 属性面板中,选择要使用的绘制类型和参数。
  5. 在节点中添加要遮罩的元素,如图片或其他控件。

        在上述步骤中,最核心的是 Mask 组件中的 Graphics 属性。这个属性用于设置绘制类型和参数。下面将详细介绍这个属性的技术细节。


🏳️‍🌈技术细节

        Mask._graphics 属性主要用于设置遮罩层的绘制类型和参数。常用的绘制类型有以下几种:

  1. 矩形(Rect):用于创建一个矩形形状的遮罩层。
  2. 圆形(Circle):用于创建一个圆形形状的遮罩层。
  3. 椭圆形(Ellipse):用于创建一个椭圆形状的遮罩层。
  4. 多边形(Polygon):用于创建一个多边形形状的遮罩层。
  5. 路径(Path):用于创建一个任意形状的遮罩层。

        除了绘制类型外,Mask._graphics 属性还可以设置绘制参数,如颜色、线条宽度、线条样式等。这些参数可以用于调整遮罩层的样式和效果。

        Mask._graphics的实现原理非常简单:它通过绘制一个遮罩图形,然后将要被遮罩的元素限制在这个图形内部来实现遮罩效果。具体而言,Mask._graphics通过继承自Graphics组件,并重写了其中的draw方法来实现遮罩绘制。当遮罩图形发生变化时,Mask._graphics会自动重新绘制遮罩图形,并将其与要被遮罩的元素进行渲染。


🏳️‍🌈案例实现

①场景布局

  1. 新建底部图片节点。
  2. 创建一个挂载mask的节点(勾选反向遮罩),并在mask节点下创建顶部图片节点(擦除的图片)。

 节点细节如下图所示:   

 ②脚本编写

原理:设置鼠标监听事件,在移动过程中执行函数(获取Mask的_graphics,并执行circle()进行圆形路径的绘制,最后使用fill()进行路径的填充)

源码:

@property({
        type: cc.Mask
    })
    myMask: cc.Mask = null;


    @property({
        displayName: "刮卡路径大小",
        min: 20
    })
    size: number = 20;

    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
    }
/**鼠标事件 */
    _onTouchBegin(event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    }

    _onTouchMoved(event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    }

    _onTouchEnd(event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    }

/**绘制函数*/
    aaa: cc.Graphics;
    _addCircle(point) {
        this.aaa = this.myMask._graphics;
        this.aaa.circle(point.x, point.y, this.size);
        this.aaa.fill();
    }

③脚本和组件挂载

  1. 将上方创建的节点放在同一父节点下。
  2. 将mask节点挂载到脚本节点中。

 如图: 

🏳️‍🌈实现效果


        总之,Mask._graphics 是Cocos Creator 引擎中一个非常实用的功能,可以帮助开发者轻松创建遮罩层和实现各种特效效果。在使用这个功能时,需要注意其使用方法和技术细节,以确保游戏的性能和效果都能够达到最优状态。 

有关CocosCreator实战篇 | 实现刮刮卡和橡皮擦 | 擦除效果的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  5. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  6. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  7. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  8. ruby - "public/protected/private"方法是如何实现的,我该如何模拟它? - 2

    在ruby中,你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的,f2和f4是私有(private)的。内部发生了什么,允许您调用一个类方法,然后更改方法定义?我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

  9. ruby - 实现k最近邻需要哪些数据? - 2

    我目前有一个reddit克隆类型的网站。我正在尝试根据我的用户之前喜欢的帖子推荐帖子。看起来K最近邻或k均值是执行此操作的最佳方法。我似乎无法理解如何实际实现它。我看过一些数学公式(例如k表示维基百科页面),但它们对我来说并没有真正意义。有人可以推荐一些伪代码,或者可以查看的地方,以便我更好地了解如何执行此操作吗? 最佳答案 K最近邻(又名KNN)是一种分类算法。基本上,您采用包含N个项目的训练组并对它们进行分类。如何对它们进行分类完全取决于您的数据,以及您认为该数据的重要分类特征是什么。在您的示例中,这可能是帖子类别、谁发布了该项

  10. ruby-on-rails - 使用 Ruby 正确处理 Stripe 错误和异常以实现一次性收费 - 2

    我查看了Stripedocumentationonerrors,但我仍然无法正确处理/重定向这些错误。基本上无论发生什么,我都希望他们返回到edit操作(通过edit_profile_path)并向他们显示一条消息(无论成功与否)。我在edit操作上有一个表单,它可以POST到update操作。使用有效的信用卡可以正常工作(费用在Stripe仪表板中)。我正在使用Stripe.js。classExtrasController5000,#amountincents:currency=>"usd",:card=>token,:description=>current_user.email)

随机推荐