cocos creator初学者对于cocos代码优化的记录

·  阅读 362

前言

新入职公司,有幸开始互动游戏开发,目前刚刚涉及cocos三个月,记录一下写cocos学到的新东西

一,获取宽高不要使用根节点宽高,可能存在设置了宽高,但是实际为0的情况,使用

//视图中canvas尺寸
console.log("Maya canvas size:", cc.view.getCanvasSize());
//视图中窗口可见区域尺寸
console.log("Maya visible Size:", cc.view.getVisibleSize());
//设计分辨率
console.log("Maya DesignResolutionSize Size:", cc.view.getDesignResolutionSize());
//屏幕尺寸
console.log("Maya frame size", cc.view.getFrameSize());
// 为当前的游戏窗口的大小
console.log('Maya game size', cc.winSize)
复制代码

二,使用cocos定时器取代代替定时器setTimeout

this.scheduleOnce(() => {
    // 代码逻辑
}, 1);
复制代码

三,可以利用浏览器的事件循环机制,异步加载prefab

for (let i = num; i > 0; i--) {
    // 异步创建,优化加载速度
    this.scheduleOnce(() => {
        const ins = cc.instantiate(this.redBagPrefab);
    }, 0.1);
}
复制代码

四,使用cocos中的Math,代替原生Math

// 随机整数
cc.math.randomRangeInt(min, max);
// 随机浮点数
cc.math.randomRange(min, max);
复制代码

五,尽量少的操作节点,直接操作节点会导致canvas重绘

六,使用缓动系统代替动作系统

animation(node) {
    cc.tween(node)
        .to(0.5, { position: new cc.Vec3(node.x, 0) })
        .start();
},
复制代码

七,Label字体优化

动态的字体,比如倒计时,积分数量,使用CHAR模式

不是动态的字体,比如标题,使用BITMAP模式

八,如果有多个spine动画的话,尽量减少spine动画的资源加载次数,可以把多个动画效果,放到一个spine里面,然后调用

// 一次性请求
const allSpineUrl = this.assetMgr.getSpine(this.props['all-spine']);
allSpineUrl.then(res => {
  this.allSpine = res;
});

// 使用
this.countdownSpine.skeletonData = this.allSpine;
this.countdownSpine.setAnimation(0, 'daojishi_default', false);

// 使用
this.backgroundSpine.skeletonData = this.allSpine;
this.backgroundSpine.setAnimation(0, 'default', true);
复制代码

九,多次创建prefab,可以使用节点池

// 定义
properties: { widgetPool: cc.NodePool }

// 使用,实例
this.widgetPool = new cc.NodePool();

// 使用,添加节点
this.scheduleOnce(() => {
  const ins = cc.instantiate(this.redBagPrefab);
  this.widgetPool.put(ins);
}, 0.1);

// 使用,获取节点
let redbag = null;
if (this.widgetPool.size() > 0) {
  redbag = this.widgetPool.get();
} else {
  redbag = cc.instantiate(this.redBagPrefab);
}

// 使用,不用时销毁
this.widgetPool.clear();
复制代码

十,多次创建prefab可以选择优化策略,优化多次创建性能

十一,资源加载放到onLoad生命周期里,节点操作放到start生命周期里,根据帧率操作放到update生命周期里

十二,使用代码控制节点的zindex改变层级的方式,不如换成另外一种,使用鼠标在编辑器拖拽一下

十三,查找子节点的时候使用 cc.find('start', this.node) 替代 this.node.children

原因,你可能在编辑器拖拽一下,然后你children获取到的节点顺序就变了😭😭😭

十四,始终使用批量绘图,将同一图层中的精灵图像打包成一个大的图集

十五,尽量保持 绘制调用(draw call) 次数低于 50,总之尽量减少就对了

十六,使用骨骼动画的时候,如果你想要快速判断动画的名字是否在骨骼动画中存在的时候,可以使用以下API判断

const name = 'loding';
const nodeSp = node.getComponent(sp.Skeleton);
let hasName = false;
// 判断
if (nodeSp.findAnimation(name)) {
    hasName = true;
}
复制代码

十七,如果内存多的话,可以开启动态合图,减少draw call

// 开启动态合图
cc.macro.CLEANUP_IMAGE_CACHE = false;
cc.dynamicAtlasManager.enabled = true;

// 还可通过以下api设置动态合图大小
cc.dynamicAtlasManager.maxFrameSize = 512;
复制代码

十八,如果只是想要单指触摸,可以使用以下API设置

// 关闭多点触摸事件
cc.macro.ENABLE_MULTI_TOUCH = false;
复制代码

十九,定时器使用的时候,要用时间戳做判断,不要用+=或者-=,使用+=或者-=回导致定时器不准确的情况

this.fillRangeNode.fillRange = 1;
// 获取到组件结束的时间
const endTime = new Date().getTime() + this.durationTime * 1000;
const timer = () => {
    if (this.fillRangeNode.fillRange <= 0) {
        this.fillRangeNode.fillRange = 0;
        ......
        ......
        ......
        // 清除倒计时
        this.unschedule(timer);
    }
    const ct = endTime - new Date().getTime();
    // 组件的进度等于,当前的时间差除以组件持续时间
    this.fillRangeNode.fillRange = ct / (this.durationTime * 1000);
};

this.schedule(timer, 0.1);
复制代码

二十,如果想要判断是否手机还是ipad的话,可以使用长宽比来做判断

deviceType() {
    const designRotate = 1440 / 924;
    const visibleSize = cc.view.getVisibleSize();
    const visibleRotate = visibleSize.width / visibleSize.height;
    if (visibleRotate > designRotate) {
        return 'mobile';
    } else {
        return 'pad';
    }
},
复制代码

尾言

目前就这么多,以后有再添加

分类:
前端
标签: