Creating the landscape and finding our textures!
- Heightmap from last time
- Slopemap from last time
- Some kind of image editor (I’m using Photoshop)
In the previous post, I showed you how to create your height- and slopemap within WM (World Machine), so if you managed to create the height- and slopemap, we’re ready to being the next phase:
- Importing the slopemap into UE4
- Generate terrain from WM in UE4
- Creating seamless textures
Above is what I’m going to cover this time. Are you ready? Let’s go!
importing into unreal engine 4
Alright. So we made the height- and the slopemap. Now we need to import these into Unreal Engine 4, but before we do anything, we need to change the slopemap from .bmp to .png.
Open your favorite image editor (I’m using Photoshop, but you could might as well use something a bit cheaper: PAINT FTW). Open up your slopemap.bmp if that’s what you choose to call it, and save it again as a .png instead of .bmp.
With that out of the picture, go ahead and load up the Epic launcher. Create a new project (I’m using the Blueprint -> Third Person Template, but you can use whatever).
On the bottom left you see the Content Browser and right above that, you should see the button Import. Press it. Now navigate to the location of your files (twe only need to import the .png), select the image, and press Import.
Note: the user interface of your Unreal Engine might look different, if that it so, you need to find the Content Browser, and the Import button should be there somewhere. If you completely lost the Content Browser, you can into Window -> Content Browser -> Content Browser 1. This should enable the Content Browser.
Note: now that you’ve imported these, if you imported into a folder where you do not want these, you can simply drag and drop into another folder. I just made a folder called Landscape inside the Content Browser.
using the heightmap to create the landscape
If you remember last time, I said that the resolution of your WM terrain needs to be the exact same size of the landscape inside UE4 (In my example, I use 4065×4065, but you can use whatever size you wish, just make sure that the WM resolution matches the UE4 landscape size).
Note: you can go ahead and delete the arena geometry that the template has included whenever you create a new third person project. We won’t need these, but you can let them be if you wish, they wont disturb anything.
On the left side, right above the Content Browser, you should be able to find the Modes (refer to the image below). Here, you want to press the Landscape mode (Shift+F3). Welcome to the landscape creation interface.
Now, this is where you need to define the landscape size. You can change the Section Size and you can change the Overall Resolution + the Number of Components. Fiddle around with these until you find the correct size (refer to image below).
Don’t press Create just yet. We need to tell the landscape that it should be the same shape as the heightmap we created in WM. If you notice, right underneath where it says New Landscape and above the Material, there’s a radio button that says: Import from File. Check this button.
Now, you should be able to see something as the image below. you need to press the three dots and navigate to your heightmap.raw16. Now you should be able to see the landscape shaping up, in the Viewport like the image below.
Note: notice how the Heightmap Resolution beneath the Heightmap File automatically changes to the size of your resolution from WM? this needs to match the Overall Resolution. I know I’ve said this many times, but anything else won’t give the neat result we’re looking for.
Now, be my guests and hit the pretty little Import button! You should see the landscape forming inside the viewport. Congratulations, you managed to create a landscape off of the heightmap we created in WM (refer to image below).
Note: if you encountered some problem with this, please rewind a bit and try again. If things still fail, leave a comment of your scenario and I’ll look into it.
Now all that’s left to do, is to texture this bad boy, and add some details to said texture.
creating seamless textures
Let me really quickly go through a tip I’ve learned from Futurepoly. A way to find some neat long distance images for your terrain (We’ll talk much more about long distance vs. short distance later), simply go to Google Maps.
finding the images
Go the Earth View, find a spot with some nice colors and do the following (Example of a spot is on the image below). On the left site of Google Maps, you’ll see the three lines below eachother (marked with blue on the image below), press this and set Labels to Labels Off. Now you shouldn’t be able to see any cities, borders, etc. Take a Screenshot. Find another neat spot (preferably close to the first spot) and take another screenshot.
Note: make sure to save the 1st screenshot before you take the 2nd screenshot. Otherwise you’ll just override the 1st screenshot. You can do this by opening Photoshop or other image editors, press Ctrl+V and save the image as .png or .jpg.
Open these images with your favorite image editor. The images below are the screenshot and the spots that I thought could work.
Note: I’m using Photoshop and I’m not able to give you the full instructions for other image editors. You’ll have to figure this out yourself. Sorry…!
Inside Photoshop you’ll see the Crop Tool (Press C). In the tool settings above, you can see the Width and the Height. You want to set the width to 1024 px and the height to 1024 px (you could set these to 512×512 px if you’d like, but for better resolution use 1024×1024 px).
Now, you should be able to crop the image to make a perfect square image (1024×1024) no matter how big the crop square is. Notice the last sentence? No matter how big your square is, the image that it’ll crop to, will be exactly 1024×1024. Neat huh?
Note: you can drag this square around to find the prefect spot that you wish to use.
Press Enter and the cropping should apply!* Your image should now look something like this:
*Make sure to do the same with the the other image
making the textures seamless
We managed to find 2 nice images, and we managed to crop these images to exactly 1024×1024. No we need to make the images perfectly seamless. There are many ways of achieving this, but I tend to use Masks.
Note: If you wish to know more about masks, as these are essential to texturing within the gaming industry, please tell me in the comments below.
In the Layer tab within Photoshop, Right-click your layer (the layer is most likely called Background). Press Duplicate Layer, name is something and press OK. Now click the Filters in the top menu, and click on Other -> Offset. As our image is 1024×1024, make sure that the offset Horizontal and Vertical is +512. Press OK.
Note: the offset amount basically needs to be 1024 divided by 2. If you used a 512×512 with the cropping tool, you need to use 512 divided by 2 = 256.
With that done, you need to add a Mask to this layer. To do this, make sure you’ve selected your layer in the Layer Tab (make sure you have selected the duplicate layer that we created earlier). Now press Add Vector Mask in the layer tab (refer to image below).
And now you should be able to see this white image next to your normal image within the same layer. This is referred to as a Mask.
Now you want to press that white image next to your normal image within the same layer. Select the Brush Tool (press B). Here’s comes the fun part:
You can now decide how much you want to use from the normal image (the Background layer) and how much you want to use from the offset image (the duplicate you reated). Try to set the color of your brush to completely black. Draw around on the image (again, make sure you have clicked on the white part of the duplicated layer -> refer to the image below). Notice how the image changes. Allow me to explain what is actually going on here.
The mask defines the transparency of the layer that the mask is applied to.
- Black = 100% transparent
- White = 0% transparent
With that said, you can use all 50 shades of grey (I know, sorry!) to blend the two layers even more. You see the lines in between the 4 squares we made when we offset the image? (refer to the offset image above), these lines need to dissappear. Basically all the edges are seamless but the old edges are actually the lines you see crossing there in the middle.
You can do the following: use the brush tool with some sort of black/white color (or a shade of grey) and draw these lines away.
BIG NOTE: make sure that you DO NOT touch the very edges of the image as this will temper with the seamlessness of the picture in the end. Make sure to only make the lines in the middle disappear.
On the image below, you can see how mine ended out after trying to make this texture seamless.
Let’s take a look as the mask as well that we’ve created:
Again, the black means 100% transparent and the white means 0% transparent. And, TADAAAH! You’ve made a seamless texture! Again, make sure to do this with BOTH of your textures from Google Maps. Save this as a .png.
And now, we’re ready to being the next phase.
Let’s quickly recap what we’ve done now.
- We managed to import the slopemap into UE4 as a .png file.
- We managed to create a landscape based on the heightmap we created using WM
- We found some neat images from Google Maps to use as textures on our terrain
- We made these textures seamless using the offset and the vector mask features within Photoshop
to be continued…
Next time we’ll use the slopemap to create the textured landscape, with the textures we made seamless from this part. From there, we’ll see about adding further details using Normal Maps but you’ll be able to read much more about this in the next part.
If you feel like this vector mask within Photoshop feels a bit complicated and you’re not really sure how this actually works, you’re more than welcome to say so in the comments. If you’d like to see a post specific for vector masks, shout it out in the comments as well.
Thanks for reading, and I’ll talk to you guys next time!