Curved Tiles: Enjoyable With Voronoi Graphs (Half 1)

It is a weblog about our improvement of Unexplored 2: The Wayfarer Legacy. This recreation options state-of-the-art content material era, generative storytelling, rising gameplay, adaptive music, and dynamic creative fashion.

The content material generator of Unexplored 2 generates tile maps. The everyday output appears like this (you possibly can learn extra about our stage generator right here

These tile playing cards are stacked, utilizing totally different tiles to point the forms of tile flooring (grass or soil on this instance) and varied decorations. On this case, there are shrubs (massive inexperienced circles), rocks (black circles), vegetation (small inexperienced circles), flowers (white circles) and ornamental textures (grey squares). There are additionally particular tiles that point out recreation knowledge, such because the marked spawn level of 1's. As well as, tiles might be marked with further info resembling elevation or particular subtypes.

Tiled maps present a handy knowledge construction with which turbines can work. However they’re additionally fairly inflexible and the grid usually tends to be seen within the recreation. Nonetheless, in our case, when the information is loaded into the sport and the sources positioned, the result’s the next:

I prefer to suppose that we have now fairly properly hidden the tiles, and right here is how we did it.

The trick is to match the mosaics to the cells of a Voronoi diagram. This can be utilized to generate far more pure kinds. A Voronoi diagram is created from the sowing of a aircraft with random dots and a cell partition so that every level of the aircraft belongs to the cell that corresponds to the purpose of ## EQU1 ## 39, nearest origin. There are a lot of fascinating functions of Voronoi diagrams for procedural content material era (PCG).

A typical Voronoi diagram created from a random however pretty uniform distribution of beginning factors appears like this:

For Unexplored 2, we use a special sort of distribution than the beginning factors. To start, we sow one level for every tile. On this method, we’re positive that every tile of the tilemap might be mapped to a cell of the Voronoi diagram.

Now, in case you place the dots in the course of every cell, you get a rectilinear grid that appears precisely like a mosaic map (for this picture and the others beneath, I've additionally created a checkerboard model during which half of the mosaics are displayed in yellow, you possibly can see the patterns a bit higher):

A easy method to enhance the looks is to randomize the place of every preliminary level. When shifting factors, it’s useful to verify the purpose doesn’t transfer out of its unique mosaic.

The outcome appears like this:

Higher, however very noisy, and you don’t get lovely flowing strains that method. It may be improved by "releasing" the Voronoi diagram (customary method related to Voronoi diagrams during which I cannot enter right here). However it’s going to at all times be a bit noisy and it’s tough to successfully counsel shapes on a scale that exceeds that of various tiles.

To work round this downside, it’s essential to transfer the dots smarter than simply utilizing a random transfer. Several types of actions have very totally different results. For instance, using Perlin noise can create fascinating curved curve tilemaps. Or you possibly can flip it into hexagonal tiles just by transferring every row of beginning factors to the left:

The true breakthrough comes once we begin transferring across the beginning factors particularly patterns to create rounded corners. Step one of this course of is already executed within the stage generator. Corners are detected between soil sorts and angle slabs are marked in several shapes, indicating how they need to be deformed to generate a greater surroundings:

On this case, variations in altitude additionally present corners within the tilemap. That is the explanation you see the additional rounded corners within the grass on the prime proper and backside left the place the slopes have been generated.

The sport makes use of this info to maneuver the beginning factors of the Voronoi graph. Every rounded nook strikes the situation of the purpose of origin (see the picture beneath). As well as, it additionally strikes the beginning factors of its 4 orthogonal neighbors. This course of is cumulative. The beginning factors might be moved a number of instances if they’re close to a number of corners. Nonetheless, as soon as all journeys are made, the beginning factors are barely randomized (about 10% of the width of a tile in each instructions) and the ultimate transfer is proscribed to 40% most of the width of the tile. ;a tile.

The result’s already fairly wonderful:

However we’re not there but …

The general form is best, however the edges are nonetheless very straight and look considerably irregular. We cowl this through the use of curved parts positioned alongside the sides, the place the colours are totally different. The true trick, nevertheless, is that a curve is usually positioned on two edges, utilizing their relative angles to find out the path of the curve.

The outcome appears like this:

Then we use 3D sources to present an extra texture to the cliffs:

And at last, we add the opposite property to finish the extent. The location of those property is dictated by the extent of knowledge beforehand generated and customarily follows a easy philosophy. We use smaller sources to encompass bigger sources, creating pure and nice transitions. Be aware the rocks added on the backside of the cliffs to create extra selection and visually mitigate the vertical slopes dictated by the gameplay:

Corners usually are not the one sort of displacement we use. For instance, close to synthetic buildings (resembling ruined partitions beneath), you need the sides to be extra straight:

In our system, this impact is straightforward to attain. We merely introduce a special displacement rule that ensures that tiles with synthetic buildings usually are not moved. The generator makes use of smaller squares to mark these tiles and the sport merely ensures that each one strikes are ignored:

For those who have a look at the bottom, you possibly can clearly see how particular areas might be straightened whereas others bend extra naturally:

Will not be it good?

There are another guidelines that you would be able to simply use with this method. For instance, we generally drill the tiles in a hexagonal sample to guarantee that the slender paths are broad sufficient to be crossed. And I'm positive we'll discover different makes use of for different fashions.

This is among the many the explanation why I actually like Voronoi diagrams. One other time, I’ll write how we use them to generate and adorn 2 unexplored world maps.

If you wish to know extra concerning the recreation, go to Fig.co or Steam.

Be aware: This text was initially revealed on the Ludomotion web site and is reproduced right here with the sort permission of the creator.