Skip to main content

Experiments with Textures - Part II

Well this is a continuation of my last post. By the end of my last post, I had managed to bake a normal map, a height map and an A.O. map. I intend to use that normal map in UDK's material editor. As for the A.O. map, UDK already has it's own ambient occlusion scene going on. So I decided to take my A.O. map and merge it with my original diffuse map in GIMP. Currently I'm using DirectX 9 to render the game, and so that means I do not have access to the Tessellation features in DirectX 11 version. I'm doing this for two reasons. One is that seams in UV mesh tend to tear up the mesh when Tessellation is enabled. The second is the performance drop it would cause for the small increase in the detail of my meshes. A height map will also have to be added thus increasing the memory footprint. I might enable Tessellation later on for Landscape objects and objects like rocks which actually benefit a lot from displacement maps and Tessellation. In that case I could probably hide the area where UV seams occur so that mesh tearing isn't evident to the player. Anyways for my current situation, I decided to merge my height map with my diffuse texture as well. All this can be done pretty easily using GIMP. Below I've shown a detailed description with screenshots of how to set this up in GIMP. So this post is basically like a tutorial for people who are starting out with GIMP and game development. First open up the diffuse texture in GIMP. You'll get a screen like what's shown below. Nothing fancy, just the image that you've opened. 

Now similarly open up the Height map as well as the A.O. map in GIMP as well. So basically there'll be three windows: one for diffuse, one for height map and one for A.O. map. What we need to do is to have all this in the same scene. But directly copying it into another will just put the second image on top of the first. So first go to the diffuse map window, in the menu bar, go to Windows menu and click on new ToolBox. So now you can see a basic Toolbox with all the different types of tools you can use in GIMP. Press M to select the Move tool.

Now we need to add layers. Layers enable different textures to be merged together based on a set of factors like opacity and blend types. This way you can add more textures on top of the diffuse without losing it's detail. For that, a layers toolbar has to be added. This can be done by again going to the Windows menu >> Dockable Dialogues >> Layers. Simple Ctrl + L would suffice, but if you're a beginner like me, it helps to know where to find all the toolbars.

The layers toolbar can be added to the main toolbox in order to keep it clean while working with multiple windows. Just click on the layers tab in the toolbox like you would for a tab in google chrome, then move it into the the main toolbox. 

Once that's done, we need to add a new layer so that the other images can be added on top of the diffuse. Currently there'll be one default layer in the toolbox, which you can rename by right clicking on layer and clicking on 'Edit Layer Attributes'. Now onto adding a new layer. Click on the extreme left button at the bottom of the layer toolbar.

A pop-up window will appear. Give some name to the new layer and ensure that the resolution matches the resolution of the original image. Now go to the A.O. map window, press Ctrl + A to select the image and Ctrl + C to copy. Go back to the diffuse window, click on the second layer in the layer toolbar. Then click on the image and Ctrl + V to paste. As soon as you do this, a new floating layer gets added on the layer toolbar as well as a new image on top of the existing image. Now in order to merge these two images, right click on the floating layer in the layers toolbar, and click on Anchor Layer. It gets anchored to the new layer that you just added before. 

Now as you can notice, the original image is lost behind this current image. This is because the layer mode is set to normal. This can be seen in the mode option under the layers toolbar. Change it to Overlay or Multiply and you have that problem solved. Also try changing the opacity to see what fits your description. In my case, I set the mode to Multiply and an Opacity of 60.00 %.

Do the same process for you height map. Try playing around with the different layer modes as well as the opacity settings until you get the desired look. Make sure the original diffuse image doesn't lose too much color, as that is the texture we intend to use in UDK. For height map, I set the layer mode to Overlay and an opacity of 40.00 %. 

So basically that's all you have to do inside GIMP. We need the normal map inside UDK, so no point in adding it here anyways. Just to show the difference between the original diffuse texture and the one we get after adding the A.O. and height maps, I will post the images below. You can see that the texture starts to develop more features as the other two are added to it.

Original Diffuse Texture

Diffuse + A.O.

Diffuse + A.O. + Height Map

From the last image, it can be seen that the various features ranging from the small slopes along the bricks to the gaps in-between them are more visible now. After checking in UDK, I then reduced all the images from 2048x2048 to 1024x1024 as it hardly made any difference in-game. But the memory footprint can be reduced by a pretty good amount by doing so. Also you need to make sure that the textures are in power of 2 resolution before importing it into UDK. UDK also doesn't accept all image types, so I use PNG format for all my textures. Now that we have a game-ready texture available, it can be added to the UDK for use in the game. I'll have that in a different post. Lots of images to load in a single page already. So goodbye till then.

Popular posts from this blog

Unreal Engine Tutorial: Create Circular Ring Material without Textures

Hi, welcome back for another tutorial. It's been quite a while since I put up a tutorial as I've been busy working on toolkits for the Marketplace. One of my earlier tutorials [link: Unit Selection Decals for RTS Games] had focused on how to create ring materials using textures, as well as using them to display unit selection decals for RTS games. However, a drawback associated with using textures was that it prevented the user from changing the inner & outer radius of the ring. And during prototyping stages of a product, it's far better to implement structures that can be changed easily from within the engine so that you don't have to create a new asset from an external package every time you need to test out a new idea. I've found this approach quite useful while working on my own products. Hence, this tutorial focuses on creating a ring material that can be adjusted both from within the material editor as well as dynamically at runtime.

Alright before we get …

Unreal Engine Diaries #11: Nav Mesh Configuration

[This episode of Unreal Engine Diaries focuses primarily on nav mesh configuration, nav areas & configuration of agent types.

Source: Unreal Engine 4 AI Support Twitch Broadcast with Mieszko:]

1. The Recast NavMesh has a couple of attributes named 'CellSize' & 'CellHeight' under the 'Generation' section in it's details panel. Together they determine the resolution of the nav mesh & lowering these values can create more precise nav meshes. It could be especially useful when there are lot of holes in the nav mesh due to the surface properties of the terrain. However, lowering them also makes the nav mesh calculations more expensive.

2. If runtime nav mesh generation is enabled, it would be best to set the 'Tile Size' attribute of Recast NavMesh to the minimum viable amount.
3. The 'Min Region Area' parameter which can also be found under 'Generation' section of Recast NavMesh can be i…

Unreal Engine 4 Tutorial: Smooth Zoom using Mouse Wheel for Top Down Template

Well, I had already written a tutorial for implementing Smooth Zoom functionality for Top Down Template. But it was based on keyboard inputs. Since most Top Down PC games use mouse wheel for zoom, I decided to make a tutorial for the same. The core logic here is the same as the one implemented by Ryan Jon for the custom camera in his RTS Community Project. If anyone's interested, they can get the code for the RTS Community Project here:

UE4 RTS Community Project

Anyways, he has replaced the default camera for the characters with a general camera since that's more ideal for developing an RTS game. Since a basic Top Down game with a single playable character does not need a separate custom camera, I decided to implement the same functionality for the default player camera in UE4's Top Down Template. So let's get down to it.

First of all we need to make a custom curve from the content browser. We will be using this curve to define the smooth camera movement while zooming …