自微信小游戲發(fā)布以來(lái)，已有許多開(kāi)發(fā)者將早前使用白鷺引擎開(kāi)發(fā)的游戲遷移至微信小游戲。但是在開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)者普遍會(huì)遇到微信小游

自微信小游戲發(fā)布以來(lái)，已有許多開(kāi)發(fā)者將早前使用白鷺引擎開(kāi)發(fā)的游戲遷移至微信小游戲。但是在開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)者普遍會(huì)遇到微信小游戲的包體積僅有4M的限制問(wèn)題，如果包體積超過(guò)4M，就會(huì)無(wú)法生成游戲包。

這個(gè)問(wèn)題的解決思路是，將游戲中的素材文件從小游戲包中遷移到一個(gè)外部服務(wù)器中，然后在游戲運(yùn)行后，動(dòng)態(tài)從服務(wù)器上下載這些資源。之前開(kāi)發(fā)者可以通過(guò)以下游戲邏輯代碼實(shí)現(xiàn)此功能，即將游戲中的素材文件從小游戲包中遷移到一個(gè)外部服務(wù)器中，然后在游戲運(yùn)行后，動(dòng)態(tài)從服務(wù)器上下載這些資源。開(kāi)發(fā)者可以通過(guò)以下游戲邏輯代碼實(shí)現(xiàn)此功能

這種做法存在兩個(gè)問(wèn)題：

1.修改完這行代碼后，開(kāi)發(fā)者需要手動(dòng)將微信小游戲包中的所有資源從微信工程里剪切出去，否則無(wú)法發(fā)布。

2.這種做法會(huì)將所有資源文件都放置在外部服務(wù)器上，無(wú)法將部分游戲初始素材放入小游戲包中。

為了解決這兩個(gè)問(wèn)題，白鷺引擎優(yōu)化了白鷺編譯器的構(gòu)建管線，以及 AssetsManager庫(kù)的邏輯以支持如下功能：

1.通過(guò)腳本配置的方式，允許開(kāi)發(fā)者在發(fā)布項(xiàng)目時(shí)直接將項(xiàng)目的部分資源發(fā)布到其他文件夾中。

2.為每一個(gè)發(fā)布文件夾中的資源單獨(dú)生成一份資源配置文件。

3.AssetsManager 允許開(kāi)發(fā)者加載多份配置文件，并具備不同的資源根路徑。

通過(guò)這三個(gè)功能的配合，開(kāi)發(fā)者就可以很輕松的一鍵發(fā)布，無(wú)需進(jìn)行復(fù)雜的人工操作或編寫(xiě)自定義腳本，這可以很好的提升開(kāi)發(fā)效率，并降低BUG出現(xiàn)的概率。

如何使用

（1）下載最新引擎

目前此項(xiàng)功能會(huì)隨著春節(jié)后發(fā)布的 5.1.6 版本正式發(fā)布，如果開(kāi)發(fā)者希望立即使用，可以訪問(wèn)白鷺引擎的官方代碼倉(cāng)庫(kù) http://github.com/egret-labs/egret-core ，切換至 5.1.x 分支，然后下載白鷺引擎的源代碼庫(kù)。

下載完成后，打開(kāi) Egret Launcher，在 “引擎” -> “安裝本地版本”面板中下載的引擎，添加成功后，您可看到已經(jīng)添加了 5.1.6 版本。

注：當(dāng) 5.1.6 版本正式發(fā)布后，我們建議您刪除 5.1.6 的本地版本，使用正式版。

（2）創(chuàng)建新項(xiàng)目并修改配置

您如果已經(jīng)擁有了一個(gè)項(xiàng)目，可以將項(xiàng)目的 egretProperties.json 中的 compilerVersion 與 engineVersion 修改為 5.1.6 也可以使用此功能，無(wú)需強(qiáng)制創(chuàng)建新項(xiàng)目。但是為了從學(xué)習(xí)的角度考慮，我們建議您先創(chuàng)建一個(gè)新項(xiàng)目，跟隨本教程在新項(xiàng)目中確認(rèn)無(wú)誤，然后在現(xiàn)有項(xiàng)目中進(jìn)行實(shí)踐。

創(chuàng)建新項(xiàng)目后，在 scripts/config.wxgame.ts 中添加如下腳本：

這些配置的中，我們主要關(guān)注以下三個(gè)插件：RenamePlugin , ResSplitPlugin , EmitResConfigFilePlugin 。

• RenamePlugin：由于資源放在服務(wù)器后，需要考慮資源緩存問(wèn)題，所以最佳方案就是將文件根據(jù)其 hash 值進(jìn)行改名，以保證可以隨意熱更新，在學(xué)習(xí)階段，您也可以注釋這個(gè)插件，但是在產(chǎn)品正式發(fā)布時(shí)，我們強(qiáng)烈建議您打開(kāi)這個(gè)插件。
• ResSplitPlugin：這個(gè)插件是構(gòu)建時(shí)的核心代碼，通過(guò)這個(gè)插件，我們將資源中的所有 jpg 文件拷貝到了 文件夾中，而不是{projectName}_wxgame 文件夾中。
• EmitResConfigFilePlugin：這個(gè)插件用于生成 default.res.json配置文件，他會(huì)為不同的文件夾自動(dòng)生成不同的配置。

在配置好這些腳本之后，執(zhí)行 egret build --target wxgame ,可以看到會(huì)生成以下文件：

通過(guò)這個(gè)項(xiàng)目結(jié)構(gòu)，我們會(huì)發(fā)現(xiàn)，資源中的bg.jpg 文件被拷貝到了 testgame_wxgame_remote 文件夾中，而其他資源被拷貝到了 testgame_wxgame 文件夾中，這與ResSplitPlugin 中的 resource//.jpg 的策略是一致的。

進(jìn)行完上述修改后，您需要單獨(dú)啟動(dòng)一個(gè) HTTP 服務(wù)器，將服務(wù)器根路徑設(shè)置為 testgame_wxgame_remote ，這樣您可以通過(guò) http://localhost:3000/resource/ 的方式去訪問(wèn)遠(yuǎn)程資源。

（3）修改項(xiàng)目代碼

編譯成功后，我們?cè)賮?lái)修改游戲邏輯代碼，在Main.ts中添加如下邏輯：

開(kāi)發(fā)者可能會(huì)注意到，原來(lái)傳遞的是 RES.loadConfig("resource/default.res.json", "resource/"); 而現(xiàn)在的邏輯中 'resource' 沒(méi)有了，但是無(wú)需擔(dān)心，我們已經(jīng)做了向下兼容，您如果傳遞 resource/default.res.json 也是可以的，但是我們不建議您這樣做。

上述代碼完成了兩個(gè)操作，首先是設(shè)置了外部資源的 crossOrigin ，這是為了防止 webgl 紋理跨域錯(cuò)誤，除此之外額外加載了一份配置文件。通過(guò)這樣的做法，兩份不同的配置文件中的資源將會(huì)擁有不同的resourceRoot ，分別是 resource/ 和 htpp://localhost:3000/resource/ 。

（4）運(yùn)行

上述修改執(zhí)行完成之后，您只需要執(zhí)行 egret run testgame --target wxgame，構(gòu)建管線就會(huì)進(jìn)行如下操作：

1.清理發(fā)布文件夾

2.編譯代碼

3.將資源重命名

4.將資源發(fā)布到不同的文件夾中

5.針對(duì)不同文件夾生成不同的配置文件

6.自動(dòng)打開(kāi)微信開(kāi)發(fā)者工具，預(yù)覽您的項(xiàng)目

（5）注意事項(xiàng)

• 如果您需要真機(jī)測(cè)試，請(qǐng)修改域名，不要使用 localhost。
• 如果您遇到了微信開(kāi)發(fā)者工具報(bào)錯(cuò) localhost不在業(yè)務(wù)域名內(nèi)，請(qǐng)先在微信工程中的 project.config.json 中將 urlCheck 屬性設(shè)置為 false。
• 5.1.6 版本會(huì)在春節(jié)后發(fā)布，如果開(kāi)發(fā)者對(duì)此功能有更多建議，可以前往開(kāi)發(fā)者論壇反饋或在本文章下方直接評(píng)論即可。