JS Map Generator is a JavaScript project that aims to randomly generate a coherent map while respecting a set of constraints.
- Clone this repository locally
$ git clone https://github.com/alexispages/map-generator-js.git- Open the index.html file located at the root of the project using your favorite browser
- You will see something like this:
- Each time you press F5 key, you will have a different map generated
You can tweak the map size at the end of the index.html file. To do so, adjust the values passed in parameter of the createmap function. In the example below, 60 corresponds to the height and 30 to the width of the map.
createmap(mapgrid, 60, 30)The cities names are stored in the variable cities_names. They were genererated with the Markov Namegen tool using different Name Data Presets.
var cities_names = ["CityName1", "CityName2", "..."];The cities names are generated within the function create_city_paths. A prefix before the city name is added by choosing it randomly from the cities_prefixies variable. You can change the content of this variable if you want to add prefixes or if you want to make it less probable to have a prefix by adding blank prefixes.
var cities_prefixes = ["Prefix1", "Prefix2", "", "", "..."];In order to ensure the consistency of the different biomes on the map, we used the simplex-noise.js module to generate noise in a consistent way.
The parameters we have defined in the Hex class allow for small biome sizes and many variations in height (little distance between a water biome and a mountain biome).
this.height = Math.round((((simplex.noise2D(x / 1000, y / 1000)) + 1) / 2) * 100);Detail of the values :
- The two 1000 correspond to the frequency
- 2 is the amplitude
For higher biomes, you have to change the amplitude in this manner:
this.height = Math.round((((simplex.noise2D(x / 1000, y / 1000)) + 1) / 0.5) * 100);Putting 0.5 instead of 2 may be too extreme but you will immediately notice that the biomes height has increased considerably. There will be almost only mountains left. Conversely, if you replace the value by 5, your biomes will only be composed of oceans.
For larger biomes, you have to change the frequency in this manner:
this.height = Math.round((((simplex.noise2D(x / 4000, y / 4000)) + 1) / 2) * 100);Putting 4000;4000 instead of 1000;1000 may be too extreme but you will immediately notice that the biomes size has increased considerably.
The two frequency values must remain close. For example, if you use the couple of values 4000;1000, your biomes will be stretched in a horizontal way. Conversely, if you replace the values by 1000;4000, your biomes will be stretched in a vertical way.
The parameters we have defined in the Hex class allow for small forest (high humidity biome) and small desert (low himidity biome). Also, you can see variations in humidity level (a map will almost always have a desert and a forest).
this.humidity = Math.round((((simplex2.noise2D(x / 2000, y / 2000)) + 1) / 2) * 100);Detail of the values :
- The two 2000 correspond to the frequency
- 2 is the amplitude
For more humid biomes, you have to change the amplitude:
this.humidity = Math.round((((simplex2.noise2D(x / 2000, y / 2000)) + 1) / 0.5) * 100);Putting 0.5 instead of 2 may be too extreme but you will immediately notice that there are a lot of forests and no more deserts on the map. Conversely, if you replace the value by 10, you will see a lot of desert and no more forests.
For larger forests or larger deserts, you have to change the frequency:
this.humidity = Math.round((((simplex2.noise2D(x / 5000, y / 5000)) + 1) / 2) * 100);The frequency values must remain close. For example, if you use the couple of values 5000;1000, your forests and deserts will be stretched in a horizontal way. Conversely, if you replace the values by 1000;5000, your forests and deserts will be stretched in a vertical way.
When generating maps, you will notice that the path finding algorithm is perfectible. It does not take the shortest path from one city to another and also can't find paths between certain cities.
