cocos creator使用mesh修改图片为圆形，减少使用mask,j减少drawcall,优化性能

cocos creator版本2.4.11

一个mask占用drawcall 3个以上，针对游戏中技能图标，cd,以及多玩家头像，是有很大优化空间

1.上代码，只适合单独图片的，不适合在图集中的图片

const { ccclass, property } = cc._decorator;const gfx = cc.gfx;
cc.Class({extends: cc.Component,properties: {radius: 100, // 圆的半径segments: 32, // 圆的细分段数（顶点数）/*** !#en The sprite frame of the sprite.* !#zh 精灵的精灵帧* @property spriteFrame* @type {SpriteFrame}* @example* sprite.spriteFrame = newSpriteFrame;*/spriteFrame: {default: null,type: cc.SpriteFrame},},onLoad() {let renderer = this.node.getComponent(cc.MeshRenderer);if (!renderer) {renderer = this.node.addComponent(cc.MeshRenderer);}renderer.mesh = null;this.renderer = renderer;let builtinMaterial = cc.MaterialVariant.createWithBuiltin("unlit");renderer.setMaterial(0, builtinMaterial);this._applySpriteFrame();this.setMesh();},setMesh(){// 创建 Meshlet mesh = new cc.Mesh();// 计算顶点和 UVlet positions = [];let uvs = [];let indices = [];let colors = [];// 圆心顶点positions.push(cc.v2(0, 0)); // 圆心uvs.push(cc.v2(0.5, 0.5));  // 圆心 UVcolors.push(cc.Color.WHITE); // 圆心颜色// 圆边缘顶点for (let i = 0; i <= this.segments; i++) {let angle = (i / this.segments) * Math.PI * 2; // 计算角度let x = Math.cos(angle) * this.radius; // 计算 x 坐标let y = Math.sin(angle) * this.radius; // 计算 y 坐标positions.push(cc.v2(x, y)); // 添加顶点uvs.push(cc.v2((x / this.radius + 1) / 2, 1-(y / this.radius + 1) / 2)); // 添加 UVcolors.push(cc.Color.WHITE); // 添加颜色}// 设置索引（三角形扇）for (let i = 1; i <= this.segments; i++) {indices.push(0); // 圆心indices.push(i); // 当前顶点indices.push(i + 1); // 下一个顶点}mesh.init(new gfx.VertexFormat([{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },]), positions.length, true);mesh.setVertices(gfx.ATTR_POSITION, positions);mesh.setVertices(gfx.ATTR_UV0, uvs);mesh.setIndices(indices);this.renderer.mesh = mesh;},// 更新图片_applySpriteFrame() {// cc.log('_applySpriteFrame');if (this.spriteFrame) {const renderer = this.renderer;let material = renderer._materials[0];// Reset materiallet texture = this.spriteFrame.getTexture();material.define("USE_DIFFUSE_TEXTURE", true);material.setProperty('diffuseTexture', texture);}}
});

这个js组件，绑定到节点上，把要渲染的spriteFrame挂在上面，运行就可以了，这种方式只适合单独图片，不适合图集中的图片

运行效果，下面是对比了这个图片

说明：这种方式是直接修改图片的mesh网格结构，使用meshRenderer组件，不能挂载sprite组件，使用shader也可以达到效果，但是shader是在Gpu层修改显示，图片形状没有变，这个是运行的时候直接修改形状，而且shader修改的话会有问题，例如打断动态合批，如果项目勾选了动态合批或者图片在图集中，shader修改是无效的

这种方式可以降低mask增加的drawcall

2.工具式的，直接调用，升级版，可以修改图集中的某个图片的显示

const { ccclass, property } = cc._decorator;const gfx = cc.gfx;
cc.Class({extends: cc.Component,properties: {radius: 100, // 圆的半径segments: 32, // 圆的细分段数（顶点数）/*** !#en The sprite frame of the sprite.* !#zh 精灵的精灵帧* @property spriteFrame* @type {spriteFrame}*/spriteFrame: {default: null,type: cc.spriteFrame,},},/**设置数据显示 需要等spriteFrame加载完成后调用，可以拿到实际的图片* radius: 半径* segments: 圆细分段数，越多会越圆滑，但是性能消耗会更大* node:节点，这里需要使用mesheRenderer组件,所以需要把sprite剔除* isAtlas:是否是图集中的图片*/setDataShow(node, radius, segments, isAtlas) {// MeshRendererlet renderer = this.node.getComponent(cc.MeshRenderer);if (!renderer) {renderer = this.node.addComponent(cc.MeshRenderer);}renderer.mesh = null;this.renderer = renderer;let builtinMaterial = cc.MaterialVariant.createWithBuiltin("unlit");renderer.setMaterial(0, builtinMaterial);renderer.enabled = false;this.radius = radius;this.segments = segments;let sp = node.getComponent(cc.Sprite);if (sp) {this.spriteFrame = sp.spriteFrame;node.removeComponent(cc.Sprite);}// 把图片加载到renderer上的材质this.applySpriteFrame();// 设置meshif (isAtlas) {// 大图集中的texturethis.setMeshByAtlas();} else {// 单个图片this.setMesh();}// 这里必须延迟一帧，不然不会刷新mesh,显示不出来图片setTimeout(() => {if(cc.isValid(renderer)){renderer.enabled = true;}}, 100);},/**更新mesh，在图集中的 */setMeshByAtlas() {let uv = this.spriteFrame.uv;// 创建 Meshlet mesh = new cc.Mesh();// 计算顶点和 UVlet positions = [];let uvs = [];let indices = [];let colors = [];// 圆心顶点positions.push(cc.v2(0, 0)); // 圆心uvs.push(cc.v2((uv[6] + uv[0]) / 2, (uv[7] + uv[1]) / 2)); // 圆心 UV（取中心点）colors.push(cc.Color.WHITE); // 圆心颜色// 圆边缘顶点for (let i = 0; i <= this.segments; i++) {let angle = (i / this.segments) * Math.PI * 2; // 计算角度let x = Math.cos(angle) * this.radius; // 计算 x 坐标let y = Math.sin(angle) * this.radius; // 计算 y 坐标positions.push(cc.v2(x, y)); // 添加顶点// 计算 UV 坐标（根据图集的 UV 信息进行映射）let u = (x / this.radius + 1) / 2; // 归一化到 [0, 1]let v = (y / this.radius + 1) / 2; // 归一化到 [0, 1]let uvX = uv[0] + (uv[2] - uv[0]) * u; // 根据图集 UV 计算实际 UVlet uvY = uv[1] + (uv[5] - uv[1]) * v; // 根据图集 UV 计算实际 UVuvs.push(cc.v2(uvX, uvY)); // 添加 UVcolors.push(cc.Color.WHITE); // 添加颜色}// 设置索引（三角形扇）for (let i = 1; i <= this.segments; i++) {indices.push(0); // 圆心indices.push(i); // 当前顶点indices.push(i + 1); // 下一个顶点}mesh.init(new gfx.VertexFormat([{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },]), positions.length, true);mesh.setVertices(gfx.ATTR_POSITION, positions);mesh.setVertices(gfx.ATTR_UV0, uvs);mesh.setIndices(indices);this.renderer.mesh = mesh;},// 更新mesh,单独图片的setMesh() {// 创建 Meshlet mesh = new cc.Mesh();// 计算顶点和 UVlet positions = [];let uvs = [];let indices = [];let colors = [];// 圆心顶点positions.push(cc.v2(0, 0)); // 圆心uvs.push(cc.v2(0.5, 0.5));  // 圆心 UVcolors.push(cc.Color.WHITE); // 圆心颜色// 圆边缘顶点for (let i = 0; i <= this.segments; i++) {let angle = (i / this.segments) * Math.PI * 2; // 计算角度let x = Math.cos(angle) * this.radius; // 计算 x 坐标let y = Math.sin(angle) * this.radius; // 计算 y 坐标positions.push(cc.v2(x, y)); // 添加顶点uvs.push(cc.v2((x / this.radius + 1) / 2, (y / this.radius + 1) / 2)); // 添加 UVcolors.push(cc.Color.WHITE); // 添加颜色}// 设置索引（三角形扇）for (let i = 1; i <= this.segments; i++) {indices.push(0); // 圆心indices.push(i); // 当前顶点indices.push(i + 1); // 下一个顶点}mesh.init(new gfx.VertexFormat([{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },]), positions.length, true);mesh.setVertices(gfx.ATTR_POSITION, positions);mesh.setVertices(gfx.ATTR_UV0, uvs);mesh.setIndices(indices);this.renderer.mesh = mesh;},// 更新图片applySpriteFrame() {// cc.log('_applySpriteFrame');if (this.spriteFrame) {const renderer = this.renderer;let material = renderer._materials[0];// Reset materialmaterial.define("USE_DIFFUSE_TEXTURE", true);material.setProperty('diffuseTexture', this.spriteFrame.getTexture());}},});

外部调用这个组件的方法，setDataShow传对应的参数就可以，节点上需要挂sprite组件，sprite更新图片或者初始化加载的时候，调用这个方法setDataShow，同时兼容删除节点的sprite组件，如果不想挂载sprite组件，默认直接挂上meshRenderer组件，需要自己修改下代码，把参数node直接改成传对应的spriteFrame图片 

Cocos Creator 的纹理坐标系（UV 坐标系）的 Y 轴方向是 从上到下 的，如果结果图片y是反向的，可以设代码修改uvs中的y的取值

  • 将 v 的计算改为 1 - (y / radius + 1) / 2，即对 Y 方向取反。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/31401.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

deepseek的regflow安装mac版本

deepseek的regflow安装mac版本

deepseek的ragflow部署安装 一:ollama安装,自行完成,我本地已安装 二:查看大模型情况oll::命令ollama list,我本地无ragflow 三:docker安装:命令docker version ,自行完成,我本地已安装 四:安装知识库软件ragflow: 简单科普下Ragflow 是一个基于深度学习模型的问答生成工具&…
阅读更多...
【华三】STP端口角色与状态深度解析

【华三】STP端口角色与状态深度解析

STP端口角色与状态深度解析&#xff1a;构建无环网络的基石 引言一、STP基础回顾二、端口角色详解1. 根端口&#xff08;Root Port&#xff09;2. 指定端口&#xff08;Designated Port&#xff09;3. 非指定端口&#xff08;阻塞端口&#xff09; 三、端口状态转换流程四、角色…
阅读更多...
【JavaWeb学习Day23】

【JavaWeb学习Day23】

Maven高级 分模块设计与开发 分模块设计&#xff1a;将一个大项目分成若干个子模块&#xff0c;方便项目的维护、扩展&#xff0c;也方便模块间的相互引用&#xff0c;资源共享。 策略&#xff1a; 1.策略一&#xff1a;按照功能模块拆分&#xff0c;比如&#xff1a;公共组…
阅读更多...
MySQL(社区版）安装过程

MySQL(社区版）安装过程

1.下载地址 mysql官方网站&#xff1a;www.mysql.com 也可以从Oracle官网进入&#xff1a;https://www.oracle.com/ 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 选择对应版本以及操作系统&#xff0c;MSI是安装包方式&#xff0c;ZIP是压缩包方式。 2.解…
阅读更多...
【神经网络】python实现神经网络（二）——正向推理的模拟演练

【神经网络】python实现神经网络（二）——正向推理的模拟演练

一.神经网络假设 在开始讲解之前，首先我们假设有这样一套神经网络，一共有三层： 其中，关于神经网络的权重、偏置的符号定义如下（如果不知道什么是权重和偏置，可以参考我之前写过的一篇文章：【机器学习】机器学习是什么意思）： 以下文章将沿用以上这个设…
阅读更多...
Ubuntu用户安装cpolar内网穿透

Ubuntu用户安装cpolar内网穿透

前言 Cpolar作为一款体积小巧却功能强大的内网穿透软件&#xff0c;不仅能够在多种环境和应用场景中发挥巨大作用&#xff0c;还能适应多种操作系统&#xff0c;应用最为广泛的Windows、Mac OS系统自不必多说&#xff0c;稍显小众的Linux、树莓派、群辉等也在起支持之列&#…
阅读更多...
leetcode 78. 子集（二进制枚举详解）c++

leetcode 78. 子集（二进制枚举详解）c++

⼆进制枚举 ⼆进制枚举&#xff1a;⽤⼀个数⼆进制表⽰中的 0/1 表⽰两种状态&#xff0c;从⽽达到枚举各种情况。 利⽤⼆进制枚举时&#xff0c;会⽤到⼀些位运算的知识。关于⽤⼆进制中的 0/1 表⽰状态这种⽅法&#xff0c;以后在讨论状态压缩 dp 中会继续使⽤到。 ⼆进制…
阅读更多...
PyCharm 接入 DeepSeek、OpenAI、Gemini、Mistral等大模型完整版教程（通用）！

PyCharm 接入 DeepSeek、OpenAI、Gemini、Mistral等大模型完整版教程（通用）！

PyCharm 接入 DeepSeek、OpenAI、Gemini、Mistral等大模型完整版教程&#xff08;通用&#xff09;&#xff01; 当我们成功接入大模型时&#xff0c;可以选中任意代码区域进行解答&#xff0c;共分为三个区域&#xff0c;分别是选中区域、提问区域以及回答区域&#xff0c;我…
阅读更多...
调试正常 ≠ 运行正常：Keil5中MicroLIB的“量子态BUG”破解实录

调试正常 ≠ 运行正常：Keil5中MicroLIB的“量子态BUG”破解实录

调试正常 ≠ 运行正常&#xff1a;Keil5中MicroLIB的“量子态BUG”破解实录——从勾选一个选项到理解半主机模式&#xff0c;嵌入式开发的认知升级 &#x1f4cc; 现象描述&#xff1a;调试与烧录的诡异差异 在线调试时 程序正常运行 - 独立运行时 设备无响应 ! 编译过程 0 Err…
阅读更多...
使用PySpark进行大数据处理与机器学习实战指南

使用PySpark进行大数据处理与机器学习实战指南

1. 技术介绍 1.1 PySpark概述 PySpark是Apache Spark的Python API&#xff0c;它结合了Python的易用性和Spark的分布式计算能力&#xff0c;能够高效处理PB级数据集。Spark基于内存计算的特性使其比传统Hadoop MapReduce快10-100倍&#xff0c;支持流处理、SQL查询、机器学习…
阅读更多...
p5.js：sound（音乐）可视化，动画显示音频高低变化

p5.js：sound（音乐）可视化，动画显示音频高低变化

本文通过4个案例介绍了使用 p5.js 进行音乐可视化的实践&#xff0c;包括将音频振幅转化为图形、生成波形图。 承上一篇&#xff1a;vite&#xff1a;初学 p5.js demo 画圆圈 cd p5-demo copy .\node_modules\p5\lib\p5.min.js . copy .\node_modules\p5\lib\addons\p5.soun…
阅读更多...
SpringBoot3.3.0集成Knife4j4.5.0实战

SpringBoot3.3.0集成Knife4j4.5.0实战

原SpringBoot2.7.18升级至3.3.0之后&#xff0c;Knife4j进行同步升级(Spring Boot 3 只支持OpenAPI3规范)&#xff0c;从原3.0.3(knife4j-spring-boot-starter)版本升级至4.5.0(knife4j-openapi3-jakarta-spring-boot-starter)&#xff0c;以下是升级过程与注意事项等 版本信息…
阅读更多...
【氮化镓】高输入功率应力诱导的GaN 在下的退化LNA退化

【氮化镓】高输入功率应力诱导的GaN 在下的退化LNA退化

2019年，中国工程物理研究院电子工程研究所的Tong等人基于实验与第一性原理计算方法，研究了Ka波段GaN低噪声放大器（LNA）在高输入功率应力下的退化机制。实验结果表明，在27 GHz下施加1 W连续波（CW）输入功率应力后，LNA的增益下降约1 dB，噪声系数（NF）增加约0.7 dB。进一…
阅读更多...
【设计模式】掌握建造者模式：如何优雅地解决复杂对象创建难题？

【设计模式】掌握建造者模式：如何优雅地解决复杂对象创建难题？

概述 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于&#xff1a;某个对象的构建过程复杂的情况。 由于实现了构建和装配的解耦。…
阅读更多...
golang从入门到做牛马:第三篇-Go程序的“骨骼架构”

golang从入门到做牛马:第三篇-Go程序的“骨骼架构”

在编程的世界里，Go语言就像一位优雅的舞者，它的每一个动作都简洁而高效。而要真正领略Go语言的魅力，我们得先从它的基本结构开始。Go程序的结构清晰、逻辑严谨，就像一座精心设计的建筑，每一部分都有其独特的功能和位置。接下来，就让我们一起拆解Go程序的“骨骼架构”，看…
阅读更多...
数据结构——哈希表的实现

数据结构——哈希表的实现

目录 1 哈希概念 1.1 直接定址法 1.2 哈希冲突 1.3 负载因子 1.4 将关键字转成整数 1.5 哈希函数 1.5.1 除法散列法 / 除留余数法 1.5.2 乘法散列法 1.5.3 全域散列法 1.5.4 其他方法 1.6 处理哈希冲突 1.6.1 开放地址法 1.6.1.1 线性探测 ​编辑 1.6.1.2 二次探测 1.6.…
阅读更多...
解决AWS EC2实例无法使用IAM角色登录AWS CLI

解决AWS EC2实例无法使用IAM角色登录AWS CLI

问题背景 有时&#xff0c;我们希望一台AWS EC2实例&#xff0c;即云服务器&#xff0c;能够使用AWS CLI访问AWS管理控制台资源。 例如&#xff0c;这里&#xff0c;我们想让它能够列出所有IAM用户组。 aws iam list-groups于是&#xff0c;我们使用下面的命令&#xff0c;在…
阅读更多...
文件系统调用─── linux第17课

文件系统调用─── linux第17课

目录 linux 中man 2和man 3的区别 文件内容介绍 C语言文件接口 示例: 输出信息到显示器&#xff0c;你有哪些方法 总结: 系统文件I/O 文件类的系统调用接口介绍 示例 open 函数具体使用哪个,和具体应用场景相关&#xff0c; write read close lseek ,类比C文件相关接…
阅读更多...
【Go学习实战】03-2-博客查询及登录

【Go学习实战】03-2-博客查询及登录

【Go学习实战】03-2-博客查询及登录 读取数据库数据初始化数据库首页真实数据分类查询分类查询测试 文章查询文章查询测试 分类文章列表测试 登录功能登录页面登录接口获取json参数登录失败测试 md5加密jwt工具 登录成功测试 文章详情测试 读取数据库数据 因为我们之前的数据都…
阅读更多...
警惕AI神话破灭：深度解析大模型缺陷与禁用场景指南

警惕AI神话破灭：深度解析大模型缺陷与禁用场景指南

摘要 当前AI大模型虽展现强大能力&#xff0c;但其本质缺陷可能引发系统性风险。本文从认知鸿沟、数据困境、伦理雷区、技术瓶颈四大维度剖析大模型局限性&#xff0c;揭示医疗诊断、法律决策等8类禁用场景&#xff0c;提出可信AI建设框架与用户防护策略。通过理论分析与实操案…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023