• 技术文章 >web前端 >H5教程

    当前诸多大公司活动页很多都是用游戏引擎做的,请问这种技术选型和普通DOM操作+CSS3相比有何优点?

    2016-06-07 08:43:01原创1168
    比如大众点评活动页 选择吧,人生!
    腾讯活动页 生命之下,想象之上

    回复内容:

    大众点评的那个页面用的是 白鹭引擎 - Egret Engine-免费开源HTML5游戏引擎 ,而腾讯的那个使用的是 CreateJS | A suite of Javascript libraries and tools designed for working with HTML5

    白鹭是标准的国货精品,前期创始者主要是 Adobe 的员工,现在已有资本介入;CreateJS则是 Grant Skinner 所做,Flash 界的著名人物。

    这两个引擎,还都是和 Adobe 有关系啊……可怜的 Flash。

    感慨完毕,说说我的感觉。

    作为引擎,提供的功能更完善。例如音频播放、tween效果、资源载入管理、良好的 API 封装等等。题主所说的两个页面,操作上相对复杂,都提供了音频播放以及各种特效,使用现成的引擎可以大幅减少开发的工作量。

    另外,这些引擎都考虑了移动端支持。

    而自己用 DOM+CSS+JS 手写,可能就要麻烦一些了。 操作dom基本都花费cpu,引擎就基本消耗gpu,js由于是单线程,对cpu开销比较大,所以引擎的优势不言而喻 从工具上讲,游戏引擎有编辑器,工作可能简单到导入素材、设置关键帧、调整参数,设计师都可以做;但用传统方式开发,要有许多 HTML/CSS/JS 的代码需要工程师来写和调试。

    从技术上将,游戏引擎都会借助 Canvas/WebGL,性能和渲染效果要远远好于 DOM/SVG。(兼容性?做这种东西都会有 fallback 方案,放不了动画的,可以展示图片) DOM 和 Canvas 都无法使用手机的GPU渲染

    游戏是一个通过体验来变现的产品,所以 体验 体验 体验 真的很重要 很重要

    这就是为甚H5游戏要使用游戏引擎的原因,好的游戏引擎都是 WebGL 渲染,然后遇到无法使用 WebGL 的设备,自动会退到 Canvas 渲染。

    好的游戏引擎比如 Cocos-JS , pixi.js 关于题主的问题,曾嵘已经说的比较清楚了。
    纠正一点。
    腾讯这个貌似是用flash cc做的,和做falsh动画完全一样,只不过是创建canvas工程。主要是设计师来做,需要用代码的地方很少,非常像AS1、AS2时代的flash开发方式,主要是做动画,然后需要交互的地方,在帧上写代码,最后发布。
    白鹭那个看不到了,不知道是怎么做的。
    因此,题主的理解可能有偏差,拿腾讯这个来说,虽然用到了游戏引擎CreateJs,但是几乎涉及不到编程,和DOM操作+CSS3没有可比性(应该是DOM+CSS+JS )。一个是设计师来做,一个是程序员来做,这个才是最大的优势。 主要区别在于canvas吧,多数引擎不是采用的css animation,而是canvas内实现动画。

    DOM用在游戏这种大量频繁刷新的场景,怎么可能流畅。
    多数HTML App性能瓶颈本身就在DOM渲染。

    你可以尝试修改一个简单的canvas游戏到css动画,我敢打赌就目前的条件下,结果一定是惨不忍睹。

    另外纯手工的开发难度也比较大:

    比如这个,这么多spirit。换css该怎么做。我设想不出来。
    见过的几个比如Bounce.js 还只是处理滑动效果,spirit不知道有没有框架支持。 优点不好说吧,使用的范围很广,各项技术各有各的优缺点,像layabox目前支持的canvas模式,试用于手机的应用,而dom+css模式,一般主要用来做pc网站,当然,之后laya肯定也会去支持dom+css3,这只是时间的问题。 cocos js才是真爱
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:
    上一篇:如何看待html5在移动端的未来? 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • HTML5 微格式和相关的属性名称_html5教程技巧• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• HTML5 常用语法一览(列举不支持的属性) _html5教程技巧• phonegap使用方法介绍(八)操作数据库• HTML4和HTML5之间的10个主要不同
    1/1

    PHP中文网