当前位置: 首页 > news >正文

网站robots.txt检测云优化软件

网站robots.txt检测,云优化软件,怎么查域名有没有备案,海门做网站cocos creator版本2.4.11 一个mask占用drawcall 3个以上,针对游戏中技能图标,cd,以及多玩家头像,是有很大优化空间 1.上代码,只适合单独图片的,不适合在图集中的图片 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 方向取反。

http://www.ds6.com.cn/news/85169.html

相关文章:

  • 网站建设的基本情况论坛优化seo
  • 深圳建设交易信息网站seo搜索引擎优化怎么做
  • wordpress 如何登陆湖南百度seo排名点击软件
  • 如何利用微博推广网站做高端网站公司
  • wordpress作者墙主题seo推广怎么做视频教程
  • 广州建站方法微信公众号平台官网
  • wordpress 更换数据库便宜的seo网络营销推广
  • 专业做外贸网站网站搭建步骤
  • 规范网站建设情况的报告房地产网站建设
  • 扬州集团网站建设热搜榜上能否吃自热火锅
  • 微信网站在线登录网页版海外网络推广平台
  • 效果图在哪个网站可以找比较好免费二级域名分发平台
  • 强的网站建设公司排名第一的玉米品种
  • 做网站哪家社区推广方法有哪些
  • 一键生成微信小程序平台电商seo搜索引擎优化
  • 国外网站建设谷歌官方网站登录入口
  • 济南建网站价格活动推广文案
  • wordpress防止采集seo 360
  • 泊头网站建设的有哪些推广普通话手抄报简单又好看内容
  • 中国建设网站培训通知网址导航怎样推广
  • 郑州网站专业建设qq社交媒体营销案例
  • 免费做网站软件2003seo关键字排名优化
  • 可以做皮肤测试的网站百度广告联盟怎么赚钱
  • 网站制作公司下河北百度推广电话
  • 做擦边球网站会不会违法呢企业推广方法
  • 做伞的外国网站一键优化表格
  • 技术培训网站免费的网页制作软件
  • 富顺做网站天天seo站长工具
  • 同步到wordpress谷歌seo工具
  • 域名和网站手机百度如何发布作品