优化 Sprite 的常用方式如下：

1）尽量减少不必要的层次嵌套，减少Sprite数量

2）非可见区域的对象尽量从显示列表移除或者设置 visible=false

3）对于容器内有大量静态内容或者不经常变化的内容（比如按钮），可以对整个容器设置cacheAs属性，能大量减少 Sprite的数量，显著提高性能。如果有动态内容，最好和静态内容分开，以便只缓存静态内容。

4）Panel内，会针对panel区域外的直接子对象（子对象的子对象判断不了）进行不渲染处理，超出panel区域的子对象是不产生消耗的。

本文主要介绍使用 visible 与 cacheAs ，这两个属性都来自 laya.display.Sprite 类。

cacheAs 与 visible

/**
* 指定显示对象是否缓存为静态图像，cacheAs时，子对象发生变化，会自动重新缓存，同时也可以手动调用reCache方法更新缓存。
* 建议把不经常变化的“复杂内容”缓存为静态图像，能极大提高渲染性能。cacheAs有"none"，"normal"和"bitmap"三个值可选。
* <li>默认为"none"，不做任何缓存。</li>
* <li>当值为"normal"时，canvas模式下进行画布缓存，webgl模式下进行命令缓存。</li>
* <li>当值为"bitmap"时，canvas模式下进行依然是画布缓存，webgl模式下使用renderTarget缓存。</li>
* webgl下renderTarget缓存模式缺点：会额外创建renderTarget对象，增加内存开销，缓存面积有最大2048限制，不断重绘时会增加CPU开销。优点：大幅减少drawcall，渲染性能最高。
* webgl下命令缓存模式缺点：只会减少节点遍历及命令组织，不会减少drawcall数，性能中等。优点：没有额外内存开销，无需renderTarget支持。
*/
cacheAs: string;

扫描二维码关注公众号，回复： 4886408 查看本文章

/**表示是否可见，默认为true。如果设置不可见，节点将不被渲染。*/
visible: boolean;

设置 cacheAs 后，还可以设置 staticCache=true 以阻止自动更新缓存，同时可以手动调用 reCache 方法更新缓存。

cacheAs 主要通过两方面提升性能：一是减少节点遍历和顶点计算；二是减少drawCall。善用cacheAs将是引擎优化性能的利器。

编码示例

class MyButton {
    constructor() {
        Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
        Laya.Stat.show(0, 0);/**显示性能面板 */
        this.btn_width = 150;//按钮的宽度
        this.btn_height = 40;//按钮的高度

        //使用引擎默认提供的按钮组件
        Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, this.createButton));
    }

    /**创建 按钮 */
    createButton() {
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {
                var btn = new Laya.Button("comp/button.png");//创建一个 Button 实例，使用引擎默认提供的按钮组件
                btn.label = "媛媛" + (i + 1) + "" + (j + 1);//按钮上显示的文本内容
                btn.labelSize = 20;//按钮文本标签的字体大小
                btn.width = this.btn_width;//设置按钮的宽度
                btn.height = this.btn_height;//设置按钮的高度
                btn.pos(i * this.btn_width + ((i + 1) * 20), (j * this.btn_height) + ((j + 1) * 10));//按钮显示的位置
                Laya.stage.addChild(btn);//将Button添加到舞台上

                //将整个舞台设置缓存为静态图像，cacheAs="normal"时，canvas模式下进行画布缓存，webgl模式下进行命令缓存
                //注意 cacheAs 静态缓存的是容器
                Laya.stage.cacheAs = "normal";
                //为按钮注册单击事件，同时将 button 传递过去，这样单击触发的时候在回调函数中好做处理
                btn.on(Laya.Event.CLICK, this, this.clickButton, [btn]);
            }
        }
    }

    //按钮点击之后的回调函数
    clickButton(button) {
        console.log("当前点击：" + button.label);
        //将所有按钮先设置为可见
        for (var i = 0; i < Laya.stage.numChildren; i++) {
            /**visible：表示是否可见，默认为true。如果设置不可见，节点将不被渲染 */
            Laya.stage.getChildAt(i).visible = true;
        }
        button.visible = false;//再将当前点击的按钮设置为不可见
    }
}
new MyButton();//运行本类

未设置 Laya.stage.cacheAs = "normal"; 静态缓存时结果如下，左上角可以看到此时 Sprite 的数量。

设置了 Laya.stage.cacheAs = "normal"; 静态缓存时结果如下，可以看到此时 Sprite 的数量显著减少。

优化 DrawCall 与 Canvas

优化 DrawCall ：

对复杂静态内容设置cacheAs，能大量减少DrawCall，使用好cacheAs是游戏优化的关键。
尽量保证同图集的图片渲染顺序是挨着的，如果不同图集交叉渲染，会增加DrawCall数量。
尽量保证同一个面板中的所有资源用一个图集，这样能减少提交批次。

优化 Canvas：

在对Canvas优化时，我们需要注意，在以下场合不要使用cacheAs：

对象非常简单，比如一个字或者一个图片，设置cacheAs=”bitmap”不但不提高性能，反而会损失性能。
容器内有经常变化的内容，比如容器内有一个动画或者倒计时，如果再对这个容器设置cacheAs=”bitmap”，会损失性能。

可以通过查看Canvas统计信息的第一个值，判断是否一直在刷新Canvas缓存。

CacheAs 静态缓存优化

cacheAs 为“normal”模式时，DrawCall 与 Shader 未变，Sprite节点数由23降低到了8，节点渲染性能上优化了近

LayaAir cacheAs 缓存与 visible 隐藏

cacheAs 与 visible

编码示例

优化 DrawCall 与 Canvas

CacheAs 静态缓存优化

猜你喜欢