Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm trying to create a minimap for my game but am having an issue.

I'm using Direct2D as the graphics API and have a ID2D1Bitmap* which contains the pixel data for the loaded area of the world.

I'd like the minimap to be around 100 x 100 pixels but the ID2D1Bitmap* contains about 3500 x 3500 of pixel data. When I try to render 3500 x 3500 pixels in a 100 x 100 pixel area, the image becomes very distorted and unpleasant.

In most cases, I thought this was solved by generating a mipmap chain but I don't see any options like this offered by Direct2D.

How can I create a clear minimap using DirectX?

share|improve this question

1 Answer 1

Usually minimaps are done by rendering the scene using a special, top-down camera. In your case though, the amount of scaling is extreme, so you'll lose a lot of detail one way or another. However, I suspect that your biggest issue is that the important fine detail is lost, like contours and edges.

I suggest you try using an image processing technique to preserve those edges. You can either find a library to do these, or if you know your way around bitmaps and multiplying pixels, they're fairly simple to implement too.

To demonstrate, I'll use this giant picture of the world map with political boundaries. Here's a close-up of the British Isles and an extremely scaled-down version (using basic bilinear, similar to what DirectX would be doing) to compare the loss of fine detail:

british isles detail badly scaled version

Resize and sharpen

One easy method is to perform gradual resizes, but also sharpen at each iteration to preserve the edge detail. In this example, I'll resize to 50% and sharpen the image repeatedly until the image is tiny. Here's the result of a few iterations of resize and sharpen:

resize sharpen

resize sharpen

And here's the final result, at about 258x128:

resize and sharpen result

Edge detection

Another method is to use an edge detection image filter, thicken the edges, and combine the results with the normally-scaled image. Here's the result of one such filter:

edge detection

Combined with the result of a normal scale, I get this:

edges combined

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.