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

游戏引擎

Web游戏引擎

• Cocos
  • 优势
    • 平台支持能力好
    • 完善的游戏功能支持
    • 生态较好
  • 缺点
    • 3D能力仍在建设中
    • 版本迭代过快
• Laya
  • 优势
    • 3D能力比较成熟，号称市场占有率90%
    • 支持JS、TS、AS
    • 引擎体积小
  • 缺点
    • 界面能力不友好
    • 生态很差
    • 会员制
• Egret
  • 优势
    • 工具链比较完善
    • 第三方库支持好
    • 企业定制能力强
  • 缺点
    • 更鞋迭代遭瓶颈
    • 生态较差
• CreateJS & Phaser
  • 这两个游戏引擎诶呦可视化界面
  • 以CreateJS为例
    • 它是多个库的集合，EASELJS（控制素材展示与组合）、TWEENJS（控制素材缓动动画）、SOUNDJS（控制声音）、PRELOAD（控制加载），通过预加载后的素材展示、动画、声音构成游戏
  • Phaser游戏引擎，除了CreateJS为基础的展示、声音、动画、加载系统，还涉及了摄像机、物理引擎、内置浏览器、插件系统等高级功能
• 功能引擎
  • 大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的是渲染引擎和物理引擎
  • 功能引擎是专注于某个方向能力的引擎，其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个渲染引擎，通常被误认为是一个完整的游戏引擎，但他们是专注于渲染能力的渲染引擎
  • 下面是几种可能会经常接触的功能引擎

2D游戏引擎的技术架构

• 以Cocos的引擎架构为例子

Web游戏引擎的渲染原理

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

游戏前端开发人们技能树

PixiJS + Web开发

PixiJS简介

• 
• 前端技术栈
  • Web前端开发基础
  • 用过JSON文件，知道用来干什么的
  • 了解过Canvas的绘图API

Web项目中加载一个游戏玩法

1. 安装和引用：npm安装或者通过script标签引入<script src="pixi.min.js"></script>
2. 创建Pixi应用和舞台（Stage）
3. 显示一张图片
   • 首先理解一个概念：Sprite（精灵）
   • 学习CSS的时候可能有听过精灵图/雪碧图的概念，但是Pixi或者更多游戏引擎Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性产生交互、动画
   • 创建和控制Sprite是学习Pixi很重要的部分，而创建一个Sprite需要了解图片怎么加载到Pixi中
   • 纹理缓存（指可以被GPU处理的图像 ）
     • Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址

Cocos Creator编辑器开发

• Cocos Creator是游戏引擎吗？
  • 它是一个完整的游戏开发解决方案，包含了轻量好小的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具
• Cocos的工作流

小游戏“小”在哪？

游戏发布平台的差异性