【包教包会】CocosCreator3.x——圆角矩形（支持原生、可合批、高性能）

水煮肉片饭

已于 2024-09-18 19:40:47 修改

阅读量415

点赞数 10

文章标签：游戏 typescript 开发语言

于 2024-09-18 19:32:40 首次发布

本文链接：https://blog.csdn.net/weixin_42714632/article/details/142341606

版权

完美适配Web、原生平台（其余平台没测过）。

3.x版本地址：RoundBox3.x: CocosCreator3.x版本的圆角矩形，可合批，支持原生。

2.x版本地址：CocosCreator Assembler经典案例第二期——圆角矩形（支持原生、可合批、附Demo源码）

如何导入自己项目：

1、将Demo中RoundBox.ts复制到自己项目assets目录下

2、新建一个节点，将RoundBox组件挂上去

3、拖一张图片到组件的Sprite Frame属性

4、增加线段数量，可以让圆角更平滑，但也会增加计算量，具体看项目需求。

其余不明白的评论区沟通~加油

Gitee地址：水煮肉片饭 (szrpf) - Gitee.com

EMail地址：27185709@qq.com

2、CocosCreator3.x图片和文字渐变色（支持3.x、支持原生、可合批）

3、CocosCreator3.x节点扩展（仿2.x风格直接设置属性、渐变色、振动、实时销毁）

4、CocosCreator Assembler经典案例第一期——2D实现3D透视翻转

5、【包教包会】对CocosCreator富文本RichText进行全面优化

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水煮肉片饭

关注关注

10
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

女朋友要我教她CSS，我就写了这一篇长文，感动哭了？

超逸の学习技术博客

05-30

9655

女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？

cocos2d-x 2.0 绘制圆角矩形

04-13

分享个cocos2d-x 2.0.x后绘制圆角矩形的方法，值得一看！

参与评论您还未登录，请先登录后发表或查看评论

Cocos2d-x绘制圆角矩形

weixin_34293902的博客

04-02

190

/* * @brief 画圆角矩形 * @param origin 矩形开始点 * @param destination 矩形结束点 * @param radius 圆角半径 * @param segments 圆角等份数，等份越多，圆...

小游戏带飞|Cocos Creator 3.x优秀开源框架盘点！

Cocos的博客

08-28

1533

最近有不少独立游戏开发者和游戏发行朋友通过媒体后台联系到我们，问有没有快速学会 Cocos 小游戏开发的方案。独立游戏开发者和游戏发行为什么扎堆关心起 Cocos，这其中的具体原因就不深究了，我想大概率是看到了像《菇勇者传说/冒险大作战》、《寻道大千》、《咸鱼之王》、《羊了个羊》这些火遍全网的现象级产品，以及像途游、三七、4399、豪腾等头部公司许多产品都是 Cocos 的缘故。又或者是今年国内外...

cocosCreator任意图片加圆角

最新发布

weixin_42253927的博客

09-11

252

【代码】cocosCreator任意图片加圆角。

cocoscreator 利用Mask组件裁剪圆角矩形

Lu1030017255的博客

03-03

5642

//计算矩形角度常量 const KAPPA90 = 0.5522847493; /** * 裁剪不规则矩形 */ cc.Class({ extends: cc.Mask, properties: { type: { override: true, get: function () { return this._type; }, visible(

【包教包会】CocosCreator Assembler经典案例第二期——圆角矩形（支持原生、可合批、附Demo源码）

CocosCreator水煮肉片饭的博客

04-24

950

用Assembler实现的图片圆角效果，方便、高效、值得收藏

Android高级应用源码-ImageView 自定义控件，实现圆角控件图片功能.rar

12-17

3. 在构造函数中，可以添加自定义属性，例如圆角半径，以便在XML布局中调整圆角大小。通过调用setAttributes()方法解析来自XML的属性值。 4. 为了在XML布局文件中使用自定义的圆角ImageView，需要在项目的res/...

android自定义圆角图片

10-30

// 设置裁剪区域为圆角矩形 Path path = new Path(); path.addRoundRect(new RectF(0, 0, getWidth(), getHeight()), getCornerRadius(), getCornerRadius(), Path.Direction.CW); // 裁剪canvas canvas....

前端速成教程（HTML、CSS、JS、Vue…）

www.h y p e r p l a s m a.top

05-06

3354

JavaWeb开发 SSM框架基础前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。

Qt开发经验总结

草上爬的博客

12-02

8331

增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。

cocos creator 不规则形状按钮

04-20

结合Gizmo实现的不规则按钮制作方法，有需要的同学可以下载本资源，希望对你有所帮助。

Cocos2d-x：裁剪节点圆角矩形（将节点处理成圆角）

Alostz

04-23

5551

核心： 1、首先需要使用上节提到的ClippingNode进行裁剪； 2、绘制圆角矩形模版； 3、用模版去裁剪

cocos creator shader 小游戏与原生包兼容问题

weixin_44204595的博客

11-19

483

问题最近在开发游戏中用shader实现一个人物受击变白的功能，发现在小游戏平台中可以跑，在原生环境中跑不了实现方式：采用js动态修改shader中参数来实现变白功能 typescript代码： /** * * @param number 播放次数 * @param time 白光时长和间隔时长 */ playWhiteLight(number, time) { this.hand.getMaterials()[0].setPr

cocos creator 安卓原生平台环境_cocos-creator的安装配置原生开发环境

weixin_39568889的博客

12-19

345

安装配置原生开发环境(摘自：http://www.cocos.com/docs/creator/publish/setup-native-development.html)除了内置的 Web 版游戏发布功能外，Cocos Creator 使用基于 cocos2d-x 引擎的 JSB 技术实现跨平台发布原生应用和 Cocos Play 手机页游。在使用 Cocos Creator 打包发布到原生平台...

CocosCreator2.2.x以及原生平台(Android&IOS)的热更方案的底层源码最彻底的分析，并开源更好的学习Demo

mynamefshunj的博客

07-03

1771

CocosCreator 原生平台，IOS 热更，游戏开发

30+顶级互联网公司高薪诚聘 Cocos 人才

奎特尔星球

07-21

2363

除了游戏之外，近年来，Cocos 被应用于越来越多的领域，例如数字娱乐、数字文创、在线教育、虚拟展会、电商等等。Cocos 人才在市场上也拥有更多的就业选择空间，各大招聘网站上，Coco...

cocos2dx图片精灵裁剪圆角矩形方法

wolfboy2的专栏

06-14

3165

在做项目中，需要对图片进行裁剪已统一所有图片的边角，在网上查找方法结合自己的项目，书写了一个专门做裁剪的函数，供大家参考；

cocos creator 切圆角处理

鹤九霄的博客

10-22

9043

1、利用mask组件切出来一个圆角创建一个空的Node节点，在该节点上添加Mask组件，Type选择ELLIPSE 在该节点下加入一个新的Sprite精灵组件，就能显示如图所示的圆角图片 2、第一步操作出来的图片会有锯齿状的效果，如图：这是Mask组件切圆角的一个弊端，当然也可以自己写脚本去操作，偶尔遇到大批量的圆角图片展示的时候，也许会出现卡顿的现象，先不考虑脚本操作，现在使用一种讨巧...

Android开发，canvas.clipPath绘制圆角矩形，出现锯齿模糊问题如何解决

09-10

在Android开发中，使用`Canvas`的`clipPath`方法绘制圆角矩形时，可能会遇到锯齿或者模糊的问题。这些问题通常是因为抗锯齿或者路径的填充方式不正确导致的。以下是一些可能的解决方案： 1. 确保视图启用硬件加速。在Android中，硬件加速可以改善绘图的性能，同时也可能减少锯齿。可以通过在应用的AndroidManifest.xml文件中对应的Activity标签里添加`android:hardwareAccelerated="true"`来启用硬件加速。 2. 设置`Paint`对象的抗锯齿标志。在创建`Paint`对象时，可以通过调用`setAntiAlias(true)`方法来启用抗锯齿，这有助于平滑边缘。 ```java Paint paint = new Paint(); paint.setAntiAlias(true); // 启用抗锯齿 ``` 3. 当使用`clipPath`方法时，确保路径的创建尽可能精确。例如，当创建圆角矩形路径时，可以使用`Path.addRoundRect`方法，它允许你直接指定圆角的半径，这样可以避免在路径创建过程中引入额外的锯齿。 ```java Path path = new Path(); RectF rectF = new RectF(left, top, right, bottom); path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CCW); canvas.clipPath(path); ``` 4. 在绘制之前，可以设置`Canvas`的渲染质量为高质量。使用`setDrawFilter`方法并设置合适的`PaintFlags`，比如`DITHER`标志，可以在绘制时尝试减少像素化。 ```java canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG)); ``` 5. 如果以上方法都不能解决问题，可以考虑使用图片（如9-patch图片）来实现圆角矩形，这通常能够获得更平滑的视觉效果。