深入解析:HTML5游戏开发入门,推荐必看游戏引擎指南

更新:10-27 民间故事 我要投稿 纠错 投诉

游戏场景分类

当我们第一次收到游戏需求时,我们可以从以下几个方面进行考虑,分析游戏需求场景,这将作为我们选择游戏引擎的依据。

游戏效果呈现方式(2D?3D?VR?)

这与游戏引擎可以支持的渲染方法直接相关。目前H5游戏渲染方式一般包括2D渲染、3D渲染、VR渲染三种。

2D渲染一般有三种类型:Dom渲染、Canvas渲染、WebGL渲染。由于性能原因,Dom一般只适合动画效果较少、交互较少的小游戏。本文主要介绍Canvas和WebGL。

一般来说,对于2D小游戏来说,Canvas渲染就足够了。但Canvas渲染由于底层封装层数较多,无法支撑大型游戏的性能需求。因此,大型游戏最好选择WebGL渲染或者浏览器嵌入的Runtime。游戏复杂度

这和游戏引擎能够支持的功能、提供的API、性能有很大关系。

游戏引擎推荐

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

引擎支持的渲染方式github 星数更新时间文档详情周边产品2D,3D,VR 都支持的游戏引擎image

Egret

imageEgret 周边产品

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

LayaAir

渲染模式方面,LayaAir支持Canvas和WebGL。在工具流程支持方面,主要提供LayaAir IDE。 LayaAir IDE包含代码模式和设计模式,支持代码开发和美术设计分离,内置SWF转换、相册打包、JS压缩加密、APP打包、Flash发布等实用功能。

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

Pixi.js

一般来说,WebGL的渲染速度比Canvas要快,这是由两者的绘制路径决定的。 Pixi最大的特点是Pixi拥有完整的WebGL支持,但不需要开发者掌握WebGL相关知识,并且在需要时可以无缝回落到Canvas。与很多同类产品相比,它的渲染能力是比较强大的。然而,Pixi也有缺点。 Pixi对动画的支持比较缺乏。在实际开发中,经常需要引入额外的动画库,例如GSAP。

Phaser

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

CreateJS

imageCreateJS周边产品

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

Hilo

Hilo是阿里巴巴团队推出的开源项目。支持模块化开发,提供多模块范式的打包版本和跨终端解决方案。适合开发营销小游戏。它的大小也比较轻,只有70kb左右。 Hilo支持DOM渲染、Canvas渲染和WebGL渲染,还集成了Hilo Audio和Hilo Preload。随后推出的希洛3D也是其亮点之一。

Cocos2d-x

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

lufylegend.js

lufylegend.js 的最新更新是在2016 年,但其社区仍然非常活跃。如果您遇到任何开发问题,您可以在社区中轻松找到解决方案。 lufylegend.js可以支持基本的游戏功能,但是扩展性不是很强。

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

Three.js

imageThree.js 官方案例

相信Three.js对于很多关注3D游戏的开发者来说已经很熟悉了。事实上,Three.js 的官方定位并不是游戏引擎,而是一个JS 3D 库。 Three.js更偏向于展示式视觉呈现,直接使用Three.js开发H5游戏的情况并不多见。在渲染环境方面,Three.js支持两种渲染模式:WebGL和CSS3D。

PlayCanvas

从渲染支持来看,PlayCanvas不仅支持3D WebGL渲染,还保持了对VR的支持,并且具有比较好的扩展性。在工具流程支持方面,提供在线编辑、发布托管等服务。从官方教程来看,教程也比较详细。

结语

现在市场上有很多H5游戏引擎。很难直接定义哪种发动机好或坏。我只能说每个引擎都有自己的特点,在某些方面与项目更加契合。根据目前的市场情况我和一些比较流行的引擎做了一些比较。希望对刚开始做技术选型的您有所帮助。您可以找到适合您项目的引擎,更快、更准确、更高效地完成项目需求。

感谢您的耐心阅读。希望你能有所收获。如果有不足之处,欢迎留言指出。

关于深入解析:HTML5游戏开发入门,推荐必看游戏引擎指南的内容到此结束,希望对大家有所帮助。

用户评论

你与清晨阳光

想学H5游戏开发,一直不知道从哪个引擎开始下手呢?

    有11位网友表示赞同!

矜暮

这篇文章正好帮我解惑了!

    有6位网友表示赞同!

执笔画眉

感觉现在H5游戏越来越火啊,也想尝试做一款自己的作品。

    有16位网友表示赞同!

暖瞳

学习游戏引擎太需要耐心和毅力了,希望能够早日上手完成我的梦想。

    有7位网友表示赞同!

铁树不曾开花

原来还有这么多不同的引擎选择,好让人眼花缭乱!

    有13位网友表示赞同!

你tm的滚

这个推荐挺全面的,各个引擎都有简单的介绍,很好理解。

    有13位网友表示赞同!

弃我者亡

不知道哪个引擎适合新手比较好入门?

    有12位网友表示赞同!

等量代换

想开发一些小型的趣味游戏,请问哪个引擎更合适?

    有18位网友表示赞同!

ˉ夨落旳尐孩。

这篇文章给我打开了新世界的大门!

    有16位网友表示赞同!

别伤我i

我之前一直想学习H5游戏开发,现在终于有了开始的勇气了。

    有12位网友表示赞同!

无所谓

希望能分享更多具体的制作教程,让我能够更快地入门。

    有18位网友表示赞同!

揉乱头发

希望以后还能看到更多的H5游戏引擎介绍和比较解析。

    有11位网友表示赞同!

抚涟i

了解不同引擎的优缺点对我来说很有帮助!

    有12位网友表示赞同!

拥菢过后只剰凄凉

学习游戏开发是一件很有成就感的体验吧?

    有15位网友表示赞同!

苏莫晨

这篇文章让我对H5游戏的开发有了更深入的理解。

    有12位网友表示赞同!

寒山远黛

学习引擎需要付出很多时间和精力,但是我相信可以收获很多乐趣!

    有7位网友表示赞同!

晨与橙与城

感谢作者分享这份宝贵的信息,让我迈出了H5游戏开发的第一步!

    有8位网友表示赞同!

罪歌

希望看到用这些引擎制作的游戏作品,真期待啊!

    有5位网友表示赞同!

你的眸中有星辰

学习完引擎之后,还需要学习哪些技能呢?

    有8位网友表示赞同!

半世晨晓。

未来H5游戏的发展潜力大吗?值得投入时间学习吗?

    有6位网友表示赞同!

【深入解析:HTML5游戏开发入门,推荐必看游戏引擎指南】相关文章:

1.动物故事精选:寓教于乐的儿童故事宝库

2.《寓教于乐:精选动物故事助力儿童成长》

3.探索动物旅行的奇幻冒险:专为儿童打造的童话故事

4.《趣味动物刷牙小故事》

5.探索坚韧之旅:小蜗牛的勇敢冒险

6.传统风味烤小猪,美食探索之旅

7.探索奇幻故事:大熊的精彩篇章

8.狮子与猫咪的奇妙邂逅:一场跨界的友谊故事

9.揭秘情感的力量:如何影响我们的生活与决策

10.跨越两岸:探索彼此的独特世界

上一篇:在家轻松赚钱:盘点十个一单一结的兼职平台,实现兼职零投入 下一篇:阿里云SSL证书年度费用一览:免费与收费价格详细对比