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: 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: 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!
image

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%):

Conclusion


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!

18 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