[学习笔记]Egret性能优化之优化渲染

[转载]https://ashan.org/archives/522

有人说Egret的性能不好,甚至没有原生JS写出来的性能高效。其实大部分时候都是由于开发者所使用的方法不正确。导致游戏性能下降,甚至出现卡顿的现象。

游戏作为性能消耗大户,很多时候都会将系统硬件的性能使用到极致。想要提高你的游戏性能,有一个非常重要的前提。你需要对引擎渲染部分非常了解。能够在开发中避免不必要的低级错误。

这篇文章简单的聊一聊渲染部分的优化。如果你的优化做的好,那么就会解决绝大部分性能问题。

在说优化之前,你需要非常清楚Egret的Main Loop。如果对此不了解。那么你拥有非常高的几率写出拥有严重性能问题的游戏。

Egret在内核中是如果来处理渲染部分的呢?请看下图

屏幕快照 2015-03-20 下午1.56.43

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,来对比不同情况下,对于游戏性能的对比数据,以及不同情况下的优化方案。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Egret H5 是一种基于HTML5的游戏开发引擎,其渲染流程可以简单描述为以下几个步骤: 1. 准备阶段:在渲染之前,需要完成游戏资源的加载和初始化工作。这包括图片、声音、动画和其他资源的加载,以及游戏场景和界面的初始化设置。 2. 创建场景:Egret H5通过场景与层的概念来管理游戏的元素。在创建场景时,会设置游戏画布的大小和位置,同时创建不同的层,用于容纳游戏中的不同元素。 3. 加载场景元素:在此阶段,需要加载游戏的场景元素,如角色、背景、道具等。这些元素可以是静态的图片,也可以是可交互的动画。加载完成后,这些元素将被添加到对应的场景层中。 4. 渲染循环:Egret H5通过渲染循环不断更新画面,实现动态效果。渲染循环是一个不断循环的过程,每一都会执行各种更新和渲染操作。 5. 更新元素状态:在每个渲染循环中,需要更新游戏中各个元素的状态,包括位置、旋转、缩放等。这些更新会基于各种因素,如用户输入、游戏逻辑等。 6. 碰撞检测:在游戏中,需要检测元素之间的碰撞,以便触发相应的事件。Egret H5通过检测元素的位置和形状来实现碰撞检测,一旦发生碰撞,会触发相应的逻辑处理。 7. 渲染画面:在每一更新之后,需要将更新后的画面渲染到屏幕上。Egret H5通过调用浏览器的Canvas或WebGL API来实现画面的渲染工作。 总的来说,Egret H5的渲染流程包括准备阶段、场景创建、元素加载、渲染循环、更新状态、碰撞检测和画面渲染。通过这些流程,Egret H5能够实现丰富多样的交互效果,让开发者能够灵活地创建优秀的HTML5游戏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值