cocos creator版本2.4.11

一個(gè)mask占用drawcall 3個(gè)以上，針對游戲中技能圖標(biāo)，cd,以及多玩家頭像，是有很大優(yōu)化空間

1.上代碼，只適合單獨(dú)圖片的，不適合在圖集中的圖片

const { ccclass, property } = cc._decorator;const gfx = cc.gfx;
cc.Class({extends: cc.Component,properties: {radius: 100, // 圓的半徑segments: 32, // 圓的細(xì)分段數(shù)（頂點(diǎn)數(shù)）/*** !#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(){// 創(chuàng)建 Meshlet mesh = new cc.Mesh();// 計(jì)算頂點(diǎn)和 UVlet positions = [];let uvs = [];let indices = [];let colors = [];// 圓心頂點(diǎn)positions.push(cc.v2(0, 0)); // 圓心uvs.push(cc.v2(0.5, 0.5));  // 圓心 UVcolors.push(cc.Color.WHITE); // 圓心顏色// 圓邊緣頂點(diǎn)for (let i = 0; i <= this.segments; i++) {let angle = (i / this.segments) * Math.PI * 2; // 計(jì)算角度let x = Math.cos(angle) * this.radius; // 計(jì)算 x 坐標(biāo)let y = Math.sin(angle) * this.radius; // 計(jì)算 y 坐標(biāo)positions.push(cc.v2(x, y)); // 添加頂點(diǎn)uvs.push(cc.v2((x / this.radius + 1) / 2, 1-(y / this.radius + 1) / 2)); // 添加 UVcolors.push(cc.Color.WHITE); // 添加顏色}// 設(shè)置索引（三角形扇）for (let i = 1; i <= this.segments; i++) {indices.push(0); // 圓心indices.push(i); // 當(dāng)前頂點(diǎn)indices.push(i + 1); // 下一個(gè)頂點(diǎn)}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);}}
});

這個(gè)js組件，綁定到節(jié)點(diǎn)上，把要渲染的spriteFrame掛在上面，運(yùn)行就可以了，這種方式只適合單獨(dú)圖片，不適合圖集中的圖片

運(yùn)行效果，下面是對比了這個(gè)圖片

說明：這種方式是直接修改圖片的mesh網(wǎng)格結(jié)構(gòu)，使用meshRenderer組件，不能掛載sprite組件，使用shader也可以達(dá)到效果，但是shader是在Gpu層修改顯示，圖片形狀沒有變，這個(gè)是運(yùn)行的時(shí)候直接修改形狀，而且shader修改的話會(huì)有問題，例如打斷動(dòng)態(tài)合批，如果項(xiàng)目勾選了動(dòng)態(tài)合批或者圖片在圖集中，shader修改是無效的

這種方式可以降低mask增加的drawcall

2.工具式的，直接調(diào)用，升級版，可以修改圖集中的某個(gè)圖片的顯示

const { ccclass, property } = cc._decorator;const gfx = cc.gfx;
cc.Class({extends: cc.Component,properties: {radius: 100, // 圓的半徑segments: 32, // 圓的細(xì)分段數(shù)（頂點(diǎn)數(shù)）/*** !#en The sprite frame of the sprite.* !#zh 精靈的精靈幀* @property spriteFrame* @type {spriteFrame}*/spriteFrame: {default: null,type: cc.spriteFrame,},},/**設(shè)置數(shù)據(jù)顯示 需要等spriteFrame加載完成后調(diào)用，可以拿到實(shí)際的圖片* radius: 半徑* segments: 圓細(xì)分段數(shù)，越多會(huì)越圓滑，但是性能消耗會(huì)更大* node:節(jié)點(diǎn)，這里需要使用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上的材質(zhì)this.applySpriteFrame();// 設(shè)置meshif (isAtlas) {// 大圖集中的texturethis.setMeshByAtlas();} else {// 單個(gè)圖片this.setMesh();}// 這里必須延遲一幀，不然不會(huì)刷新mesh,顯示不出來圖片setTimeout(() => {if(cc.isValid(renderer)){renderer.enabled = true;}}, 100);},/**更新mesh，在圖集中的 */setMeshByAtlas() {let uv = this.spriteFrame.uv;// 創(chuàng)建 Meshlet mesh = new cc.Mesh();// 計(jì)算頂點(diǎn)和 UVlet positions = [];let uvs = [];let indices = [];let colors = [];// 圓心頂點(diǎn)positions.push(cc.v2(0, 0)); // 圓心uvs.push(cc.v2((uv[6] + uv[0]) / 2, (uv[7] + uv[1]) / 2)); // 圓心 UV（取中心點(diǎn)）colors.push(cc.Color.WHITE); // 圓心顏色// 圓邊緣頂點(diǎn)for (let i = 0; i <= this.segments; i++) {let angle = (i / this.segments) * Math.PI * 2; // 計(jì)算角度let x = Math.cos(angle) * this.radius; // 計(jì)算 x 坐標(biāo)let y = Math.sin(angle) * this.radius; // 計(jì)算 y 坐標(biāo)positions.push(cc.v2(x, y)); // 添加頂點(diǎn)// 計(jì)算 UV 坐標(biāo)（根據(jù)圖集的 UV 信息進(jìn)行映射）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; // 根據(jù)圖集 UV 計(jì)算實(shí)際 UVlet uvY = uv[1] + (uv[5] - uv[1]) * v; // 根據(jù)圖集 UV 計(jì)算實(shí)際 UVuvs.push(cc.v2(uvX, uvY)); // 添加 UVcolors.push(cc.Color.WHITE); // 添加顏色}// 設(shè)置索引（三角形扇）for (let i = 1; i <= this.segments; i++) {indices.push(0); // 圓心indices.push(i); // 當(dāng)前頂點(diǎn)indices.push(i + 1); // 下一個(gè)頂點(diǎn)}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,單獨(dú)圖片的setMesh() {// 創(chuàng)建 Meshlet mesh = new cc.Mesh();// 計(jì)算頂點(diǎn)和 UVlet positions = [];let uvs = [];let indices = [];let colors = [];// 圓心頂點(diǎn)positions.push(cc.v2(0, 0)); // 圓心uvs.push(cc.v2(0.5, 0.5));  // 圓心 UVcolors.push(cc.Color.WHITE); // 圓心顏色// 圓邊緣頂點(diǎn)for (let i = 0; i <= this.segments; i++) {let angle = (i / this.segments) * Math.PI * 2; // 計(jì)算角度let x = Math.cos(angle) * this.radius; // 計(jì)算 x 坐標(biāo)let y = Math.sin(angle) * this.radius; // 計(jì)算 y 坐標(biāo)positions.push(cc.v2(x, y)); // 添加頂點(diǎn)uvs.push(cc.v2((x / this.radius + 1) / 2, (y / this.radius + 1) / 2)); // 添加 UVcolors.push(cc.Color.WHITE); // 添加顏色}// 設(shè)置索引（三角形扇）for (let i = 1; i <= this.segments; i++) {indices.push(0); // 圓心indices.push(i); // 當(dāng)前頂點(diǎn)indices.push(i + 1); // 下一個(gè)頂點(diǎn)}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());}},});

外部調(diào)用這個(gè)組件的方法，setDataShow傳對應(yīng)的參數(shù)就可以，節(jié)點(diǎn)上需要掛sprite組件，sprite更新圖片或者初始化加載的時(shí)候，調(diào)用這個(gè)方法setDataShow，同時(shí)兼容刪除節(jié)點(diǎn)的sprite組件，如果不想掛載sprite組件，默認(rèn)直接掛上meshRenderer組件，需要自己修改下代碼，把參數(shù)node直接改成傳對應(yīng)的spriteFrame圖片?

Cocos Creator 的紋理坐標(biāo)系（UV 坐標(biāo)系）的 Y 軸方向是?從上到下?的，如果結(jié)果圖片y是反向的，可以設(shè)代碼修改uvs中的y的取值

• 將?v?的計(jì)算改為?1 - (y / radius + 1) / 2，即對 Y 方向取反。