I have seen several people ask as to how to convert a heightmap into a color map. While strictly speaking this cannot be done, it is possible to get a usable result using a image editor and some creative vision. For this example I will be trying turn this heightmap of a mountain into a usable color map.
Note: This tutorial assumes a basic understanding of Paint Dot Net.
Step 1: Import your heightmap into studio. I strongly suggest using CloneTrooper1019’s terrain importer (Custom Terrain Importer - Roblox), but its colormap importer seems to be broken so if you have a image over 1024x1024 you will need to break it into several smaller files first or risk getting some terrain material artifacting from the colors as they bleed together when the image is scaled down.
While this step is not strictly necessary, this allows us to get a better idea of what portions of the heightmap should be what materials should be used. With my example I get the following result
Step 2: Plan what materials you want to use for what areas. In this case I am going to want glacier, rock, and mud for the most part.
Step 3: Figure out a few key points that you can identify on the heightmap that correspond to approximately where you are going to want each level of terrain. Also note down the colors for each type of material you want to use.
Asphalt - RGB[115, 123, 107] - #737b6b
Basalt - RGB[ 30, 30, 37] - #1e1e25
Brick - RGB[138, 86, 62] - #8a563e
Cobblestone - RGB[132, 123, 90] - #847b5a
Concrete - RGB[127, 102, 63] - #7f663f
CrackedLava - RGB[232, 156, 74] - #e89c4a
Glacier - RGB[101, 176, 234] - #65b0ea
Grass - RGB[106, 127, 63] - #6a7f3f
Ground - RGB[102, 92, 59] - #665c3b
Ice - RGB[129, 194, 224] - #81c2e0
LeafyGrass - RGB[115, 132, 74] - #73844a
Limestone - RGB[206, 173, 148] - #cead94
Mud - RGB[ 58, 46, 36] - #3a2e24
Pavement - RGB[148, 148, 140] - #94948c
Rock - RGB[102, 108, 111] - #666c6f
Salt - RGB[198, 189, 181] - #c6bdb5
Sand - RGB[143, 126, 95] - #8f7e5f
Sandstone - RGB[137, 90, 71] - #895a47
Slate - RGB[ 63, 127, 107] - #3f7f6b
Snow - RGB[195, 199, 218] - #c3c7da
WoodPlanks - RGB[139, 109, 79] - #8b6d4f
Water - RGB[ 12, 84, 92] - #0c545c
Step 4: Open your heightmap in Paint dot Net
Step 5: Duplicate the background layer so you have two layers with the same image. Rename the new layer and set its opacity to around 100 by clicking on the property icon. This will allow you to still see the heightmap while you overwrite it to produce the color map
Step 6: Add a new Layer on top of the other two layers
Step 7: In the new layer, mark the points that you found in step 3
Step 8: Go back to background layer. With the magic wand shift click the brightest point on the map. Play with the tolerances until it neatly aligns with the marker you used
Step 9: Use the paint bucket with tolerances set to to fill in the area with the color of the material you want to use for that area.
Step 10: Repeat Step 8 and 9 until you have filled in the entire map. If you are having issues where you are selecting materials that you have already painted, use the magic wand to select that portion and copy and paste that into a new layer that is above the background but below the duplicate.
Step 11: You now have a usable heightmap. Uncheck your top layer and duplicate and you should have something like this.
Step 12: Save the file as a .png and upload to roblox for import. Clear your previously generated heightmap and regenerate it using the heightmap.
Ignore the bits of glacier between the rock and mud, that’s due to the fact I was lazy and used an image larger then 1024x1024
Step 13: While the colormap that was generated is certainly usable, we can improve it by hand painting some detail on. Im going to renable the duplicate layer to see what I am doing, then use a paintbrush set to anti aliasing off to add in some extra material.
When this is imported it looks like
Which baring the artifacting due to my laziness looks fairly decent, but you may get better mileage by hand painting the detail on in studio.
If you have any questions or ways to improve this tutorial, please leave a comment.