Creating a Complete In-game Texture

In the first lesson you learned how to export a simple uniform color bitmap. In the last lesson, you learned how to add an FX-MaP and apply a Filter. In this lesson, we're going to combine these steps and expand on them by adding a second filter to our FX-MaP and by creating a normal map to go along with our diffuse map. By the end of this lesson, you will have a complete, albeit, simple texture you can use in-game. (Although most games support more texture types than diffuse and normal maps, these two are the minimum required for most in-game objects.)

Setting up MaPZone

I'm going to briefly review the steps required to get MaPZone ready for our new texture. If you have any difficulty with the instructions, review the previous lessons.

First, start a new file and drag an FX-MaP Link onto the Compositing Graph. Add a Colorize Filter to the graph either by right-clicking in the Compositing Graph and selecting New Filter from the menu, or by double-clicking in the Compositing Graph and selecting it from the New Node widget.

Now, connect your FX-MaP Link to your Filter by left-clicking on the output pin of the FX-MaP Link and then left-clicking on the input pin of the Filter or by left-clicking and dragging from one pin to the other. Double-click the Filter to place the focus on the Filter and pull it up in the 2D Viewer. Press the little arrow at the top of the sliding bar of the 3D Viewer to open the viewer. Now, add a couple of gradient keys to the filter editor and play around with the color a little until you get something interesting. Close the color picker when you are done. Your final set-up should look something like this:

MaPZone setup for lesson 3

I've decided to go for something simple in this tutorial: beach sand. Feel free to follow along or play around with the editor and come up with something different. The end result doesn't really matter as long as you understand the process. Just be aware that some surfaces are much harder to emulate than others, so don't be concerned if you find that you've settled on something harder than you anticipated. Just have faith that you will pick up the skills you need down the road and chalk it up as a learning experience.

Changing the Size of Your Texture

One of the things I haven't shown you how to do yet is change the size of your texture. You may have noticed that the texture in the screenshot has a higher resolution than the default resolution. If you look at the filter editor at right end of the color gradient bar, you will notice a button that says 256x256. This is the current resolution of our Colorize filter. (Each filter can have its own resolution.)

Changing the scale of our filter

256x256 pixels is fine for certain texture applications, but with current texture resolutions in next gen gaming reaching into the thousands in both dimensions it wouldn't hurt to beef up our texture a bit.

Left-click on the button to pull up the Change node sizes... dialog. You'll get something that looks like this:

The Change node sizes dialog

The width and height of our texture can be scaled separately if necessary by grabbing the pointer on the Width or Height bar, but for most textures you're going to want to keep the dimensions square. To change both dimensions simultaneously, grab the rectangular thumb on the middle bar and drag it to the right. You'll notice that the scroll bars only allow you to scale your image in powers of two, with each scale two times the size of the previous scale. This has to do with how most game engines handle textures; since many of them cannot handle a texture that is not a power of two, MaPZone assumes that most of your textures will conform to one of these dimensions. If you need more exact control over the size of your texture, you can also set the dimensions in the text input fields manually or use the up and down arrow buttons to increment or decrement the size of the texture.

For the purpose of this lesson, we're going to set our texture to 512x512, twice the resolution of the default texture. We could go larger, but when it comes to creating assets for a video game, you are always better off using the least amount of resources you can get away with. By keeping our texture page size to 512x512, we can use more textures than we would be able to if we were using larger texture sizes. Ultimately, it depends on where and how the texture will be used in the game, and how important it is (ie. how much time the player will have to look at it and how closely they will have to look at it).

You will also notice the check box in the bottom left of the Change node size dialog that says 'Default'. By checking this box, you can set a new default size for your textures so that you don't have to change each of your filters manually. Once you have checked this box, it will appear greyed out the next time you open the dialog after closing it and won't be selectable. Don't panic. To set a new default, simply drag one of the scroll bars and it will automatically uncheck itself.

Zooming in on Your Texture

If you look closely at the sand in our example, you'll notice that the texture doesn't look so much like sand as a bunch of squiggly blobs. From a distance, it might not seem that bad, but once you load it up in-game, the limitations of the texture are going to be obvious. Running around in-game, your avatar is going to get a lot closer to these textures and they're going to be scaled significantly in relation to him or her. You can get an approximation of what your texture is going to look like in-game by zooming in on your texture in MaPZone.

To zoom in on your texture in the 2D Viewer, hold your mouse cursor over the viewer, hold down the Ctrl key and scroll with your scroll wheel. Here's what our texture looks like at double the resolution:

Zooming in on our texture in the 2D Viewer

Obviously, like the vast majority of surfaces, it's going to take more than one filter to get something that looks good in-game.

Adding a Second Filter

We're going to try to improve our texture by putting it through a second filter. Add another filter to the Compositing Graph and connect it to the FX-MaP Link and the Colorize filter. Connect the FX-MaP Link the same way you connected it to the first filter via the output pin at the bottom of the FX-MaP Link and the input pin at the top of your new filter. Now connect the Colorize filter via the colored output pin on the right of the Colorize filter to the colored input pin at the left of your new filter. For the sand example, I've added a Warp filter. The image below shows you how it should be set up:

Our new map has one FX-MaP Link and two filters.

Now double-click on your new filter to place the focus on it so that it shows up in the 2D Viewer. You can also click the little orange arrow on the sliding menu between the 2D and 3D viewers to update the 3D Viewer with your updated texture. Play around with the settings on your new filter until you get something you like. In our example, I've adjusted the Intensity of the Warp filter to scatter the pixels a bit to get rid of the blobs and make each pixel more or less approximate a grain of sand. Here's what our texture looks like after adding the Warp filter:

Our new texture with a Warp filter added

Here's the current setup for our map:

A map using two filters.

Adding Output Nodes: Diffuse and Normal Maps

Now we have a simple texture that we can view in MaPZone, but we still have to add some output nodes so that we can export it and use it in-game.

Add an Output node to the Compositing Graph and connect it to your second filter as in the image below. Just leave the channel set at 'diffuse' (color). This is the color output of our map.

A diffuse map output added to our texture.

Now a diffuse map (sometimes called a color map or base map) is absolutely essential, otherwise we have nothing to look at. But normal maps have become equally indispensible in modern video games. A normal map (without getting too technical) is a map that tells a game engine how it should reflect light off of each pixel in your texture. Normal maps provide an easy way to simulate a lot of small three-dimensional details without adding polygons to an object.

Normal Maps: A normal is essentially a line pointing perpendicularly away from a surface. By changing the value (angle) of the normal, you can tell a game engine to treat the surface as if it were pointing in a direction that it isn't. When you combine a lot of normals in a single file, like a normal map, you thus create the illusion that a flat, 2d surface has three-dimensional 'roughness'. More information about normal maps can be found on Wikipedia.

Normal Map nodes are added to the Compositing Graph the same way that other filters are. If you add one to the graph, you'll notice that the node only accepts one input, a grey pin on the top of the node. If you connect the node directly to the FX-MaP Link, you'll only inherit the details provided by the unmodified map and your normal map will look 'off' compared to your diffuse map. What we need to do is inherit the additional details provided by the Colorize and Warp nodes so that our normal map mirrors our diffuse map precisely.

Because the Warp node only provides color output, we need some way to change that to a greyscale output that our Normal Map node can understand. MaPZone provides a special node for this called a Filter to FX-MaP node, which converts a color image to a greyscale image. Filter to FX-MaP nodes can be found by selecting them from the right-click menu under New FX-MaP -> Filter to FX-MaP or in the New Node dialog by double-clicking the Compositing Graph and selecting them from the center of the top row (they are the only unnamed node).

Selecting the Filter to FX-MaP node from the right-click menu.

Add a Filter to FX-MaP node to the Compositing Graph and connect it to the Warp filter. Connect the Normal Map node to the Filter to FX-MaP node. Now add another Output node and change the channel to 'normal'. Your final node layout should look something like the image below:

The Compositing Graph showing how to set up the normal and diffuse outputs.

You will probably want to play around a little with the intensity of the normal map to get something that looks good. Remember that more isn't better; realistic is better. Many texture artists tend to go overboard on their normal maps when they are just starting out, creating intense maps with a lot of steep texture. This tends to result in a surface that looks 'busy' and hyper-realistic. For the sand texture, I have used a very light intensity that results in a very light pimpling of the surface. Even this is probably too much texture for beach sand, which is usually quite smooth from the constant motion of the waves.

Note that the default filter size doesn't carry over to the normal map, so you may have to change it depending on the requirements of the game engine you have created the texture for. Normal maps don't necessarily have to be the same dimensions as the diffuse map, though they usually are. I have changed the scale of the normal map to match the diffuse map for this tutorial.

A map that outputs a diffuse and a normal map.

You now have a diffuse map and a normal map that you can export as bitmaps and convert to whatever file format is required by your game. To be honest, you're not going to get very far with simple textures like the ones we've been creating here, however, so the next tutorial will take it up a notch and introduce you to some more advanced techniques.

More to come!

Last updated October 21, 2011

© 2009-2011 Dave Finch