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.mzph.cn/bicheng/73189.shtml

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

相关文章

AI重构SEO关键词布局

AI重构SEO关键词布局

内容概要 在搜索引擎优化&#xff08;SEO&#xff09;领域&#xff0c;AI技术的深度应用正在颠覆传统关键词布局逻辑。通过机器学习算法与语义分析模型&#xff0c;智能系统能够实时解析海量搜索数据&#xff0c;构建动态词库并精准捕捉用户意图。相较于依赖人工经验的关键词筛…
阅读更多...
泛微ecode的页面开发发送请求参数携带集合

泛微ecode的页面开发发送请求参数携带集合

1.在开发过程中我们难免遇见会存在需要将集合传递到后端的情况&#xff0c;那么这里就有一些如下的注意事项&#xff0c;如以下代码&#xff1a; // 新增action.boundasync addQuestion(formData) {var theList this.questionAnswerList;var questionAnswerListArray new Ar…
阅读更多...
20250212：linux系统DNS解析卡顿5秒的bug

20250212：linux系统DNS解析卡顿5秒的bug

问题： 1：人脸离线识别记录可以正常上传云端 2：人脸在线识别请求却一直超时 3：客户使用在线网络 思路：
阅读更多...
道路运输安全员考试：备考中的心理调适与策略

道路运输安全员考试：备考中的心理调适与策略

备考道路运输安全员考试&#xff0c;心理调适同样重要。考试压力往往会影响考生的学习效率和考试发挥。​ 首先&#xff0c;要正确认识考试压力。适度的压力可以激发学习动力&#xff0c;但过度的压力则会适得其反。当感到压力过大时&#xff0c;要学会自我调节。可以通过运动…
阅读更多...
LLM - 白话RAG（Retrieval-Augmented Generation）

LLM - 白话RAG（Retrieval-Augmented Generation）

文章目录 Pre一、大模型的"幻觉"之谜1.1 何为"幻觉"现象&#xff1f;1.2 专业场景的致命挑战 二、RAG技术解析&#xff1a;给大模型装上"知识外挂"2.1 核心原理&#xff1a;动态知识增强2.2 技术实现三部曲 三、RAG vs 微调&#xff1a;技术选型…
阅读更多...
探索现代 C++：新特性、工程实践与热点趋势

探索现代 C++：新特性、工程实践与热点趋势

目录 一、现代 C 的关键特性与热点关联 二、精简代码示例解析 三、工程实践中的应用思考 四、总结与展望 近几年&#xff0c;人工智能、边缘计算与跨语言开发成为技术热点&#xff0c;而 C 作为高性能系统编程的主力军&#xff0c;也在不断进化。从 C11 到 C20&#xff0c;…
阅读更多...
《HTML + CSS + JS 打造炫酷轮播图详解》

《HTML + CSS + JS 打造炫酷轮播图详解》

《HTML CSS JS 打造炫酷轮播图详解》 一、项目概述 本次项目旨在使用 HTML、CSS 和 JavaScript 实现一个具有基本功能的轮播图&#xff0c;包括图片自动轮播、上一张 / 下一张按钮切换、小圆点指示与切换等功能&#xff0c;以提升网页的交互性和视觉吸引力。 二、实现步骤…
阅读更多...
257. 二叉树的所有路径(递归+回溯）

257. 二叉树的所有路径(递归+回溯）

257. 二叉树的所有路径 力扣题目链接(opens new window) 给定一个二叉树&#xff0c;返回所有从根节点到叶子节点的路径。 说明: 叶子节点是指没有子节点的节点。 示例: 思路&#xff1a;在叶子节点收割结果&#xff0c;如果不是叶子节点&#xff0c;则依次处理左右子树&a…
阅读更多...
【架构差异】SpringとSpringBoot：Bean机制的深入剖析与自动配置原理

【架构差异】SpringとSpringBoot：Bean机制的深入剖析与自动配置原理

目录标题 SpringBoot框架中Bean机制的深入剖析与自动配置原理摘要1. 引言2. SpringBoot与Spring的架构差异2.1 从Spring到SpringBoot的演进2.2 SpringBoot中的Bean容器体系 3. SpringBoot的自动配置机制3.1 SpringBootApplication解析3.2 自动配置原理深度解析3.2.1 自动配置类…
阅读更多...
CSDN博客：Markdown编辑语法教程总结教程（中）

CSDN博客：Markdown编辑语法教程总结教程（中）

❤个人主页&#xff1a;折枝寄北的博客 Markdown编辑语法教程总结 前言1. 列表1.1 无序列表1.2 有序列表1.3 待办事项列表1.4 自定义列表 2. 图片2.1 直接插入图片2.2 插入带尺寸的图片2.3 插入宽度确定&#xff0c;高度等比例的图片2.4 插入高度确定宽度等比例的图片2.5 插入居…
阅读更多...
ChebyKAN0、ChebyKAN1 网络阅读

ChebyKAN0、ChebyKAN1 网络阅读

目录 ChebyKAN0 Chebyshev Polynomial-Based Kolmogorov-Arnold Networks: An Efficient Architecture for Nonlinear Function Approximation 参考文献 文章内容 文章详细结构 5. Experiments and Results 5.1 Digit Classification on MNIST 5.2 Function Approximat…
阅读更多...
RK3588部署YOLOv8（2）：OpenCV和RGA实现模型前处理对比

RK3588部署YOLOv8（2）：OpenCV和RGA实现模型前处理对比

目录 前言 1. 结果对比 1.1 时间对比 1.2 CPU和NPU占用对比 2. RGA实现YOLO前处理 2.1 实现思路 2.2 处理类的声明 2.3 处理类的实现 总结 前言 RK平台上有RGA (Raster Graphic Acceleration Unit) 加速&#xff0c;使用RGA可以减少资源占用、加速图片处理速度。因此…
阅读更多...
破局者登场：中国首款AI原生IDE Trae深度解析--开启人机协同编程新纪元

破局者登场：中国首款AI原生IDE Trae深度解析--开启人机协同编程新纪元

摘要 字节跳动于2025年3月3日正式发布中国首款AI原生集成开发环境Trae国内版&#xff0c;以动态协作、全场景AI赋能及本土化适配为核心优势。Trae内置Doubao-1.5-pro与DeepSeek R1/V3双引擎&#xff0c;支持基于自然语言生成端到端代码框架、实时上下文感知与智能Bug修复&…
阅读更多...
【PyCharm】Python和PyCharm的相互关系和使用联动介绍

【PyCharm】Python和PyCharm的相互关系和使用联动介绍

李升伟 整理 Python 是一种广泛使用的编程语言&#xff0c;而 PyCharm 是 JetBrains 开发的专门用于 Python 开发的集成开发环境&#xff08;IDE&#xff09;。以下是它们的相互关系和使用联动的介绍&#xff1a; 1. Python 和 PyCharm 的关系 Python&#xff1a;一种解释型、…
阅读更多...
SNIPAR：快速实现亲缘个体的基因型分离与推断

SNIPAR：快速实现亲缘个体的基因型分离与推断

SNIPAR&#xff1a;快速实现亲缘个体的基因型分离与推断 近日&#xff0c;英国剑桥大学研究团队在Nature Genetics上发表了最新研究成果——SNIPAR&#xff08;SNP-based Inference of Pedigree relationship, Ancestry, and Recombination&#xff09;。这一强大的工具可以帮助…
阅读更多...
3.11记录

3.11记录

leetcode刷题&#xff1a; 1. 334. 递增的三元子序列 - 力扣&#xff08;LeetCode&#xff09; 方法一&#xff1a;使用贪心算法求解 class Solution(object):def increasingTriplet(self, nums):first nums[0]second float(inf)for i in nums:if i>second:return Truee…
阅读更多...
阿里云操作系统控制台评测：国产AI+运维 一站式运维管理平台

阿里云操作系统控制台评测：国产AI+运维 一站式运维管理平台

阿里云操作系统控制台评测&#xff1a;国产AI运维 一站式运维管理平台 引言 随着云计算技术的飞速发展&#xff0c;企业在云端的运维管理面临更高的要求。阿里云操作系统控制台作为一款集运维管理、智能助手和系统诊断等多功能于一体的工具&#xff0c;正逐步成为企业高效管理…
阅读更多...
大语言模型学习--向量数据库Milvus实践

大语言模型学习--向量数据库Milvus实践

Milvus是目前比较流行的开源向量数据库&#xff0c;其官网地址 Milvus 是什么&#xff1f; | Milvus 文档 1.Milvus简介 Milvus 是一种高性能、高扩展性的向量数据库。Milvus 提供强大的数据建模功能&#xff0c;能够将非结构化或多模式数据组织成结构化的 Collections。它支…
阅读更多...
DeepSeek Kimi详细生成PPT的步骤

DeepSeek Kimi详细生成PPT的步骤

以下是使用 DeepSeek 和 Kimi 协作生成 PPT 的详细步骤&#xff0c;结合了两者的优势实现高效创作&#xff1a; 第一步&#xff1a;使用 DeepSeek 生成 PPT 大纲或内容 明确需求并输入提示词 在 DeepSeek 的对话界面中&#xff0c;输入具体指令&#xff0c;要求生成 PPT 大纲或…
阅读更多...
Visual Studio 安装及使用教程（Windows）【安装】

Visual Studio 安装及使用教程（Windows）【安装】

文章目录 一、 Visual Studio 下载1. 官网下载2. 其它渠道 二、Visual Studio 安装三、Visual Studio 使用四、Visual Studio 其它设置1. 桌面快捷方式2. 更改主题、字体大小 软件 / 环境安装及配置目录 一、 Visual Studio 下载 1. 官网下载 安装地址&#xff1a;https://vi…
阅读更多...
最新文章

Copyright @ 2022~2023