adding sprite from the result of a server emit

[ahmedcoe]

Hello everyone

So i am making a game where the server sends which sprites to create on the client's view. So i can't load those sprites util the server sends an object with which sprites to show. The code is as follows:

in the server 

this.emit("newSprites", newPlayer);

in client

socket.on("newSprites", addSprites);

function addSprites (data){
sp = data

this.add.sprite(58, 84, sp.name)

}

This will result in an error

Uncaught TypeError: Cannot read property 'sprite' of undefined

I know that this is in reference to 'this'. because "this" is the function not create part of Phaser. In Phaser 2 that line would start with game.add.sprite. But i don't know what to call it in Phaser 3. Any help would be appreciated. 

 

thanks

[Juan]

Try this

socket.on("newSprites", addSprites);

var _this = this

function addSprites (data){
    sp = data
    _this.add.sprite(58, 84, sp.name)
}

 

[ahmedcoe]

Thanks for the reply, tried your suggestion but it didn't work still have the same error. I even tried to put the correct sprite name

socket.on("newSprites", addSprites);

var _this = this

function addSprites (data){
    sp = data
    _this.add.sprite(58, 84, '001')
}

 

[Juan]

3 minutes ago, ahmedcoe said:

Thanks for the reply, tried your suggestion but it didn't work still have the same error. I even tried to put the correct sprite name

socket.on("newSprites", addSprites);

var _this = this

function addSprites (data){
    sp = data
    _this.add.sprite(58, 84, '001')
}

 

 

Could you show more of your code? where is that addSprites function?

What about this?

socket.on("newSprites", addSprites);

// usage: addSprites(this, somedata)
function addSprites (_this, data){
    sp = data
    _this.add.sprite(58, 84, sp.name)
}

 

[ahmedcoe]

thats about it. every thing else is just the setup. The function is triggered correctly when the server event is sent. I also can console.log(sp.name) but tring to create an image or a sprite inside this function will give this error.

this is all the code

var socket; 
socket = io.connect();

var config = {
    type: Phaser.AUTO,
    width: 705,
    height: 400,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);


function preload (){
  this.load.image('001', '/client/assets/img/001.png');
}

function create ()
{

	console.log("client started");
    this.add.image(0 , 0 , 'background').setOrigin(0, 0);
    socket.on('connect', onsocketConnected);
    var id = 2;
    socket.emit("askForSprites", id);
    socket.on("newSprites", addSprites);
	}

function addSprites (data){
sp = data

this.add.sprite(58, 84, sp.name)

}

function update ()
{
}

// this function is fired when we connect
function onsocketConnected () {
	console.log("connected to server");

}

 

[Juan]

function addSprites (data){
    var sp = data;
    this.add.sprite(58, 84, sp.name)

}

what about this?

[ahmedcoe]

I get the error even if i put the name of the sprite

function addSprites (data){

    this.add.sprite(58, 84, '001')

}

 

[ahmedcoe]

So Juan sent me a message and solved it for me. thanks to him. this was the fix

function create (){

	console.log("client started");
    this.add.image(0 , 0 , 'background').setOrigin(0, 0);
    socket.on('connect', onsocketConnected);
    var id = 2;
    socket.emit("askForSprites", id);
    var _this = this;
    socket.on("newSprites", function (data) {
        addSprites(_this, data);
    });
}

function addSprites (_this, data){
    var sp = data;
    _this.add.sprite(58, 84, sp.name)

}

 

[jorbascrumps]

I would recommend this instead:

socket.on('newSprites', addSprites.bind(this));