How to get rid of the loading progress in Facebook Instant Games with Phaser

Question

How to get rid of the loading progress in Facebook Instant Games with Phaser

2k Views Asked by albator2018 At 20 October 2024 at 05:48

I am developping a game for Facebook instant games with Phaser 2 CE, and i don't like the loading progress shown at the starting point, how can i get rid of it ? I am using the default example given in the Quick Start page

      FBInstant.initializeAsync()
      .then(function() {
        var images = ['phaser2'];
        for (var i=0; i < images.length; i++) {
         var assetName = images[i];
         var progress = ((i+1)/images.length) * 100;
         game.load.image('./assets/' + assetName + '.png'); 
         // Informs the SDK of loading progress
         FBInstant.setLoadingProgress(progress);  
        }
      });

Original Q&A

There are 4 best solutions below

**nazimboudeffa** · Answer 1

You can try something like given in this example like the code bellow then create your game, i know it's not clean but it works

  FBInstant.initializeAsync()
  .then(function() {
    FBInstant.setLoadingProgress(50);
    FBInstant.setLoadingProgress(100);
  });

**albator2018** · Answer 2

I have tryed something interesting but it doesn't answers the question according to this example

var sprite;
var PixelW = window.innerWidth;
var PixelH = window.innerHeight;
var game = new Phaser.Game(PixelW, PixelH, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });

function preload() {
  game.load.onLoadStart.add(loadStart, this);
  game.load.onFileComplete.add(fileComplete, this);
  startLoading();

}

function  startLoading () {
  game.load.image('logo1', 'assets/sprites/phaser1.png');
  game.load.image('logo2', 'assets/sprites/phaser2.png');
  game.load.image('dude', 'assets/sprites/phaser-dude.png');
  game.load.image('ship', 'assets/sprites/phaser-ship.png');
  game.load.image('mushroom', 'assets/sprites/mushroom.png');
  game.load.image('mushroom2', 'assets/sprites/mushroom2.png');
  game.load.image('diamond', 'assets/sprites/diamond.png');
  game.load.image('bunny', 'assets/sprites/bunny.png');
  game.load.start();
}

function create() {

  game.stage.backgroundColor = 0x3b5998;
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dude');
  sprite.inputEnabled = true;
  sprite.events.onInputDown.add(myHandler, this);
  var text = game.add.text(10, 10, PixelW + " " + " " + PixelH, { font: "65px Arial", fill: "#ffff00", align: "center" });
}

function loadStart() {

}

// This callback is sent the following parameters:
function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
  
  FBInstant.setLoadingProgress(progress);
  //console.log(cacheKey + " " + progress);

}

function myHandler() {
  sprite.anchor.setTo(0.5, 0.5);
  sprite.x = Math.floor(Math.random() * PixelW);
  sprite.y = Math.floor(Math.random() * PixelH);
}

function update() {

}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
    <script src="phaser.min.js" type="text/javascript"></script>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      var p = 0;
      FBInstant.initializeAsync()
      .then(function() {
        //FBInstant.setLoadingProgress(50);
        //FBInstant.setLoadingProgress(100);    
      });

      // Once all assets are loaded, tells the SDK
      // to end loading view and start the game

      FBInstant.startGameAsync()
       .then(function() {
         // Retrieving context and player information can only be done
         // once startGameAsync() resolves
         var contextId = FBInstant.context.getID();
         var contextType = FBInstant.context.getType();

         var playerName = FBInstant.player.getName();
         var playerPic = FBInstant.player.getPhoto();
         var playerId = FBInstant.player.getID();

         // Once startGameAsync() resolves it also means the loading view has
         // been removed and the user can see the game viewport

//         game.start();
       });
    </script>
    <div id="game"></div>
    <script src="game.js" type="text/javascript"></script>
  </body>
</html>

**jjwallace** · Answer 3

I use the methods below, I increase the loading percent after each file is loaded with Phaser. Also I include a try catch so that when testing local game play the game does not crash.

      preload: function () {
        try{
            FBInstant.initializeAsync()
                .then(function() {        
                });
            }
            catch(err) {
            console.log('FB Instant Games Error: No Internet Connected');
        }
        this.load.image('gameItem1', 'assets/sprite/game_item1.png');
        this.load.image('gameItem2', 'assets/sprite/game_item2.png');
      }

And then...

      startFacebookGame: function(){
        try{
          FBInstant.startGameAsync()
            .then(function() {
            // Retrieving context and player information can only be done
            // once startGameAsync() resolves
            var contextId = FBInstant.context.getID();
            var contextType = FBInstant.context.getType();

            var playerName = FBInstant.player.getName();
            var playerPic = FBInstant.player.getPhoto();
            var playerId = FBInstant.player.getID();

            // Once startGameAsync() resolves it also means the loading view has 
            // been removed and the user can see the game viewport
          });
        }
        catch(err) {
          console.log('Analytics Connection Error');
        }
      },

      fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
        try{
          FBInstant.setLoadingProgress(progress);
        }
          catch(err) {
          console.log('FB Instant Games progress Failed: No Internet Connected.');
        }

        //console.log("Progress: " + progress);
      },

**BugHunterUK** · Answer 4

Here's how I do it. You can build out from there.

function preload() {
    // Load some assets
    FBInstant.setLoadingProgress(100)
}

function create() {
    FBInstant
        .startGameAsync()
        .then(() => {
            // Here you can now get users name etc.
            console.log(this)
        })
}

FBInstant.initializeAsync()
    .then(() => {
        new Phaser.Game({
            type: Phaser.AUTO,
            width: window.innerWidth,
            height: window.innerHeight,
            scene: {
                preload,
                create
            }
        })
    })

How to get rid of the loading progress in Facebook Instant Games with Phaser

There are 4 best solutions below

Related Questions in FACEBOOK

Related Questions in PHASER-FRAMEWORK

Related Questions in FACEBOOK-INSTANT-GAMES

Trending Questions

Popular # Hahtags

Popular Questions