Updated Quick Start Tutorial (markdown)

Azgaar 2024-07-21 23:01:59 +02:00
parent fbbf899c12
commit 467426e030

@ -1,6 +1,6 @@
_The tutorial is for version 1.98_
![FMG Loading Screen](https://cdn.discordapp.com/attachments/587406457725779968/629674550791110656/loading.png)
![loading_screen](https://github.com/user-attachments/assets/154617dd-a690-4da5-a36c-187cd51a5c04)
## Introduction
_Fantasy Map Generator_ is a tool that creates highly customizable fantasy worlds for you. It runs in a browser and does not require any software installation. Its free and you can use created maps for any purposes including commercial.
@ -15,7 +15,7 @@ The same operations can be performed using keyboard. Press <kbd>+</kbd> to zoom
## Map layers
By default the map shows the worlds political situation, but its not the only available preset. Open the first tab of the menu _Layers_ to change the preset. _Preset_ is a set of layers to be toggled on. There are number of presets available by default: political, cultural, religions, biomes, provinces, heightmap, places of interest, and other. You can either select one of the presets or use buttons below to display or hide a particular layer.
![Menu button](https://cdn.discordapp.com/attachments/587406457725779968/615924098090008577/v1_2.png)
![menu](https://github.com/user-attachments/assets/70171c15-a44e-4460-9e33-4f4eed7f1b2a)
To make it simple each layer has a shortcut assigned. Hover the mouse over the layer button to see a tooltip showing what the button does and which key is assigned to it. Check out [the Hotkeys](https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Hotkeys) wiki-page to get a full list of shortcuts. Click on the plus button next to the presets list to save the current layers as a custom preset. On Generator reload the map preset will be defaulted to the the previously selected one.
@ -26,7 +26,7 @@ There are cases when you may want to see several full map-covering layers simult
The same approach is used for styling all map elements. For example if you want to change the color of state borders, select _Borders_ element, then border group (type) and click on the color box to set a new color. Here you can also change border stroke width, its style and apply a visual filter. Different map elements have different styling controls. To restore the default style to all elements click on the counter-clockwise arrow next to the elements list.
![Styling borders](https://cdn.discordapp.com/attachments/587406457725779968/629674202240122890/style.png)
![style_borders](https://github.com/user-attachments/assets/7e47b11a-259d-400f-bd83-a5a919bffc41)
The _Toggle global filters_ section below allows to apply a color filter to the whole map.
@ -48,15 +48,14 @@ If you like the current map you probably want to **Save** it for a later use. Th
* _Save to browser_. Save the `.map` file to the browser storage. Then it can be loaded as a fully-functional map. Press <kbd>F6</kbd> for a quick save and <kbd>F9</kbd> for a quick load. Please use it only for a quick safe, browser storage can be purged from time to time and you can lose your progress. Always keep `.map` file saved on your machine.
![Saving options](https://media.discordapp.net/attachments/587406457725779968/620225213682024452/saving_options.png)
![save_options](https://github.com/user-attachments/assets/b04fb365-7169-4179-88f2-98c292a7f58d)
There are also a few ways how you can get a map image or map data. Click on **Export** and use one of the options there. Please note that image (png, svg, or jpeg) is not a fully-functional `.map` file and cannot be loaded back to the tool. Consider it as a screenshot.
## Generation and UI settings
Lets move to the settings overview. Open the Menu and click on the _Options_ tab. There are multiple options split into 2 categories. Map generation options require a new map to be applied. Generator settings are getting applied immediately on change.
![Options](https://cdn.discordapp.com/attachments/587406457725779968/615924109318029322/v1_5.png)
![options](https://github.com/user-attachments/assets/65fefee6-cdc7-439f-83e2-374c21f9a455)
* _Map size_: the size of the map canvas. By default the map size is the browser window's size, but it can be changed to any value. The button on the right expands the size back to the window size. Please note that there is no way to change the map size after the generation.
* _Map seed_: a number defining random values generation. If options and map size are the same, two maps generated with the same seed will be exactly the same. Obviously, the map seed cannot store users changes, so please dont use the seed number as a save function. The small button next to the seed allows to browse through generated seeds and restore previous maps.
@ -85,7 +84,7 @@ There is also the _Reset to defaults_ button. The button cancels all user change
## Climate configuration
Click on _Configure World_ to set up map position on a globe and climate. Toggle biomes, precipitation or temperature layers on to see how configuration changes affect the map.
![World Configurator](https://cdn.discordapp.com/attachments/587406457725779968/615924111243476992/v1_6.png)
![configure_world](https://github.com/user-attachments/assets/f36932b0-db18-4633-ad5b-0fe475afc44e)
The Globe on the right shows relative position of the map as a brighter area. The map position is calculated based on two inputs: _Map size_ and _Latitudes_. The North is always on the top, the West is on the left and so on. Map size defines a relative size of the map to the whole world. With 100% size the generated map will cover all the world; with 50% - half of the world and so on. If the size is not 100%, the map can be shifted towards North or South. The shift is controlled by the _Latitudes_ input. With Latitudes equal to 0 the map North edge will be at the North pole, with 100 - South edge will be on the South pole, with 50 - the world equator will lie through the center of the map.
@ -96,7 +95,7 @@ The _precipitation_ value defines how much vapor clouds can bring and spread acr
## Heightmap editing
If you dont like the heightmap generated automatically, you may edit it or even create a new one from the scratch. Open the _Tools_ tab in the menu and click on _Heightmap_. Now you need to select an edit mode. All secondary data (rivers, burgs, states, markers and so on) depend on the heightmap, so changing the height manually will break the default generation logic. The best practice here is to use the _Erase_ mode, create the heightmap you want and let the system to re-generate the secondary data. It will remove all the changes made for burgs rivers and so on, but it will guarantee the smooth generation.
![Heightmap Editor](https://cdn.discordapp.com/attachments/587406457725779968/615924111889399816/v1_7.png)
![edit_heightmap](https://github.com/user-attachments/assets/4f1f890a-31ab-4c5d-a4b1-38824ee2f4c0)
If you want to perform just a minor change, select the _Keep_ mode. You wont be able to change the coastline, but all the data, including manually placed relief icons and rivers, will be kept as it is. So its more like a visual change without changing the underlying data.
@ -104,7 +103,7 @@ If you have done some changes and still need to amend the coastline, you may use
Heightmap editing process has multiple build-in tools. These tools wont be covered in this tutorial, just note that they allow you to use brushes to "paint" the map, to edit and apply heightmap template and to convert any image into a heightmap.
![Paint Brushes](https://azgaar.files.wordpress.com/2019/06/9.-paint-brushes.png)
![paint_brushes](https://github.com/user-attachments/assets/dab037a3-797e-447a-ab96-6c99af1342d9)
## Customization tools
The Heightmap Editor tools are not the only available ones. From the same _Tools_ tab you can also open Biomes, States, Provinces, Diplomacy, Cultures, Namesbase, Zones, Religions, Burgs, Units and Notes editors. All these Editors work in a different way and wont be covered in this tutorial.
@ -118,7 +117,7 @@ The last section, which is collapsed by default, provides some info about the ma
## Editing map elements (labels, rivers, roads etc.)
Individual map elements such as rivers, routes, relief icons, labels, markers, burgs and labels can be edited on mouse click. The editor screen that is opened is different for each element and its also out of this tutorial's coverage.
![Label Editor](https://cdn.discordapp.com/attachments/587406457725779968/615924116184104960/v1_8.png)
![label_editor](https://github.com/user-attachments/assets/37e706d1-7674-4c81-abc4-0be166c85d5b)
## Points of contact
That was a brief overview of the main Generator elements and approaches. Its not full by any meaning and just serves as a starting point. You can always find more details and help on our supportive [Discord server]( https://discordapp.com/invite/X7E84HU) and [Reddit community]( https://www.reddit.com/r/FantasyMapGenerator).