Building multiple dynamic sprite

[ottacom]

Hi I'm building a realtime multiplayer interface using nodejs (socket.io) and jquery.

So probably it's an insane question , but I don't need to make a group of sprites but a single sprite for every player in order to keep everyone under control with specific behavior.

In my preload  I wrote something like this reading from a json file and build on sprite for each player

   

 

var dynplayer = [];

 

//reading from json file

     $.each( data, function( index ) {

       

        userid=data[index].userid; 

//use an array for sprite

       dynplayer[userid] = dcl.add.sprite(90*i, dcl.world.centerY, 'player');

       dynplayer[userid].animations.add('front', 0);

       dynplayer[userid].animations.add('walk_down', [0, 1, 2, 3]);

       dynplayer[userid].animations.add('walk_up', [12, 13, 14, 15]);

       dynplayer[userid].animations.add('walk_left', [4, 5, 6, 7]);

       dynplayer[userid].animations.add('walk_right', [8, 9, 10, 11]);

       dynplayer[userid].animations.add('server1on', [0,1,2,3,4,5,4,3,2,1,0]);

    }

 

Everything seems work but when I try to set something inside the update function my code crash becouse I can't recall a sprite used by the array dynplayer[userid] 

 

function update() {

 

dynplayer[human_sessionplayer].x=100; -----------------> return undefined (don't consider dynplayer[human_sessionplayer] as a sprite)

console.log(dynplayer[human_sessionplayer]); -----------------> return P…r.Sprite {type: 0, physicsType: 0, position: P…r.Point, scale: P…r.Point, pivot: P…r.Point…}

 

}

Probably I made a conceptual mistake   , I'm a beginner developer on phaser .... but is there some  ninja able to show the best way to do this?
Thank you for your sharing your time if you answering me back.

 

[Skeptron]

Did you simply try to debug your dynplayer array? It looks like it's undefined in the udpate() function, or maybe it's empty, or maybe the keys you are using do not strictly match the ones you use when you put object into it (the first time you use userId as key, the second time you use human_sessionplayer. Are these the same things?)

[cloakedninjas]

Creating all your sprites in your preload is ok for that moment in time - but if you're making a real-time multiplayer game you'll need to handle users leaving + joining at will. You should create a map of users, and use the same function to create a user on init() and during the lifetime of your game, e.g:

var userList = {};function addUser(id) {  var sprite = game.add.sprite(x, y, 'img');   sprite.anchor.x = 0.5;  userList[id] = sprite;}function init(playerList) {  playerList.forEach(function (player) {    addUser(player);  }, this);}//socketManager.on('connect', init.bind(this));socketManager.on('new-user', addUser.bind(this));

As for your current issue, it seems that your human_sessionplayer isn't defined in the update() scope. Add a debugger; statement just before you use it to see what the value is.

[liakos1992]

What I use:

var GAME = {    dynplayers: [],    start: function() {        if (typeof GAME.game !== 'undefined') { // if phaser already exists, restart all the structure            GAME.game.destroy();            delete GAME.dynplayers;            GAME.dynplayers = [];        }        GAME.game = new Phaser.Game(800, 600, Phaser.AUTO, "", {            preload: GAME.preload,            create: GAME.create,            update: GAME.update        });    },    game: undefined, // the phaser game    preload: function() { // the phaser preload        GAME.game.load.image("bullet", "images/bullet");        loadAllYourImagesHere();    },    create:    function() { // the phaser create        buildTheClientWorld();        var returnedServerData = sendYourLoginAndConnectionRequestToServer();        createDynplayers(GAME.dynplayers, returnedServerData); // create sprites here    },    update: function() { // the phaser update        clientBasedGameUpdate();    }};GAME.start();

JSON loader is asynchronous. Phaser must start after it finishes. You have to execute GAME.start() after "$.each" has finished its job. Instead of creating the sprites instantly, inside "$.each" you will do just:

$.each( data, function( index ) {     var userid = data[index].userid;      GAME.dynplayer[userid] = {};}

and then inside "GAME.create()" you will do:

for (var key in GAME.dynplayer) {     GAME.dynplayer[key] = GAME.game.add.sprite(x, y, "texture");     // and so on}

[Skeptron]

This doesn't help because you don't show critical code.

 

Just put a breakpoint on this line : dynplayer[human_sessionplayer].x=100; 

 

And before executing it, just check what's inside dynplayer. It's probably undefined or null, or the keys are not the ones you expect.

[liakos1992]

i have updated my answer