Laya优化

澳门新葡亰网址 6

HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下,对性能的需求显得更为重要,而HTML5性能优化前与优化后有着极大的差别,如何优化才能提高性能,对此熟知的人很少。本文以LayaAir引擎为例,通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。

部分内容参考了[大天使H5主程死肥仔在LAYA沙龙的演讲PPT],感谢主程陈策的无私分享!

主题包括:

一、分析工具

1.laya.utils.Stat性能统计面板介绍
2.使用chrome的性能分析器

  • 代码执行基本原理
  • 基准测试
  • 内存优化
  • 图形渲染性能
  • 减少CPU使用量
  • 其他优化策略
二、内存优化

参考内存优化方式
1.对象池Laya.utils.Pool
当对象设置为null,不会立即将其从内存中删除。只有系统认为内存足够低时,垃圾回收器才会运行。内存分配(而不是对象删除)会触发垃圾回收。
垃圾回收期间可能占用大量CPU并影响性能。通过重用对象,尝试限制使用垃圾回收。此外,尽可能将引用设置为null,以便垃圾回收器用较少时间来查找对象。有时(比如两个对象相互引用),无法同时设置两个引用为null,垃圾回收器将扫描无法被访问到的对象,并将其清除,这会比引用计数更消耗性能。
2.Handler.create使用了内置对象池管理,因此在使用Handler对象时可使用Handler.create来创建回调处理器。
3.从内存中清理资源
关于clearRes和clearTextureRes,可以参考Texture资源销毁和Laya
Image graphics
比如UI上的资源,我是做成界面关闭一段时间后,该界面没有被再次打开,说明这个界面不是个需求常被打开的界面,就可以删除他的资源了。但资源有可能是多界面共用的,所以我还会判断是否被其他界面使用。没有其他界面使用的,就可以删除了。
UI上的动画,动画是多帧的,占的资源会比较多。而且动画一般是做提示作用,显示一次会再打开该界面,也许就不需要该动画了。所以我是对动画处理成关闭界面后,如果没有其他界面正在使用该资源,就立即删除该资源。
对于怪和其他玩家,原来我是做切地图的时候才清除的,因为我们一张地图里的怪的种类是有限的。但后来内存还是太大了,IOS有点顶不住,所以后来改成每个怪被杀后,判断它的资源有没有其他怪也正在使用,没有的话就删除。基本上就是这一波同种类的怪全被杀掉后,就会清除资源。这里说下,这些资源除了图片外,还包括声音
角色是游戏是主角,他们的动作会比较多,每个动作都会是一份资源。如果按怪和其他玩家的资源删除规则肯定是不科学的。我是给每个角色做了资源的列表,但某个动作的资源一段时间没有使用,说明这个动作不是常播放的动作,就可以删除了。技能动画,技能本质上其实和主角的动作资源是类似的,所以也是记录一段时间内没有再次被使用,就会被删除。
把不用的资源都删除了,内存占用还会高,那最直接的方法就是减小资源的大小。比如我们可以把某个图缩小,再在程序里把他放大,这样内存占用会小,表现上会差不多,就是图有可能会糊一些。
对于主角,他是游戏视觉的中心,玩家会一起盯着他,所以我不对主角的资源进行缩小。缩小会影响到游戏的品质。对于游戏里的怪,他们不是视觉的中心,我们把他缩小到原图的67%,再在游戏里放大,为什么是67%呢,因为这样的话在程序里scale设置为1.5就是原设计的尺寸了。
技能一般会比较大,但每一帧的变化也大,在游戏里一闪而过,玩家还没看清会一闪而过了,而且一般同一个技能的颜色也会比较统一,所以可以缩得更小一些,按技能的资源可以缩到一半甚至四分之一。比如,技能=
25% or 50%,武器= 67%,翅膀= 67%

4.关于滤镜、遮罩
尝试尽量减少使用滤镜效果。将滤镜(BlurFilter和GlowFilter)应用于显示对象时,运行时将在内存中创建两张位图。其中每个位图的大小与显示对象相同。将第一个位图创建为显示对象的栅格化版本,然后用于生成应用滤镜的另一个位图

澳门新葡亰网址 1

应用滤镜时内存中的两个位图

当修改滤镜的某个属性或者显示对象时,内存中的两个位图都将更新以创建生成的位图,这两个位图可能会占用大量内存。此外,此过程涉及CPU计算,动态更新时将会降低性能。
ColorFiter在Canvas渲染下需要计算每个像素点,而在WebGL下的GPU消耗可以忽略不计。
最佳的做法是,尽可能使用图像创作工具创建的位图来模拟滤镜。避免在运行时中创建动态位图,可以帮助减少CPU或GPU负载。特别是一张应用了滤镜并且不会在修改的图像。
5.图片尺寸最好是2的整数幂

澳门新葡亰网址 2

image.png

这个按钮所用的资源是这样的,它的大小的是138×305。在手机里,图片上传到显存后,宽高会变成2的整数次幂,看图片上的辅助线,一个格子就是256×256的,所以这张图片就会加大成256×512,如果我把图片缩小成右边这个大小,那在显存里,就是128×256,比原来小了3/4。在这里,目的就是把正好大于2的整数次幂的图,缩小一下变成2的整数次幂以内,可以少很多显存。同样的,一个图集,也有可能会有这样的情况,也可以对里边的一些散图缩小,或者换到别的图集的方式让他保持在2的整数次幂内。

6.不在显示区域内的对象不加载

澳门新葡亰网址 3

image.png

这是我们游戏的主城地图,中间红色框的部分是游戏显示的区域,黄色的是显示区域,也就是角色,NPC等对象在黄色区域内才会显示,在外边的,就会不加载不显示,这里不单单是要记录Visible为false,还要设置为不加载他当前的动作。为什么黄色区域会大于游戏显示区域呢。因为人物的位置一般是脚下的一个点,这个点出到屏幕外时,他可能还有一半的身体还是需要显示的。所以会留出一部分区域。细心的话你们可以看上边的会留得比较小,因为是人物脚底为中心,所以肢底以下还会显示的部分会比较小。

第1节:代码执行基本原理

LayaAir引擎支持AS3、TypeScript、JavaScript三种语言开发,然而无论是采用哪种开发语言,最终执行的都是JavaScript代码。所有看到的画面都是通过引擎绘制出来的,更新频率取决于开发者指定的FPS,例如指定帧频率为60FPS,则运行时每个帧的执行时间为六十分之一秒,所以帧速越高,视觉上感觉越流畅,60帧是满帧。

由于实际运行环境是在浏览器中,因此性能还取决于JavaScript解释器的效率,指定的FPS帧速在低性能解释器中可能不会达到,所以这部分不是开发者能够决定的,开发者能作的是尽可能通过优化,在低端设备或低性能浏览器中,提升FPS帧速。

LayaAir引擎在每帧都会重绘,在性能优化时,除了关注每帧执行逻辑代码带来的CPU消耗,还需要注意每帧调用绘图指令的数量以及GPU的纹理提交次数。

三、渲染优化

参考图形渲染性能
1.优化Sprite

  • 尽量减少不必要的层次嵌套,减少Sprite数量。
  • 非可见区域的对象尽量从显示列表移除或者设置visible=false。当我们打开一个界面的时候,玩家的视觉焦点会集中在打开的界面上,对于界面旁边的东西,并不会太去关注了。所以,大家有没有发现场景里的人物已经不见了?在弹出界面的时候,把人物,技能特效等隐藏掉,可以减少drawcall。这里要注意的是,隐藏只需要把角色的visable设置为false就可以达到减少drawcall。当然对于已经隐藏掉的人,不再去加载他切换动作的新动作资源,也是一个优化点
  • 对于容器内有大量静态内容或者不经常变化的内容(比如按钮),可以对整个容器设置cacheAs属性,能大量减少Sprite的数量,显著提高性能。如果有动态内容,最好和静态内容分开,以便只缓存静态内容。
  • Panel内,会针对panel区域外的直接子对象(子对象的子对象判断不了)进行不渲染处理,超出panel区域的子对象是不产生消耗的。

2.优化DrawCall

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

用LayaAir编辑好UI界面,可以在层级窗体里看到界面里的子对象,大家注意看每一个子对象前边,都有一个小圆点,这个圆点的颜色代表了他来自哪个图集,相同颜色的圆点代表是同一个图集。对于渲染来说,连续渲染相同图集里的图,只会调用一次drawcall,所以在制作界面的时候,在不影响界面的情况下,把界面里各元件的层级调整一下,可以达到减少drawcall的目的。

澳门新葡亰网址 4

左边6个drawcall,右边只有3个

这里要说一下,程序字在游戏里,是会单个字生成图片绘制在动态图集里,所以程序字是同一个图集的。把所有的文字统一放在界面最上边也就是这个列表的最下边,就可以减少drawcall。当然,这个操作不是可以想移就移的,要看要移动的子元件之前是否有前后关系

角色一般都会有一个影子,在我们游戏里影子不是做在角色的图片上的,而是单独立出来的一张图。为了方便操作,我们一般会把人物的图片和影子的图片放到一个容器里,每一个容器就是一个角色。那场景里有两个角色的时候,那这几个图片的顺序就是:影子、角色A、影子、角色B。那就是四个drawcall,如果有N个角色,就有N*2个Drawcall。两个角色的影子是同一张图,一定是同一个图集的。那我们就可以优化下。如果把所有角色的影子放在一个容器里,这个容器在所有角色的下边。那顺序就是:影子、影子、角色A、角色B,那就是三个drawcall。如果是N个角色,就是N+1个drawcall。是不是就可以减少Drawcall了呢。当然,如果要这么做,逻辑就要改得比较复杂,因为要在移动人物的时候,隐藏人物的时候,人物变成半透明的时候,移除人物的时候,都要同时控制影子。我们可以在角色类里加入这些支持。同理,角色头上的名字、血条都要单独放在一层里。

3.关于CacheAs
参考CacheAs静态缓存优化
cacheAs主要通过两方面提升性能。一是减少节点遍历和顶点计算;二是减少drawCall。善用cacheAs将是引擎优化性能的利器。设置cacheAs后,还可以设置staticCache=true以阻止自动更新缓存,同时可以手动调用reCache方法更新缓存。
在对Canvas优化时,我们需要注意,在以下场合不要使用cacheAs:

  • 对象非常简单,比如一个字或者一个图片,设置cacheAs=”bitmap”不但不提高性能,反而会损失性能。
  • 容器内有经常变化的内容,比如容器内有一个动画或者倒计时,如果再对这个容器设置cacheAs=”bitmap”,会损失性能。可以通过查看Canvas统计信息的第一个值,判断是否一直在刷新Canvas缓存。

4.文字描边
在运行时,设置了描边的文本比没有描边的文本多调用一次绘图指令。此时,文本对CPU的使用量和文本的数量成正比。因此,尽量使用替代方案来完成同样的需求。
对于几乎不变动的文本内容,可以使用cacheAs降低性能消耗。
对于内容经常变动,但是使用的字符数量较少的文本域,可以选择使用位图字体。

5.Text.changeText会直接修改绘图指令中该文本绘制的最后一条指令,这种前面的绘图指令依旧存在的行为会导致changeText只使用于以下情况:
文本始终只有一行。
文本的样式始终不变(颜色、粗细、斜体、对齐等等)。

第2节:基准测试

LayaAir引擎内置的性能统计工具可用于基准测试,实时检测当前性能。开发者可以使用laya.utils.Stat类,通过Stat.show()
显示统计面板。具体编写代码如下例所示:

Stat.show(0,0); //AS3的面板调用写法       
Laya.Stat.show(0,0); //TS与JS的面板调用写法

Canvas渲染的统计信息:

澳门新葡亰网址 5

WebGL渲染的统计信息:

澳门新葡亰网址 6

统计参数的意义:

FPS:

每秒呈现的帧数(数字越高越好)。
使用canvas渲染时,描述字段显示为FPS(Canvas),使用WebGL渲染时,描述字段显示为FPS(WebGL)。

Sprite:

渲染节点数量(数字越低越好)。
Sprite统计所有渲染节点(包括容器),这个数字的大小会影响引擎节点遍历,数据组织和渲染的次数。

DrawCall:

DrawCall在canvas和WebGL渲染下代表不同的意义(越少越好)。
Canvas下表示每帧的绘制次数,包括图片、文字、矢量图。尽量限制在100之下。
WebGL下表示渲染提交批次,每次准备数据并通知GPU渲染绘制的过程称为1次DrawCall,在每1次DrawCall中除了在通知GPU的渲染上比较耗时之外,切换材质与shader也是非常耗时的操作。
DrawCall的次数是决定性能的重要指标,尽量限制在100之下。

Canvas:

三个数值 —— 每帧重绘的画布数量 / 缓存类型为“normal”类型的画布数量 /
缓存类型为“bitmap”类型的画布数量”。
CurMem:仅限WebGL渲染,表示内存与显存占用(越低越好)。
Shader:仅限WebGL渲染,表示每帧Shader提交次数。

无论是Canvas模式还是WebGL模式,我们都需要重点关注DrawCall,Sprite,Canvas这三个参数,然后针对性地进行优化。(参见“图形渲染性能”)

四、CPU优化

参考减少CPU使用量
1.减少动态属性查找
JavaScript中任何对象都是动态的,你可以任意地添加属性。然而,在大量的属性里查找某属性可能很耗时。如果需要频繁使用某个属性值,可以使用局部变量来保存它:

private function foo():void
{
    var prop = target.prop;
    // 使用prop
    process1(prop);
    process2(prop);
    process3(prop);
}

另外,项目中尽量减少try catch的使用,被try catch的函数执行会变得非常慢

2.计时器里尽可能不要在循环里创建对象及复杂计算
​LayaAir提供两种计时器循环来执行代码块。
Laya.timer.frameLoop执行频率依赖于帧频率,可通过Stat.FPS查看当前帧频。
Laya.timer.loop执行频率依赖于参数指定时间。

Laya.timer.frameLoop(1, this, animateFrameRateBased);
Laya.stage.on("click", this, dispose);
private function dispose():void 
{
    Laya.timer.clear(this, animateFrameRateBased);
}

​当一个对象的生命周期结束时,记得清除其内部的Timer

3.尽量少用autoSize与getBounds
public function getBounds():Rectangle
获取本对象在父容器坐标系的矩形显示区域。计算量较大,尽量少用,如果需要频繁使用,可以通过手动设置setBounds来缓存自身边界信息,从而避免比较消耗性能的计算

var sp:Sprite = new Sprite();
sp.autoSize = true;
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
Laya.stage.addChild(sp);

autoSize在获取宽高并且显示列表的状态发生改变时会重新计算(autoSize通过getBoudns计算宽高)。所以对拥有大量子对象的容器应用autoSize是不可取的。如果设置了size,autoSize将不起效。

Laya.loader.load("res/apes/monkey2.png", Handler.create(this, function()
{
    var texture:Texture = Laya.loader.getRes("res/apes/monkey2.png");
    var sp:Spirte = new Sprite();
    sp.graphics.drawTexture(texture, 0, 0);
    sp.size(texture.width, texture.height);
    Laya.stage.addChild(sp);
}));

使用Graphics.drawTexture并不会自动设置容器的宽高,但是可以使用Texture的宽高赋予容器。毋庸置疑,这是最高效的方式。

4.根据活动状态改变帧频
帧频有三种模式,
Stage.FRAME_SLOW维持FPS在30;
Stage.FRAME_FAST维持FPS在60;
Stage.FRAME_MOUSE则选择性维持FPS在30或60帧。
​有时并不需要让游戏以60FPS的速率执行,因为30FPS已经能够满足多数情况下人类视觉的响应,但是鼠标交互时,30FPS可能会造成画面的不连贯,于是Stage.FRAME_MOUSE应运而生。

5.使用callLater
callLater使代码块延迟至本帧渲染前执行。如果当前的操作频繁改变某对象的状态,此时可以考虑使用callLater,以减少重复计算。
考虑一个图形,对它设置任何改变外观的属性都将导致图形重绘:

var rotation:int = 0,
scale:int = 1,
position:int = 0;
private function setRotation(value):void
{
    this.rotation = value;
    update();
}
private function setScale(value):void
{
    this.scale = value;
    update();
}
private function setPosition(value):void
{
    this.position = value;
    update();
}
public function update()
{
    console.log('rotation: ' + this.rotation + 
    'tscale: ' + this.scale + 'tposition: ' + position);
}

setRotation(90);
setScale(2);
setPosition(30);

控制台的打印结果是:
rotation: 90scale: 1position: 0
rotation: 90scale: 2position: 0
rotation: 90scale: 2position: 30
update被调用了三次,并且最后的结果是正确的,但是前面两次调用都是不需要的。
​尝试将三处update改为:
Laya.timer.callLater(this, update);
​此时,update只会调用一次,并且是我们想要的结果。

6.图片/图集加载
在完成图片/图集的加载之后,引擎就会开始处理图片资源。如果加载的是一张图集,会处理每张子图片。如果一次性处理大量的图片,这个过程可能会造成长时间的卡顿。
在游戏的资源加载中,可以将资源按照关卡、场景等分类加载。在同一时间处理的图片越好,当时的游戏响应速度也会更快。在资源使用完成后,也可以予以卸载,释放内存。

7.每帧只计算一部分
我先介绍一下我们的战斗,在野外的战斗,是由客户端计算杀死这波怪的过程,再由服务端验证这个杀怪过程的合法性,再给出杀怪的收益。计算的过程是这样的,主角遇到一个怪,向他走过去,走到可距离怪小于释放技能的攻击范围时,释放技能,然后要用敌我双方所有与战斗相关的属性,计算出是否命中,是否爆击,是否触发各种效果,每个效果会不会加某些属性之类。最后得到怪物最终伤害,最终双方属性有什么变化等。这一系列的计算,虽然是纯数学的计算,但因为数量的内容很多,所以也是一个比较耗性能的操作。这只是有一只怪的情况。一般我们的怪是都不是一只一只出来的,而我们的主角的技能也大部分不是单体攻击技能。所以技能会同时攻击两个目标,这时,这两个目标就会分别计算伤害。这还只是两只怪,我们游戏里一般一出来就是很多只怪,在某些玩法里出现几十甚至近百只怪。真的,免羊大战这个玩法就是看谁的场景里先有100只怪谁就输。那计算量就很大了。那我们是否可以只计算一次伤害,另一只怪就用前一只怪计算的伤害来减少CPU的运算量呢?不行,第一,是否命中,是独立运行的,我们不能做成命中就所有的怪都命中中,不命中就所有的怪都不命中,这样表现会很糟糕。第二,怪和怪不一定是相同的怪。第三,攻击的结果不只是造成伤害,还有加BUFF,会给敌我双方属性做出变化。那我的属性变化了,对第二只怪有可能计算出来的值就不一样。
那我怎么做呢。我是把每只要被攻击的目标,放到一个待计算列表里,每一帧,只拿出若干个进行计算,这样有的怪会晚几帧才会飘出伤害,在视觉上是没有区别的。但就不会在释放技能的时候卡一下。

8.Laya.Stage.getTimeFromFrameStart

/**
 * <p>获得距当前帧开始后,过了多少时间,单位为毫秒。</p>
 * <p>可以用来判断函数内时间消耗,通过合理控制每帧函数处理消耗时长
 ,避免一帧做事情太多,对复杂计算分帧处理,能有效降低帧率波动。</p>
 */
public function getTimeFromFrameStart():Number {
    return Browser.now() - _frameStartTime;
}

数据层的数据被修改后,会抛出通知。关注该数据的正在显示的界面就会收到该通知,然后去取到数据刷新界面的显示。这个刷新界面的显示内容就不可预估了,有可能是一个复杂界面,要刷新也许还会删除一些显示对象,添加一些显示对象。性能消耗就可大可小。
如果这时服务服同时推过来若干条数据要处理,那性能消耗就完全不能预计了。在这里要做的优化是,什么情况下服务端会在短时间内推大量的数据过来,如果有可能,就要对协议的方式做修改,以减少推送的次数的大小。如果不能做修改,那就要把服务器推过来的数据放到一个队列里,每帧只处理一部分。Laya里是有一个方法,在Stage下的,可以取得当时时间距离当前帧开始的时间已经经过了多少毫秒,我们可以利用这个方法判断处理协议,直到这帧快要达到这帧预期的时间,就余下的协议放到下一帧去处理。
澳门新葡亰网址,这样会不会让协议处理被慢呢?不会,因为原来在同一帧里去处理的话,需要的时间也是大于一帧,也是要卡在那里等协议处理完,也是等了这么久。放到下一帧,也是过了这么久才处理完。不同的是,原来是卡着游戏,其他一切都动不了拉在等处理完,现在是不卡着让用户感觉不到在等的处理完。所以效果会更好些。
但这里要注意,就算其他逻辑太多引起本帧没有剩余时间去处理一条协议了,也至少要处理一到两条协议,不然在比较差的设备上,也许会因为机器卡,就永远都没法处理协议,表现上就会和没收到服务端数据一样了。

9.View.createView
比如界面里有个水平滚动的功能,里边每一页都是道具的列表,每个道具列表里又有若干层。在第一次打开这个界面的时候,我们的程序就会创建这个界面的对象,就需要创建很多显示对象,这时会卡住很久。玩过我们游戏的人就会发现,这个界面打的时候,会先显示底上边的按钮,然后显示第一页的部分道具格子的底,然后再是另一部分道具格子的底,然后是显示一部分道具图标,再是另一部分道具图标。我说这么长,然后也就是在不到一秒的时间内,只是大家可以感觉得到一部分一部分的显示。就不显得卡。我是改写了View里的createView方法,会每帧只初始化若干个显示对象。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图