域名注册平台的网站怎么做,旅游网站设计,网站如何制作多少钱,建设银行昆山分行网站cocos creator版本2.4.11
一个mask占用drawcall 3个以上#xff0c;针对游戏中技能图标#xff0c;cd,以及多玩家头像#xff0c;是有很大优化空间
1.上代码#xff0c;只适合单独图片的#xff0c;不适合在图集中的图片
const { ccclass, property } cc._decorator;c…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 方向取反。
