How to load sprites on phaser based on database data

[lifesuxtr]

I am trying to pull img data(just url string) from database to replace it with player sprite url.

 

ionViewDidLoad() {
        this.profileData = this.fire.authState.switchMap(auth => this.db.object(`profile/${auth.uid}`).valueChanges());
        this.profileData.subscribe(profile =>{
        this.avatar = profile.avatar;
        console.log(this.avatar);//i got data(its an url string)

        });

        console.log('ionViewDidLoad ZombiePage');
        this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game', { preload: this.preload.bind(this), create: this.create.bind(this),update:this.update.bind(this),render:this.render.bind(this) });
    console.log(window.innerHeight);





      }

    preload(){
    console.log(this.avatar); //Undefined
this.game.load.image('player', this.avatar);

Why i cant reach data from preload function ? btw im using ionic/angular framework.i combined it with phaser.

avatar:any; declared right under class.

 

[samme]

First, you may find a pattern like this a little simpler:

function ionViewDidLoad() {
  var app = this;
  // …
  this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game', {
    init: function () {
      this.game.app = app;
    },
    preload: function () {/* … */},
    create:  function () {/* … */},
    update:  function () {/* … */},
    render:  function () {/* … */}
  });
}

Second, profileData.subscribe probably hasn't received its callback by the time preload is run.

If you want Phaser to wait for the profile data, you might start the game state only from the subscribe callback.

[lifesuxtr]

6 hours ago, samme said:

First, you may find a pattern like this a little simpler:

function ionViewDidLoad() {
  var app = this;
  // …
  this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game', {
    init: function () {
      this.game.app = app;
    },
    preload: function () {/* … */},
    create:  function () {/* … */},
    update:  function () {/* … */},
    render:  function () {/* … */}
  });
}

Second, profileData.subscribe probably hasn't received its callback by the time preload is run.

If you want Phaser to wait for the profile data, you might start the game state only from the subscribe callback.

Hi thanks for the answer.I am triying to put all functions into 1 state and call that state from inside subscribe.

let gameState = {
//preload update create functions here
  
};

After initializing game

    this.game.state.add('game', gameState);

Then call state in subscribe 

this.game.state.start('gameState');

The problem is typescript doesnt let me to create a state with above let gameState structure.It says Unexpected token. A constructor, method, accessor, or property was expected.

 

[Barthandelus]

Javascript alone doesn't have any way to connect to a database.

Solutions :

- Using AJAX to call a PHP file that connect to the database, and then return it as JSON, for example.

- Using NodeJS.

- Or simply using a PHP Server. For example, having an "index.php" with header that connect to the database, then get some values, for example $characterSprite.

If you use external JS to create your game, just do like this :

Quote

<script type="text/javascript">var characterSprite = <?php echo $characterSprite; ?>;</script>

Before your JS includes. It should work fine.

While PHASER should be used with an Apache server or similar I think the 3rd solution would be the best for you.

[lifesuxtr]

On 17.11.2017 at 12:25 PM, Barthandelus said:

Javascript alone doesn't have any way to connect to a database.

Solutions :

- Using AJAX to call a PHP file that connect to the database, and then return it as JSON, for example.

- Using NodeJS.

- Or simply using a PHP Server. For example, having an "index.php" with header that connect to the database, then get some values, for example $characterSprite.

If you use external JS to create your game, just do like this :

Before your JS includes. It should work fine.

While PHASER should be used with an Apache server or similar I think the 3rd solution would be the best for you.

I know that.I just need to make preload function wait for db data to come.It works way to fast so i cant display db data.Somehow i need to create a state and call that state from inside subscribe 

[Odk]

As JS is very async lang you need to stop thinking like in other languages. Normally in most of languages you expect that in most cases line below gets executed after line above. In JS everything needs to be non blocking as it would freeze whole browser. So almost every call is async and next function doesn't wait for previous to return. It was a problem for log time but then promises arrived. Check this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise and everything should be clear.

TL;DR: Return answer from database as Promise. I think that this.avatar should be a promise to avatar object and not actual result. Then you will be able to wait for it later.

EDIT: Other option is to start with generic avatar same for every player and replace image once its loaded using a callback. If your generic avatar would be blank image of same size as real avatar then it will display white square at the beginning and replace it with real image soon after.

Edited November 19, 2017 by Odk
additional idea

[lifesuxtr]

10 hours ago, Odk said:

As JS is very async lang you need to stop thinking like in other languages. Normally in most of languages you expect that in most cases line below gets executed after line above. In JS everything needs to be non blocking as it would freeze whole browser. So almost every call is async and next function doesn't wait for previous to return. It was a problem for log time but then promises arrived. Check this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise and everything should be clear.

TL;DR: Return answer from database as Promise. I think that this.avatar should be a promise to avatar object and not actual result. Then you will be able to wait for it later.

EDIT: Other option is to start with generic avatar same for every player and replace image once its loaded using a callback. If your generic avatar would be blank image of same size as real avatar then it will display white square at the beginning and replace it with real image soon after.

Thanks for the answer i guess using the promises is the best solution.I was reading about it and trying but couldnt make it work.can you give an example

[lifesuxtr]

On 17.11.2017 at 5:25 AM, samme said:

First, you may find a pattern like this a little simpler:

function ionViewDidLoad() {
  var app = this;
  // …
  this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game', {
    init: function () {
      this.game.app = app;
    },
    preload: function () {/* … */},
    create:  function () {/* … */},
    update:  function () {/* … */},
    render:  function () {/* … */}
  });
}

Second, profileData.subscribe probably hasn't received its callback by the time preload is run.

If you want Phaser to wait for the profile data, you might start the game state only from the subscribe callback.

Hello.Rıght now i dont have any states.game just starts immediately.Lets say that i want to start the game from subscribe.If i put all my functions into lets say a start state  how do i reach game variable from that state ?(because i decleared it in ionViewDidLoad) right now my preload create update functions are right under ionViewDidLoad.I mean

ionViewDidLoad(){

//this.game decleration


}

preload(){

}

create(){


}

update(){



}

//so if i launch the page game immediately loads and starts.
//If i try to move all above code to a state structure to call it from ionviewDidloads subscribe callback like:
start = Object.assign(new Phaser.State(), {
 
   preload: function () {
     //how do i reach  this.game from here ????
   

   },

   create: function () {}
  });