Trying to make a minimap for my game

Question

I'm trying to make a minimap for a game I'm working on and I want it to display at the bottom-right corner of my canvas even when I change the size of the window.

I have a jquery code to change the size of canvas and my global WIDTH and HEIGHT variables when it changes:

$(window).resize(function()
{
    ctx.canvas.width = $(window).width();
    ctx.canvas.height = $(window).height();
    WIDTH = $(window).width();
    HEIGHT = $(window).height();
});

Here's what I have right now but it's not really working great:

var minimap = // Object to draw minimap (in-progress)
{
    width: WIDTH / 5,
    height: HEIGHT / 5,
    x: ((WIDTH / 5) * 4),
    y: ((HEIGHT / 5) * 4)
};

var updateMiniMap = function()
{
    var HorW = (HEIGHT < WIDTH) ? HEIGHT : WIDTH;

    minimap.width = HorW / 5;
    minimap.height = HorW / 5;
    minimap.x = ((WIDTH / 5) * 4);
    minimap.y = ((HEIGHT / 5) * 4);
};

Here's what I want:

 _______________
|              |
|              |
|              |
|          ----|
|__________|___|

and when the window gets smaller the square stays the same size:

____________
|          |
|      ----|
|______|___|

EDIT -> The map is something like 10,000 by 10,000 pixels and the canvas only renders a small part of it. I want the map to render the whole thing — Sandy Leach, Feb 13 '18 at 04:11

score 0 · Answer 1 · answered Feb 13 '18 at 05:29

To capture the screen size and use Event Listener to catch the screen size on change.

Check Alex V answer at this post JavaScript window resize event

Also, your calculation looks good as 20% of the screen for the minimap is much enough and readable for the user, going smaller than that would be a difficult user-experience.

The second thing you need is to use CSS on the minimap container. you could contain the minimap inside div element and give it a class to be controlled via CSS. Something like :

<div id="minimap" class="minimap-container">....</div>

and then from the CSS :

.minimap-container {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99999;
}

this CSS would be just to control the position of your minimap. if you noticed I didn't add width and height properties in CSS above, and that's because you'll use Javascript to control that instead by using any method (simpler one would be getElementById).

I hope this would give you enough insight to complete your project.

Trying to make a minimap for my game

1 Answers1