前言

本次春節(jié)活動(dòng)中，我們大部分場(chǎng)景使用內(nèi)部的 SAR Creator互動(dòng)方案來(lái)實(shí)現(xiàn)。

SAR Creator 是一款基于 TypeScript 的高性能、輕量化的互動(dòng)解決方案，目前支持了Web和字節(jié)內(nèi)部跨端框架平臺(tái)，服務(wù)于字節(jié)內(nèi)部的各種互動(dòng)業(yè)務(wù)，包括但不限于抖音春節(jié)、抖音直播禮物、抖音UG活動(dòng)等。

SAR Creator 編輯器支持了圖形化界面，提供了各類完善的系統(tǒng)（光照、動(dòng)畫(huà)、腳本等）供用戶快速便捷的搭建一個(gè)高質(zhì)量的互動(dòng)場(chǎng)景，集成了場(chǎng)景搭建、資源配置、預(yù)覽調(diào)試等功能，并提供了打包構(gòu)建等工程化插件，可配合業(yè)務(wù)定制高效2D、3D內(nèi)容生產(chǎn)工作流。

本文將就本次春節(jié)活動(dòng)中編輯器的工作流程、開(kāi)發(fā)常用功能、以及配套的工程配置方案等進(jìn)行介紹。

工作流程

目前編輯器的工作流程能極大的提升開(kāi)發(fā)效率，在于研發(fā)和設(shè)計(jì)能夠極好的解耦工作。對(duì)于設(shè)計(jì)同學(xué)來(lái)說(shuō)，不僅能在研發(fā)同學(xué)在線編輯器上協(xié)作，也能獨(dú)立制作通過(guò)Asset Package包進(jìn)行資產(chǎn)的交付；而對(duì)于開(kāi)發(fā)來(lái)說(shuō)，編輯器能夠可視化的進(jìn)行大部分場(chǎng)景搭建以及資產(chǎn)配置，能直觀的檢查資產(chǎn)信息。

資產(chǎn)制作

由于設(shè)計(jì)同學(xué)本地沒(méi)有開(kāi)發(fā)環(huán)境，為了方便設(shè)計(jì)同學(xué)脫離研發(fā)單獨(dú)使用SAR Creator制作美術(shù)資產(chǎn)，我們提供了SAR Creator Launcher工具供美術(shù)使用，使用 Sar Creator Launcher 可以管理 Sar Creator 編輯器的多個(gè)版本安裝、創(chuàng)建新項(xiàng)目、快速啟動(dòng)項(xiàng)目、查看編輯器版本的更新信息等功能。

設(shè)計(jì)同學(xué)使用Launcher搭建一個(gè)項(xiàng)目之后，可以將他從PS、Blender、Spine制作的資源導(dǎo)入到SAR Creator當(dāng)中進(jìn)行組合到場(chǎng)景當(dāng)中，并導(dǎo)出成預(yù)制體資源，例如春節(jié)活動(dòng)以下場(chǎng)景就是由設(shè)計(jì)同學(xué)制作然后交付給研發(fā)使用。

動(dòng)效預(yù)覽

設(shè)計(jì)同學(xué)產(chǎn)出的資源可以直接導(dǎo)入到SAR Creator中進(jìn)行播放預(yù)覽以及調(diào)整，美術(shù)可以確保最終交付給研發(fā)的動(dòng)畫(huà)資源是符合預(yù)期的。

目前支持的動(dòng)畫(huà)有 lottie、spine、幀動(dòng)畫(huà)、模型動(dòng)畫(huà)、組合動(dòng)畫(huà)以及幀差動(dòng)畫(huà)。

資產(chǎn)導(dǎo)出

設(shè)計(jì)同學(xué)最終的導(dǎo)出產(chǎn)物一般為prefabs資源，因?yàn)樵O(shè)計(jì)和研發(fā)的項(xiàng)目不互通，需要一種更快捷的方式同步資源，設(shè)計(jì)同學(xué)可以在創(chuàng)建的預(yù)制體右鍵導(dǎo)出資源包，此功能會(huì)將預(yù)制體依賴的所有資源導(dǎo)出為一個(gè)asset壓縮包，設(shè)計(jì)同學(xué)可以直接將此壓縮包發(fā)送給研發(fā)同學(xué)導(dǎo)入。

研發(fā)同學(xué)直接在game目錄上右鍵選擇導(dǎo)入資源包，即可選擇設(shè)計(jì)同學(xué)交付的文件將資源導(dǎo)入。

功能介紹

畫(huà)布適配

畫(huà)布適配是指調(diào)整互動(dòng)區(qū)域的視覺(jué)輸出以適應(yīng)不同的屏幕尺寸和分辨率，這樣可以確保互動(dòng)區(qū)域在不同分辨率的設(shè)備上看起來(lái)運(yùn)行都正常。

SAR Creator 提供了簡(jiǎn)單的解決方案，首先需要指定設(shè)計(jì)的寬度和高度，它們定義了游戲?qū)⒁院畏N分辨率進(jìn)行開(kāi)發(fā)，通過(guò)設(shè)定這些值可以確?；?dòng)區(qū)域在所在目標(biāo)設(shè)備上正確縮放并保持一致的視覺(jué)呈現(xiàn)。

除此之外除了為了進(jìn)一步增強(qiáng)畫(huà)布的適配功能，我們提供了根據(jù)特定需求的各種適配策略。這些策略包括：

• FixedWidth（固定寬度）：在此策略中，互動(dòng)區(qū)域保持其設(shè)計(jì)寬度，高度根據(jù)縱橫比自動(dòng)調(diào)整。這確?；?dòng)區(qū)域始終占據(jù)屏幕的整個(gè)寬度，沒(méi)有重要信息被裁剪掉。
• FixedHeight（固定高度）：與固定寬度策略類似，互動(dòng)區(qū)域保持其設(shè)計(jì)高度，而寬度則根據(jù)縱橫比調(diào)整。這可以確?；?dòng)區(qū)域始終垂直填充屏幕，并在各種設(shè)備上提供一致的體驗(yàn)。
• Auto（自動(dòng)適應(yīng)）：此策略將互動(dòng)區(qū)域按比例縮放以適應(yīng)可用屏幕空間的寬度和高度。取決于設(shè)備的縱橫比，兩側(cè)或上下可能會(huì)出現(xiàn)一些空白區(qū)域，但整個(gè)互動(dòng)區(qū)域內(nèi)容都是可見(jiàn)的且無(wú)失真。

2D&3D混合開(kāi)發(fā)

互動(dòng)場(chǎng)景的編輯中，經(jīng)常需要2D和3D元素相互結(jié)合才能創(chuàng)造出更好的交互體驗(yàn)，3D模型的移動(dòng)經(jīng)常能帶來(lái)更逼真的效果，2D元素經(jīng)常應(yīng)用于背景圖或者UI元素。

通過(guò)使用SAR Creator編輯器，可以很輕松的在同一場(chǎng)景中同時(shí)添加2D和3D對(duì)象。而且SAR Creator編輯器還允許自由調(diào)整這些對(duì)象之間的層級(jí)關(guān)系、渲染順序以及視覺(jué)表現(xiàn)。此外，還可以為場(chǎng)景設(shè)置多種燈光和相機(jī)效果，進(jìn)一步豐富場(chǎng)景表現(xiàn)力。

使用2D用來(lái)編輯器場(chǎng)景UI，對(duì)比使用前端技術(shù)編寫(xiě)UI界面邏輯，可視化拖拽編輯能大大提升開(kāi)發(fā)速度，拿之前的一個(gè)項(xiàng)目舉例：

• 左下界面UI是使用前端技術(shù)方案代碼編寫(xiě)界面，耗時(shí)3天。
• 右下UI是使用SAR Creator 2D場(chǎng)景制作，耗時(shí)0.5天。

Bundle分包

在項(xiàng)目開(kāi)發(fā)過(guò)程中，資源管理和加載優(yōu)化是至關(guān)重要的。隨著互動(dòng)內(nèi)容變得越來(lái)越豐富，會(huì)出現(xiàn)資源體積龐大、加載速度緩慢等問(wèn)題。為了解決這些問(wèn)題，SAR Creator編輯器提供了Bundle分包能力，幫助開(kāi)發(fā)者輕松地對(duì)游戲資源進(jìn)行分組、管理和優(yōu)化。

Bundle分包使用起來(lái)非常簡(jiǎn)便，只需要選中文件夾，然后如左上圖所示，勾選上配置為Bundle，就可以在構(gòu)建的時(shí)候?qū)⑦@個(gè)文件夾內(nèi)的資源拆分為獨(dú)立的Bundle包，分組選項(xiàng)中有三種資源合并類型，功能介紹如下：

• 無(wú)：不做任何優(yōu)化；
• 合并依賴：將Bundle中相互依賴的資源二進(jìn)制文件合并在一起，從而減少運(yùn)行時(shí)加載請(qǐng)求次數(shù)；
• 全部合并：將Bundle中所有資源二進(jìn)制文件合并為一個(gè)，最大化減少請(qǐng)求數(shù)量，但可能會(huì)增加單個(gè)資源加載時(shí)間。

用戶可以根據(jù)自己bundle包的資源情況合理選擇分組方式。使用Bundle分包可以讓開(kāi)發(fā)者按需加載分包資源，無(wú)需項(xiàng)目初始化時(shí)就加載所有資源，這樣不僅能減少項(xiàng)目首包的大小，還能提升游戲的啟動(dòng)速度和運(yùn)行效率。

圖片分級(jí)

圖片資源的大小不僅影響著項(xiàng)目最終的包體大小，分辨率大的圖片同樣會(huì)占用設(shè)備更多的內(nèi)存以及性能，而不同的設(shè)備的性能是不一樣的，為了達(dá)到最好的顯示效果又要滿足用戶設(shè)備的性能要求，SAR Creator編輯器對(duì)圖片提供了分級(jí)功能，可以使不同性能的設(shè)備加載不同分辨率級(jí)別的圖片，這在春節(jié)活動(dòng)中得到了廣泛使用。

當(dāng)勾選去掉禁用分級(jí)后，構(gòu)建的時(shí)候會(huì)生成normal、medium、low三個(gè)級(jí)別的文件資源，其中medium、low的圖片分辨率會(huì)低于原始圖片，會(huì)根據(jù)用戶手機(jī)的性能評(píng)分下發(fā)不同等級(jí)的圖片資源，而無(wú)需研發(fā)同學(xué)關(guān)心下發(fā)的內(nèi)容。

需要注意的是，在使用圖片分級(jí)時(shí)，實(shí)際上是會(huì)修改圖片的分辨率大小，而當(dāng)我們使用spine或者序列幀這類動(dòng)畫(huà)文件時(shí)，圖片資源為圖集，如果降低了圖片的分辨率，它們就無(wú)法在圖集上獲取正確的像素?cái)?shù)據(jù)，導(dǎo)致動(dòng)畫(huà)播放異常，因此針對(duì)圖集文件或者動(dòng)畫(huà)文件的圖片資源，我們需要禁用分級(jí)。

壓縮紋理

壓縮紋理，是一種 GPU 能直接讀取并顯示的格式，使得圖像無(wú)需在 CPU 側(cè)解壓成 bitmap 即可直接傳入 GPU 進(jìn)行渲染，節(jié)約大量的顯存開(kāi)銷，而在移動(dòng)端即內(nèi)存開(kāi)銷。

在圖片的檢查器中，勾選上使用壓縮紋理即可開(kāi)啟使用，壓縮紋理在運(yùn)行時(shí)會(huì)根據(jù)運(yùn)行環(huán)境自動(dòng)判斷是否使用壓縮紋理，使用時(shí)用戶無(wú)需關(guān)注。

啟動(dòng)圖片上的壓縮紋理配置后，可以配置選擇etc、astc類型的壓縮紋理，并通過(guò)排序決定運(yùn)行時(shí)加載的優(yōu)先級(jí)。同時(shí)可以配置壓縮紋理的壓縮質(zhì)量、是否翻轉(zhuǎn)等屬性。

另外需要注意的是：

• 壓縮紋理不能翻轉(zhuǎn)紋理，即 flipY 表現(xiàn)始終為 false
• 壓縮紋理不能生成 mipmap，即 generateMipmaps 始終為 false
• 為了適配不兼容壓縮紋理的機(jī)型，圖片資源仍然會(huì)被打進(jìn)包體當(dāng)中，所以包體會(huì)存在圖片和圖片的壓縮紋理資源，包體體積會(huì)變得更大

透明像素?cái)U(kuò)邊

在Canvas中繪制圖片紋理時(shí)，圖片邊緣的像素會(huì)比較難處理，當(dāng)我們選擇邊緣像素插值方式為linear時(shí)，雖然邊緣會(huì)更光滑，但是由于插值方式的原因，圖片的像素邊緣會(huì)有一圈黑邊，如下左圖所示：

因此，為了解決這個(gè)問(wèn)題，SAR Creator編輯器提供了透明像素?cái)U(kuò)邊的能力，我們可以通過(guò)圖片配置勾選上透明像素?cái)U(kuò)邊，將圖片的邊緣增加一圈純白像素，使插值的像素可以不為黑色，如果擴(kuò)邊單個(gè)像素為白色不明顯時(shí)，我們也可以選擇擴(kuò)全部像素，將透明像素圖片的所有透明像素點(diǎn)填充為通過(guò)插值計(jì)算的帶有顏色透明度的像素點(diǎn)，避免邊緣渲染時(shí)產(chǎn)生黑邊。

不過(guò)透明像素?cái)U(kuò)邊同樣存在著一些問(wèn)題，經(jīng)過(guò)擴(kuò)邊操作的圖片因?yàn)闀?huì)修改原先的圖片文件，所以會(huì)導(dǎo)致圖片體積增大，具體的增大情況要看最終的圖片產(chǎn)物。

工程配置

配置文件

SAR Creator的配置文件主要分為兩塊：

• SAR Creator項(xiàng)目的配置文件，其指定了項(xiàng)目的路徑、入口文件等基礎(chǔ)信息以及SAR Creator中預(yù)覽的一些基礎(chǔ)配置，方便運(yùn)行項(xiàng)目的時(shí)候找到項(xiàng)目的位置。
• SAR Creator項(xiàng)目構(gòu)建插件的配置，因?yàn)镾AR Creator可以適配各種平臺(tái)，因此SAR Creator的構(gòu)建流程通過(guò)插件的形式嵌入到不同平臺(tái)的構(gòu)建流程當(dāng)中，并可以在插件中深度集成平臺(tái)的相關(guān)能力。

SAR Creator項(xiàng)目配置文件通常叫做sar.config.js，這邊以春節(jié)的搖簽項(xiàng)目配置舉例，項(xiàng)目的配置文件如下所示：

const path = require('path');
module.exports = {
  // 指定入口文件目錄
  projectRoot: path.resolve(__dirname, 'game'),
  previewConfig: {
    previewDevtool: true,
    resolve: {
      alias: {
        // 別名，腳本中使用@lottery代替絕對(duì)路徑，用來(lái)避免sar creator報(bào)錯(cuò)
        '@lottery': path.resolve(__dirname, './')
      }
    }
  }
};

插件通常在平臺(tái)的配置文件中引入，因此插件的配置通常也在平臺(tái)的配置文件中，此次春節(jié)活動(dòng)是基于字節(jié)內(nèi)的跨端框架平臺(tái)開(kāi)發(fā)，所以接下來(lái)會(huì)結(jié)合跨端框架平臺(tái)做插件配置的功能介紹。

分包配置

跨端框架平臺(tái)的項(xiàng)目會(huì)主動(dòng)下發(fā)資源到用戶手機(jī)，但是為了提高資源包下發(fā)的成功率，單包的限制通常在5M，因?yàn)槿绻覀兊捻?xiàng)目資源大于5M時(shí)，就需要進(jìn)行拆包，在上面我們已經(jīng)介紹過(guò)了Bundle分包，其能很好的將互動(dòng)資源進(jìn)行拆分并動(dòng)態(tài)加載，但是一個(gè)Bundle包不一定有5M，因此為了讓資源包收益最大化，一個(gè)資源包可以由幾個(gè)Bundle包組成，這個(gè)拆分手動(dòng)的話會(huì)很麻煩，因此我們通過(guò)工程配置在，構(gòu)建完成后進(jìn)行分包，配置信息如下：

const lotterySarConfig = {
  // ......
  /** 分包策略，構(gòu)建才會(huì)生效 **/
  subPackages: {
    // 可以過(guò)濾掉一些包，比如測(cè)試包需要被剔除
    excludeBundles: ['test'],
    // 組合bundle包為gecko包的規(guī)則
    combineBundleRules: [
      {
        // 拆分到的gecko包名
        channelName: 'pitaya-lottery-game-2',
        // bundle包匹配符合條件的正則規(guī)則
        test: [/mascot/]
      },
      {
        channelName: 'pitaya-lottery-game',
        test: [/main-scene/, /resources/],
        preload: true,
        preloadPriority: 96
      }
    ]
  }
};

內(nèi)聯(lián)配置

在Bundle包中，會(huì)存在各種config或者json配置文件，文件數(shù)量較多時(shí)，每次訪問(wèn)都需要請(qǐng)求一個(gè)鏈接地址，為了減少請(qǐng)求次數(shù)，我們可以通過(guò)配置插件構(gòu)建，將每個(gè)Bundle包中的json文件合并成一個(gè)二進(jìn)制文件，減少請(qǐng)求的次數(shù)和資源的大小，并且為了防止單個(gè)二進(jìn)制文件太大，我們?nèi)钥梢韵拗坪喜⒌亩M(jìn)制的文件大小，以確保不影響請(qǐng)求資源下載的速度，配置如下：

const lotterySarConfig = {
  // ....
  ejectOptions: {
    // bundle的config文件不生成
    disableGenConfigWhenInline: true,
    // group分組配置信息
    groupConfig: {
      // 針對(duì) bundle 下 group 的體積限制，優(yōu)先級(jí)更高
      groupPackingSizeLimitBundleConfig: {
        // 名為mascot的 bundle 下單個(gè)group限制400k大小 
        mascot: 400,
        // 同上
        resources: 400
      }
    },
    // 內(nèi)置bundle文件的config配置到entry.ts里
    inlineConfig: {
      'main-scene': true,
      resources: true,
      mascot: true
    }
  },
}

預(yù)加載配置

跨端框架平臺(tái)支持資源的預(yù)加載，為了配合平臺(tái)特性，我們還可以在構(gòu)建生成游戲的時(shí)候就配置Bundle里的資源支持預(yù)加載，然后在構(gòu)建完成后就可以生成預(yù)加載的配置文件，可以使用戶在打開(kāi)容器時(shí)就可以讓容器提前加載好配置文件里的資源，使項(xiàng)目?jī)?nèi)加載到資源的時(shí)候，能更快的加載資源，其配置如下:

const lotterySarPreloadUrlList = [];
const lotterySarConfig = {
  // ......
  // 
  preload: {
    // 預(yù)加載資源前綴
    publicPath: `https://${CDN_DOMAIN}${GECKO_PREFIX}/pitaya-lottery-main/`,
    // 限制預(yù)加載資源個(gè)數(shù)
    limit: 300,
    // 限制預(yù)加載文件總體積, 默認(rèn)就是3M
    sizeLimit: 3 * 1024, 
    // 配置文件輸出目錄
    outputDir: 'merge-js/lottery',
    // 過(guò)濾資源的規(guī)則
    asset: {
      rules: [
        {
          // 匹配規(guī)則
          test: /.*/,
          // 可以匹配重寫(xiě)該資源是否加入 preload.json，返回 { enableMemory, url, priority } 或 null
          rewrite: (item) => {
            if (
              item.url.endsWith('.png') ||
              item.url.endsWith('.jpg') ||
              item.url.endsWith('.jpeg') ||
              // 已經(jīng)加入的不再次加入preload
              lotterySarPreloadUrlList.includes(item.url)
            ) {
              // 不寫(xiě)入預(yù)加載配置
              return;
            }
            lotterySarPreloadUrlList.push(item.url);
            item.enableMemory = true;
            // 寫(xiě)入預(yù)加載配置
            return item;
          }
        }
      ]
    }
  }
}

最后預(yù)加載的配置文件如下所示：

{
    // 跨端框架頁(yè)面路徑
    "***/index/template.js": {
        "image": [
            {
                // 是否開(kāi)啟內(nèi)存緩存
                "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"
            },
            // ......
        ]
    }
}

依據(jù)跨端框架的頁(yè)面路徑，來(lái)預(yù)加載配置的URL鏈接以及優(yōu)先級(jí)，能夠在頁(yè)面打開(kāi)前就提前加載好資源內(nèi)容。

開(kāi)發(fā)實(shí)踐

腳本編寫(xiě)

在資產(chǎn)平臺(tái)右鍵我們可以創(chuàng)建默認(rèn)腳本，腳本格式如下所示：

// 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 腳本的生命周期分為以下幾個(gè)階段：

• onAwake：節(jié)點(diǎn)掛載時(shí)執(zhí)行一次
• onDestroy：節(jié)點(diǎn)銷毀時(shí)執(zhí)行
• onPause：暫停時(shí)執(zhí)行
• onResume：恢復(fù)時(shí)執(zhí)行
• onStart：第一次幀動(dòng)畫(huà)開(kāi)始前執(zhí)行一次
• onUpdate：每幀開(kāi)始時(shí)執(zhí)行
• onLateUpdate：每幀結(jié)束時(shí)執(zhí)行

我們常用的生命周期有onStart、onUpdate、onResume這個(gè)三個(gè)生命周期。

onStart是在節(jié)點(diǎn)首幀時(shí)激活一次，表明游戲已經(jīng)可以開(kāi)始運(yùn)行，我們一般在此階段動(dòng)態(tài)加載資源，將獲取到的資源添加到場(chǎng)景中，或者獲取場(chǎng)景的某些節(jié)點(diǎn)實(shí)例。因?yàn)槲覀兊捻?xiàng)目是SAR Creator + 跨端框架組合，所以在跨端框架階段初始化引擎的時(shí)候，我們會(huì)同步去獲取服務(wù)端數(shù)據(jù)，當(dāng)滿足onStart觸發(fā)以及數(shù)據(jù)獲取成功兩個(gè)條件時(shí)，我們一般會(huì)在腳本內(nèi)依據(jù)數(shù)據(jù)初始化場(chǎng)景內(nèi)容。

onUpdate會(huì)在節(jié)點(diǎn)的每幀渲染前觸發(fā)一次，由requestAnimationFrame驅(qū)動(dòng)，當(dāng)我們需要變換場(chǎng)景中的元素的時(shí)候，就可以依靠每幀觸發(fā)修改微小的變量，達(dá)到最終看起來(lái)連貫變換的樣子，例如在搖簽玩法中我們會(huì)依據(jù)陀螺儀的數(shù)據(jù)來(lái)確定簽筒的狀態(tài)，因此我們?cè)诖穗A段每幀獲取陀螺儀的數(shù)據(jù)，然后對(duì)其操作同步轉(zhuǎn)換簽筒的狀態(tài)，讓簽筒有一種跟手的感覺(jué)。

onResume會(huì)在游戲暫停后重啟時(shí)觸發(fā)，一般來(lái)說(shuō)當(dāng)我們有些定時(shí)操作會(huì)在暫停階段銷毀，在恢復(fù)階段觸發(fā)，除此之外，當(dāng)節(jié)點(diǎn)隱藏恢復(fù)時(shí)也會(huì)觸發(fā)此階段，當(dāng)一個(gè)節(jié)點(diǎn)啟動(dòng)時(shí)播放動(dòng)畫(huà)，播放完成后隱藏，當(dāng)恢復(fù)時(shí)需要重置動(dòng)畫(huà)狀態(tài)并播放就可以在這個(gè)階段進(jìn)行。

預(yù)制體制作

當(dāng)我們將層級(jí)面板中的節(jié)點(diǎn)拖拽到資產(chǎn)面板中就會(huì)自動(dòng)生成預(yù)制體資產(chǎn)，預(yù)制體資產(chǎn)儲(chǔ)存了這個(gè)節(jié)點(diǎn)的所有的數(shù)據(jù)以及依賴的資源信息。

雙擊預(yù)制體資源，我們?nèi)钥梢詫?duì)預(yù)制體進(jìn)行二次編輯等操作。

使用預(yù)制體資源可以幫我們可視化的預(yù)設(shè)大量的節(jié)點(diǎn)數(shù)據(jù)，我們可以通過(guò)直接加載制作的預(yù)制體，節(jié)省大量的實(shí)體修改參數(shù)配置等操作，從而提高我們的開(kāi)發(fā)速度。

另外將場(chǎng)景中的非必要資源拆成預(yù)制體加載，可以有效提升主場(chǎng)景的加載速度，并漸進(jìn)式加載其他裝飾節(jié)點(diǎn)預(yù)制體到場(chǎng)景當(dāng)中，并且可以依據(jù)用戶手機(jī)性能，選擇性加載不同復(fù)雜程度的預(yù)制體到場(chǎng)景當(dāng)中。

例如在搖簽玩法中，我們預(yù)設(shè)了不同的背景煙花以及簽筒的預(yù)制體，使用時(shí)我們依據(jù)時(shí)機(jī)判斷加載不同的煙花到場(chǎng)景當(dāng)中，以及依據(jù)用戶的手機(jī)性能，選擇性加載要求更高性能的簽筒還是性能要求更低的簽筒。

動(dòng)態(tài)加載

在項(xiàng)目搭建中我們已經(jīng)介紹了Bundle的配置方式，用戶可以將文件夾配置成動(dòng)態(tài)資源包，那么加載動(dòng)態(tài)資源包我們提供了資源管理器assetManager掛載在world上，例如加載一個(gè)預(yù)制體資源如下所示：

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獲取到這個(gè)Bundle包的實(shí)例，loadBundle支持傳入Bundle的名稱或者鏈接，拿到Bundle實(shí)例后，我們按照資源在bundle包中的路徑加載，就可以獲得到一個(gè)asset資產(chǎn)對(duì)象，asset調(diào)用get方法可以獲取當(dāng)前加載資產(chǎn)的實(shí)例，例如加載預(yù)制體獲取到Entity實(shí)例。

另外當(dāng)我們加載圖片資源時(shí)，我們從資產(chǎn)面板可以看到圖片的texture虛擬資產(chǎn)Texture對(duì)象，如果我們想要直接加載圖片的Texture對(duì)象時(shí)，就可以在加載圖片的路徑中拼接上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

未來(lái)展望

在過(guò)去的一年中，我們的SAR Creator產(chǎn)品經(jīng)歷了三個(gè)重要的大版本更新，分別是1.0、1.1、以及1.2，三個(gè)版本的迭代都是我們基于用戶需求并不斷優(yōu)化用戶體驗(yàn)推出來(lái)的階段性版本。

在三個(gè)版本的迭代中，我們滿足了研發(fā)同學(xué)的一些重要需求，例如腳本配置、bundle分包、性能優(yōu)化等；增添了一些新功能，例如動(dòng)畫(huà)編輯器、VFX Particle、SAR Creator Launcher等；優(yōu)化了SAR Creator的使用體驗(yàn)，例如多語(yǔ)言版本、材質(zhì)屬性分組、資產(chǎn)預(yù)覽面板等。

基于過(guò)去一年的迭代，SAR Creator為春節(jié)的活動(dòng)的開(kāi)發(fā)帶來(lái)了穩(wěn)定的功能支持，在2024年中，SAR Creator將會(huì)持續(xù)優(yōu)化引擎性能以及編輯器的易用性。

除此之外動(dòng)畫(huà)將是編輯器能力的核心，在2024年中我們將會(huì)不斷擴(kuò)展動(dòng)畫(huà)編輯器的能力，使用SAR Creator能夠?qū)崿F(xiàn)更加豐富的動(dòng)畫(huà)編輯功能，簡(jiǎn)單的動(dòng)畫(huà)元素將直接可以使用編輯器完成開(kāi)發(fā)和預(yù)覽。