【JS/TS游戏开发实战】LayaAir 全平台 3D 引擎

LayaAir3.0引擎，包括引擎代码、项目开发工具、项目发布，三大部分。

一、引擎代码

引擎代码，除了开放式的可编程的渲染管线，全平台的图形引擎架构，次世代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/