游戏学习- h5游戏引擎
1. 游戏技术选型场景分析
1. 游戏呈现效果
在刚接到游戏需求时，我们可以从以下几个方面进行考量，分析出游戏需求场景所属，从而作为我们选择游戏引擎的依据。
-
游戏效果呈现方式（ 2D ？ 3D ？ VR ？）
从需求的角度，看需要呈现游戏效果是2D 、3D、VR？不同的呈现有不同的支持较好的游戏引擎，每种引擎都有侧重面，下文会分析运用在2D、3D场景不同游戏引擎的选择。
-
游戏复杂度 这与游戏引擎能够支持的功能，提供的API，性能等方面关系比较大。
2. 当前团队技术体系
在选择游戏引擎时，需要考虑现有团队的技术线条能否支撑，一般的引擎支持的开发语言包括c#、Lua、C++、JavaScript、 Typescript, 结合现有团队能力进行考量。
3. 应用的广度
考虑的是产品需要跨端的能力，期望小游戏能够在哪些端运行。桌面游戏、手游、小程序、H5等场景。
以下是常见的可以实现游戏的引擎总结
| 游戏引擎 | 引擎类型 | 支持场景 | 开发语言 | 跨端能力 | 优势 | 劣势 |
|---|---|---|---|---|---|---|
| Unity | 游戏引擎 | 2D、3D、XR | c#、Lua、typescript(基于puerts) | 全端 | 3D、跨端、编辑器 | 收费、核心重 |
| Cocos | 游戏引擎 | 2D、3D、XR | javascript、typescript | 全端 | 2D、学习资料多、国内市场率高、编辑器 | 相对轻量、3D场景不多 |
| Layabox | 游戏引擎 | 2D、3D、XR | AS 、javascript、typescript | 全端 | H5 上运行3D性能强，案例多 | 学习资料较少 |
| UE5 | 游戏引擎 | 3D、VR、XR | C++ | windows、Linux、IOS、android、XBox | 高画质 | 学习成本高、不支持H5 |
| 白鹭 | 游戏引擎 | 2D、3D | javascript、typescript | h5 | 2D场景 | 停止维护、破产 |
| three.js | 渲染引擎 | 3D | JavaScript、typescript | H5 | 轻量、高性能基于webGL 的3D渲染引擎、社区强大，支持webGPU | 纯渲染引擎、需要其他功能要引用别的三方插件 |
| pixi.js | 渲染引擎 | 2D | JavaScript、typescript | H5，可依赖Cordova and Electron发布移动端和桌面版 | 轻量、高性能基于webGL 的2D渲染引擎 | 纯渲染引擎、动画薄弱、无物理系统 |
| Phaser | 游戏引擎 | 2D | JavaScript | H5，可依赖Cordova and Electron发布移动端和桌面版 | 在pixi.js基础上封装、新增动画、物理系统 | 国内资料少 |
| Babylon.js | 游戏引擎 | 3D | Javascript、typescript | 全端 | 基于webGL的可发布全端、有编辑器、模块化, webGPU支持较好 | 国内资料少 |
| Hilo | 游戏框架 | 2D | javascript | H5 | 轻量、营销型小游戏 | 3年没更新了，框架老旧 |
引擎类型
WebGL 框架和引擎按照定位可以分成这三种类型：
- WebGL 封装，定位是简化 WebGL 开发，最大的特点是必须自己写 GLSL 才能用。
- 渲染引擎，定位是三维物体及场景展示，一般会抽象出场景、相机、灯光等概念，上手门槛低，不需要自己写 GLSL。
- 游戏引擎，定位是游戏开发，在前面的渲染引擎基础上，还提供了骨骼动画、物理引擎、AI、GUI 等功能，以及可视化编辑器来设计关卡，支撑大型游戏的开发。游戏引擎架构可详见这个网站
2. 常见的游戏引擎详细介绍
unity
Unity, 使用C#或Lua语言开发。国民3D引擎，这个称号说明了Unity在3D引擎的市场地位，中小型的游戏公司做3D游戏，基本都是用Unity, 很多大公司的游戏也用Unity, 比如《王者荣耀》, 国外什么情形呢？AppStore上面80%的3D游戏都使用Unity游戏引擎开发。为什么Unity打败了众多高手，成为国民游戏引擎，我们也好好的说一下。时间回到2010年左右，当时页游比较火，Unity那个时候引擎的定位是能开发PC端游和页游的游戏引擎。随着手游时代来临，市场急需一个3D游戏引擎，能一次开发多平台发布到Android与iOS, 而Unity成为了当时唯一的3D游戏引擎解决方案。和手游市场一起，Unity实现快速增长。Unity能成为国民引擎还有一个很重要的原因，就是对初学者很友好，很方便就可以上手，极大的降低了3D游戏开发难度, Unity引擎的市场份额越来越大，技术人才, SDK，第三方插件, 技术资料等也越来越完整。总结一下Unity的特点:
(1) 能制作精美的3D游戏画面，和定制渲染管线，画面效果不如UE5。
(2) 能制作各种类型的3D游戏上线，每种类型的游戏都被商业项目验证过。
(3) 完整的生态，一次开发多, 平台发布(PC, android, iOS, xBox)。
(4) Unity不开源, 需要支付授权费才可以修改引擎代码, 发布后也要付授权费。
(5) Unity开发2D游戏相对包体过大。
(6) Unity 3D H5支持比较薄弱,不支持微信/抖音/华为/Facebook等H5小游戏平台。
unity 支持ts开发的方案puerts，github.com/Tencent/pue…，
unity webGL 开发指南zhuanlan.zhihu.com/p/475307249
cocos
Cocos Creator 使用JavanScript/TypeScript开发。回到2010年，手游刚刚兴起的时候，如果没有听过Cocos, 那么你一定不是手游行业的。2010年的时候，能跨平台开发的游戏引擎只有Cocos(Unity还不能支持手机平台), 2010年的时候手机硬件性能还有限，大部分都是2D游戏为主，Cocos 成为了国民手机移动端游戏引擎，那时,很多手机游戏，都是基于Cocos开发，也让它迅速了占领了开发者的市场。后来随着手机硬件的发展，3D游戏越来越多，手游市场份额慢慢的被Unity取代。Cocos引擎完全免费，包体小，做2D游戏技术成熟， Cocos Creator开发工具于Unity的易用性一样，极易上手。H5技术成熟，最近2年，全新引擎全面支持3D，一次开发能发布到PC端，Android,iOS,微信抖音华为等各大H5小游戏平台。总结一下Cocos Creator特点:
(1) 引擎完全免费，开源，包体小,定制灵活;
(2) 引擎开发2D游戏经过大量验证，非常适合2D游戏开发。
(3) 全新的3D引擎,能开发3D游戏，但是还有提升空间。
(4) 一次开发，多平台发布，与传统引擎不同的是，可以发布H5的平台。(微信/抖音、华为小游戏平台)
(5) Creator 3D引擎生态还不够丰富, 如第三方插件等。
(6) Cocos Creator 开发2D游戏得到大量验证，3D还需产品验证。
(7) Cocos H5 游戏runtime内核在行业做的非常好，可以提供高效的H5游戏运行方案。
Laya
Laya游戏引擎，使用As, Js, Ts开发。H5 刚新起时，H5跑3D游戏，很多公司都不看好，认为以H5的性能，不足以跑效果好的3D游戏, 但是H5游戏有普通游戏无法比拟的优点就是不用安装，点开就可以玩。那个时候PC页游已经发展成熟，同时手机页游大规模兴起，页游依靠FlashPlayer,而到手机上，就没有FlashPlayer这个东西，随之取代的就是H5。对于是页游的开发者，想要把游戏跑到手机网页上，就需要将Flash开发的游戏，转成H5游戏。Laya最开始就是完成这件事情的。所以Laya支持的开发语言有AS， JS， TS，就是这么来的。Flash转H5,商业上不上太成功，后来随着h5的发展，直接转为H5 3D游戏引擎，是最早在H5上跑出大型商业3D游戏的H5 3D引擎, 在H5 3D这块积累了很多经验和成熟上线的产品案例，现在80%左右的3D微信抖音oppo vivo小游戏都是laya引擎做的。Laya是先做H5平台，然后再做的native平台(PC, iOS, Android)。总结一下Laya的特点:
(1) 最早的被大规模商业项目验证的H5 3D游戏引擎，发布微信抖音等小游戏平台非常成熟。
(2) 借用强大易用的Unity编辑器可兼容3D资源,如果一个游戏是Unity开发，你要移植到H5，那么Laya一定是首选。
UE5
UE5, 开发语言C++和蓝图。UE4是3A游戏开发者引擎的首选，它以逼真的渲染效果著称。很多大型的3A游戏都采用UE4来开发，比如腾讯的《和平精英》等。UE4采用C++开发，虽然有蓝图，但是很多公司正式项目都去蓝图化，采用C++开发游戏，与C#和Js/Ts相比,开发难度大,当然C++可以获得更好的性能。UE5不支持H5，但是可以发布到主流的游戏平台，PC，iOS, Android等，但无法发布到H5游戏平台。总结一下UE5的特点:
(1) 画面效果好，3A游戏的首选。
(2) C++开发难度相对较大，所以爱她的程序员和恨她的一样多。
(3) 开发3A级游戏技术成熟, 画面效果好。
(4) 不支持H5。
白鹭游戏引擎
白鹭引擎，开发语言是Js/Ts。白鹭游戏引擎对于H5游戏是有着不可磨灭的贡献，它是最早的H5游戏引擎，它里面的很多工具非常好用，到现在还被其他的引擎使用，比如骨骼动画工具，DragonBones被广泛引用到游戏开发中。最早一批的H5游戏开发者一定都是使用白鹭。白鹭引擎在H5游戏这个邻域有着不可磨灭的贡献。后来白鹭也推出了Native平台。总结一下白鹭的特点:
(1) H5游戏的先驱，为H5游戏做了不可磨灭的贡献。
(2) H5 2D游戏技术成熟，经过很多商业游戏验证;
(3) 3D功能有，但是商业项目3D游戏用的比较少;
从官网上看，白鹭引擎不维护了，貌似破产清算了
3. H5游戏
3.1 h5游戏的渲染方式
现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。 而 2D 渲染一般也有三种：Dom 渲染、Canvas 渲染、WebGL渲染。Dom 由于性能原因，一般只适合做一些动画效果较少，交互较少的小游戏，本文主要针对 Canvas 和 WebGL 展开介绍。 一般来说，对于 2D 小游戏来说，Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多，不足以支撑起大型游戏的性能要求，因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime。
web中的3D渲染可以参考这篇文章www.zhihu.com/question/31…
总体来说，3D渲染迭代路线分成了两种技术方案：Native和Web。
Native： 是我们的电脑、手机等硬件设备，通过安装本地的应用程序APP，直接通过图形API和相关驱动调用显卡的计算和渲染能力，完成真实物体的3D渲染数字化的过程。
Web： 是通过浏览器，在网页页面中，实现现实世界的数字化渲染的过程。
目前开放了webGPU API的浏览器可以参考caniuse.com/webgpu
在chrome浏览器中可以使用beta版本来进行webGPU的测试 www.google.com/chrome/cana…，或者chrome.com/beta
渲染引擎的发展历史
WebGL 与 WebGPU 的区别
WebGPU现状
关于 WebGPU 的现状，所有的浏览器厂商都在逐步对接当中，尤其是 Chrome，2023 年 3-5 月就会支持 WebGPU。目前主流的引擎支持有 Babylon、Three.js 以及 Cocos Creator。
3.2 适合H5的引擎
| Engine | 2D Render | 3D Render | JavaScript | TypeScript |
|---|---|---|---|---|
| Three.js | NO | YES | YES | YES |
| Phaser | YES | NO | YES | YES |
| Pixi.js | YES | NO | YES | YES |
| laya | YES | YES | YES | YES |
| cocos | YES | YES | YES | YES |
| PlayCanvas | YES | YES | YES | NO |
| Babylon.js | No | YES | YES | YES |
