Egret社区

EGRET性能优化之优化渲染

2015-3-25 15:45
961535
本题已加入常见问题汇总 » 性能优化最佳实践,更多性能优化最佳实践相关的话题欢迎关注讨论


征得a闪的同意,我就转帖了,有问题直接找他,坏笑
这里是原帖链接  http://ashan.org/post-522.html

有人说Egret的性能不好,甚至没有原生JS写出来的性能高效。其实大部分时候都是由于开发者所使用的方法不正确。导致游戏性能下降,甚至出现卡顿的现象。
游戏作为性能消耗大户,很多时候都会将系统硬件的性能使用到极致。想要提高你的游戏性能,有一个非常重要的前提。你需要对引擎渲染部分非常了解。能够在开发中避免不必要的低级错误。
这篇文章简单的聊一聊渲染部分的优化。如果你的优化做的好,那么就会解决绝大部分性能问题。
在说优化之前,你需要非常清楚Egret的Main Loop。如果对此不了解。那么你拥有非常高的几率写出拥有严重性能问题的游戏。
Egret在内核中是如果来处理渲染部分的呢?请看下图
Egret每刷新一帧的时候,会执行四步操作。你在制作游戏的时候应该清晰的记住四步操作都在干什么。
第一步,我们执行了一次EnterFrame,此时,引擎会执行游戏中的逻辑。并且抛出EnterFrame事件。
如果你在这里编写了大量消耗性能的代码,那么你的帧频就会开始下降。你应该明白,不要将大量代码都放到EnterFrame中去处理。除非你想让你的用户体验一个慢世界的游戏。
第二步,引擎会执行一个clear。将上一帧的画面全部擦除。
第三步很有意思,不仅仅是有意思,也是非常消耗性能的一步。此时,Egret内核会遍历你游戏场景中的所有DisplayObject,并重新计算所有显示对象的transform。
最后一步,如果你接触过canvas,那么你了解,这一步会将所有的图像全部draw到画布中。
好了,简单的了解了Egret渲染机制,那么到底如何去优化我们的游戏。我简单罗列一下基本要素。具体如何避免,解决方案怎么操作,每一个都会扩展出无数内容。在后面的文章我会依次讲解。
1、不想要的DisplayObject,请removeChild
如果是设置了他的visible属性为false,确实这个显示对象不会被渲染出来。但是,它还会参加第三步的计算过程。所以无形中增加了性能开销。
如果某一个图像被其他图像遮盖,那么你就需要移除被遮盖的对象。
2、不要向stage中放置太多的DisplayObject
就如同天朝的人口数量一样,什么东西多了都是噩梦。太多的显示对象不仅仅在第三步会消耗性能,更重要的是,在第四步的时候,会严重影响性能。让帧频下降。
如果作为程序员你的抱怨设计师或者策划师在游戏中添加了太多内容的话。那么我可以给你一个不错的建议。
你可以想办法将画面中的元素进行合并。合并不是将两个Bitmap塞到一个Sprite中。这样并不能起作用。无论是嵌套还是并列,都会消耗大量性能。如果可以,你最好调整游戏元素图片的拆分方式,尽量减少DisplayObject的数量。
另外一种方法是使用cacheAsBitmap,让你的矢量图在运行时以位图形式进行计算。这会大大减少你的矢量图运算。
3、尽量不要在EnterFrame事件中做过多的操作
不得不说,EnterFrame事件派发的太频繁了。在如此高密度的事件中。每执行一次逻辑操作,都要付出非常多的性能代价。
你可以尝试自己定义更多的事件,在某种条件成立时,手动派发自定义事件。
4、善用脏矩形
脏矩形是一种非常高效的优化手段,但它也是把双刃剑。用的好,性能飙升,用不好,自取灭亡。
后面的文章我会使用一些实际案例作为Demo,来对比不同情况下,对于游戏性能的对比数据,以及不同情况下的优化方案。

分享到 :
18 人收藏
一天一小步,十天一大步。个人博客http://www.xsstomy.com/

35 个回复

倒序浏览
lucius  登堂入室 | 2015-3-25 15:47:58
给力。
hus  登堂入室 | 2015-3-25 15:50:02
!!!!顶
小小明  初窥堂奥 | 2015-3-25 15:56:23
另外一种方法是使用cacheAsBitmap,让你的矢量图在运行时以位图形式进行计算。
这一句看不懂哇
xsstomy  斑竹 | 2015-3-25 16:06:26
小小明 发表于 2015-3-25 15:56
另外一种方法是使用cacheAsBitmap,让你的矢量图在运行时以位图形式进行计算。
这一句看不懂哇 ...

cacheAsBitmap能把你一个容器内的所有可视对象当作一个bitmap ,渲染的时候从原来n个变成了一个,
也就是draw 的次数从n变成了1,最常用的地方是游戏中的背景或者地图,因为不需要动画,都是静态图
正好一起回复一下
jklong  初学乍练 | 2015-3-25 16:20:24
受教受教!!!
xsstomy  斑竹 | 2015-3-25 16:26:49
d8q8 发表于 2015-3-25 16:10
主要是矢量计算消耗cpu,位图渲染占内存

碰撞计算还是比较消耗的,位图渲染主要消耗
Once  斑竹 | 2015-3-25 18:13:54
前来支持
xsstomy  斑竹 | 2015-3-25 18:19:59
shavy  登堂入室 | 2015-3-25 22:35:32
太基础了,针对老aser来点深入点的
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部