2024 抖音歡笑中國年之編輯器技巧與實踐
前言
本次春節活動中，我們大部分場景使用內部的 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（自動適應）：此策略將互動區域按比例縮放以適應可用屏幕空間的寬度和高度。取決于設備的縱橫比，兩側或上下可能會出現一些空白區域，但整個互動區域內容都是可見的且無失真。
2D&3D混合開發
互動場景的編輯中，經常需要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,
// 限制預加載文件總體積, 默認就是3M
sizeLimit: 3 * 1024,
// 配置文件輸出目錄
outputDir: 'merge-js/lottery',
// 過濾資源的規則
asset: {
rules: [
{
// 匹配規則
test: /.*/,
// 可以匹配重寫該資源是否加入 preload.json，返回 { enableMemory, url, priority } 或 null
rewrite: (item) => {
if (
item.url.endsWith('.png') ||
item.url.endsWith('.jpg') ||
item.url.endsWith('.jpeg') ||
// 已經加入的不再次加入preload
lotterySarPreloadUrlList.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 bundleError
const {
asset,
error: prefabError
} = await bundle.load<Entity>(`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 bundleError
const {
asset,
error: textureError
} = await bundle.load<Texture>(`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能夠實現更加豐富的動畫編輯功能，簡單的動畫元素將直接可以使用編輯器完成開發和預覽。
