这是我参与「第四届青训营 」笔记创作活动的第7天
写在前面
从最为广泛的定义来讲小游戏是一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的，在英语中，体育比赛，也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。回顾过去从街机家用电脑、LCD掌机、3D出现到网络游戏出现游戏的控制方式彻底变革，到现在移动端小游戏呈现高分辨率，高开发成本特性。而现代的three.js等工具链使得web游戏开发成为可能。
从游戏引擎开始
因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。借助游戏引擎，能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的开发时间做出更好的效果，特别是关于渲染效 率和性能优化，它提供游戏开发时需要的常见功能，它提供游戏开发时需要的常见功能：引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单；专业引擎通常会能比自制引擎表现出更好的性能。
现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开发向web前端开发靠拢的一种表现。
而Web引擎一般是利用Canvas和 WebGL为底层技术抽象的图像绘制库。
Web游戏引擎-Egret
Web游戏引擎-CreateJS & Phaser
功能引擎
一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。
渲染流程-以Pixi为例
- 创建一个Renderer渲染器，获取它的view (一个canvas对象)，添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)
- 在MainLoop(主循环）中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。
- 从场景树的根节点开始，以zlndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)
- WebGL的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;
