Unity官方H5小遊戲方法Project Tiny遲遲不發，而且即使發布了，老遊戲也沒法直接遷移。
對於很多Unity項目，想要有更多的變現途徑，比如接入Facebook小遊戲平臺，就需要自己動手了。
罷了罷了，我也是閒的和窮(不想用付費方案)，不死心地研究了一下Unity遊戲轉Facebook小遊戲的可行性。
首先，很多人可能不知道，Untiy打包成WebGL代碼時，可以選擇一個模板，通過這個模板，可以自定義啟動頁面和最終的遊戲包。
所以，我們可以為Facebook小遊戲定製一個模板，實現一鍵將Unity遊戲打包到Facebook小遊戲平臺。
具體參考文檔：
https://docs.unity3d.com/2020.2/Documentation/Manual/webgl-templates.html
友提，本文介紹的方法，基於Unity 2020，但是別的版本也差不多。
# 1. 添加Facebook小遊戲發布模板
Unity提供了2個默認模板（Default和Minimal），都在Unity的安裝目錄下
<Unity Installation>/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates/
我使用的是Default模板，因為這個模板的功能更完整。
把Default目錄複製到項目的Assets/WebGLTemplates/<自己的模板>
假設模板目錄為FacebookDefault，那麼工程的Assets目錄大概是這樣子：
# 2. 適配Facebook小遊戲平臺
默認模板，需要修改以下幾個地方才能適配Facebook小遊戲平臺：
## 2.1. 移除在行動裝置上運行的警告
在啟動腳本index.html中，把以下這段注釋掉，不然Unity在手機上運行時會彈出一個警告。
改成這樣子
## 2.2. 全屏顯示
把unity-container的class改成unity-mobile，這樣Unity遊戲會自動全屏，而且不顯示額外的按鈕和標題欄。
可以用代碼修改，示例是用代碼修改的。
container.className = "unity-mobile"; config.devicePixelRatio = 1;也可以直接去修改unity-container的class：
<div id="unity-container">...</div>## 2.3. 添加Facebook小遊戲SDK的引用
如果沒有引用sdk，直接上傳的話，會提示：Must Reference SDK via CDN
在index.html的前邊，加入：
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>像這樣子：
## 2.4. 添加Facebook啟動代碼
### 2.4.1. 先將Unity的啟動代碼封裝為一個function
這是Unity的原始啟動代碼
封裝起來，留著後續調用
// 把加載Unity遊戲代碼和素材的代碼段提取到一個function中，便於後續調用 function startUnity(){ var script = document.createElement("script"); script.src = loaderUrl; script.onload = () => { createUnityInstance(canvas, config, (progress) => { progressBarFull.style.width = 100 * progress + "%"; }).then((unityInstance) => { loadingBar.style.display = "none"; fullscreenButton.onclick = () => { unityInstance.SetFullscreen(1); }; }).catch((message) => { // alert(message); // facebook 不允許alert console.error("Creating Unity Instance Failed: ", message); }); }; document.body.appendChild(script); }### 2.4.2. 添加Facebook啟動代碼
Facebook小遊戲啟動時，必須先調用FBInstant.initializeAsync()，任何在這個方法之前的渲染操作，都會失敗。
然後調用FBInstant.startGameAsync()，這個方法是通知Facebook，遊戲已經開始了。
但是，實際上，遊戲並沒有真正開始，還需加載Unity遊戲代碼和相關的資源。
當然，完全也可以等Unity遊戲完全加載完後，再調用FBInstant.startGameAsync()。
參考代碼：
// 啟動 facebook初始化 console.log("=====> FBInstant.initializeAsync"); FBInstant.initializeAsync() .then(function () { console.info("=====> FBInstant.startGameAsync"); // 告訴Facebook加載完畢，可以進入遊戲了 // 也可以在這裡加載Unity遊戲代碼和資源，然後再加載完後再進入遊戲 FBInstant.startGameAsync().then(function() { console.info("=====> screen size: " + `${screen.width} x ${screen.height}`); console.info("=====> window size: " + `${window.innerWidth} x ${window.innerHeight}`)
// 開始加載Unity遊戲代碼和資源 startUnity(); }); });代碼修改完畢，但是還沒有完。
## 2.5. 添加Facebook的配置文件 fbapp-config.json
這個文件是Facebook小遊戲的配置文件，缺少的話，也是無法上傳的。
在模板目錄下添加一個文件，命名為 fbapp-config.json，定製內容的話，可以參考Facebook的文檔。
> https://developers.facebook.com/docs/games/instant-games/bundle-config
以下是一個參考
{ "instant_games": { "platform_version": "RICH_GAMEPLAY", "custom_update_templates": { "play_turn": { "example": "Devon just finished his game and scored 999m" }, "new_match": { "example": "Devon want to play with you" } }, "navigation_menu_version":"NAV_FLOATING" }}然後就可以進行打包了
# 3.打包
## 3.1. 選擇WebGL平臺
## 3.2. 選擇打包模板
打開Player Settings，在WebGL Template中，選擇剛剛配置好的FacebookDefault模板：
## 3.3. 關閉壓縮格式
由於Unity的一個bug，瀏覽器無法正確解壓Unity的WebGL包，所以需要關閉。
參考: https://xmanyou.com/unity2020-webgl-unity-framework-not-defined/
位置：Player Settings -> Publishing Setings -> Compress Format
# 4. 打包
第一次打包比較慢，我電腦花了大概3分鐘……
Unity 2020之後，如果項目沒有什麼大的修改的話，再次打包就快很多了。
看一下打包輸出的目錄，如果包含了fbapp-config.json，說明模板配置和選擇是正確的。
然後可以準備上傳測試了。
# 5. 上傳測試
在Facebook小遊戲後臺，將打包出來的WebGL目錄壓縮成zip包上傳。
上傳成功後，推入Testing測試環境。
# 6. 測試
先在瀏覽器測試，看到這個熟悉的界面，就成功了50%。
看到遊戲界面，成功了90%。
打開控制臺，如果沒有什麼錯誤，並且日誌正常，恭喜你成功了99%。
最後的1%，需要通過手機上的最終測試。
# 7. 後續工作
## 7.1. 優化遊戲包
如果沒有進行裁剪，Unity的WebGL代碼還是比較大，即使是壓縮成zip，也有5M大小。
## 7.2. 美化遊戲加載界面
比如改掉Unity的啟動logo和啟動進度條。
## 7.3. 接入更多Facebook功能
Facebook小遊戲提供了很多功能，即使不接，也不影響遊戲的正常運行。
但是，至少有一個是要接的，那就是：變現。
Facebook小遊戲最主要的變現方式是：廣告。
具體Unity如何調用Facebook小遊戲的廣告接口，可以參考文檔：
https://docs.unity3d.com/2020.2/Documentation/Manual/webgl-interactingwithbrowserscripting.html
## 7.4. 增加一鍵上傳功能
由於時間原因，我並沒有做上傳功能。
但是，Facebook提供上傳的接口，可以編寫Unity插件，實現真正的一鍵打包上傳，這個沒有什麼難度（才怪！）。
# 8. 是否支持微信小遊戲或者其他小遊戲平臺？
通過自定義模板的方法（再加上強大的Unity插件功能），打包到微信小遊戲或者抖音小遊戲等平臺，不是不可能，只是會很麻煩，甚至非常麻煩。
這是因為：
Facebook小遊戲平臺比較簡單，可以運行幾乎任何可以在瀏覽器運行的H5遊戲。
微信小遊戲和國內很多其他小遊戲，基本上都是自己重新封裝了一套js接口，導致很多接口沒法使用，所以需要添加適配代碼才可以。
Unity的代碼是閉源的，導致想要寫這麼個適配器，難度大大增加。
當然了，除了寫適配器之外，還有不少別的方法可以繞開這個限制，這個就不是本文想要討論的方法了。
# 9. 參考文獻
# 10. 廣告時間
手上有遊戲的同學，想要上Facebook小遊戲平臺賺點美元的，可以聯繫我們微遊互娛。
對了，我是負責對接的技術支持，所以對接過程的技術問題完全不用擔心（才怪！）。
微遊互娛 www.minigame.vip
# 源碼
給看到這裡的同學一個福利，後臺回復 unity2fb，可以獲得示例源碼git地址。