摘要

本文主要介绍了 2024 年抖音春节活动中 SAR Creator 编辑器的工作流程、常用功能、工程配置，还提及开发实践、未来展望、团队相关信息等内容。

一、前言

本文围绕 2024 年抖音春节活动中的 SAR Creator 互动方案展开。SAR Creator 是基于 TypeScript 的互动解决方案，支持多平台，有图形化界面并集成多种功能，用于字节内部众多互动业务。本文将介绍编辑器在春节活动中的工作流程、功能、工程配置等内容。

二、工作流程

（一）解耦研发与设计工作

1. 对于设计同学，可以在研发同学的在线编辑器协作，也能独立制作，通过 Asset Package 包交付资产。
2. 对于开发同学，能可视化搭建场景和配置资产，直观检查资产信息。

三、资产制作

（一）Sar Creator Launcher 工具

为方便设计同学脱离研发单独制作美术资产，提供了 Sar Creator Launcher 工具。其功能包括管理编辑器多个版本安装、创建新项目、快速启动项目、查看版本更新信息等。

（二）资源导入与导出

1. 设计同学可将 PS、Blender、Spine 制作的资源导入 SAR Creator 组合成场景，然后导出为预制体资源（prefabs）。
2. 动效预览时，设计同学产出的资源可在 SAR Creator 中播放预览和调整，支持多种动画类型，如 lottie、spine 等。
3. 资产导出时，设计同学将预制体右键导出为 asset 压缩包发给研发同学，研发同学在 game 目录右键导入资源包即可。

四、功能介绍

（一）画布适配

1. 基本原理
   • SAR Creator 通过指定设计宽度和高度来确保互动区域在不同设备上正常显示。
2. 适配策略
   • FixedWidth：互动区域保持设计宽度，高度根据纵横比自动调整。
   • FixedHeight：保持设计高度，宽度根据纵横比调整。
   • Auto：按比例缩放互动区域，可能出现空白区域但内容无失真。

（二）2D & 3D 混合开发

1. 组合元素
   • 在 SAR Creator 编辑器中可轻松添加 2D 和 3D 对象，调整层级关系、渲染顺序和视觉表现，还可设置灯光和相机效果。
2. 开发速度对比
   • 以项目为例，使用前端技术编写 UI 界面逻辑耗时 3 天，而使用 SAR Creator 2D 场景制作 UI 仅耗时 0.5 天。

（三）Bundle 分包

1. 分包操作
   • 选中文件夹勾选配置为 Bundle 即可在构建时拆分资源为独立 Bundle 包。
2. 分组选项
   • 无：不做优化。
   • 合并依赖：合并相互依赖的资源二进制文件减少加载请求次数。
   • 全部合并：将所有资源二进制文件合并为一个，减少请求数量但可能增加单个资源加载时间。

（四）图片分级

1. 原理与使用
   • 为适应不同设备性能，SAR Creator 对图片提供分级功能，勾选去掉禁用分级后构建时生成不同分辨率级别的文件资源，根据手机性能评分下发。
2. 注意事项
   • 对于图集文件或动画文件的图片资源，使用图片分级可能导致动画播放异常，需要禁用分级。

（五）压缩纹理

1. 开启与配置
   • 在图片检查器中勾选使用压缩纹理开启，运行时自动判断是否使用。启动后可配置压缩纹理类型（etc、astc 等）、优先级、压缩质量等属性。
2. 限制
   • 压缩纹理不能翻转纹理（flipY 为 false），不能生成 mipmap（generateMipmaps 为 false），且为适配不兼容机型，图片资源仍会打进包体导致包体体积增大。

（六）透明像素扩边

1. 解决的问题
   • 在 Canvas 绘制图片纹理时，解决边缘像素插值为 linear 时边缘有黑边的问题。
2. 操作与影响
   • 通过图片配置勾选透明像素扩边，可增加一圈纯白像素，有扩单个像素或全部像素的选项，但会使图片体积增大。

五、工程配置

（一）配置文件

1. SAR Creator 项目配置文件（sar.config.js）
   • 以春节摇签项目为例，指定入口文件目录、项目路径、入口文件等基础信息，还有预览的基础配置。
2. SAR Creator 项目构建插件配置
   • 构建流程通过插件嵌入不同平台构建流程，可深度集成平台能力，插件配置通常在平台配置文件中，以字节内跨端框架平台开发为例介绍相关功能。

（二）分包配置

1. 分包原因
   • 跨端框架平台单包限制通常为 5M，为提高资源包下发成功率，资源大于 5M 时需要拆包，一个资源包可由几个 Bundle 包组成。
2. 配置信息
   • 通过工程配置在构建完成后进行分包，可过滤包、组合 bundle 包为 gecko 包并设置规则。

（三）内联配置

1. 减少请求次数
   • 将 Bundle 包中的 json 文件合并成一个二进制文件减少请求次数和资源大小，可限制合并二进制文件大小。
2. 具体配置
   • 包括不生成 bundle 的 config 文件、设置 group 分组配置信息、将内置 bundle 文件的 config 配置到 entry.ts 里等。

（四）预加载配置

1. 配合平台特性
   • 跨端框架平台支持资源预加载，构建游戏时配置 Bundle 里的资源支持预加载，构建完成生成预加载配置文件，用户打开容器时可提前加载资源。
2. 配置详情
   • 包括预加载资源前缀、限制预加载资源个数和总体积、配置文件输出目录、过滤资源规则等，最后展示了预加载配置文件的示例。

六、开发实践

（一）脚本编写

1. 脚本格式
   • 在资产平台右键创建默认脚本，如newscript.ts脚本文件，引入相关模块并注册脚本。
2. 脚本生命周期
   • 包括 onAwake、onDestroy 等多个阶段，常用的有 onStart、onUpdate、onResume。
   • onStart 在节点首帧激活一次，可在此阶段加载资源、初始化场景内容等。
   • onUpdate 在节点每帧渲染前触发，可用于变换场景元素。
   • onResume 在游戏暂停后重启或节点隐藏恢复时触发。

（二）预制体制作

1. 预制体生成
   • 将层级面板中的节点拖拽到资产面板自动生成预制体资产，储存节点数据和依赖资源信息，可双击进行二次编辑。
2. 开发优势
   • 可视化预设大量节点数据，节省实体修改参数操作，提高开发速度，还可提升主场景加载速度，依据手机性能选择性加载预制体。

（三）动态加载

1. 加载 Bundle 包
   • 通过资源管理器 assetManager 的loadBundle方法获取 Bundle 包实例，按照资源在 bundle 包中的路径加载获取 asset 资产对象，如加载预制体或图片的 Texture 对象。

七、未来展望

1. 版本迭代
   • SAR Creator 过去一年经历 1.0、1.1、1.2 三个大版本更新，满足研发需求、增添新功能、优化使用体验。
2. 持续优化
   • 2024 年将持续优化引擎性能和编辑器易用性，重点扩展动画编辑器能力。

八、团队介绍

1. 团队职能
   • 抖音前端架构 - 互动体验技术团队为字节跳动业务提供互动技术解决方案，技术产品包括 SAR Creator 等。
2. 合作团队
   • 与抖音前端 - 互动创作团队、跨端框架团队等一同推进技术建设与业务落地。

九、下期预告

下期主题为渲染技术与实践，为满足视觉和性能要求提供多种渲染方法。