课堂笔记

本节课重点知识

前端场景下的游戏开发
游戏引擎介绍
功能引擎介绍

前端场景下的游戏开发

游戏开发基本链路

游戏开发的团队分工组建一个最小但最完整的游戏开发团队只需要3个人:策划、程序、美术。当然，能力足够强的话可以作为独立开发者。

游戏引擎

游戏引擎最大的游戏:渲染

引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。如果不使用引擎，你可以做复杂的动效渲染和交互吗?当然可以。方便吗?不一定。所以游戏引擎更像是一套解决方案，让你在制作某一类型的产品的时候能够提高你的开发效率。你要做多平台移植? React Native、Weex、Cordova等方案也可以做到。你要做物理效果? MatterJS、ammo.js等物理引擎可以用。你要做动画?CSS实现又不是不行。复杂点?封装一个动画库。

为什么要用游戏引擎

因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。它提供游戏开发时需要的常见功能:引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。游戏引擎通常会包含渲染器,2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

前端开发过度到游戏开发

需要先有一个明确的认知:前端开发和游戏开发不是相斥的。现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。其原因可能在于: 1.接触前端开发的研发数量远大于接触游戏开发的数量（招聘成本高)2.2d游戏引擎的上手门槛已经足够低(易上手) 3.活动H5中的游戏玩法的实现方式比较模糊（开发界限模糊) 现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开发向web前端开发靠拢的一种表现。因此,以web前端开发的视角看2d游戏引擎，无非是一套框架、一套解决方案而已。但是开发理念上还是有差别的:游戏开发更关注内容。

游戏引擎介绍

Web游戏引擎——Cocos

优势

平台支持能力好
完善的游戏功能
支持生态较好

缺点

3D能力仍在建设中
版本迭代过快

Web游戏引擎——Laya

优势

3D能力比较成熟，号称币场占有率90%
支持S、TS、AS
引擎体积小

缺点

界面能力不友好生态很差

Web游戏引擎——Egret

QQ截图20220820115801.png 优势

工具链比较完善
第三方库支持好
企业定制能力强

缺点

更新迭代遭瓶颈
生态较差

功能引擎介绍

大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、uI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。功能引擎是专注某个方向能力的引擎，其特点是体积小、功能完善。特别是Pxijs和Three.js这两个渲染引擎，通常被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎。下面介绍几种可能会经常接触的功能引擎:

Web游戏引擎渲染原理

以Pixi的渲染流程为例子大致流程如下

创建一个Renderer渲染器，获取它的view(一个canvas对象），添加到Dom Tree(或者指定Dom Tree中已经存在的canvas对象作为view)
在MainLoop(主循环）中调用Renderer.render)并传入一个DisplayObject作为根点开发渲染。
从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)
WebGL的render方法执行过程render

render(display0bject，renderTexture，clear，transform，skipUpdateTransform){
//1．应用变换(GPU级别)
this.projection.transform = transform;
//2．渲染纹理绑定与BatchRendering处理this.renderTexture.bind( renderTexture);this.batch.currentRenderer.start( );
//3．执行元素渲染，将顶点、索引和纹理等数据添加到BatchRendering中displayobject.render( );
//4．执行renderer的绘制方法
this.batch.currentRenderer.flush( );
//根据传入的clear与renderTexture参数对纹理的处理...
// 5．清空变换
this.projection.transform = null;

Canvas的render方法执行过程

render(display0bject，renderTexture，clear，transform，skipUpdateTransform){
const context = this.context ;
//1．当前状态压入状态栈
context.save( );
//2．初始化变换及样式属性
context.setTransform( 1，0，0，1，0，0);context.globalAlpha = 1;
this._activeBlendMode = BLEND_MODES.NORMAL;this._outerBlend = false;
context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORIMAL];
//3.执行元素渲染
const tempContext = this.context;this.context = context;
displayobject.renderCanvas( this );this.context = tempContext;
//4．从状态栈恢复之前状态
context.restore( );

游戏开发的技能树

QQ截图20220821165332.png

小游戏开发|青训营笔记