1 March 2021 / Unity

#Unity 游戏一键打包 #Facebook小游戏解决方案

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的安装目录下

/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游戏会自动全屏，而且不显示额外的按钮和标题栏。

可以用代码修改，示例是用代码修改的。

      // 改成unity-mobile，使之全屏显示，否则默认是横屏

      container.className = "unity-mobile";
      config.devicePixelRatio = 1;

也可以直接去修改unity-container的class：

<div id="unity-container" class="unity-mobile">
...
</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"
  }
}

然后就可以进行打包了