项目概览

在此次信用卡双十一项目中，为了更好的复原视觉作用、提高开发功率，全程运用编辑器作业流程。本文将就编辑器作业流程、开发中常见问题、以及后续的资源优化进行介绍。

编辑器作业流程

编辑器作业流之所以能够提高功率，在于模型制造方、美术、开发分工清晰，而且在同一个可视化渠道作业。通常来说，互动开发在产品需求确认后就开端进行规划，协助建立完结场景后负责把编辑器项目开发为前端工程中能够用的组件。关于开发来说，编辑器工程极大地便当了进行视觉复原、联接后续开发。

编辑器项目到本地

在编辑器中，能够便利的将整个项目以 NPM 包的方法拉取至本地。

import PbrFresnelMatComponent from "@alipay/galacean-material-library/PbrFresnelMatComponent";
// 加载插件
Loader.registerClass("PbrFresnelMatComponent", PbrFresnelMatComponent);

一起在 package.json 中增加该依赖：

"dependencies": {
  "@alipay/galacean-material-library": "dev.3",
},

互动组件接入前端工程

互动部分通常以 React 组件的方法加入前端工程，与其他部分经过引擎的事件机制进行通讯。

<Galacean
  config={
    ...
}
onComplete={(engine) => {
  console.log("Game start.");
}}
onFail={(err: any) => {}}
onProcess={(process: number) => {
  console.log("load process:", process);
}}
/>

具体互动开发部分能够参见 Galacean 其他技能文章，本文不再赘述。

画布适配

适配问题是刚接触互动开发常常容易感到困惑的问题。在确认好画布的宽高后，与一般的页面布局不同，我们需求知道运用的是正交相机或许透视相机。

• 正交相机：看到的巨细无论间隔相机远近都一致，用于 2D 项目。
• 透视相机：近大远小，用于 3D 项目。

前端页面中通常会要求按宽适配，或许按高适配。相同的要求转译为画布宽度/高度下能够容纳该场景，不会穿帮也不会有元素遮挡。

• 正交相机：调整 OrthoGraphic Size。
• 透视相机：FOV、相机位置都会影响。建议让技能美术决定 FOV，由于 FOV 的值越大，透视作用越弱，与视觉关系更为紧密。在确认 FOV 后能够调整相机的位置。

引擎会依据 canvas 元素的 css 样式主动适配。一般情况下这行代码已经能够满意适配的需求，假如你有更复杂的适配需求，请阅读画布适配。

 engine.canvas.resizeByClientSize();

例如，2D 项目，画布规划高度 900 px，规划宽度 750 px，布景图在场景中高 9.5 宽 15。要求依照高度适配，需求将正交相机的 OrthoGraphic Size 设为 4.75 ( OrthoGraphic Size 从界说上为正交模式下相机的一半尺寸)，engine.canvas.resizeByClientSize( 750 / 900 )。

编辑器供给了相机预览功能，内置常见宽高，让适配愈加便捷。

优化资源

紧缩资源

全体资源巨细决定了加载速度。

1. 减少贴图内空白像素
2. 贴图巨细尽量控制在 2n 内。例如，能在 512 * 512 巨细，就不要运用 250 * 600 这样的巨细

关于 3D 类的 glTF 类型，除模型贴图外，全体巨细也和面数紧密相关，需求在模型制造时就进行预判。

运用编辑器作业流程时，编辑器项目关于资源是按需加载的，即场景中没有用到的资源不会加载。而且编辑器内置了针对贴图的图片紧缩 KTX2，以及针对模型的紧缩算法。在拉取项目时能够对全体资源进行紧缩。

下降 Drawcall

Draw Call 是由 CPU 向 GPU 发送的一条指令，依据一个烘托状态去烘托一个网格（Mesh）。下降每帧的drawcall 数量有助于运转流通。
经过引进引擎供给的 Stats 东西进行调查。drawcall 过高时可在场景经过排除法进行排查、定位问题。
编辑器项目预览中也集成了该计算面板，能够直接进行调查

import { Stats } from "@galacean/engine-toolkit-stats";
...
// 在具有相机的实体下挂载该组件
cameraEntity.addComponent(Stats);

glTF 模型

简单而言，假如一个模型有 N 种原料，那么它的 drawcall 是 N。从编辑器的调查器面板中能够便利的调查到这一信息。
原料数量是在模型制造时就决定的。比如在本次项目中，为了复原视觉作用，每个红包有 6 种原料，当场景中呈现 12 个红包时仅红包就发生 72 个 drawcall。因而，模型制造的过程中需求与美术沟通，避免后期 drawcall 过高影响功能。

精灵图集

精灵图集是 2D 项目常用的优化手段。当资源中有众多碎图时，能够在编辑器中经过精灵图集进行打包。它在带来更少的制造次数的一起，也减少了资源恳求次数，然后大大提高烘托功能。

烘托次序

帧率是指每秒钟烘托的图画帧数，单位为 fps。60 fps 是现在干流的显示器刷新率，也是大多数游戏和应用的抱负帧率。在常见类型手机上是否能跑满帧是一个重要的目标。由于帧率关系到运转流通度，需求

• 帧率不能过低（24 fps）
• 帧率安稳。假如动摇大，即使在帧率很高的情况下也会呈现卡顿

当呈现显着帧率缺失时，能够经过排除法进行排查、定位。

以本次项目为例，场景建立完结运转后未能满帧。顺次去除场景中各个元素调查帧率，发现是由布景贴图形成的。由于引擎是由远及近进行烘托，判别远近是依据包围盒中心到相机的间隔。而布景贴图与场景中其他半透明元素刚好间隔相同，导致穿插烘托、贴图处理断合批，然后导致帧率下降。经过对该布景贴图指定烘托优先级，强制依照希望次序进行烘托，保证合批。

小结

与传统前端开发不同，互动开发要求开发者在模型制造阶段就介入项目，与制造方、技能美术进行计划选型、判别功能及资源目标。编辑器不只供给了一个协作的渠道，而且能以内置的东西帮助开发者提高功率，联接后期功能优化。

怎么联系我们

Galacean 开源社区群 (钉钉)：

Galacean 开源社区群 (微信)：

增加群管理员微信：zengxinxin2010， 并备注 “galacean 加群”

网站

官网地址
galacean.antgroup.com
Engine 源码地址
github.com/galacean/en…
Engine Toolkit 源码地址
github.com/galacean/en…