LayaAir 性能统计面板 laya.utils.Stat

た入场券 2022-03-30 13:43 427阅读 0赞

**目录**

性能统计 Stat

编码示例

FPS 帧率/帧率限制

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

# 性能统计 Stat #

1、制作游戏过程中，掌握游戏以及引擎的优化技巧还是非常有必要的，要了解引擎的性能，首先要看懂性能统计面板。

2、LayaAir 引擎内置的性能统计面板可实时检测当前性能，在代码中输入`Laya.Stat.show(0,0);` 即可调出性能统计面板。

<table> 
 <tbody> 
  <tr> 
   <td style="width:162px;"><strong>Package</strong></td> 
   <td style="width:687px;">laya.utils</td> 
  </tr> 
  <tr> 
   <td style="width:162px;"><strong>类</strong></td> 
   <td style="width:687px;">public class Stat</td> 
  </tr> 
  <tr> 
   <td style="width:162px;"><strong>Inheritance</strong></td> 
   <td style="width:687px;">Stat <img alt="Inheritance" src="https://layaair.ldc.layabox.com/api/images/inherit-arrow.gif"> Object</td> 
  </tr> 
 </tbody> 
</table>

3、Stat 是一个性能统计面板，可以实时更新相关的性能参数。

4、参与统计的性能参数如下（所有参数都是每大约1秒进行更新）：

> 1）FPS(Canvas)/FPS(WebGL)：Canvas 模式或者 WebGL 模式下的帧频(率)，也就是每秒显示的帧数，值越高、越稳定，感觉越流畅；
> 
> 2、Sprite：统计所有渲染节点（包括容器）数量，它的大小会影响引擎进行节点遍历、数据组织和渲染的效率。其值越小，游戏运行效率越高；因此建议在项目设计的时候，尽可能的减少渲染节点
> 
> 3、DrawCall：此值是决定性能的重要指标，其值越小，游戏运行效率越高。Canvas模式下表示每大约1秒的图像绘制次数；WebGL模式下表示每大约1秒的渲染提交批次，每次准备数据并通知GPU渲染绘制的过程称为1次DrawCall，在每次DrawCall中除了在通知GPU的渲染上比较耗时之外，切换材质与shader（着色器）也是非常耗时的操作； **建议开发者尽量限制在100之下。**
> 
> 4、CurMem：Canvas模式下，表示内存占用大小，值越小越好，过高会导致游戏闪退；WebGL模式下，表示内存与显存的占用，值越小越好；
> 
> 5、Shader：是 WebGL 模式独有的性能指标，表示每大约1秒 Shader 提交次数，值越小越好；
> 
> 6、Canvas：由三个数值组成，只有设置 CacheAs 后才会有值，默认为0/0/0。从左到右数值的意义分别为：每帧重绘的画布数量 / 缓存类型为"normal"类型的画布数量 / 缓存类型为"bitmap"类型的画布数量。

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.utils.Stat#enable%28%29" rel="nofollow">enable</a>():void&nbsp; &nbsp;[static] 激活性能统计</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.utils.Stat#hide%28%29" rel="nofollow">hide</a>():void&nbsp; &nbsp;[static] 隐藏性能统计信息。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.utils.Stat#show%28%29" rel="nofollow">show</a>(x:Number = 0, y:Number = 0):void&nbsp; &nbsp;[static] 显示性能统计信息。</p> </td> 
  </tr> 
 </tbody> 
</table>

更多 API 可以参考官网：[https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Stat][https_layaair.ldc.layabox.com_api_category_Core_class_laya.utils.Stat]

# 编码示例 #

代码中输入`Laya.Stat.show(0,0);` 即可调出性能统计面板。

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
    	//调用性能统计面板方法，(0,0)为面板位置坐标
        Laya.Stat.show(0,0);
    
    	//btnWidth、btnHeight 分别为按钮的宽与高
    	var btnWidth = 150;
    	var btnHeight = 50;
     
    	var btn_1= addButton("音效1","left");
    	btn_1.pos(100,20);
     
    	var btn_2= addButton("音效2","center");
    	btn_2.pos(300,20);
     
    	var btn_3= addButton("音效3","right");
    	btn_3.pos(500,20);
     
    	//添加按钮——原理就是先绘制一个图形(如矩形)，然后再绘制文字
    	function addButton(showText,textAlign){
    		let button = new Laya.Sprite();
    		button.size(btnWidth,btnHeight);//设置精灵/画布/按钮尺寸
    		//绘制一个矩形，起点为(0,0)，这样方便添加文字时对齐文本，可以理解为图像相对的是精灵的原点，但是精灵相对是舞台
    		//所以后期只要改变精灵的x,y属性即可放置到舞台的任意位置
    		button.graphics.drawRect(0,0,btnWidth,btnHeight,"#0078D7");
    		
    		//在画布上继续绘制文本，绘制的起始x位置是画布长度的一半，起始y位置为10，设置字体及大小，设置颜色、对其方式
    		button.graphics.fillText(showText,btnWidth/2,10,"25px Arial","#fff",textAlign);
     
    		Laya.stage.addChild(button);
    		return button;
    	}
    })();

![20190106133421776.gif][]

![2019010613365987.gif][]

如上所示分别是 PC 与 手机端运行效果。

# FPS 帧率/帧率限制 #

1、FPS是每秒传输帧数(Frames Per Second)的缩写。假设游戏的帧速为60FPS，表明游戏运行时每个帧的执行时间为1/60 秒。帧速值越高，视觉上感觉越流畅。

2、当前PC与手机等设备的满帧是60帧，但某些游戏对画面的流畅度要求并不高，可以采用引擎的帧速限制。laya.display.Stage 舞台类中的 [frameRate ][frameRate]属性可以指定帧率类型

3、有时并不需要让游戏以60FPS的速率执行，因为30FPS已经能够满足多数情况下人类视觉的响应，但是鼠标交互时，30FPS可能会造成画面的不连贯，于是Stage.FRAME\_MOUSE应运而生。

4、frameRate 支持三种模式：fast——60帧(默认)，slow——30帧，mouse——30帧（鼠标活动后会自动加速到60，鼠标不动2秒后降低为30帧，以节省消耗），sleep-1帧。同时提供了对应的常量：

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#FRAME_FAST" rel="nofollow">FRAME_FAST</a> : String = fast ，[static] 全速模式，以60的帧率运行。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#FRAME_MOUSE" rel="nofollow">FRAME_MOUSE</a> : String = mouse ，[static] 自动模式，以30的帧率运行，但鼠标活动后会自动加速到60，鼠标不动2秒后降低为30帧，以节省消耗。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#FRAME_SLEEP" rel="nofollow">FRAME_SLEEP</a> : String = sleep ，[static] 休眠模式，以1的帧率运行</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#FRAME_SLOW" rel="nofollow">FRAME_SLOW</a> : String = slow ，[static] 慢速模式，以30的帧率运行。</td> 
  </tr> 
 </tbody> 
</table>

//使用立即执行函数方式
    (function () {
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750, Laya.WebGL);
        //调用性能统计面板方法，(0,0)为面板位置坐标
        Laya.Stat.show(0, 0);
    
        /**当游戏流畅度要求不高时，可以使用慢速模式，以最高30帧的频率进行渲染
         * Laya.Stage.FRAME_SLOW 等价于 "slow"*/
        Laya.stage.frameRate = Laya.Stage.FRAME_SLOW;
    
        //btnWidth、btnHeight 分别为按钮的宽与高
        var btnWidth = 150;
        var btnHeight = 50;
    
        var btn_3 = addButton("音效3", "right");
        btn_3.pos(300, 20);
    
        //添加按钮——原理就是先绘制一个图形(如矩形)，然后再绘制文字
        function addButton(showText, textAlign) {
            let button = new Laya.Sprite();
            button.size(btnWidth, btnHeight);//设置精灵/画布/按钮尺寸
            //绘制一个矩形，起点为(0,0)，这样方便添加文字时对齐文本，可以理解为图像相对的是精灵的原点，但是精灵相对是舞台
            //所以后期只要改变精灵的x,y属性即可放置到舞台的任意位置
            button.graphics.drawRect(0, 0, btnWidth, btnHeight, "#0078D7");
    
            //在画布上继续绘制文本，绘制的起始x位置是画布长度的一半，起始y位置为10，设置字体及大小，设置颜色、对其方式
            button.graphics.fillText(showText, btnWidth / 2, 10, "25px Arial", "#fff", textAlign);
    
            Laya.stage.addChild(button);
            return button;
        }
    })();

![20190106135411604.gif][]

4、由于实际运行环境是在浏览器中，所以性能还取决于JavaScript解释器的效率，因此，同一款游戏的FPS值在不同的浏览器中可能会存在差异。这部分不是开发者能够决定的，开发者能作的是尽可能使用好引擎及优化项目，争取在低端设备或低性能浏览器中，提升FPS帧速。

5、LayaAir引擎支持Canvas与WebGL两种渲染模式，因此在看FPS帧速时要注意是在哪种模式下，`FPS(Canvas)`说明是Canvas模式下的帧速，`FPS(WebGL) `说明是WebGL模式下的帧速。

6、FPS的第一个黄色值`60`为当前的**FPS帧速**，越高越好，第二个黄色值`16`为**每帧渲染所消耗的时间**，单位为毫秒，这个值越小越好

官网文档：[https://ldc.layabox.com/doc/?nav=zh-js-3-2-0][https_ldc.layabox.com_doc_nav_zh-js-3-2-0]

[https_layaair.ldc.layabox.com_api_category_Core_class_laya.utils.Stat]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Stat
[20190106133421776.gif]: /images/20220330/8ed1fc8d2c4145978cb690d476f355bb.png
[2019010613365987.gif]: /images/20220330/7ef2b8934f14479abe29cc3dce5ff2e1.png
[frameRate]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Stage#frameRate
[20190106135411604.gif]: /images/20220330/8fb58416ecb740718bd2acf5dc58d55e.png
[https_ldc.layabox.com_doc_nav_zh-js-3-2-0]: https://ldc.layabox.com/doc/?nav=zh-js-3-2-0