Importing Images for use in UI_scenes

In this tutorial I'm going to demonstrate the steps necessary to import textures into an UT3 package as materials. These imported materials could be used in any part of the UT3 editor the same way as the materials shipped with UT3 or its patches. With these materials it is possible to create a background for your UI_scene.

TGA

The TGA file format is a graphics file format which contains image and color data. This file format is popular with regards to game development because the ease of use and the lack of encumbering patents. UT3 is able to work with TGA files. For more information about the TGA file format please check this wikipedia link.

For the creation of your preferred material  you can use all kinds of photo/image editing software. I use both Photoshop and Fireworks.
When you create your image you wish to use for your UI_scene you must know that Unreal only works with images that have one of the following dimensions:

2x2
4x4
8x8
16x16
32x32
64x64
128x128
256x256
512x512
1024x1024
etc.

If you create an image that does not have these dimensions, resize it tohave one of the mentioned dimensions. In UT3 you can stretch your material. You might want to know by what rate your image needs to be stretched.

Example:
My image has the following dimensions: width: 650px height: 788px
Resize it, while constraining it's proportions. New dimensions: width: 512px height: 621px
Resize it, to 512x512px
You know now that your image has been cropped in it's height. You need to multiply it in UT3 by (612/512=)1.21289

Make sure you save it as a TGA file!

Now open the Generic Browser by clicking the  button in the main toolbar of the editor. To import the TGA file go to the "File" menu and select the "Import..." item.

The Import file dialog will appear where you can select one or more files to be imported into UT3. Please browse to the folder where your ABCD.tga is located and click the "Open" button.

Import Settings

The Import settings dialog box will appear. Please choose a destination package to your liking. For this example I've made a package named TGAImportTutorial. You do not need to use that name as long as you will remember which one you've choosen.

In this example we'll only make a basic material with a texture applied to the diffuse channel of the material, so for the ease of use you should set the "Create Material?" parameter to TRUE. Click "OK" to start the import. It is possible to import more than one file in the file browser. If this is the case you could click "OK to All" button and all the individual images are imported using the same settings.

Apply the material

Now the material is imported it is available for us in the Generic Browser. Make sure you have selected "Textures" and "Materials" or "Show all Resource Files" in the type filer selection (top left part of the Generic Browser) and select the package you used for the import in the package list (bottom left part of the Generic Browser). The imported texture and materials will now be displayed in the main view pane. Select the Material (the image with the green border).

Go to your UI_scene, select your Image label, in the properties block select the "Image" tab, open the "ImageComponent" tab, and then "StyleOverride". Next to ImageRef you will see a text and a green arrow on it's right side. Make sure your material is selected in the Generic Browser, and click the little green arrow. The name of your material will now appear, and the image has your material applied to it.

Good Luck and..

Have Fun!