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

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

原文出处:
凹凸实验室   

金沙城中心赌场 1

前言:

前言

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

  昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等。

游戏场景分类

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

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

 

游戏引擎推荐

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

  • 引擎支持的渲染方式
  • 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这些大作就是用它开发

整体概况:

Egret

金沙城中心赌场 2

Egret 周边产品

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

    根据上一篇文章的提示,我们找到index.html,将帧率data-frame-rate修改成60。根据设计图宽高,我将data-content-width设成640,data-content-height设成1038;

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缓动类等

  就是下图不包括微信工具栏的高度。至于适配模式我先设成exactFit,以canvas的渲染模式运行,这些可根据实际需求设定

Pixi.js

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

  金沙城中心赌场 3金沙城中心赌场 4

Phaser

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

  保存设置后我们可以关闭index.html了,然后点击Wing面板工具栏中的“构建并运行”按钮,或者点击“项目”—“运行”。

CreateJS

金沙城中心赌场 5

CreateJs 周边产品

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

  如图所示:

Hilo

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

  金沙城中心赌场 6

Cocos2d-x

Cocos2d-x 是业界比较老牌的游戏引擎了,同时支持 C++ ,Lua 和 JavaScript
三种开发语言,官方用例来看更倾向于 C++
开发,适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator
游戏开发工具,组件化,脚本化,数据驱动,跨平台发布。

  运行后,Wing会启动你的默认浏览器并以服务器环境方式打开该项目的index页面,为了显示和调试方便,我直接用F12以手机模式浏览。

lufylegend.js

lufylegend.js
的最新更新是在16年,不过其社区还是十分活跃的,如果遇到什么开发问题,可以很方便地在社区上找到解决的方案。lufylegend.js
可以支持基础的游戏功能,但是其可拓展性不是很强。

主要支持3D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Three.js NO NO YES(倾向) NO 37.6k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
默认Ammo.js为默认物理引擎,基于JavaScript语言的3D库,耗性能,加载慢,效果一般
PlayCanvas NO NO YES YES 3k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供了在线编辑器,发布托管等 教程较为详细,入门快

  如果编译和运行成功,你会看到如下的Egret的默认页:

Three.js

金沙城中心赌场 7

Three.js 示例案例

相信对于很多有关注 3D 游戏的开发者来说,Three.js
早已经耳熟能详了。实际上,Three.js 官方定位并不是游戏引擎,而是一个 JS
3D 库。Three.js 更倾向于展示型的视觉呈现,比较少直接拿 Three.js 来开发
H5 游戏。渲染环境上,Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

  金沙城中心赌场 8

PlayCanvas

从渲染支持程度来看,PlayCanvas 不仅支持 3D WebGL渲染,同时保持到 VR
的支持,拥有比较好的拓展性。在工具流的支持上,提供了在线编辑器和发布托管等服务。从官方教程上看,教程也是比较详细的。

 

结语

现在市场上的
H5游戏引擎很多,很难去直接定义哪个引擎的好坏,只能说每个引擎都有自己的特性,在某方面跟项目的契合程度比较高,笔者根据现在市场上比较热门的几大引擎做了几点比较,希望能给刚入门的你做技术选型的时候有一点帮助,找到适合项目的引擎,更快、更准、更高效率地完成项目需求。

感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏。

2 赞 3 收藏 1
评论

金沙城中心赌场 9

  接下来我们找到项目中的SRC目录,并打开LoadingUI.ts,这是官方预设的loading页面的LoadingUI类。

  它的效果如图所示,我们可以在chrome控制台中降低网速来查看loading页的效果。

  金沙城中心赌场 10金沙城中心赌场 11

 

处理代码:

  接下来我们就要开始操作代码了,我们找到项目src目录下的“主类”,但是Main并非是真正的主类,它跟C等其他的语言的主类不同,不过基本功能是一样的,就是进入主程。

  由于官方给我们提供了一个案例,所以我打开Main.ts并把预设的一些效果和注释删除

  金沙城中心赌场 12

  金沙城中心赌场 13

  但是Main类下的createBitmapByName()方法,以及前面的加载资源以及配置都要留下来,这部分是我们需要复用的。

  把没有用的代码删去之后,我们就要写自己的代码了。摁ctrl+s保存代码,点击“项目”并勾选“自动构建”可以在保存后自动编译,然后我们打开浏览器并刷新,我们现在可以看到什么都没有。

  金沙城中心赌场 14金沙城中心赌场 15

 

 处理资源:

  当我们把冗余的代码删去之后,同时我们也要把预置的资源素材删去,首先我们进入resource目录下,把assetconfig文件夹下的所有素材删掉。

  删除完之后就把自己需要的素材,例如图片和音频等放置于asset目录下,而配置文件json之类的则放置于config目录下。

  注意,default.res.json这个资源配置文件不可删除哦,但可以修改名字和路径,一般减少出错我们就让它保持原样就好。

  金沙城中心赌场 16

  当我们把自己使用到的资源放置于asset目录下后,我们再回到wing面板,点击default.res.json进入资源管理界面并刷新,假如你在resource目录下新增了素材,就会弹出以下窗口。

  点击“”,则自动添加所有资源到json资源配置文件default.res.json中。
  注意:假如资源中有黄色提示框,则表示该资源已被删除,应该将该配置项同步删去或者修改路径。点击右键,删除资源。

  金沙城中心赌场 17

   金沙城中心赌场 18

  在资源配置页,我们可以看到下方有个资源组。它的意思是我们可以分不同的组别或者批次来加载资源。

  譬如在场景一,我们只需要用到部分资源,我们就可以把这部分资源独立放置在一组,进入场景一时进行预加载。

  假设到了场景二,我们则继续把场景二那一组资源进行加载,加载完再继续使用。这样可以达到分批加载的效果。

  金沙城中心赌场 19

  现在这个案例,暂时先用到一个组。所以我会把所有资源拖进preload当中,在进入游戏之前全部加载。

  把全部资源拖进去了preload组之后,已选用的资源会显示另外一种背景色。然后我们点击ctrl+s进行保存。

  金沙城中心赌场 20

  我们除了可以使用拖拉选用资源外,我们还可以使用代码进行配置,手动修改json。我们可以点击资源面板的左上角“源代码”按钮查看刚刚我们保存的素材配置。

  金沙城中心赌场 21

  “groups”:代表的是我们使用了多少个资源组,每个资源组分别需要加载什么素材,这个资源组叫什么等等。这些所有都使用字符串命名的方式进行辨识。

  “resources”:则涵盖了所有的资源名字类型以及其路径。注意的是这里不需要使用绝对路径,绝对路径稍后会在Main类中配置。

  另外,资源配置的命名规则等等的设置可以通过点击“项目”-“项目属性”打开配置面板,然后按照个人喜好进行修改。

  金沙城中心赌场 22

  接着我们回到Main.ts中,找到Res.loadConfig()方法

  该方法的第一个参数代表的是这个配置文件json的路径,而第二个参数代表的是里面加载的资源的路径前缀,一般情况下可以使用相对路径,但我们也可以写成外部变量,方便修改成绝对路径。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图