ahmedcoe

adding sprite from the result of a server emit

Recommended Posts

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

Share this post


Link to post
Share on other sites

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')
}

 

Share this post


Link to post
Share on other sites
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)
}

 

Share this post


Link to post
Share on other sites

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");

}

 

Share this post


Link to post
Share on other sites

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)

}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.