如何将 Phaser 网页游戏变成 Facebook 即时游戏？答案

【问题标题】：How to turn a Phaser web game into Facebook instant game?如何将 Phaser 网页游戏变成 Facebook 即时游戏？
【发布时间】：2019-10-14 01:05:36
【问题描述】：

我使用 Phaser.io 制作了一个简单的网页游戏，现在我想把它变成一个 Facebook 即时游戏。我试过关注一些文章，但没有成功。

你知道任何关于从网页游戏制作 facebook 即时游戏的过程的好资料（文章、youtube 教程...）吗？

【问题讨论】：

标签： facebook phaser-framework

【解决方案1】：

要将 Phaser Web 游戏托管到 Facebook Instant Games，请按以下步骤操作：

首先，您需要创建一个new Facebook app。
您现在将登陆应用仪表板，现在您将选择“设置”，然后选择“基本”。
现在在类别中选择“游戏”，然后选择最适合您的游戏的类别。
返回仪表板，让我们选择“Instant Games”。
现在您必须填写一些信息，确保将“使用小游戏”设置为“是”。
现在您必须上传游戏的压缩文件。您可以在“虚拟主机”面板下进行此操作，选择“上传版本”，然后通过点击星形图标将其投入生产。
之后，您必须在索引文件中包含 Facebook Instant Games API：

<script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"&gt;</script>;

然后，在您的游戏文件中，当您通常在 window.onload 函数上创建游戏本身时，您将不得不这样创建它：

FBInstant.initializeAsync().then(function() {
    FBInstant.setLoadingProgress(100);
    FBInstant.startGameAsync().then(function() {
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        if(windowWidth &gt; windowHeight){
            windowWidth = windowHeight / 1.8;
        }
        var gameWidth = windowWidth * gameOptions.gameHeight / windowHeight;
        game = new Phaser.Game(gameWidth, gameOptions.gameHeight, Phaser.CANVAS);
        game.state.add("Boot", boot);
        game.state.add("Preload", preload);
        game.state.add("TitleScreen", titleScreen);
        game.state.add("PlayGame", playGame);
        game.state.start("Boot");
    })
})

您可以查看this tutorial了解更多详细信息和视觉说明。

【讨论】：