文档章节

2D动画性能优化

童年伊梦
 童年伊梦
发布于 2012/09/25 12:04
字数 1555
阅读 127
收藏 0

作者: 郭少瑞

目前基于Flash平台,如果我们要在屏幕上实现动画,可以有哪些技术方案?当然,动画师们最先想到的是Flash传统的电影剪辑(MovieClip),这个曾经让动画制作变的如此简单的方式,如今却面临性能的严峻考验。为了实现高性能的动画,开发者们可谓各显神通,不过总结起来,实现方式基本围绕着位图操作,或基于Stage3D API进行。

那么这些方式的效率对比如何?让我们通过一个测试来看看实际效果吧。测试是通过由ESDOT提供的一个测试项目进行的(点击这里),原项目中已经包含了位图动画和Starling的部分,笔者做了进一步性能优化,并添加了ND2D和Genome2D的部分。

注:本数据仅供开发者参考,评测的目的也并非为了评价框架的优劣(用例有限,不足以覆盖所有情况)。从测试可以看出Stage3D的2D框架在处理这些动画时占据整体优势,而文中涉及的3个框架应该也是各有千秋,您可以根据自己项目的特性,人员安排,框架特性等多方面因素考虑,选择一个合适的框架。

测试项目下载:MobileRenderTests

测试的动画如上图所示:每一个小熊都在不断重复爬行动作,而每一个小熊同时也在向左或向右进行移动。

项目中引用的3个2D框架(Starling, ND2D, Genome2D)均采用GitHub上的最新版本(截止2012-6-20),测试分两个平台进行:Lenovo T410 (Windows 7) 和 iPad 1 (iOS 5)

编译采用Flex SDK 4.6+AIR SDK 3.3

2D框架版本:Starling为GitHub最新代码,介于1.1和1.2之间吧(下一个版本1.2)。ND2D也是GitHub最新代码,应该是接近1.0的版本了。Genome2D采用了Genome2D-v0.9.1.swc。

衡量标准:满帧为30 FPS,(移动设备测试为正常打包模式,确保性能最佳)。

渲染方式说明:

  • MovieClip 用传统的Flash的电影剪辑来测试。

  • CacheSpriteSheetTest 这种方式是,在屏幕上添加N个Bitmap对象,然后不断替换这些对象的bitmapData属性,来实现动画 (运行)。

  • CopyPixels这种方式大家也比较熟悉,就是用类似Canvas绘图的机制,不断的在一个大Bitmap上用copyPixels方法绘制来完成动画过程(运行)。

  • StarlingMovieClip 用Starling框架的MovieClip类进行测试 (运行)。

  • StarlingQuadBatch 用Starling框架的QuadBatch类进行测试(批处理模式) (运行)。

  • ND2DSprite2D 用ND2D的Sprite2D进行测试 (运行)。

  • ND2DSprite2DBatch 用ND2D的Sprite2DBatch进行测试(批处理模式)(运行)。

  • Genome2D 用Genome2D的动画机制进行测试 (运行)。

测试开始。

目录

[隐藏]

测试1:Lenovo T410 (Windows 7)

这是一台Lenove笔记本,性能中等,可开启硬件加速。测试结果:

从这个结果可以看出,在PC上如果采用位图方式,copyPixes的效率比不断替换bitmapData的方式还是要高不少;而Stage3D的2D框架则整体都很给力,性能均超过位图动画方式。然而在3个2D框架中,Starling的MovieClip类显的逊色一些,虽然最易用,效率却不太满意,而Starling的QuadBatch则太给力了,在上面的图上占据性能最优。ND2D的批处理模式则显得逊色一些。Genome2D仍然表现的性能强悍,批处理能力和Starling相当。

测试2:iPad 1 (iOS 5)

渲染模式设置:位图渲染采用<renderMode>gpu</renderMode>模式,而3个2D框架则采用<renderMode>direct</renderMode>模式。

从这个图可以看出,在iOS上,使用替换bitmapData的方式,效率要高于copyPixels的方式(和PC测试结果正好反过来)。而Stage3D仍然是性能上的最佳选择,这个测试中Starling和Genome2D的性能均超越了传统位图模式。而ND2D则看起来并没有在移动设备上实现很好的优化,表现比较逊色。Starling的MovieClip模式在这次测试中也有不俗表现。而采用批处理模式后,Starling和Genome2D性能相当,两者占据了性能之王的宝座。

测试3:iPad 2 (iOS 5)

感谢AIR移动小组委员式神完成了这个评测!测试设备为iPad 2,打包模式为正常打包模式,最高性能,数据如下:

在这张图里,明显传统位图动画已经和Stage3D不是一个层次的了。而Starling的强悍表现实在是太赞了!现在已经没有理由再怀疑Starling的执行效率了。

2012-6-22日补充:修改测试用例后的测试结果

我们修改了素材和测试代码,新的测试用例与上面的测试用例有所不同。上面的用例是一个单一动画,而下面的用例将使用8个动画(小鱼的动画有7种,猴子的动画1种)。

同样附上测试项目源码:MobileRenderTestsV2

测试4:多动画+Lenovo T410 (Windows 7)

测试结果:

因为这些素材没有普通电影剪辑版本,所以未对传统MovieClip模式进行测试。而其它测试结果,则与第一次单动画测试的结果基本吻合。

测试5:多动画+iPad 1 (iOS 5)

测试结果:

在iPad 1上,多动画模式,copyPixels依然表现不佳。Starling则表现稳定,与第一次单动画测试基本一致。Genome2D则表现有所下滑。到目前为止,Starling的QuadBatch确实让我们印象深刻。正如Starling作者丹尼尔所说,你找不到在Starling中比QuadBatch更快的渲染模式了。

这里还有一份ESDOT5月份做的一次评测,显示haxe-nme在性能上表现非常突出,后面我们也会评测并分享相关数据:

http://esdot.ca/site/2012/performance-showdown-starling-vs-nd2d-vs-genome2d-vs-haxe-nme

本文转载自:http://www.todoair.com

童年伊梦
粉丝 1
博文 29
码字总数 21736
作品 0
浦东
私信 提问
在 CSS 动画中使用硬件加速(翻译)

在最近一个项目中,因为初期没有做太好的规划与人员技术能力有限,在性能方面有很多问题,而我加入这个项目的主要任务就是进行各种性能优化。其中对于重排重绘以及硬件加速相关优化进行的比较...

YaHuiLiang(Ryou)
2018/08/02
0
0
从UI到AI——移动端H5生成技术漫谈

摘要 Houdini 为 CSS 提供动态编程能力,让开发者介入布局与渲染的过程,带来无限扩展性。分享会用数个例子演示 Houdini 的神奇效果,同时介绍其现状。 移动端网页动画 Css变换和动画 Css3早...

2018/06/06
0
0
深度操作系统 15.4.1 修正版本发布

深度操作系统是一个致力于为全球用户提供美观易用、安全可靠的Linux发行版。 深度操作系统15.4.1为修正版本,新增了经典菜单和打开应用等待效果、回归窗口预览效果、优化窗口管理器2D模式;修...

melodyzou
2017/07/21
2.5K
50
活动指标以及报警器控件--F3Swirly

我需要一个有视觉方面的活动指标以及报警器控件。这种控件满足需要提供,文字,色彩和动画反馈。控制使用石英2D和核心动画,提供合理的性能水平,几乎没有动画所需的CPU开销。段数,段色,段...

匿名
2012/07/18
284
0
Synfig Studio 1.0 发布,矢量动画创作工具

Synfig Studio 1.0 发布,该版本对界面进行了优化,使用更简单和直观;增加了单窗口模式;升级到 GTK3 工具包;全新骨架系统等等。 下载地址: Download Synfig 1.0 (64bit) .deb Installer...

oschina
2015/04/29
1K
10

没有更多内容

加载失败,请刷新页面

加载更多

lombok的一个踩坑记录

lombok的类如下所示: package com.divx.service.model.task;import com.divx.service.model.BaseTypeMedia;import lombok.Data;/** * @author wuzhilang * @Title: QuestionResult ......

无知的小狼
29分钟前
2
0
如何使用markdown

我没有导入相应的包 这个用的还是有些问题 而且显示的时候格式问题还没解决 <div class="blog_editor" style="margin: 0 auto;width:60%;height:1000px;background-color: white;"> <div s......

南桥北木
31分钟前
4
0
纯手写SpringBoot框架之注解方式启动SpringMVC容器

使用Java语言创建Tomcat容器,并且通过Tomcat执行Servlet,接下来,将会使用Java语言在SpringBoot创建内置Tomcat,使用注解方式启动SpringMVC容器。 代码实现。 1.pom.xml文件,需要依赖的jar...

Java老王
33分钟前
2
0
Presto查询引擎简单分析

Hive查询流程分析 各个组件的作用 UI(user interface)(用户接口):提交数据操作的窗口 Driver(引擎):负责接收数据操作,实现了会话句柄,并提供基于JDBC / ODBC的execute和fetch API Metas...

MobService
34分钟前
1
0
《软件架构的10个常见模式》,看完真心觉得不错

作者:半吊子全栈工匠原文链接:https://blog.csdn.net/wireless_com/article/details/89008061 企业规模的软件系统该如何设计呢?在开始写代码之前,我们需要选择一个合适的架构,这个架构...

Java干货分享
46分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部