[SOLVED] Minimap performance

[Tufan]

I tried using this but it ruins performance after calling createMiniMap.

Is there any better solutions for creating a minimap?

[kaasis]

There is. It's very basic tho.

Lets say map width and height equals to 6000

and lets say we want map position to be at top right corner with padding off sides of 10.

so with padding on screen location would be x=10 and y=10.

and lets say we want map size on screen to be 150width and 150height. To accomplish that we have to times down map size by 40 times. (which is 6000/40=150) Now we can even create rectangle on that position so we can see the minimap if you wish so, with Phaser.Graphics. Now we have minimap, kind of. Lets say now we want to show local player's location in minimap. What we have to do is to get player's location's x and y. When you get it, you have to time it down by 40, both x and y and you have to plus padding which is 10, in this case on both x and y. And boom! There you have it, basic minimap.

 

If you didn't understand quite enough, i'm sorry then for my bad explanation.

 

Edit: Ok here's code. I created it. Quite easy and basic as i said above. Here's how it looks like http://prntscr.com/ff4882 (of course you'll have to edit a bit code and have to specify your own player's x and y in drawRectangle() function also keep in mind, you'll have to redo some calculations by yourself if your map doesn't start at x 0 and y 0)

// this one goes in CREATE function

this.mmgraphics = this.add.graphics(0,0) // add graphics so we can draw rectangles for minimap
this.mmgraphics.fixedToCamera = true // fix it to camera
this.mmgraphics.alpha = 0.5

this.mmgraphics.padding = 10 // padding from sides
this.mmgraphics.mapsize = 6900 // mine map is 6900 wide (change to your own settings)
this.mmgraphics.timesby = 46 // times it down depending on your screen minimap width, height and of your map size
this.mmgraphics.screensizeW = 150 // minimap screen width
this.mmgraphics.screensizeH = 150 // minimap screen height

// this one goes in UPDATE function

// minimap updating local player position
this.mmgraphics.clear()
this.mmgraphics.beginFill(0x000000)
// minimap itself
this.mmgraphics.drawRoundedRect(this.mmgraphics.padding,this.camera.height-this.mmgraphics.padding-this.mmgraphics.screensizeH,this.mmgraphics.screensizeW,this.mmgraphics.screensizeH,5)
// local player
if (this.player) {
	this.mmgraphics.drawRect(this.player.x/this.mmgraphics.timesby+this.mmgraphics.padding,this.camera.height+this.player.y/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH,10,10)
}
this.mmgraphics.endFill()

 

[kaasis]

@Tufan i did little bit recolculations. This one you just need to specify map width, height and minimap width, height and it'll calculate timesby itself, kind of easier, ya know.

just replace CREATE code with this.

this.mmgraphics.padding = 10 // padding from sides
this.mmgraphics.mapWidth = 6900 // mine map is 6900 wide (change to your own settings)
this.mmgraphics.mapHeight = 6900 // mine map is 6900 wide (change to your own settings)
this.mmgraphics.screensizeW = 200 // minimap screen width (can be any)
this.mmgraphics.screensizeH = 150 // minimap screen height (can be any)
this.mmgraphics.timesby = ((this.mmgraphics.mapWidth/this.mmgraphics.screensizeW)/2)+((this.mmgraphics.mapHeight/this.mmgraphics.screensizeH)/2)

 

[Tufan]

6 minutes ago, kaasis said:

@Tufan i did little bit recolculations. This one you just need to specify map width, height and minimap width, height and it'll calculate timesby itself, kind of easier, ya know.

just replace CREATE code with this.

this.mmgraphics.padding = 10 // padding from sides
this.mmgraphics.mapWidth = 6900 // mine map is 6900 wide (change to your own settings)
this.mmgraphics.mapHeight = 6900 // mine map is 6900 wide (change to your own settings)
this.mmgraphics.screensizeW = 200 // minimap screen width (can be any)
this.mmgraphics.screensizeH = 150 // minimap screen height (can be any)
this.mmgraphics.timesby = ((this.mmgraphics.mapWidth/this.mmgraphics.screensizeW)/2)+((this.mmgraphics.mapHeight/this.mmgraphics.screensizeH)/2)

 

Thank you! This is exactly what i was looking for.

Player looks like this near outside of map, i think it's about player's size on minimap. How can i fix it?

 

[kaasis]

2 minutes ago, Tufan said:

Thank you! This is exactly what i was looking for.

Player looks like this near outside of map, i think it's about player's size on minimap. How can i fix it?

 

It's because player's rectangle x and y starts from 0 and 0 not from middle of rectangle size. Just minus x and y by half of the size of player's rectangle. Default size is 10 by 10, so minus x by 5 and y aswell

[Tufan]

16 minutes ago, kaasis said:

It's because player's rectangle x and y starts from 0 and 0 not from middle of rectangle size. Just minus x and y by half of the size of player's rectangle. Default size is 10 by 10, so minus x by 5 and y aswell

Still having the same problem :/

this.mmgraphics.drawRect((player.x-5)/this.mmgraphics.timesby+this.mmgraphics.padding,this.camera.height+(player.y-5)/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH,10,10);

Am I doing something wrong?

[kaasis]

35 minutes ago, Tufan said:

Still having the same problem :/

this.mmgraphics.drawRect((player.x-5)/this.mmgraphics.timesby+this.mmgraphics.padding,this.camera.height+(player.y-5)/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH,10,10);

Am I doing something wrong?

didn't see you replied. Here, this should work.

this.mmgraphics.drawRect(player.x/this.mmgraphics.timesby+this.mmgraphics.padding,this.camera.height+(player.y)/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH-5,10,10);

 

[Tufan]

4 minutes ago, kaasis said:

didn't see you replied. Here, this should work.

this.mmgraphics.drawRect(player.x/this.mmgraphics.timesby+this.mmgraphics.padding,this.camera.height+(player.y)/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH-5,10,10);

 

Still the same, idk why.

[kaasis]

3 minutes ago, Tufan said:

Still the same, idk why.

Well some pixels will be outside of the map due size of the rectangle you can make rectangle smaller to reduce its effect when being at corner or just recalculate some stuff.

or maybe it's because of the brackets on player what you put.

try this then

this.mmgraphics.drawRect(player.x/this.mmgraphics.timesby+this.mmgraphics.padding-5,this.camera.height+player.y/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH-5,10,10);
 

 

[Tufan]

10 minutes ago, kaasis said:

Well some pixels will be outside of the map due size of the rectangle you can make rectangle smaller to reduce its effect when being at corner or just recalculate some stuff.

or maybe it's because of the brackets on player what you put.

try this then

this.mmgraphics.drawRect(player.x/this.mmgraphics.timesby+this.mmgraphics.padding,this.camera.height+player.y/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH-5,10,10);
 

 

I fixed it by increasing mmgraphics.mapWidth and mmgraphics.mapHeight values by 1000. It's perfectly fit now.

Edit: I only changed mapWidth. There's no problem with mapHeight, weird.

[kaasis]

2 minutes ago, Tufan said:

I fixed it by increasing mmgraphics.mapWidth and mmgraphics.mapHeight values by 1000. It's perfectly fit now.

what? 

that last code what i queted, should've worked. But if that works for you, fine.

Also check Private Messages.

[Tufan]

Just now, kaasis said:

what? 

that last code what i queted, should've worked. But if that works for you, fine.

Also check Private Messages.

I actually tried that before, didn't work tho.

[kaasis]

1 minute ago, Tufan said:

I actually tried that before, didn't work tho.

i edited it actually, maybe you copied old one. I just forgot to put -5 on x.

[Tufan]

19 hours ago, kaasis said:

i edited it actually, maybe you copied old one. I just forgot to put -5 on x.

Works well if you minus x,y by the size of player's rectangle. Use final solution instead, this doesn't work correctly.

this.mmgraphics.drawRect(player.x/this.mmgraphics.timesby+this.mmgraphics.padding-10,this.camera.height+player.y/this.mmgraphics.timesby-this.mmgraphics.padding-this.mmgraphics.screensizeH-10,10,10);

Edit: 

Final solution

Just minus screensize values by rectangle size.

// create
this.mmgraphics.timesby = (((this.mmgraphics.mapWidth/(this.mmgraphics.screensizeW-5))/2)+((this.mmgraphics.mapHeight/(this.mmgraphics.screensizeH-5))/2));

// update
this.mmgraphics.drawRect(((entity.x/this.mmgraphics.timesby)+this.mmgraphics.padding),(this.camera.height+(entity.y/this.mmgraphics.timesby)-this.mmgraphics.padding-this.mmgraphics.screensizeH),5,5);

You can change timesby on update function to have rectangles in different sizes.