Serious FBInstant Games Bug

Phaser 3
1

Hello,

I believe there is some sort of a bug when adding reference to the facebook instant games SDK and applying physics transformation on my objects

this is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="yes" />
    <meta name="screen-orientation" content="portrait" />
    <script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
    <script src="src/scripts/phaser-facebook-instant-games.min.js"></script>
    <link rel="stylesheet" href="./src/css/index.css" />
    <title>Documents</title>
</head>
<body>
    <div id="game-container">
        <div id="content">
            <h1></h1>
            <p></p>
        </div>
    </div>
</body>
</html>

And this is what I’m trying to do once the game starts:

this.player = this.physics.add.sprite(this.game.renderer.width / 2 - 8, this.game.renderer.height - 130, CST.SPRITES.PLAYER).setScale(0.2, 0.2).setDepth(1);`
this.player.body.setSize(this.player.width - 120, this.player.height - 120, true);
this.player.body.setOffset(60, 60);
this.playerContainer = this.physics.add.group();
this.playerContainer.setOrigin(this.player.x, this.player.y);
this.playerContainer.add(this.player);

Whenever I call this.playerContainer.setOrigin(this.player.x, this.player.y);
It shows me the following error:

GameScene.ts:762 Uncaught TypeError: this.playerContainer.setOrigin is not a function
    at GameScene.create (GameScene.ts:762)
    at initialize.create (phaser-facebook-instant-games.min.js:1)
    at initialize.bootScene (phaser-facebook-instant-games.min.js:1)
    at initialize.start (phaser-facebook-instant-games.min.js:1)
    at initialize.processQueue (phaser-facebook-instant-games.min.js:1)
    at initialize.update (phaser-facebook-instant-games.min.js:1)
    at initialize.step (phaser-facebook-instant-games.min.js:1)
    at initialize.step (phaser-facebook-instant-games.min.js:1)
    at e (phaser-facebook-instant-games.min.js:1)

Also my preloader is this one:
his.facebook.once('startgame', () => {this.scene.start(CST.SCENES.OPENING);}, this);
this.facebook.showLoadProgress(this);
//....Spritesheet loading here

I appreciate your help on this. Thank you

2

this.playerContainer.setOrigin is not a function

This is the problem. You’re trying to call a function that doesn’t exist.

3

The problem is that it was working fine using the phaser.js script

When I removed it to add the facebook-phaser sdk script the game displays the preload scene but when it reaches the functions already used it gives me the error

4

Check the Phaser version in the console.

5

You mean when I’m using the facebook phaser script instead of the initial phaser.js?

6

Check the versions of each, I assume they’re different.

But can you explain what you’re doing here?

this.playerContainer = this.physics.add.group();
this.playerContainer.setOrigin(this.player.x, this.player.y);

Do you want to make a group or a container?

7

Thank you for your reply.

The version of the Phaser FB Instant Games script is : 3.15.1
The version of the Phaser script that I used to develop initially my game is : 3.22.0

Is this the possible issue? Because the Phaser FB Instant Games script is taken from the tutorial page on FB Instant Games in Phaser.io website

As for the code, I am trying to make a group that has an origin same as another object. Also, just to make sure, I have deleted this part and let the game run, I encountered another error:

Uncaught TypeError: Cannot read property 'Events' of undefined

on this part:

this.once(Phaser.Animations.Events.SPRITE_ANIMATION_COMPLETE, () => {
            this.destroy();
        });

As I’m trying to destroy a spritesheet.
This was working previously before replacing the script. I am assuming as well that it’s because of the versions but I need to make sure of this.

8

You can download Phaser v3.22 with FB here: https://www.jsdelivr.com/package/npm/phaser?version=3.22.0&path=dist.

In Phaser 3, groups have no origin and containers have an origin (0, 0) that can’t be changed. To set the player’s origin, just do

this.player.setOrigin(0, 0); // etc.
9

Thank you for this. It’s now working!