1. FB小游戏是挂载在FB网页托管的游戏,与安卓苹果网页第三方登录不同,无需下载额外SDK。
  2. 需要在Index同级文件夹下面建立一个文件用于配置FB小游戏,文件名为fbapp-config.json,内容如下:
{
  "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"
  }
}
  1. 上传FB网页托管需要在Index文件Head中添加如下JS代码:

  2. 需要与JS代码进行交互需要在Unity的Plugin文件夹下,建立一个文件,文件名为mergeInto.jslib,内容例子如下:

var func = {
      $MsgMgr: {
          //list:[],    //这个list可以被外部调用并且不被清理 push存 pop取
        
        //转C#字符串方法
        ToString: function (returnStr) {
            var bufferSize = lengthBytesUTF8(returnStr) + 1;
            var buffer = _malloc(bufferSize);
            stringToUTF8(returnStr, buffer, bufferSize);
            return buffer;
        },

        //Log
        Log: function (log) {
            gameInstance.SendMessage("FBUserSDK", "Log", log);
        },

        //className同时也是游戏对象的名字
        //fnName是类下面的方法名
        //param 参数为string 不需要转换C#字符串
        SendMessage: function (className,fnName, param) {
            gameInstance.SendMessage(className, fnName, param);
        },
    },

    FBGetPlayerPhoto: function () {
          //如果传参进来,参数是字符串 需要使用UTF8ToString(str) 转换为JS字符串
        MsgMgr.Log('FB Get PlayPhoto');
        return MsgMgr.ToString(FBInstant.player.getPhoto());
    },
}

//带$的相当于JS内部建立一个静态类,可以被JS内部自己调用,需要调用autoAddDeps添加
autoAddDeps(func, '$MsgMgr');
mergeInto(LibraryManager.library, func);

public class FBUserSDK : MonoBehaviour
{
    /// <summary>
    /// 获得玩家头像
    /// </summary>
    [DllImport("__Internal")]
    private static extern string FBGetPlayerPhoto();

    //暴露给外部调用的方法
    public string FnGetPlayerPhoto() => FBGetPlayerPhoto();

    /// <summary>
    /// Js调用Log
    /// </summary>
    /// <param name="log"></param>
    [MonoPInvokeCallback(typeof(string))]
    private void Log(string log)
    {
        Debug.Log(log);
    }
}

  1. 因为有些方法需要调用到UnityWebGL的内容,所以需要在Index文件中新建一个变量,将UnityWebGL客户端赋值给它。
  //暴露给mergeInto.jslib使用的UnityWebGL客户端
  var gameInstance = null;
  // 把加载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);
        };
        //因为是异步方法,所以需要在外部声明 内部赋值
        gameInstance = unityInstance;
      }).catch((message) => {
        // alert(message); // facebook 不允许alert
        console.error("Creating Unity Instance Failed: ", message);
      });
    };
    document.body.appendChild(script);
  }
  1. Index剩余修改内容相关详见:https://xmanyou.com/unity-webgl-convert-to-facebook-instant-game/

相关Demo:https://github.com/ToxicStar8/FaceBookSDKToUnityWebGL
FB小游戏API中文文档:https://www.jianshu.com/p/429b039df2ee

  1. 如此就大功告成了,可以上传到FB网页托管进行测试
最后修改:2024 年 05 月 16 日
如果觉得我的文章对你有用,请随意赞赏