【JS/TS游戏开发实战】LayaAir 全平台 3D 引擎
LayaAir3.0引擎，包括引擎代码、项目开发工具、项目发布，三大部分。
目录
-
- 一、引擎代码
-
- 1.1 引擎通用部分
- 1.2 2D引擎
- 1.3 3D引擎
- 二、IDE(集成开发环境)
-
- 2.1 通用模块
- 2.1 2D模块
- 2.2 3D模块
- 三、项目发布
-
- 3.1 Web版发布
-
- 3.1.1 构建发布
- 3.1.2 发布选项
- 3.2 小游戏发布
- 3.3 Native打包发布
-
- 3.3.1 测试器：
- 3.3.2 构建工具：
- 3.3.3 反射机制:
- 3.3.4 渠道对接工具内(conchMarket):
- 3.3.5 LayaPlayer：
- 3.3.6 LayaNative的原理和开发流程
- LayaAir 引擎的服务与生态
一、引擎代码
引擎代码，除了开放式的可编程的渲染管线，全平台的图形引擎架构，次世代PBR渲染流，ClusterLighting多光源技术，Forward+渲染管线，高性能并行渲染器API的接入（WebGPU）等核心基础。对于开发者而言，我们从通用、2D、3D，这三个部分来分别介绍。
1.1 引擎通用部分
- 网络（HTTP请求、WebSocket请求）
- 加载（可加载文本、JSON、XML、二进制、音频、视频、骨骼文件、图像文件等资源）
- ECS组件系统（组件系统、生命周期方法）
- 场景管理
- 事件（派发、侦听，捕获）
- 交互（鼠标、键盘、屏幕touch、VR手柄）
- 多媒体播放（音频、视频）
- 缓动
- 浏览器接口（封装常用的浏览器window功能、调用浏览器window功能）
- 设备接口（陀螺仪、加速计、地理位置）
- 节点
- 屏幕适配
- 小游戏适配（微信、手机QQ、字节跳动小游戏、OPPO、vivo、……等）
1.2 2D引擎
- 2D精灵（2D基础显示对象与容器）
- 2D视图（视窗、弹窗）
- 2D动画（图集动画、逐帧动画、缓动动画、时间轴动画、龙骨动画、spine动画）
- 2D文本（基础文本、HTML文本、BitmapFont位图字体）
- 2D UI组件（图像、按钮、显示文本、文本输入、文本域、下拉框、多选框、单选框、单选框组、导航标签组、导航容器、位图切片、位图字体切片、 垂直滚动条、水平滚动条、进度条、垂直划动条、水平划动条、取色器、基础容器、列表、树状列表、面板容器）
- 2D UI效果（遮罩、滤镜）
- 2D场景继承类（管理UI）
- 2D绘图（绘制矩形与圆角矩形、绘制圆形与扇形、绘制多边形、绘制线段、绘制折线、绘制曲线、绘制纹理与填充纹理）
- 2D物理（Box2D）
- Tiled Map地图
1.3 3D引擎
- 3D精灵（3D基础显示对象与容器）
- 3D基础工具（3D坐标系、3D变换、3D数学工具、等）
- 3D场景（场景管理、环境光、环境反射、场景天空、场景雾、等）
- 3D摄像机
- 3D光照（方向光、点光、聚光、区域光、阴影、光效）
- 3D网格
- 3D材质（模型材质、粒子材质、拖尾材质、天空材质）
- 3D纹理
- 3D粒子系统
- 3D拖尾
- 3D物理（bullet 、PhysX）
- 3D动画（刚体动画、材质动画、骨骼动画、摄像机动画、时间轴动画）
- 自定义Shader
- webXR
二、IDE(集成开发环境)
IDE的概述，也分为通用模块、2D模块、3D模块进行概要说明。
2.1 通用模块
- 层级管理面板
- 项目资源面板
- 场景视窗
- 预览窗口
- 控制台面板
- 时间轴动画面板
- 动画状态机面板
- 属性设置面板
- 项目设置面板
- IDE插件开发
- IDE资源商店
2.1 2D模块
- 2D布局小部件（基础显示对象节点、UI组件、骨骼动画节点）
- 2D动画编辑
- 2DUI编辑
- 2D脚本管理
- 场景继承类管理
- 2D预制体
2.2 3D模块
- 3D场景编辑
- 3D摄像机
- 3D灯光设置
- 3D动画编辑
- 3D粒子系统
- 3D材质编辑
- 3D蓝图编辑
- 3D预制体
- 3D物理编辑
三、项目发布
3.1 Web版发布
Web发布功能是非常核心的功能，通常是指发布为HTML5版本，运行于浏览器环境、webView、LayaNative的APP环境中。在项目完成开发，或阶段性完成开发，准备提交到生产环境中进行测试时，通常会用到项目发布的功能。由于LayaAir 3.0 IDE在功能和结构上与2.0相比有很大的变化，在IDE Web发布上面来说，开发者需要更多的注意资源目录的问题。
3.1.1 构建发布
使用IDE 发布项目，开发者首先在文件菜单中，打开“构建发布”选项，如图所示：
3.1.2 发布选项
构建发布选项打开后，我们来看看都有哪些选项：
名称：项目的名称，对于Web发布来说，就是html中的title名称。
目标平台：选择不同的平台类型，会在发布的时候适配不同的平台。
输出目录：输出目录是指要发布到的目标目录，默认在项目的release目录下，这里不建议更改。当然，开发者如果有需求自定义输出目录，可以在项目所在的目录，也可以是与项目无关的目录。
压缩引擎库：勾选后，将使用压缩后的引擎类库。
压缩JS文件：勾选后，将使用压缩后的JS文件。
Sourcemap：勾选后，输出目录会打包”.js.map“文件，用于源代码映射。
启动场景：启动项目运行时的第一个场景。
包含场景：所包含的场景所引用的资源会拷贝到输出目录中。
始终包含的资源目录：所选资源目录下的资源始终拷贝到输出目录中。
拷贝BIN目录下文件：勾选后，发布的输出目录会包含工程目录中bin文件夹中的文件。
开启版本管理：勾选后，将会对发布的文件名添加key值用于版本管理映射，可以有效避免缓存或CDN带来的错误加载影响。
开启分包：勾选后，开启分包功能。
3.2 小游戏发布
提供了各小游戏平台的适配库，以及快捷的各小游戏平台发布功能。
发布平台中有目前有八种选择选项，分别为：Web、Android、iOS、字节跳动小游戏、OPPO小游戏、VIVO小游戏、微信小游戏、小米快游戏。如图所示：
3.3 Native打包发布
支持发布为iOS与安卓平台的安装包。
LayaNative是LayaAir引擎针对移动端原生App的开发、测试、发布的一套完整的开发解决方案，但不局限于LayaAir引擎。LayaNative以LayaPlayer为核心运行时的基础上，利用反射机制、渠道对接方案提供开发者在原生App上进行二次开放和渠道对接，并提供测试器、构建工具，为开发者将html5项目打包、发布成原生App提供便利。
LayaNative包含以下内容:
3.3.1 测试器：
下载安装测试器后，通过扫码URL二维码的方式，帮助开发者快速在移动端看到运行效果, 节省大量反复打包测试的时间；
3.3.2 构建工具：
构建工具可帮助开发者快速构建移动端APP项目工程, 然后使用Android Studio、Eclipce、XCode 等开发工具打开->构建->运行；
3.3.3 反射机制:
通过反射机制,开发者可以实现JavaScript与原生语言(Android/Java 或 iOS/Objective-C)的相互调用，通过反射机制开发者可以很方便的对应用程序进行二次扩展；
3.3.4 渠道对接工具内(conchMarket):
渠道对接工具内嵌了渠道常用对接API，例如: 登录, 分享, 充值,好友关系链等；
3.3.5 LayaPlayer：
LayaPlayer是LayaNative最核心的部分，它是一个基于JavaScript脚本引擎 + openGLES硬件加速渲染的跨平台引擎，通过对内存与渲染流程进行极致优化，为基于HTML5、WEBGL的多媒体应用、游戏等产品加速，使其性能媲美原生Native-APP。LayaPlayer采用C++语言编写,可嵌入浏览器或操作系统运行，也可以独立运行。
3.3.6 LayaNative的原理和开发流程
（1）、使用LayaAir开发的项目，准备在发布成app版本（ios或android）。
（2）、LayaNative会使用核心引擎LayaPlayer进行加速。
（3）、开发者可以使用测试器，快速安装到移动设备上进行简单的测试。
（4）、最终通过命令行或者IDE，构建ios或android的工程，进行编译、执行。
（5）、如果需要发布到各大渠道（例如：百度、360、AppStroe、google等），需要通过反射机制进行二次开发（即：对接渠道的SDK，登录、充值、分享等）。
（6）、最后构建成app进行安装、测试、发布。
流程如图所示：
LayaAir 引擎的服务与生态
LayaAir引擎开源免费，拥有超百万的开发者生态。
提供了：免费的社区服务、LayaAir集成开发环境（IDE）、丰富的学习资料（文档、API、DEMO、视频）。
引擎官网地址：https://layaair.com/
引擎社区地址：https://ask.layaair.com/