How to zoom randomly generated maps?

Question

I made a Java program which generates a random map based on Perlin Noise + Poisson Algorithm + Voronoi Diagram. Here you can see a generated map. White are caves, black is empty.

The problem is that my character will go through this caves so I need to zoom this image to see only a big piece of where I am. But when I zoom in, the image obviously gets pixelated and looks really bad. So I save it as an svg image and the quality now is perfect but as far as I have read svg images are slow to render and 2D Games Engine (like SFML, SDL) can't render them.

The approach I have read about is that maps are tiled based, a tile size depending on zoom level, but this is a randomly generated map and zooming in svg image to generate the tiles and save the tiles to formats like png, jpeg, would be very slow (Or I am wrong?).

What can I do here? I have searched how to zoom the Perlin Noise function but it isn't a fractal noise so I can't.

Thank you in advance for your help! I am new in game development!

Answer 1

This sounds like a good situation to use Signed Distance Fields. It's often used for text rendering to achieve high quality and sharp results when zooming (and rotating), but it can also be used for any black & white images. See this video and the image below.

Typically when text is prerasterized to bitmaps, each pixel stores the alpha value. 0 means transparent, 1 means opaque and values between are semitransparent due to antialiasing the edges. With signed distance fields the idea is to create a bitmap where each pixel stores the distance to the nearest edge. Values < 0 are outside the shape and values > 0 are inside the shape. When rendering, this information is read from the bitmap and the alpha value is decided on runtime based on the distance and "spread". Spread here means how sharp you want the edge to be, usually chosen so that the resulting antialiased edge is no wider than 1 pixel on the screen.

The nice thing about distance fields is that when zoomed in, the distances to straight edges stay accurate when the bitmap is sampled with bilinear filtering. This allows arbitrary zooming without pixelating or blurring. You just need to provide the spread matching the zoom level. This technique is also very fast to render, as it only requires a custom shader with a single texture lookup + some simple math. This is going to be a lot faster than polygon based methods. Distance fields also allows some effects easily, mainly borders around or inside the shapes: [freetype-gl]

The generation of the distance field can be a problem, as it's not trivial to calculate it from arbitrary shapes. Fortunately for you it should be pretty straigthforward, as you already seem have the distance information available as you are generating a voronoi diagram.

An additional bonus from distance fields is that it can be very friendly for some physics or lighting calculations. As an example PixelJunk Shooter used it for collisions.

The only problem I can see for your case seems to be that your map is not black and white. From the description it's not clear what the different shades of gray indicate. You could just sample the colors from traditional bitmaps or have multiple distance fields, one for each color. Or you could invent something totally different, but it all depends what you want to do.

Answer 2

Currently, you are generating a map in a format that is difficult to use.

Maybe you need use the algorithm for the Perlin Noise to generate a tiled map, instead of an image.

Answer 3

Divide the map in chunks of tiles, lets say chunks of 32x32 tiles, and create a mesh with the geometry of that chunk and map each 4 vertex of each tile with a tileset texture. Build all the map using those chunks join together and draw only the ones visible to improve performance. Use the texture only as reference to know the type of tile to draw at each position.