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

目录

性能统计 Stat

编码示例

FPS 帧率/帧率限制

---

性能统计 Stat

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

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

Package	laya.utils
类	public class Stat
Inheritance	Stat Object

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"类型的画布数量。

enable():void   [static] 激活性能统计

hide():void   [static] 隐藏性能统计信息。

show(x:Number = 0, y:Number = 0):void   [static] 显示性能统计信息。

更多 API 可以参考官网：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;
	}
})();

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

FPS 帧率/帧率限制

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

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

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

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

FRAME_FAST : String = fast ，[static] 全速模式，以60的帧率运行。

FRAME_MOUSE : String = mouse ，[static] 自动模式，以30的帧率运行，但鼠标活动后会自动加速到60，鼠标不动2秒后降低为30帧，以节省消耗。

FRAME_SLEEP : String = sleep ，[static] 休眠模式，以1的帧率运行

FRAME_SLOW : String = slow ，[static] 慢速模式，以30的帧率运行。

//使用立即执行函数方式
(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;
    }
})();

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