Clear miniMap in update() - creating miniMap in online game

[Michał Lipa]

Im creating a minimap in my online game.

I made a BitMapData in create():
 

        miniMap = game.add.bitmapData(game.width/3, game.height/3);
		miniMap.addToWorld(-1000, -1000);
		drawnObject = game.add.sprite(270, game.height - 150, miniMap);
		drawnObject.anchor.setTo(0.5, 0.5);
		drawnObject.fixedToCamera = true;

So minimap is created and now i update online players position on minimap:

for now players position are random numbers

onlinePlayers.forEach(function(p) {
			this.miniMap.ctx.beginPath();
			this.miniMap.ctx.rect(self.getRandomNumer(100, 200), self.getRandomNumer(100, 200), 5, 5);
			this.miniMap.ctx.fillStyle = '#000';
			this.miniMap.ctx.fill();
		});

		// miniMap.clear(0, 0, 250, 250);
		drawnObject = game.add.sprite(270, game.height - 150, miniMap);
		drawnObject.anchor.setTo(0.5, 0.5);
		drawnObject.fixedToCamera = true;

 

So that is working but it drops down a fps after some time. I want to clear canvas every time and show only few dots (1 per player). minimap.clear() is deleting my minimap every frame of game.

How I supposte to clear this minimap from players old positions and how to make it optimalised (without fps drop down).

[gauravD]

By the looks of things, you seem to be doing 

drawnObject = game.add.sprite(270, game.height - 150, miniMap);

every update? If that is true, you are creating a new sprite every frame = after some time, you will have way too many sprites.

AFAIK, when you update your bitmapdata, the sprite also uses the updated texture. So you can safely remove all these lines

drawnObject = game.add.sprite(270, game.height - 150, miniMap); //The sprite will use your updated texture
drawnObject.anchor.setTo(0.5, 0.5); //You already set the anchor before (I reckon you were doing this every update because you were creating a new sprite :))
drawnObject.fixedToCamera = true;   //Same as above; This is not needed

This should help with the framerate. Typically, a call to clear() is also 'expensive', but I think you can get away with this.

[Michał Lipa]

11 hours ago, gauravD said:

By the looks of things, you seem to be doing 

drawnObject = game.add.sprite(270, game.height - 150, miniMap);

every update? If that is true, you are creating a new sprite every frame = after some time, you will have way too many sprites.

AFAIK, when you update your bitmapdata, the sprite also uses the updated texture. So you can safely remove all these lines

drawnObject = game.add.sprite(270, game.height - 150, miniMap); //The sprite will use your updated texture
drawnObject.anchor.setTo(0.5, 0.5); //You already set the anchor before (I reckon you were doing this every update because you were creating a new sprite :))
drawnObject.fixedToCamera = true;   //Same as above; This is not needed

This should help with the framerate. Typically, a call to clear() is also 'expensive', but I think you can get away with this.

Thanks, you were right about this code to delete. Now it's working smooth, but miniMap.clear() seems to work too good, because it clear whole map so often that I don't see any map during gameplay.

How I can show on map only points from current update loop? This clear() delete whole miniMap.