CSDN话题挑战赛第2期
参赛话题:学习笔记
HTML5,新的Web标准在2014年10月份发布,旨在让浏览器上运行的页面内容和互动更加丰富。许多之前需要插件完成的事情,标准都以简洁的形式予以支持。各大浏览器都在近几年都开始支持H5,Chrome、Safari、IE、腾讯等。过去两年基于H5开发的游戏也不胜枚举,放弃了之前的基于Flash的页游方式,如今跨平台跨设备变得更加便捷,加上硬件性能的提升,基于Web的应用和游戏估计会越来越多。
1. HTML5为游戏开发提供了什么?
三大核心标准:
Canvas:画布元素可以使用Javascript脚本动态在其上绘制2D的图形和图像。一些简单的二维游戏可以直接用时Canvas渲染即可。操作Canvas的脚本接口,和Windows下的图像接口GDI非常类似。
WebGL:WebGL是基于OpenGL ES 2.0制定的硬件图像接口标准,OpenGL ES则是OpenGL嵌入式设备的标准,开放的OpenGL和Windows下DirectX,还有最新的Vulcan都是需要硬件支持的。WebGL标准意味着可以在Web页面中不借助住插件的情况下,使用GPU来绘制2D、3D的图形和图像。这应该是基于H5进行游戏开发的最大福音。
WebSocket:基于Web的全双工通信方式。之前基于HTTP实现全双工通信,比较麻烦并且低效。有了WebSocket,基于Web的游戏可以非常方便地和游戏服务器进行通信。
其他相关标准:
WebStorage: 旨在代替之前的Cookie方式,一种新的方式来存储浏览器和网页服务器交互的中间数据,支持全局存储和一次性会话存储。
GeoLocation : Web也可以方便地获得设备的地理位置信息,使得基于位置开发LBS的应用和游戏成为可能。
TouchEvents : 移动设备多以触屏方式进行操作,H5对其触发的事件也进行了支持。
2. H5游戏引擎
2.1 Egret(白鹭)
北京白鹭是全球最大的HTML5一站式移动技术和服务提供商,致力于为移动互联网全行业提供技术解决方案与服务。截止2017年1月份,白鹭引擎创建的内容占据全行业70%份额,H5游戏全渠道累计排名Top 30,白鹭引擎产品占57%,月流水超过100万的H5游戏,全部由白鹭引擎创建,超过3700款App,采用白鹭H5+原生打包解决方案。
Egret Engine:白鹭引擎,遵循HTML5标准的2D引擎及全新打造的3D引擎,解决了HTML5性能问题及碎片化问题,灵活地满足开发者2D或3D游戏的需求,并有着极强的跨平台运行能力。
Egret Wing:可视化编辑工具,支持主流开发语言与技术的编辑器,通过可视化编辑,提高游戏开发效率,同时支持Node.js开发扩展插件,更好的定制化自有内容。
DragonBones:动画制作工具,面向设计师的动画创作平台,使用更少的美术成本制作更生动的动画效果。多语言支持,仅需一次制作即可全平台发布。
Egret Feather:是一款粒子编辑器,各个参数的组合塑造千变万化的效果,为游戏添姿添彩。
Res Depot:是 Egret 游戏的可视化资源管理工具,能够轻松高效地管理海量游戏素材和配置文件资源。
Egret-iOS-Support:是将基于 Egret 引擎开发的游戏转换为 iOS APP 的工具。
Egret-iOS-Support:是将基于 Egret 引擎开发的游戏转换为 Android APP 的工具。
Egret Micro Client:微端是一种 H5 游戏的原生打包方案。初始包体小、易推广、存留远超传统,具备多网络启动模式和资源缓存功能,易用的第三方 SDK 接入方案。
Egret Runtime:HTML5游戏加速器,是一款支持3D的HTML5游戏加速器,解决低端机对HTML5标准支持不佳,体验差的弊端,可以适配不同的系统让HTML5游戏效果媲美原生游戏。
2.2 LayaAir
Layabox是搜游网络科技(北京)有限公司打造的中国游戏引擎提供商品牌,旗下第二代引擎LayaAir是基于HTML5协议的开源引擎,性能与3D是引擎的核心竞争力。同时支持ActionScript3、JavaScript、TypeScript三种开发语言,并且一次开发同时发布APP(安卓与iOS)、HTML5、微信小游戏、QQ玩一玩等多个平台的游戏引擎。除支持2D\3D\VR\AR的游戏开发外,引擎还可以用于应用软件、广告、营销、教育等领域。
旗下还拥有LayaAirIDE等开发工具链,支持开发者可视化编辑UI、动画、代码编写、打包、多平台发布等,为开发者提供丰富的开发与支撑工具。
2.3 Cocos2d-JS
Cocos2d-X支持基于H5的游戏,使用Javascript编写,貌似大家对Cocos2d开发H5评价一般,懒得介绍了,知道有这货即可。
2.4 Phaser
一款国外的基于H5(Canvas和WebGL)的游戏引擎,完全开源,可以使用JavaScript或者TypeScript进行开发。快速做一些小游戏也是可以尝试使用的。
3. H5渲染引擎
上面列了几个游戏引擎,若技术实力强,为了获取更高的性能或自由度,可以尝试下面的Web渲染引擎。
3.1 Pixi.js
PixiJS是一个快速的轻量级的2D动画渲染引擎,主要使用了WebGL技术,能帮助展示、驱动和管理富有交互性的图形、制作游戏。使用JavaScript以及其他HTML5技术,结合PixiJS引擎,可以创建出丰富的交互式图形,跨平台的应用程序和游戏。
3.2 Three.js
Three.js是一个3D渲染引擎,基于WebGL,对WebGL进行了封装,使得开发基于WebGL的3DWeb应用变得更加简单,效果是相当的炫酷,官网提供了大量的演示代码。
3.3 Babylon.js
Babylon.js也是一个为构建3D网页游戏而存在的JavaScript渲染引擎,可以体验到H5、WebGL、WebVR和Web Audio技术带来的改变。
4. 如何选择?
在了解了众多的H5游戏引擎和渲染引擎,在开发中如何选择了?(以下仅是本人通过最近几天收集的信息,做出一个初步判断,尚未经过项目验证,慎重采取建议。)
H5游戏引擎 vs H5渲染引擎?
游戏引擎包含的功能会更多,成熟的游戏引擎更会包括一系列的工具,渲染只是游戏引擎的一部分。部分游戏引擎由于封装,渲染性能一般会低于专业的渲染引擎。
要快速开发,选择游戏引擎准没错。
要更多的自由度和性能,选成熟的渲染引擎。(前提:需要一定的技术实力、同时周期也会比较长)
渲染引擎的选择?
2D游戏,选Pixi.js。
3D游戏,Three.js和Babylon.js都可以。
若觉得渲染引擎封装的不行或者满足不了,那你可以基于WebGL自行编写。(前提:你真的是闲的蛋疼)
游戏引擎的选择?
Cocos2d-JS,不看了直接放弃。
Egret,快速开发一个2D的游戏,拥有丰富的工具级,性能稍微比LayaAir差点,官方提供了Runtime可以接入,或许会有用,基于Egret做的2D游戏上线产品还是比较多的。3D功能暂时不成熟,慎用。
LayaAir,主打3D和性能,大概试用了一下Laya的工具,比Egret还是差了不少。
另外附上别人做的一个WebGL 2D渲染引擎性能评测,地址:https://k8w.github.io/webgl_2d_benchmark/。
经过上面的对比,简单点说:
想要快速地开发一款2D H5游戏,选择Egret。
想要快速开发一款3D H5游戏,选择LayaAir。
至于其他选项,自行斟酌。
参考资料
HTML5 Game Engines - Find Which is Right For You
https://en.wikipedia.org/wiki/HTML5
Phaser - A fast, fun and free open source HTML5 game framework