小游戏开发 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第8天

前端场景下的游戏开发

开发链路和角色

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

为什么要使用游戏引擎

游戏引擎更像是一套解决方案，让你在制作有一类型的产品的时候能够提高你的开发效率。 能够实现，可移植、物理效果、和动画特效。

前端开发过渡到游戏开发

前端开发和游戏开发不是互斥的

以Web前端开发的视角看2d游戏引擎，无非是一套框架，一套解决方案而已，但是开发理念还是有差别的：游戏开发更关注内容

游戏引擎

特定类型的客户端游戏引擎

The NVL Maker

RPG Maker

Web游戏引擎

利用Canvas和WebGL为底层技术抽象的图像绘制库

Cocos

优势 ： 平台支持能力好，完善的游戏功能支持，生态较好 缺点 ： 3D能力仍在建设中，版本迭代过快

Laya

优势 ： 3d能力比较成熟，号称市场占有率90%，支持js、ts、as，引擎体积小 缺点 ： 界面能力不友好，生态很差

Egret

优势 ： 工具链比较完善，第三方库支持好，企业定制能力强 缺点 ： 更新迭代遭到瓶颈，生态很差

CreateJs & Phaser

功能引擎

Web游戏引擎的渲染原理

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

5、canvas的render方法的执行过程

PixiJS+Web开发

1、安装引入

npm安装或者通过script标签引入

2、创建Pixi应用和舞台

3、显示一张图片

现在已经创建了一个Sprite了，下一步就是显示它

4、让图片动起来

前面我们说到了可以设置Sprite的位置大小

那么每帧移动一个像素，我们用到游戏循环

Cocos Creator编辑器开发

cocos的工作流

创建项目

搭建场景 ： Cocos的工作流-数据驱动和场景为核心、组件式开发为核心

搭建场景 ： 节点是继承组件的实体，我们通过将具有各种功能的组件挂载到节点上，来让节点具体有各式各样的表现和功能。节点构成节点树，节点树影响真实的渲染层级

导入资源+显示资源 从操作系统的其他窗口拖拽到CocosCreator窗口中的资源管理器面板上，就能够从外部导入资源，该操作会自动复制资源到项目资源文件夹下并完成导入操作。

然后把图片拖拽到层级管理器即可生成一个cc.Sprite

运行调试

构建

构建游戏，可以选择多平台，产物即对应生成，比如Web Moblie

产物可以直接部署在对应的平台，比如Web产物部署到服务器、小游戏产物部署到开发者平台。