Templates implementation and Heightmap editor UI

In one of the previous posts I covered a concept of heightmap templates. Now I want to describe how it was implemented and aligned with a new Heightmap editor. The Heightmap is a core element of the map generation and I want to give users ways to control over it.

By default map is getting generated in automatic mode. It means a semi- random template is getting selected and applied on generation. I believe most people don’t go deep and just want a glimpse on a generated maps. For others there should be a user interface which will allow to create really unique and desired maps and make the generator helpful for a mapmakers. Moreover, users should have an ability to create and share their own Heightmap templates.

It happened that user interface (UI) creation is the most time-consuming process in the generator development. I have started with a draft controls, then came to an idea of  a generation journey — a step by step process of map creation. Some steps were already done when I realized that building a high-grade interface takes too much time and I need to concentrate on creating a usable UI for the actual Demo version.

Heightmap templates editor

As you may know I’m generating heightmap based on multiple repetition of a “blob” placement (the basic algorithm is describer here). Usual blob looks like a round hill, but there are some other blob types and actions I’ve added to make generated maps not so self-repeating.

In order to make random maps interesting I’ve united different type of blobs and actions into templates and just select one on them on generation. Re-worked templates consist of 9 elements:

Template Editor
Template Editor UI

Mountain (M) — a big round centered blob, can be placed only once
Hill (H) — a round blob
Pit (P) — a round depression blob
Range (R) — an elongated blob
Trough (T) — an elongated depression blob
Strait (S) — centered vertical elongated depression
Add (+) — add or subtract value from all heights
Multiply (*) — multiply all heights by factor
Smooth (↭) — smooth the map heights

Each element can be added to a template as a separate step. Based on element type there can be different parameters. For example for Hill the parameters are count and distribution. Hill with count 3 and distribution 0.4 means that 3 hills will be added and placed somewhere near a map center, so distribution controls element padding from all borders where 0 is no padding and 0.5 is a placement directly in a map center.

All elements except of Mountain can be added multiple times, each time with a new or the same parameters. For some elements parameter value could be set up as interval, while the actual value with be randomly selected from that interval on heightmap generation.

Thereby any template is an simple algorithm and I assume it as a wise decision to let users edit and create their own templates. Frankly speaking I hope readers will compose better templates than the ones I use now:

fantasy_map_1518114261233

Volcanic Island (big conically elevated island):

  • Place Mountain
  • Add 0.07 to all cells
  • Multiply all cells by 1.1
  • Add 5 Hills with distribution 0.4
  • Add 2 Hills with distribution 0.15

fantasy_map_1518114344158

High Island (also big and height island, but with much more complicated heightmap and landform):

  • Place Mountain
  • Add 0.08 to all cells
  • Multiply all cells by 0.9
  • Add 4 Ranges
  • Add 12 Hills with distribution 0.25
  • Add 3 Troughs
  • Multiply land cells by 0.75
  • Add 3 Hills with distribution 0.15

fantasy_map_1518114457152

Low Island (as above, but not elevated):

  • Place Mountain
  • Add 0.05 to all cells
  • Smooth the map
  • Add 4 Hills with distribution 0.4
  • Add 12 Hills with distribution 0.2
  • Add 3 Troughs
  • Multiply land cells by 0.3

fantasy_map_1518114505174

Continents (two or more islands separated by strait):

  • Place Mountain
  • Add 24 Hills with distribution 0.25
  • Add 2 Ranges
  • Add 3 Hills with distribution 0.1
  • Multiply land cells by 0.7
  • Add Strait with width 2-8
  • Smooth the map
  • Add 5 Pits
  • Add 3 Troughs
  • Multiply land cells by 0.8
  • Add 0.02 to all cells

fantasy_map_1518114718409

Archipelago (a lot of small islands):

  • Place Mountain
  • Add -0.02 to land cells
  • Add 15 Hills with distribution 0.15
  • Add 2 Troughs
  • Add 8 Pits
  • Add -0.05 to land cells
  • Multiply land cells by 0.9

fantasy_map_1518114827527

Atoll (ring island with or without lagoon inside):

  • Place Mountain
  • Add 2 Hills with distribution 0.35
  • Add 1 Range
  • Add 0.07 to land cells
  • Smooth the map
  • Multiply cells in interval 0.27-1 by 0.1

I’m not going to describe Template editor itself as its interface is pretty obvious. You click on a button to add an element, then you may change its parameters, move or delete the step. Any time you can execute the template to take a look on the results. Save/load function is also available, but I’m afraid it works properly only in Chrome.

 Free draw mode

Templates is not the only way to create a heightmap. There are also some tools (brushes) to “draw” a heightmap directly with the mouse. The best variant is to use template to generate a reasonably good draft and then use these brushes to fine-tune the heightmap.

Most brushes are controlled by a single Brush power range input, actually it defines the initial height to be applied to the first cell in a sequence. The brushes are:

  • Elevate (↥) — increase cell height
  • Depress (↧) — decrease cell height
  • Align (=) — fit cells height to the first tagged cell
  • Smooth (~) — smooth cell height by taking average of its neighbors
  • Hill (H) — a round blob described in the previous section
  • Pit (P) — a round depression, works opposite to Hill
  • Range (R) — an elongated blob, you need to click twice to set start and end points
  • Trough (T) — an elongated depression feature, works opposite to Range

There are also 3 buttons to edit the heightmap in general (applied to the whole map):

  • Increase elevation (H+) — multiply all heights by 1.1
  • Decrease elevation (H-) — multiply all heights by 0.9
  • Smooth (H≈) — equalize all heights to neighbors
fantasy_map_1518115793445
Hand-drawn map example

That’s pretty much all possibilities here. One more option I want to add in the future is a “get Heightmap from the image” function. The idea is to generate a heightmap based on an image uploaded by user. Sounds perspective, but I’m not ready to share any result as of now.

Once heightmap is done, i.e. you are satisfied with the results, you have to finish the customization. Generator will complete the map in an automatic mode, there is not direct control allowed as of now. You may only change the Options or edit a completed map.

That’s all for today. Generator Demo is updated now. If you still see the old version, you need to remove the old site from browser cache. Feedback, bug reports, comments and advises are highly welcomed.

8 thoughts on “Templates implementation and Heightmap editor UI

  1. Any possibility to get previous version? I would really like to use it to load my map, because it seems to be incompatible with the new one.

    Like

  2. Have you considered adding a “Crater” heightmap preset? The DM for the D&D game I’m in right now did her maps with that basis, and another example is the Dhorisha Plains in Mercedes Lackey’s Velgarth setting (formed from the destruction of the tower of Urtho, the Mage of Silence, in his war with Ma’ar).

    Like

    1. In a new version you can create your own templates. Can you play with the Template Editor and show the expected shape? It’s not hard to add additional pre-made templates.

      Like

      1. I’ll certainly take a stab at it! Will probably try for a “coastal crater” (like the D&D session I’m in) and a “landlocked crater” (like the Dhorisha Plains)

        Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s