怎样在文章后做网站链接,dedese网站,旅游的网站怎么做的,自助建站门户网站前言 本次春节活动中#xff0c;我们大部分场景使用内部的 SAR Creator互动方案来实现。 SAR Creator 是一款基于 TypeScript 的高性能、轻量化的互动解决方案#xff0c;目前支持了Web和字节内部跨端框架平台#xff0c;服务于字节内部的各种互动业务#xff0c;包括但不限… 前言 本次春节活动中我们大部分场景使用内部的 SAR Creator互动方案来实现。 SAR Creator 是一款基于 TypeScript 的高性能、轻量化的互动解决方案目前支持了Web和字节内部跨端框架平台服务于字节内部的各种互动业务包括但不限于抖音春节、抖音直播礼物、抖音UG活动等。 SAR Creator 编辑器支持了图形化界面提供了各类完善的系统光照、动画、脚本等供用户快速便捷的搭建一个高质量的互动场景集成了场景搭建、资源配置、预览调试等功能并提供了打包构建等工程化插件可配合业务定制高效2D、3D内容生产工作流。 本文将就本次春节活动中编辑器的工作流程、开发常用功能、以及配套的工程配置方案等进行介绍。 工作流程 目前编辑器的工作流程能极大的提升开发效率在于研发和设计能够极好的解耦工作。对于设计同学来说不仅能在研发同学在线编辑器上协作也能独立制作通过Asset Package包进行资产的交付而对于开发来说编辑器能够可视化的进行大部分场景搭建以及资产配置能直观的检查资产信息。 资产制作 由于设计同学本地没有开发环境为了方便设计同学脱离研发单独使用SAR Creator制作美术资产我们提供了SAR Creator Launcher工具供美术使用使用 Sar Creator Launcher 可以管理 Sar Creator 编辑器的多个版本安装、创建新项目、快速启动项目、查看编辑器版本的更新信息等功能。 设计同学使用Launcher搭建一个项目之后可以将他从PS、Blender、Spine制作的资源导入到SAR Creator当中进行组合到场景当中并导出成预制体资源例如春节活动以下场景就是由设计同学制作然后交付给研发使用。 动效预览 设计同学产出的资源可以直接导入到SAR Creator中进行播放预览以及调整美术可以确保最终交付给研发的动画资源是符合预期的。 目前支持的动画有 lottie、spine、帧动画、模型动画、组合动画以及帧差动画。 资产导出 设计同学最终的导出产物一般为prefabs资源因为设计和研发的项目不互通需要一种更快捷的方式同步资源设计同学可以在创建的预制体右键导出资源包此功能会将预制体依赖的所有资源导出为一个asset压缩包设计同学可以直接将此压缩包发送给研发同学导入 研发同学直接在game目录上右键选择导入资源包即可选择设计同学交付的文件将资源导入 功能介绍 画布适配 画布适配是指调整互动区域的视觉输出以适应不同的屏幕尺寸和分辨率这样可以确保互动区域在不同分辨率的设备上看起来运行都正常。 SAR Creator 提供了简单的解决方案首先需要指定设计的宽度和高度它们定义了游戏将以何种分辨率进行开发通过设定这些值可以确保互动区域在所在目标设备上正确缩放并保持一致的视觉呈现。 除此之外除了为了进一步增强画布的适配功能我们提供了根据特定需求的各种适配策略。这些策略包括 FixedWidth固定宽度在此策略中互动区域保持其设计宽度高度根据纵横比自动调整。这确保互动区域始终占据屏幕的整个宽度没有重要信息被裁剪掉。FixedHeight固定高度与固定宽度策略类似互动区域保持其设计高度而宽度则根据纵横比调整。这可以确保互动区域始终垂直填充屏幕并在各种设备上提供一致的体验。Auto自动适应此策略将互动区域按比例缩放以适应可用屏幕空间的宽度和高度。取决于设备的纵横比两侧或上下可能会出现一些空白区域但整个互动区域内容都是可见的且无失真。 2D3D混合开发 互动场景的编辑中经常需要2D和3D元素相互结合才能创造出更好的交互体验3D模型的移动经常能带来更逼真的效果2D元素经常应用于背景图或者UI元素。 通过使用SAR Creator编辑器可以很轻松的在同一场景中同时添加2D和3D对象。而且SAR Creator编辑器还允许自由调整这些对象之间的层级关系、渲染顺序以及视觉表现。此外还可以为场景设置多种灯光和相机效果进一步丰富场景表现力。 使用2D用来编辑器场景UI对比使用前端技术编写UI界面逻辑可视化拖拽编辑能大大提升开发速度拿之前的一个项目举例 左下界面UI是使用前端技术方案代码编写界面耗时3天。右下UI是使用SAR Creator 2D场景制作耗时0.5天。 Bundle分包 在项目开发过程中资源管理和加载优化是至关重要的。随着互动内容变得越来越丰富会出现资源体积庞大、加载速度缓慢等问题。为了解决这些问题SAR Creator编辑器提供了Bundle分包能力帮助开发者轻松地对游戏资源进行分组、管理和优化。 Bundle分包使用起来非常简便只需要选中文件夹然后如左上图所示勾选上配置为Bundle就可以在构建的时候将这个文件夹内的资源拆分为独立的Bundle包分组选项中有三种资源合并类型功能介绍如下 无不做任何优化合并依赖将Bundle中相互依赖的资源二进制文件合并在一起从而减少运行时加载请求次数全部合并将Bundle中所有资源二进制文件合并为一个最大化减少请求数量但可能会增加单个资源加载时间。 用户可以根据自己bundle包的资源情况合理选择分组方式。使用Bundle分包可以让开发者按需加载分包资源无需项目初始化时就加载所有资源这样不仅能减少项目首包的大小还能提升游戏的启动速度和运行效率。 图片分级 图片资源的大小不仅影响着项目最终的包体大小分辨率大的图片同样会占用设备更多的内存以及性能而不同的设备的性能是不一样的为了达到最好的显示效果又要满足用户设备的性能要求SAR Creator编辑器对图片提供了分级功能可以使不同性能的设备加载不同分辨率级别的图片这在春节活动中得到了广泛使用。 当勾选去掉禁用分级后构建的时候会生成normal、medium、low三个级别的文件资源其中medium、low的图片分辨率会低于原始图片会根据用户手机的性能评分下发不同等级的图片资源而无需研发同学关心下发的内容。 需要注意的是在使用图片分级时实际上是会修改图片的分辨率大小而当我们使用spine或者序列帧这类动画文件时图片资源为图集如果降低了图片的分辨率它们就无法在图集上获取正确的像素数据导致动画播放异常因此针对图集文件或者动画文件的图片资源我们需要禁用分级。 压缩纹理 压缩纹理是一种 GPU 能直接读取并显示的格式使得图像无需在 CPU 侧解压成 bitmap 即可直接传入 GPU 进行渲染节约大量的显存开销而在移动端即内存开销。 在图片的检查器中勾选上使用压缩纹理即可开启使用压缩纹理在运行时会根据运行环境自动判断是否使用压缩纹理使用时用户无需关注。 启动图片上的压缩纹理配置后可以配置选择etc、astc类型的压缩纹理并通过排序决定运行时加载的优先级。同时可以配置压缩纹理的压缩质量、是否翻转等属性。 另外需要注意的是 压缩纹理不能翻转纹理即 flipY 表现始终为 false压缩纹理不能生成 mipmap即 generateMipmaps 始终为 false为了适配不兼容压缩纹理的机型图片资源仍然会被打进包体当中所以包体会存在图片和图片的压缩纹理资源包体体积会变得更大 透明像素扩边 在Canvas中绘制图片纹理时图片边缘的像素会比较难处理当我们选择边缘像素插值方式为linear时虽然边缘会更光滑但是由于插值方式的原因图片的像素边缘会有一圈黑边如下左图所示 因此为了解决这个问题SAR Creator编辑器提供了透明像素扩边的能力我们可以通过图片配置勾选上透明像素扩边将图片的边缘增加一圈纯白像素使插值的像素可以不为黑色如果扩边单个像素为白色不明显时我们也可以选择扩全部像素将透明像素图片的所有透明像素点填充为通过插值计算的带有颜色透明度的像素点避免边缘渲染时产生黑边。 不过透明像素扩边同样存在着一些问题经过扩边操作的图片因为会修改原先的图片文件所以会导致图片体积增大具体的增大情况要看最终的图片产物。 工程配置 配置文件 SAR Creator的配置文件主要分为两块 SAR Creator项目的配置文件其指定了项目的路径、入口文件等基础信息以及SAR Creator中预览的一些基础配置方便运行项目的时候找到项目的位置。SAR Creator项目构建插件的配置因为SAR Creator可以适配各种平台因此SAR Creator的构建流程通过插件的形式嵌入到不同平台的构建流程当中并可以在插件中深度集成平台的相关能力。 SAR Creator项目配置文件通常叫做sar.config.js这边以春节的摇签项目配置举例项目的配置文件如下所示 const path require(path);
module.exports {// 指定入口文件目录projectRoot: path.resolve(__dirname, game),previewConfig: {previewDevtool: true,resolve: {alias: {// 别名脚本中使用lottery代替绝对路径用来避免sar creator报错lottery: path.resolve(__dirname, ./)}}}
}; 插件通常在平台的配置文件中引入因此插件的配置通常也在平台的配置文件中此次春节活动是基于字节内的跨端框架平台开发所以接下来会结合跨端框架平台做插件配置的功能介绍。 分包配置 跨端框架平台的项目会主动下发资源到用户手机但是为了提高资源包下发的成功率单包的限制通常在5M因为如果我们的项目资源大于5M时就需要进行拆包在上面我们已经介绍过了Bundle分包其能很好的将互动资源进行拆分并动态加载但是一个Bundle包不一定有5M因此为了让资源包收益最大化一个资源包可以由几个Bundle包组成这个拆分手动的话会很麻烦因此我们通过工程配置在构建完成后进行分包配置信息如下 const lotterySarConfig {// ....../** 分包策略构建才会生效 **/subPackages: {// 可以过滤掉一些包比如测试包需要被剔除excludeBundles: [test],// 组合bundle包为gecko包的规则combineBundleRules: [{// 拆分到的gecko包名channelName: pitaya-lottery-game-2,// bundle包匹配符合条件的正则规则test: [/mascot/]},{channelName: pitaya-lottery-game,test: [/main-scene/, /resources/],preload: true,preloadPriority: 96}]}
}; 内联配置 在Bundle包中会存在各种config或者json配置文件文件数量较多时每次访问都需要请求一个链接地址为了减少请求次数我们可以通过配置插件构建将每个Bundle包中的json文件合并成一个二进制文件减少请求的次数和资源的大小并且为了防止单个二进制文件太大我们仍可以限制合并的二进制的文件大小以确保不影响请求资源下载的速度配置如下 const lotterySarConfig {// ....ejectOptions: {// bundle的config文件不生成disableGenConfigWhenInline: true,// group分组配置信息groupConfig: {// 针对 bundle 下 group 的体积限制优先级更高groupPackingSizeLimitBundleConfig: {// 名为mascot的 bundle 下单个group限制400k大小 mascot: 400,// 同上resources: 400}},// 内置bundle文件的config配置到entry.ts里inlineConfig: {main-scene: true,resources: true,mascot: true}},
} 预加载配置 跨端框架平台支持资源的预加载为了配合平台特性我们还可以在构建生成游戏的时候就配置Bundle里的资源支持预加载然后在构建完成后就可以生成预加载的配置文件可以使用户在打开容器时就可以让容器提前加载好配置文件里的资源使项目内加载到资源的时候能更快的加载资源其配置如下: const lotterySarPreloadUrlList [];
const lotterySarConfig {// ......// preload: {// 预加载资源前缀publicPath: https://${CDN_DOMAIN}${GECKO_PREFIX}/pitaya-lottery-main/,// 限制预加载资源个数limit: 300,// 限制预加载文件总体积, 默认就是3MsizeLimit: 3 * 1024, // 配置文件输出目录outputDir: merge-js/lottery,// 过滤资源的规则asset: {rules: [{// 匹配规则test: /.*/,// 可以匹配重写该资源是否加入 preload.json返回 { enableMemory, url, priority } 或 nullrewrite: (item) {if (item.url.endsWith(.png) ||item.url.endsWith(.jpg) ||item.url.endsWith(.jpeg) ||// 已经加入的不再次加入preloadlotterySarPreloadUrlList.includes(item.url)) {// 不写入预加载配置return;}lotterySarPreloadUrlList.push(item.url);item.enableMemory true;// 写入预加载配置return item;}}]}}
} 最后预加载的配置文件如下所示 {// 跨端框架页面路径***/index/template.js: {image: [{// 是否开启内存缓存enableMemory: true,// 资源加载路径url: ***/resource/image/back.bcd0a82e.png,// 资源大小size: 280},// ....],other: [{enableMemory: true,url: ***/main-scene/g_0.cc991.group,priority: 96,size: 143296,assetBundleType: group},// ......]}
} 依据跨端框架的页面路径来预加载配置的URL链接以及优先级能够在页面打开前就提前加载好资源内容。 开发实践 脚本编写 在资产平台右键我们可以创建默认脚本脚本格式如下所示 // newscript.ts 脚本文件import { Script, ScriptUtil } from sar-creator/toolkit/engine/core;ScriptUtil.Register(NewScript)
export default class NewScript extends Script {onStart() {const scene this.world.getEntitiesByName(Scene)[0];if (scene) {// TODO:}}
} SAR Creator 脚本的生命周期分为以下几个阶段 onAwake节点挂载时执行一次onDestroy节点销毁时执行onPause暂停时执行onResume恢复时执行onStart第一次帧动画开始前执行一次onUpdate每帧开始时执行onLateUpdate每帧结束时执行 我们常用的生命周期有onStart、onUpdate、onResume这个三个生命周期。 onStart是在节点首帧时激活一次表明游戏已经可以开始运行我们一般在此阶段动态加载资源将获取到的资源添加到场景中或者获取场景的某些节点实例。因为我们的项目是SAR Creator 跨端框架组合所以在跨端框架阶段初始化引擎的时候我们会同步去获取服务端数据当满足onStart触发以及数据获取成功两个条件时我们一般会在脚本内依据数据初始化场景内容。 onUpdate会在节点的每帧渲染前触发一次由requestAnimationFrame驱动当我们需要变换场景中的元素的时候就可以依靠每帧触发修改微小的变量达到最终看起来连贯变换的样子例如在摇签玩法中我们会依据陀螺仪的数据来确定签筒的状态因此我们在此阶段每帧获取陀螺仪的数据然后对其操作同步转换签筒的状态让签筒有一种跟手的感觉。 onResume会在游戏暂停后重启时触发一般来说当我们有些定时操作会在暂停阶段销毁在恢复阶段触发除此之外当节点隐藏恢复时也会触发此阶段当一个节点启动时播放动画播放完成后隐藏当恢复时需要重置动画状态并播放就可以在这个阶段进行。 预制体制作 当我们将层级面板中的节点拖拽到资产面板中就会自动生成预制体资产预制体资产储存了这个节点的所有的数据以及依赖的资源信息。 双击预制体资源我们仍可以对预制体进行二次编辑等操作。 使用预制体资源可以帮我们可视化的预设大量的节点数据我们可以通过直接加载制作的预制体节省大量的实体修改参数配置等操作从而提高我们的开发速度。 另外将场景中的非必要资源拆成预制体加载可以有效提升主场景的加载速度并渐进式加载其他装饰节点预制体到场景当中并且可以依据用户手机性能选择性加载不同复杂程度的预制体到场景当中。 例如在摇签玩法中我们预设了不同的背景烟花以及签筒的预制体使用时我们依据时机判断加载不同的烟花到场景当中以及依据用户的手机性能选择性加载要求更高性能的签筒还是性能要求更低的签筒。 动态加载 在项目搭建中我们已经介绍了Bundle的配置方式用户可以将文件夹配置成动态资源包那么加载动态资源包我们提供了资源管理器assetManager挂载在world上例如加载一个预制体资源如下所示 const { bundle, error: bundleError
} await this.world.assetManager.loadBundle(resources);if(!bundle || errror) throw bundleErrorconst {asset,error: prefabError
} await bundle.loadEntity(prefabs/fireworks/${prefabName}.prefab);if (!asset?.get?.() || prefabError) throw prefabError;const entity asset.get() as Entity 我们需要先使用loadBundle获取到这个Bundle包的实例loadBundle支持传入Bundle的名称或者链接拿到Bundle实例后我们按照资源在bundle包中的路径加载就可以获得到一个asset资产对象asset调用get方法可以获取当前加载资产的实例例如加载预制体获取到Entity实例。 另外当我们加载图片资源时我们从资产面板可以看到图片的texture虚拟资产Texture对象如果我们想要直接加载图片的Texture对象时就可以在加载图片的路径中拼接上index.texture例如下所示: const { bundle, error: bundleError} await this.world.assetManager.loadBundle(resources);if(!bundle || errror) throw bundleErrorconst { asset, error: textureError} await bundle.loadTexture(texture/lamp/rect.png/index.texture); if (!asset?.get?.() || textureError) throw textureError; const texture asset.get() as Texture const { bundle, error: bundleError
} await this.world.assetManager.loadBundle(resources);if(!bundle || errror) throw bundleErrorconst {asset,error: textureError
} await bundle.loadTexture(texture/lamp/rect.png/index.texture);if (!asset?.get?.() || textureError) throw textureError;const texture asset.get() as Texture 未来展望 在过去的一年中我们的SAR Creator产品经历了三个重要的大版本更新分别是1.0、1.1、以及1.2三个版本的迭代都是我们基于用户需求并不断优化用户体验推出来的阶段性版本。 在三个版本的迭代中我们满足了研发同学的一些重要需求例如脚本配置、bundle分包、性能优化等增添了一些新功能例如动画编辑器、VFX Particle、SAR Creator Launcher等优化了SAR Creator的使用体验例如多语言版本、材质属性分组、资产预览面板等。 基于过去一年的迭代SAR Creator为春节的活动的开发带来了稳定的功能支持在2024年中SAR Creator将会持续优化引擎性能以及编辑器的易用性。 除此之外动画将是编辑器能力的核心在2024年中我们将会不断扩展动画编辑器的能力使用SAR Creator能够实现更加丰富的动画编辑功能简单的动画元素将直接可以使用编辑器完成开发和预览。 团队介绍 我们是抖音前端架构-互动体验技术团队主要为字节跳动业务提供互动技术解决方案。技术产品包含面向互动 / 小游戏研发场景的 SAR Creator、高性能动效渲染引擎 Simple Engine、互动场景端能力套件 AnnieX 互动容器。 在这些技术建设与业务落地上和抖音前端-互动创作团队、跨端框架团队、开放平台小游戏团队、用户增长-激励前端团队一同推进不断探索字节跳动应用生态下的创新业务形态。 下期预告 下期主题为渲染技术与实践为了满足视觉和性能的两个要求我们在渲染能力上提供了多种方法在适合的场景使用最终达到了极为优秀的效果敬请期待。 往期回顾 2024 抖音欢笑中国年(一)招财神龙互动技术揭秘 2024 抖音欢笑中国年(二)AnnieX互动容器创新玩法解析
