Phaser.Cache.getImage: Key 'players' not found in Cache

[Rellfy]

Hello!

 

I've been using phaser and socket.io to create a multiplayer game for about 5 days now. However, a weird error is happening:

 

 

'players' is a key for a image that I'm using to show other players (it's not the same of your player).

 

Because I'm a newbie with phaser, maybe I'm missing something very basic, but until now I don't have idea of what it is. Here is the start of my code:

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'kabar', {preload: preload, create: create, update: update});function preload(){	var loadingLabel = game.add.text(window.innerWidth / 2 - 85, window.innerHeight / 2 - 10, 'Loading...',			   {font: '30px Courier', fill: '#fff'});	game.load.image('player', 'assets/player/player.png');        game.load.image('players', 'assets/player/players.png');	game.load.image('bullet', 'assets/bullet1.png');	game.load.image('space', 'assets/space.gif');	game.load.start(); // I tried without this line too, didn't work }

And here are both sockets where I load these images and the error happens:

                var socket = io();                socket.on('newPlayer', function (data){			var uID = data.uID;			players[uID] = new EnemyPlayer(data.oPlayers[uID].id, data.oPlayers[uID].x, data.oPlayers[uID].y, data.oPlayers[uID].angle);			players[uID].id = data.oPlayers[uID].id;			players[uID] = game.add.sprite(0, 0, 'players');			players[uID].anchor.setTo(0.5, 0.5);			game.physics.enable(players[uID], Phaser.Physics.ARCADE);			players[uID].body.drag.set(0.2);			players[uID].body.maxVelocity.setTo(400, 400);			players[uID].body.collideWorldBounds = true;		});		socket.on('update', function (data){			playerQuantity = data.playerQuantity			if (userID == playerQuantity && userID > 1){				players = data.oPlayers;				for (var i = 1; i < playerQuantity; i++){					if (i != userID){						players[i] = new EnemyPlayer(players[i].id, players[i].x, players[i].y, players[i].angle);						players[i].id = players[i].id;						players[i] = game.add.sprite(players[i].x, players[i].y, 'players');						players[i].anchor.setTo(0.5, 0.5);						game.physics.enable(players[i], Phaser.Physics.ARCADE);						players[i].body.drag.set(0.2);						players[i].body.maxVelocity.setTo(400, 400);						players[i].body.collideWorldBounds = true;						players[i].position.x = players[i].x;						players[i].position.y = players[i].y;						players[i].angle = players[i].angle;					}				}			}		});

(The socket 'New Player' is called for an existing player when a new player joins, while the socket 'Update' is called for the new player to draw all the other players)

 

Could it be an error involving socket.io? Or is it something that I'm missing?

[jmp909]

Is the last block of code inside your create() function ?

[Rellfy]

Is the last block of code inside your create() function ?

 

Hello, thanks for the answer! - No, it's in the end of the code

 

And somehow I fixed it   I still don't know what caused it, but it's working now...

 

Here is my new code:

                Player = function(id, x, y, angle, key){			this.id = id;			this.x = x;			this.y = y;			this.angle = angle;			this.sprite = game.add.sprite(x, y, key);			this.sprite.angle = this.angle;			console.log('new player created! sprite: ');			console.log(this.sprite);		};		socket.on('newPlayer', function (data){			var uID = data.uID;						players[uID] = new Player(uID, data.newPlayerX, data.newPlayerY, data.newPlayerAngle, 'players');			players[uID].sprite.anchor.setTo(0.5, 0.5);			game.physics.enable(players[uID].sprite, Phaser.Physics.ARCADE);			players[uID].sprite.body.drag.set(0.2);			players[uID].sprite.body.maxVelocity.setTo(400, 400);			players[uID].sprite.body.collideWorldBounds = true;			players[uID].sprite.bringToTop();			console.log('added new player with ID ' + players[uID].id);		});		socket.on('update', function (data){			playerQuantity = data.playerQuantity;			console.log('player quantity: ' + playerQuantity);			if (userID == playerQuantity && userID > 1){				console.log(players);				for (var i = 1; i < playerQuantity; i++){					if (i != userID){						players[i] = new Player(i, data.oPlayers[i].x, data.oPlayers[i].y, data.oPlayers[i].angle, 'players');					    players[i].sprite.anchor.setTo(0.5, 0.5);					    game.physics.enable(players[i].sprite, Phaser.Physics.ARCADE);					    players[i].sprite.body.drag.set(0.2);					    players[i].sprite.body.maxVelocity.setTo(400, 400);					    players[i].sprite.body.collideWorldBounds = true;					    players[i].sprite.bringToTop();						console.log('Player created - ID: ' + players[i].id + ' x: ' + players[i].sprite.position.x + ' y: ' + players[i].sprite.position.y);					}				}			}		});

And now I'm having another problem. My tilling background image (a .gif) is appearing over the other players. It's similar to the problem I had before, but now the game loads the sprite and the new player cannot see the other players because the background image is hiding them. The strange thing is that it only happens, again, for a new player. And the socket for a new player and an old one is the same!

 

I tried

players[i].sprite.bringToTop();

(where players.sprite is a phaser sprite), but It didn't work. When I remove the background image I can see the other players without any problem  

[jmp909]

What I meant was are you creating your socket within the create() function? Otherwise there would be a chance of socket callback firing before preload completed, and hence cache not being ready