Laya如何发布Facebook小游戏简明教程

by 阿斌

1. 官方文档

  • Facebook小游戏官方入门教程

https://developers.facebook.com/docs/games/instant-games/getting-started

  • SDK文档

https://developers.facebook.com/docs/games/instant-games/sdk/fbinstant6.3/

2. 添加Facebook小游戏SDK引用

在调用任何Facebook小游戏接口前，需要先添加SDK引用。

<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
<script type="text/javascript" src="index.js"></script>

3. 初始化并启动Facebook小游戏

按照Facebook小游戏的开发规范，在进行任何渲染以及Facebook小游戏绝大部分的其他接口之前，
1). 必须先调用

  • FBInstant.initializeAsync() 初始化Facebook小游戏环境

2). 该方法成功之后，需要调用

  • FBInstant.startGameAsync() 来启动游戏

3). 还可以通过

  • FBInstant.setLoadingProgress() 来告诉Facebook加载进度

修改方法

  • 文件：游戏的入口文件，Laya 2.x的默认入口文件是 <项目>/src/Main.ts
  • 示例：
try{
    // 初始化FB小游戏
    FBInstant.initializeAsync()
        .then(function () {
            // 告诉FB资源已经加载完毕
            FBInstant.setLoadingProgress(100);
            // 启动FB小游戏
            FBInstant.startGameAsync()
                .then(function () {
                    console.info("Success Load Scene");
                    fnMain();
                })
                .catch(function (e) {
                    console.error("Start Game Async failed: ", e);
                });
        })
        .catch(function (e) {
            console.error("Fail to start, Error: ", e);
        });
}catch (e) {
    console.error("Fail to init fb, Error: ", e);
}

4. 在游戏逻辑中调用Facebook小游戏其他接口

5. 打包发布facebook项目

  • 第一步，添加捆绑包配置文件fbapp-config.json到 <项目>/bin/fbapp-config.json

Facebook小游戏捆绑包配置文档：https://developers.facebook.com/docs/games/instant-games/bundle-config

  • 其中最重要的字段是
    orientation 屏幕方向，可选值是：
    • 竖屏 PORTRAIT
    • 横屏 LANDSCAPE
  • 示例（从Cocos Creator中拿来的）
{
  "instant_games": {
    "platform_version": "RICH_GAMEPLAY",
    "navigation_menu_version": "NAV_FLOATING",
    "custom_update_templates": {
      "play_turn": {
        "example": "Edgar played their move"
      }
    },
    "orientation": "PORTRAIT"
  }
}
  • 第二步，通过Laya IDE 正常发布Web项目

Laya 2.x 的发布地址是： <项目>/release/web

  • 检查项
    • fbapp-config.json 是否存在
    • index.html 中是否有fbinstant.6.3.js的引用
    • js/bundle.js （Laya2.x）中是否包含了（步骤3中添加的）Facebook小游戏的启动代码
  • 压缩zip并上传到Facebook小游戏控制台

完成