Leadwerks Game Engine

Textures

This tutorial will explain how to import image files as textures, and all the cool things you can do with them.

What are Textures?

All games you make with Leadwerks will use textures. Textures are photographs or hand-drawn images that are imported into the editor. Textures can be used to display material types like wood or stone, but they are also used for entire models or weapons where several images are combined into one single texture. (Sometimes this is called a "skin".) There are also texture that are used for special effects. Textures are used in materials, on terrain, and for GUI (Graphical User Interface) elements like a button or a health bar. Textures are often created or edited with external tools like Photoshop, Gimp or Paint.net. There are also many websites on the internet which sell high quality textures for use in games. Most any of these can be easily imported into Leadwerks.

Importing Textures

Leadwerks Editor automatically detects when new files are added into a project. When image files are copied into a project, they will be automatically converted to a Leadwerks texture file, with the TEX file extension. The original image file stays intact. Textures can be imported from any of the following image file formats:

Let’s try importing a texture of our own. Download this zip file which contains four image files, and extract its contents to your desktop. There are several ways to import these images into your project.

The first method is to drop the image files onto the editor window. (Note this is not supported in the Linux operating system.) Make sure the Assets tab is selected in the side panel. Select the "Materials" folder in the asset browser. Now go to your desktop (or the location where you extracted the zip file). Select only the "Wood.jpg" file. Drag it onto the editor window and release the mouse. It will appear almost instantly in the currently selected folder as a ready-to-use texture.

Now let’s try the second method of importing images. Right-click on the Materials folder in the and select the Open Folder popup menu. This will open the "Materials" folder on your computer. Go back to the downloaded texture set folder. Select the "Leaf.png" file and copy it by pressing Control + C. Now go back to the Materials folder. Paste the Leaf.png texture in to the folder by pressing Control + V. Notice how almost instantly another file appears in the same folder: ‘Leaf.tex’. This is the converted texture that Leadwerks uses inside the editor. Go back to the editor and look at the "Materials" folder. Notice how there now is a second texture showing a thumbnail of the new Leaf texture.

Finally, we can also import by using the program menu. Make sure you still have the "Materials" folder in the asset browser selected. Select the File > Import menu item in the main window menu. Select the "brick.tga" file from the downloaded set of images and press the OK button. The brick image will get imported to the current folder right away as a texture.

Our "Materials" folder now has these three textures in it:

Texture Editor

All textures in Leadwerks have certain properties that can be altered before the texture is used by materials or as a terrain texture. Double click on the leaf.tex in the Material folder. The texture editor pops up with the leaf texture in the preview panel. When your mouse is in the texture preview panel you can hold down your left mouse button to drag the texture around. To zoom in and out, hold down the right mouse button and drag the mouse up and down.

On the right side of the texture editor you will see a two tabs. The Information tab will display the texture file format, modification date, and other details. The Properties contains many different settings that are discussed below. Although you usually don't have to change anything when Leadwerks imports a texture, it's a good idea to understand what the various settings are and when you need them for something special. So let's dive into it...

Compression

Texture compression works by storing textures in a compressed format in memory. This reduces your video memory usage and allows for higher-definition textures. Leadwerks provides several options to convert your images into compressed textures.

The uncompressed option will not perform any texture compression, and gives the exact same values in the texture as the original image. This should be used for special textures like GUI images, where compression artifacts would look bad. Uncompressed textures require the most memory and should only be used when needed.

DXT1 is the default compression mode and should be used in most cases. This compression method is extremely efficient. For example, an uncompressed 1024x1024 RGBA texture is about 5 MB in size, while a DXT1 compressed texture is less than 700 KB. However, DXT1 compression does not store alpha values. If your texture has an alpha channel, you should use one of the other compression methods below.

DXT3 compression stores a 1-bit value for the alpha channel. Alpha values can either be zero or one, with nothing in between. If you have a masked texture like grass or leaves that has parts of the image cut out, this is the best compression method to choose.

DXT5 compression stores a compressed alpha channel with values ranging between zero and one. This is the least efficient compression method, and should only be used when a full alpha channel is needed, or if the other compression methods are producing too strong of compression artifacts.

The DXT5n option is a special texture format that uses DXT5 compression, but swaps the blue and alpha channels to provide higher resolutions colors. This method will be automatically used for normal maps, as it avoids artifacts that would be visible with DXT5 compressed normals.

Filter Mode

The filter mode setting controls how the engine interpolates the colors between pixels when it is viewed up close. The smooth filter is enabled by default, and will give the texture a smooth transition between individual pixels.

If the pixel setting is enabled, no smoothing will be applied and individual pixels will be easily visible. This setting should only be used for GUI elements, where pixel-perfect drawing is required.

Mipmaps

In real-time graphics, textures normally store lower-resolution copies of their image data in memory. This lets the graphics card use a low-res image when an object is far away, resulting in faster speed and reduced aliasing on the surface. Without mipmaps, textures in the distance will appear "grainy". By default, Leadwerks will automatically downsample an image and save mipmaps in the texture file. You should only disable this option in the case of GUI graphics.

Mipmaps require power-of-two sized textures, bu do not have to be square. If your image is not power-of-two sized and this option is enabled, Leadwerks will resize the image to the nearest size (512x512, 256x128, etc.)..

Clamping

When a texture lookup is performed that goes beyond the edge of a texture image, there are two ways to handle it. Texture wrapping is the default behavior. This means that a texture repeats across a surface in all directions, as seen in the image below.

The other option is texture clamping. When textures are clamped, the edge pixels will be used for any texture lookups beyond the edge of the image. This option should be used for skyboxes and some special textures like lens flares and particles. The image below shows what this looks like when a clamped texture is displayed on a brush.

Sharpen

When images are downsampled to make mipmaps, the results can become blurry. Leadwerks can apply a sharpen filter that will sharpen each downsampled image as mipmaps as created. This can also be used to improve the look of photo-based textures. Texture sharpen can make a big improvement in appearance, but should not be overdone.

Normal Maps

If the normal map checkbox is checked, the texture will be treated a little differently.
Each RGB color will be normalized during the conversion, using the "bumpiness" value to adjust the value of the Z axis.
If checked, the Flip Normal X/Y checkboxes will cause the X or Y axes to be flipped. This is useful because normal maps are frequently "backwards" and this is an easy way to correct them.
If any compressed format is selected, it will automatically be replaced with the DXT5n format, to eliminate visual artifacts.

Texture Mode

Leadwerks supports three types of textures. In addition to regular 2D textures there are cubemaps and volume textures.

2D Textures

These created from 2D images and are what we normally think of as "textures".

Cubemaps

Cubemaps are useful for skyboxes or reflective effects. When a cubemap is used, the Clamp X, Y, and Z checkboxes should be checked, to prevent seams from appearing in the corners of the skybox. Skyboxes should also use the uncompressed texture format because texture compression creates visible artifacts that will be very apparent.

Cubemaps can be created from 2D images with one of two different orientations. If an image's aspect ratio (width/height) is 6:1, it will be split up into separate faces as follows:

If an image's aspect ratio is 4:3, it will assume a "cube cross" pattern is used, with the following orientation:

You should always store source images for cubemaps in lossless formats like PNG, BMP, TGA, or PSD. If you use a lossy format like JPG, the edges of the different faces will blur into each other and ruin the image. (This is a good general rule, but especially important with cubemaps.)

Volume Textures

Volume textures are 3D textures with a width, height, and depth. They use a lot of video memory and are only useful for very specific purposes. Some visual effects make use of volume textures. If the volume texture mode is selected, the image's aspect ratio will be used to determine the depth of the texture, and the image height will be used to determine the width and height. Volume textures must be cubic. For example, if the image height is 16, the width must be 16*16 (256).

Adjusting the Leaf Texture

In most cases the default options for your textures is just fine and you don't have to change a thing in the texture editor. However for the leaf texture there is something we need to change. You might have noticed that our leaf has these black areas around it. Now that we understand compressed texture formats in Leadwerks, we know we need to change the compression mode to one that supports transparency. We have two formats to choose from, DXT3 and DXT5. Because this image is "masked", meaning that each pixel is either completely see-through or solid, we can safely use the more efficient DXT3 compression mode. Change the compression to DXT3 and press save. Now our leaf texture is ready for use.

The texture will be reconverted from the original source asset file each time the Save button is pressed. You will not see the effect of any changes in the texture editor until you press the Save button to re-import it. All objects or materials that use the texture are automatically updated with the new texture.