H5 游戏开发:游戏引擎入门推荐

2017/12/28 · HTML5 · 1
评论
·
游戏引擎

原文出处:
凹凸实验室   

威尼斯人线上娱乐 1

HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年《传奇世界》更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于
2D 或者 3D
的场景。作为一名开发者,分析了当下最火爆,最热门的HTML5游戏引擎供大家参考,希望大家也能找到属于自己的那款游戏开发引擎。

前言

很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

我在github上面收集了四十多款的HTML5开源游戏引擎,从里面star、fork等等参数分析其流行度,最后综合各方面元素,筛选出靠前的十五款(包含三款非开源游戏引擎)

游戏场景分类

在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

  • 游戏效果呈现方式( 2D ? 3D ? VR ?)
    这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有
    2D 渲染、3D 渲染、VR 渲染三种。
    而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom
    由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对
    Canvas 和 WebGL 展开介绍。
    一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas
    渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择
    WebGL 渲染或者浏览器内嵌 Runtime 。
  • 游戏复杂度
    这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

威尼斯人线上娱乐 2image.png威尼斯人线上娱乐 3image.png

游戏引擎推荐

笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

  • 引擎支持的渲染方式
  • github上的 star 数
  • 更新时间
  • 文档详细度
  • 周边产品

2D,3D,VR 都支持的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Egret YES YES YES YES 2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
游戏开发过程中的每个环节基本都有工具支撑。 不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
LayaAir YES YES(优先) YES YES 0.7k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
提供开发工具和可视化编辑器 支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发

Construct
2是一个运行于Windows平台的游戏制作工具,它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台(Windows、Mac、Linux、Android、iOS等)的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版和企业版,可以导出所有平台的版本,同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元,需要升级到企业版。

Egret

威尼斯人线上娱乐 4

Egret 周边产品

白鹭引擎是企业级游戏引擎,有团队维护。Egret
在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和
TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP
打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了
WebAssembly ,这对于性能的提升又是一大里程碑。

威尼斯人线上娱乐 5image

LayaAir

在渲染模式上,LayaAir 支持 Canvas 和 WebGL
两种方式;在工具流的支持程度上,主要是提供了 LayaAir IDE。LayaAir IDE
包括代码模式与设计模式,支持代码开发与美术设计分离,内置了 SWF
转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

下图是主要支持2D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Pixi.js YES YES NO NO 16.8k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
依赖于canvas的WebGL渲染器
Phaser YES YES NO NO 16.9k(最新更2017.07)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供在线编辑器Phaser Sandbox
CreateJs YES YES NO NO 6.5k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 有博客
官方推荐TweenJS,SoundJS,PreloadJS配合使用
Hilo YES YES YES(Hilo3D) NO 4.2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
提供资源下载和管理工具 阿里巴巴集团推出,适合开发营销小游戏,以Chipmunk为2D物理引擎,与主流物理引擎兼容
Cocos2d-x YES YES NO NO 11.2k(最新更新2017.12)
▪ 有中文文档
▪ js例子不多,c++例子较多
▪ 社区活跃
Cocos Creator编辑器,打包工具等 提供的功能相当完整
lufylegend.js YES NO NO NO 0.4k(最新更新2016.03)
▪ 有中文文档
▪ 社区活跃
仿ActionScript3.0的语法,支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境,可以配合Box2dWeb制作物理游戏,内置了LTweenLite缓动类等
特点:

简单直观,入门容易,无需编程也能做游戏,长处是开发射击及动作类的平面游戏,有丰富的英文资料。

Pixi.js

一般来说,WebGL 的渲染速度都会比 Canvas
快,这是由俩者的绘制路径决定的。Pixi 最大的特点在于,Pixi 具有完整的
WebGL 支持,却并不要求开发者掌握 WebGL
的相关知识,并在需要时无缝地回退到 Canvas
。相较于很多同类产品,它的渲染能力是比较强大的。然而,Pixi
也有不足的地方,Pixi
对于动画的支持是比较缺乏的,在实际开发中,常常需要引进额外的动画库,如
GSAP。

优点:
  1. 支持多平台(Android,iOS,Windows)
  2. 简单易用、无需编程知识可以使用,可实时运行游戏;
  3. 提供了大量特效,支持物理效果,有开发者商城,在上面可以购买到各种开发插件和游戏素材;
  4. 强大的事件系统,可以不通过写代码来控制游戏逻辑;
  5. 提供了可编程扩展的接口,可以自己开发插件;
  6. 完整的文档以及社区支持。
Phaser

Phaser 在渲染方面直接封装了 Pixi;架构方面,Phaser
内嵌了3个物理引擎(Arcade
Physics、Ninja、p2.js),提供粒子系统、动画、预下载和设备适配方案;兼容性方面,Phaser
的焦点是放在移动端浏览器上的;API 方面,Phaser
能实现丰富的游戏功能,适合复杂度高的游戏开发。

缺点:
  1. 非开源,且中文教程极其匮乏;
  2. 由于网页,手机都是相对于电脑来说性能较低的硬件产品,所以需要开发者更好的运用系统资源,甚至在windows平台也是如此,因为其windows的输出格式也是利用Chrome浏览器的内核所做,也就是说本质上还是在浏览器上运行。
CreateJS

威尼斯人线上娱乐 6

CreateJs 周边产品

CreateJS 官方提供了 TweenJS 支持动画开发,同时通过 SoundJS 和 PreLoadJS
提供了音频和预下载的支持,对于 H5
游戏基础功能的支持是足够的。在兼容性方面,CreateJS 支持 PC
端和移动端几乎所有的浏览器。此外,CreateJS 还支持用 flash CC 开发导出由
CreateJS 渲染的 H5 游戏。

点评:使用最多的HTML5商业引擎,更新快且开发者商城支持非常棒,推荐!**

Three.js 是一款运行在浏览器中的 3D
引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。

威尼斯人线上娱乐 7image

Phaser是一款专门用于桌面及移动HTML5
2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和WebGL渲染,基于浏览器支持可自由切换。快速、免费、易于维护,使用Phaser来开发2D小游戏的优势显而易见。一方面,开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面,也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。

威尼斯人线上娱乐 8image

Hilo

Hilo
是阿里团队推出的一个开源项目,支持模块化开发,同时提供了多种模块范式的包装版本和跨终端解决方案,适合用来开发营销小游戏。其体积也是比较轻量的,只有70kb左右。Hilo
支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,同时集成了 Hilo Audio, Hilo
Preload。其后推出的 Hilo 3D 也是其亮点之一。

威尼斯人线上娱乐,主要特性:
  1. JavaScript、TypeScript双重支持
  2. 内置游戏对象的物理属性
  3. WebGL、Canvas渲染自由切换
  4. 完全支持Web音频
  5. 输入:多点触控、键盘、鼠标、MSPointer事件
  6. 除了IE
    9+、Firefox、Chrome、Safari及Opera等桌面浏览器之外,Phaser还支持Mobile
    Chrome(Android 2.2+)及Mobile
    Safari等移动浏览器。使用Phaser进行游戏开发没有任何语言设定,并且,在Phaser官网上,还提供了非常详细的开发指南,想要一探究竟的开发者不妨直接登陆Phaser查看。

Pixi.js是一款超快的开源HTML5
2D渲染引擎,使用带有Canvas回调功能的WebGL。作为JavaScript的2D渲染器,Pixi的目标是,可以提供一个快速且轻量级的2D库,并能兼容所有设备。此外,让开发者无需了解WebGL,就可以感受到硬件加速的力量。

威尼斯人线上娱乐 9image