LayaAir cacheAs 缓存与 visible 隐藏

港控/mmm° 2022-03-27 06:08 339阅读 0赞

**目录**

cacheAs 与 visible

编码示例

优化 DrawCall 与 Canvas

CacheAs 静态缓存优化

--------------------

优化 Sprite 的常用方式如下：

> 1）尽量减少不必要的层次嵌套，减少Sprite数量
> 
> 2）非可见区域的对象尽量从显示列表移除或者设置 visible=false
> 
> 3）对于容器内有大量静态内容或者不经常变化的内容（比如按钮），可以对整个容器设置cacheAs属性，能大量减少 Sprite的数量，显著提高性能。如果有动态内容，最好和静态内容分开，以便只缓存静态内容。
> 
> 4）Panel内，会针对panel区域外的直接子对象（子对象的子对象判断不了）进行不渲染处理，超出panel区域的子对象是不产生消耗的。

本文主要介绍使用 visible 与 cacheAs ，这两个属性都来自[ laya.display.Sprite 类。][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;

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

设置 cacheAs 后，还可以设置 [staticCache][]=true 以阻止自动更新缓存，同时可以手动调用 [reCache ][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 的数量。

![20190112125422935.gif][]

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

![20190112124808882.gif][]

# **优化 DrawCall 与 Canvas** #

**优化 DrawCall ：**

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

**优化 Canvas：**

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

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

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

# CacheAs 静态缓存优化 #

1、当cacheAs 属性值为 ”normal”时，Canvas 下进行画布缓存，webgl 模式下进行命令缓存。该模式性能优化中等，它能减少每帧渲染的节点数，但不会减少 DrawCall 数和 Shader数。

2、当cacheAs属性值为“bitmap”模式时，Sprite节点数、DrawCall、Shader 数都会下降。Canvas下依然是画布缓存，在webgl模式下使用renderTarget缓存，相当于缓存成静态位图提交显卡渲染。这里需要注意的是，webGL下renderTarget缓存模式有2048大小限制，超出2048会额外增加内存开销。另外，不断重绘时开销也比较大，但是会减少drawcall，渲染性能最高。

3、对于一些大型的游戏，节点数超过了50的UI不在少数，采用cacheAs缓存技术以后，渲染性能会提高很多倍。

**如何选择缓存优化：**

> 1、当使用bitmap位图缓存模式后，在CurMem内存数值上有所增加，由之前的17.22M增加到了18.27M，因为缓存位图时消耗了部分内存，但只要UI的宽高不是很大，增加的内存也不会太大。
> 
> 2、最需要注意的是UI是否会频繁的刷新，如果很频繁，CPU的损耗会很大，因为缓存位图时子对象一旦发生改变，那么引擎会自动重新缓存位图，缓存位图的过程会消耗CPU。此时选择使用cacheAs的normal还是bitmap模式，或者不使用cacheAs，都需要对内存的增加与CPU消耗作为重点考量因素。

**低端机型的配置因素：**

> 1、项目中通常会考虑到手机配置，大多数情况是游戏适应的机型越多越好，游戏测试员也会用高中低端配置的手机去测试，然后提供优化建议。那么在使用cacheAs的时候，也需要参考手机的内存、CPU大小。
> 
> 2、对于一些低端机来说，CPU与内存不高，如果为了提高渲染性能使用了cacheAs，有可能就会出现问题。这时开发者们就需要做取舍了，选择要性能还是要游戏机型的广度，或者取中。如果选择适应更多的低端机型，那么需要反复去测试，是否使用cacheAs，还要对比normal与bitmap模式哪种更适合，在优化性能的情况下尽量减少CPU和内存损耗。

**如下情况下不能使用cacheAs：**

> 1、当对象非常简单时，比如一个字或者一个图片，设置cacheAs不但不提高性能，反而会损失性能。
> 
> 2、容器内有经常变化的内容，比如容器内有一个动画或者倒计时，如果再对这个容器设置cacheAs，会损失性能。
> 
> 3、可以通过查看性能统计面板中的Canvas统计信息第一个值，如果一直在变化，说明一直在重绘，在这种情况下不能使用cacheAs。

![20190119142657698.gif][]

如上所示，当标签处于动态的时候，不适宜为父容器 Sprite 设置 cacheAs，创建完成后再为父容器设置 cacheAs，代码如下：

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板 */
            this.setup();
            //设置标签的颜色数组
            this.dataColor = ["#A57676", "#007ACC", "#A0E272", "#09263B", "#FF3228", "#48C1AD", "#2789C9"];
        }
    
        setup() {
            //设置一个精灵，用于后面添加label，最后将精灵设置 cacheAs
            var sp = new Laya.Sprite();
            Laya.stage.addChild(sp);
            var count = 0;//创建标签时计数
            Laya.timer.loop(20, this, function () {
                var label_info = this.createLabel();//创建标签
                //设置标签的坐标
                label_info.x = Math.round(Math.random() * Laya.stage.width - label_info.width);
                label_info.y = Math.round(Math.random() * Laya.stage.height - label_info.height);
                //随机设置标签颜色
                label_info.color = this.dataColor[Math.round(Math.random() * 7)];
                sp.addChild(label_info);//将标签添加到精灵中
                if (++count >= 1000) {
                    //当创建标签个数超过1000个时，清除定时器不再创建
                    Laya.timer.clearAll(this);
                    /**将整个精灵缓存为图片,注意是为 精灵设置，而不是具体的标签*/
                    sp.cacheAs = "bitmap";
                }
            });
        }
    
        //创建一个标签
        createLabel() {
            var text = Math.round(Math.random() * 100);
            var label_info = new Laya.Label(text);
            label_info.fontSize = 20;
            label_info.color = "#fff";
            return label_info;
        }
    }
    new MyClass();//运行本类

[https://layaair.ldc.layabox.com/demo2/?language=ch&category=2d&group=Sprite&name=Cache][https_layaair.ldc.layabox.com_demo2_language_ch_category_2d_group_Sprite_name_Cache]

[laya.display.Sprite]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite
[staticCache]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite#staticCache
[reCache]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite#reCache%28%29
[20190112125422935.gif]: /images/20220327/47430194fb4d4bd88fc2143fefd19ff0.png
[20190112124808882.gif]: /images/20220327/3a78dc90eab448939c5fc2bb1fede835.png
[20190119142657698.gif]: /images/20220327/cc6cb0623bee446881aad52bf83e48b1.png
[https_layaair.ldc.layabox.com_demo2_language_ch_category_2d_group_Sprite_name_Cache]: https://layaair.ldc.layabox.com/demo2/?language=ch&category=2d&group=Sprite&name=Cache