性能统计 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;}
})();