Guide & tips on making a heightmap & colourmap for generation

Introduction


Hello everybody! :slight_smile:
Today’s tutorial is about making a heightmap & colourmap easily using a few resources I found useful.
Hopefully they help you too!

Content


Step 1: Gathering the handy things!


Before we dive into this, I thought it’d be wise to recommend a few softwares / websites I’ve used.

1: Azgaar’s Fantasy Map Generator

Azgaar’s Fantasy Map generator is great for designing & generating worldmaps, region names and much more, but it also allows you to transform your worldmap into both a height and colourmap!
Once you’re on the website, you’ll see a worldmap pre-generated. If it’s a map you think you’ll start using, then perfect! Otherwise, make sure to check their tutorial.
After you’ve found your perfect map, let’s proceed!

More info: https://azgaar.github.io/Fantasy-Map-Generator/

2: Blender 3D

In this scenario, we’ll use Blender to smooth & preview our heightmap live!
I’ll guide you through using this tutorial so don’t worry about having to know stuff!
Otherwise, make sure to check this handy youtube channel.
After you’ve set that up, let’s proceed!

More info: https://www.blender.org/download/releases/2-80/

3: Adobe Photoshop

The reason I’d highly recommend getting at least Photoshop is because it’s a great software and allows maximum editing strength! Though if you’d prefer not spending a dime, try to translate the stuff in this tutorial into your software because I’m only familiar with Photoshop at the moment.
Feel free to post a reply with your translations!

More info: https://www.adobe.com/creativecloud/plans.html?promoid=P3KMQYMW&mv=other

3: Alternative

4: ShareX

While ShareX is probably known for its powerful screenshotting, it also contains tools such as a colour picker which could come in handy while making the colourmap.

More info: https://getsharex.com/

Other information

There’s one thing that is good to know before you start!

  1. Heightmaps are usually seen as a grayscale image whereas the uttermost white is the peak and the uttermost black is the very bottom.

Now that you should have all the softwares and knowledge ready to use, let’s hop into the details!

Step 2: Creating the world-, height- and colourmap!


Open this to proceed!

Step 2.1: Worldmap (Using Azgaar’s Fantasy Map Generator)

Let’s start creating a map!


This is the map I’ll use for this tutorial.

Step 2.1: Heightmap (Using Azgaar’s Fantasy Map Generator)

Now let’s disable all the effects except for the Heightmap.


This looks great, but it’s not exactly grey yet! Let’s set the Heightmap colour-scheme to ‘Monochrome’.

Perfect! Now all that’s left is making it blend better.

Step 2.2: Refining the Heightmap (Using Azgaar’s Fantasy Map Generator)

So in this generator, you can apply a filter of choice.


Note: due to a bug or something, exporting this worldmap will drastically decrease the filter we just applied. We will fix this later, don’t worry!

Since we finished our heightmap, let’s export it as a .png AND .map as backup!
This can be done by pressing CTRL + P in your browser for the .png and CTRL+M for the .map.

Note: For .png and .svg it’ll solely capture what you have on-screen. As of now this can’t be turned off. So make sure that your map fits your screen somehow!

Step 2.3: Colourmap (Using Azgaar’s Fantasy Map Generator)

For optimal generation in Studio, it’s best to have a colourmap too! So let’s make one. Start off by disabling the Heightmap and enabling the Biomes.

Step 2.4: Refining the Colourmap (Using Azgaar’s Fantasy Map Generator & ShareX)

Now all that’s left is changing the biomes to the right colours provided by Roblox as shown below!
ColourTable

This can be done by following the steps below:


Once you’re in the editor, hover over any of the existing biomes. It’ll highlight which one you’re currently hovering on on the worldmap with a red outline.

Now click on the colour-box at the very left.

After you have finished your colourmap, export it as a .png AND .map as backup!
This can be done by pressing CTRL + P in your browser for the .png and CTRL+M for the .map.

Note: For .png and .svg it’ll solely capture what you have on-screen. As of now this can’t be turned off. So make sure that your map fits your screen somehow!


Step 3: Editing the height- and colormap!


Open this to proceed!

Step 3.1: Start to Editing (Using Photoshop)

Now let’s open up both the height- and colourmap in Photoshop.


I made sure I layered them so that I can easily check back and forth.
So what we need to do now is: make sure the texture is emphasized, decrease the terracing on the heightmap and remove the water to prevent issues.

Step 3.2: Decrease Terracing & Adding Detail (Using Photoshop)

To decrease terracing, grab the Brush tool (press B or find the right image). Then pick the colours (press Alt while using the Bursh) between the most light and most dark colour like so:


Put the Opacity at a value around 30% so that you can blend the borders to your likings! Then keep on brushing until you’re satisfied.

Note: The image above was edited quickly with the mouse for efficiency: it’s best to use a drawing tablet for both the result and the wrist!

Step 3.3: Removing Water (Using Photoshop)

Removing the water surrounding the islands can be done using the ‘Magic Wand’ tool. Press W or click on the magic wand icon. Then change the ‘Tolerance’ to about 12 and click on every layer of water like so:


Make a small check to make sure you only selected the water. Then press ‘Backspace’ to delete the selection.
Once that’s all gone, you’d want to create a new solid coloured layer and put this underneath the heightmap. This will be the sea-depth. Remember: the darker the colour, the lower the result!

Voilá! Now we have a usable heightmap! All that’s left is a bit more detail.

Step 3.4: Adding a Texture (Using Photoshop)

To give it more details, it’s nice to have a texture on it just so you won’t have to use the Terrain tools in-game to make them. It’s an optional step though, because it depends on what your preference is.
Find a texture or make one yourself. Make it a pattern and then create a new layer. Put it on top of your heightmap.
Then get the Bucket tool and fill the entire layer with a Pattern like so:
image
Once you filled the layer, it’ll cover everything. That’s now what we want! So let’s make a quick mask.
This can be done using either of the two options: make the layer a mask, or add a layer mask. If done right they both give the same result, the only difference is how it’s done. I’ll go with option 2 for the ease.


Tadaah! Now it should look like this:

Let’s make this blend using the blend option ‘Multiply’. This should show a result like so:

If you want to decrease the texture’s effect, make sure to change the Opacity of the layer. I have put it on 75% now (it was 100%):


Step 4: Polishing the heightmap!


Open this to proceed!

Step 4.1: Setting it all up (Using Blender)

When you’ve opened Blender, create a ‘Grid’ (Shift + A > ‘Mesh’ > Grid) and give it a subdivision of 256 - 512 (depending on your device’s power). The higher the subdivision, the more details!


It should look like this, right? Now, you may notice: yours is scaled!
That is true! Make sure to scale your grid to whatever your heightmap image is! For example: if it’s 1080 x 1920 then make sure to keep the same ratio! Mine was 4020 x 2017 though I divided it by 2 and then once again by 1000 to make sure it won’t be ginormous.
image

Step 4.2: Applying the Heightmap (Using Blender)

Now that we have our Grid prepared, let’s go ahead and add two modifiers to it:

  1. The Displacement Modifier
  2. The Corrective Smooth Modifier
    Both modifiers are found here:

    Once you’ve added those, make sure to set the properties as follows:

    Now we should select your texture!
    Go to the Displacement modifier and click on the ‘New’ button.
    Once you’ve done that, click on the sliders icon to the right.
    image
    Now click on the ‘Folder’ icon in the new window under Image > Settings.

    Find your file and open it up!

Step 4.3: Editing the Heightmap (Using Blender)

There, there!
Now things should look more like it.


I’m using a different heightmap since I had this one prepared and I’m short on time! But it should not matter.
All that’s left is adding a material & baking it!

Step 4.4: Adding the ‘height’ material (Using Blender)

Alright! Now we need to create a material with nodes. :scream:
Don’t worry, take my set-up:


The Sigmoid unfolded:
For more details and a sample file, check this out!

Step 4.5: Baking the ‘height’ material (Using Blender)

Alright! Let’s do this! Make sure to Switch to the Cycles renderer first. Then set up the settings like so:


Followed by hitting the ‘Bake’ button!
It’ll take some time and boom! You’ll have your texture. Just make sure to save it in the end!
image


Troubleshooting


Open this to proceed!

1: After generation, the wrong materials were assigned!


This is because the image used on this post used the wrong colours!
So colour-picking is the issue.
Use this colour-corrected image instead:
ColourTable

Or this table:

RGB Value Material RGB Value Material
[115,123,107] Asphalt [206,173,148] Limestone
[30,30,37] Basalt [58,46,36] Mud
[138,86,62] Brick [148,148,140] Pavement
[132,123,90] Cobblestone [102,108,111] Rock
[127,102,63] Concrete [198,189,181] Salt
[232,156,74] CrackedLava [143,126,95] Sand
[101,176,234] Glacier [137,90,71] Sandstone
[106,127,63] Grass [63,127,107] Slate
[102,92,59] Ground [195,199,218] Snow
[129,194,224] Ice [139,109,79] WoodPlanks
[115,132,74] LeafyGrass [12,84,92] Water

2: After generation, there are areas which have various incorrect materials assigned!

I believe this is because of the colour-map having anti-aliasing. It must be drawn without anti-aliasing!
If you still encounter any similar issues, please reply to this thread especially if you have found a solution! :smiley:


Conclusion


The Result


The result is based on the new heightmap I used in Step 4!
I did make a few mistakes since there’s a few artifacts along the edge of each biome.

That’s about it! :slight_smile: Hopefully this tutorial was useful.
If you have any questions or suggestions feel free to let me know! :smiley:

Contact


Discord: ShapeDemBricksRBX#7515
Twitter: @ShapeDemBricks
DevForums: @ShapeDemBricks or in the replies below!

28 Likes

Do you have a picture of the actual heightmap terrain in studio so we can see the final results of this?

11 Likes

The feature is disabled currently

4 Likes

Adobe Photoshop is really useful. I’d got it free since I am currently a university student.

Also, this is a really good guide!

4 Likes

If you need a good alternative to Photoshop, you could try Gimp (free) or Affinity Photo (one time payment, currently $90 NZD and is on a 20% sale so less than that). Affinity Photo is probably the best option but Gimp isn’t bad either.

5 Likes

Unfortunately as @Sublivion mentioned the feature is currently disabled.
I’ll post a picture as soon as it’s re-enabled :smiley:

4 Likes

Thank you @ShapeDemBricks I was confused on how to use this feature.

5 Likes

I’ve been playing around with Azgaar’s generator too. I’d be interested to know what materials you used for each biome.

3 Likes

With materials do you mean the colours or texture on it?

2 Likes

which terrain material you’ve matched with each biome of the generator; e.g. what material you used for “tundra” or “tropical rainforest.”

3 Likes

Ahh gotcha. I used the default ones, as shown in the tutorial.
Go to step 2.4! :slight_smile:

1 Like

Hey everybody!

I added Step 4. Make sure to check it out for better images! :smiley:

Hey guys :smiley:

I resolved a few typo’s and similar in the original post!
I also added a Troubleshooting header with info & solution(s) on known issues.
I uploaded the result as well!! :smiley:

Check it out :smile: