3d Game Programming with Java and libGDX — Getting the Image Texture Correct

Or… the journey through the x, y, and z axes through the lens of a computer screen.

TL;DR

Note: this is part of a series of articles: See 3d Game Programming with Java and libGDX — Overview of Articles

What You Will Need

  • Download blender if you don’t have it yet — at the time of writing it is version v2.90.0
  • An image editing programme (this example uses the GIMP)

In this guide

I shall be using the rhombic dodecahedron that I created in another article 3d Game Programming with Java and libGDX — Setting up a Model with Blender

  1. Determining which face is where on the UV Map
  2. Exporting the UV Map as an image
  3. Editing the image and testing

Determining which face is where on the UV Map

If we go back to the the model that we were using, and the image texture that was created…

the project should look like the following:

If we swap back to ‘UV Editing’ mode by clicking on the tab at the top of the window (next to the ‘File’, ‘Edit’, ‘Render’, ‘Window’, ‘Help’ menus), as highlighted below: (Also ensure that you are on ‘Face select’ — also highlighted below)

Remember to press the ‘A’ key to select all, and then the UV Map will be displayed in the left hand pane.

Now that the UV Map is ready, if you want to know which part of the UV Map relates to which part of the 3d object, click on the individual faces, and they will be highlighted in the UV Map pane on the left.

A video of the example selection of faces for the UV Map

Now I want to change just those faces which have the white cross in the centre, and for this I will use an image editing programme (the GIMP). But first, I need to be able to export the UV Map

Exporting the UV Map

  1. Press the ‘A’ key to select all of the model on the right hand pane
  2. In the left hand pane, the entire UV Map should show up
  3. Go to the ‘UV’ Menu
  4. Select the ‘Export UV Layout’ from the menu and save the file as a .png format image

The exported UV Map will look like this — which is a 1024 x 1024 pixel .png image with transparency.

Which can then be opened in your favourite image editing programme, for this I am using the GIMP

Editing the UV Map

I have created 3 layers in the GIMP:

  • drawing layer (white cross layer) — this is the layer that I will be drawing on,
  • UV Map layer (Rhombic Dodecahedron UV Map image) —this is the transparent UV Map that I will be using as a guide, and
  • white cross bg layer — this is the background layer for reference.

I will run through this quickly to show how I get the image ready for re-importing into blender.

  1. Select the UV Map Layer
  2. Use the selection tool to select the area to be filled (and grow the area by one pixel so it all joins up)
  3. Select the drawing layer
  4. Select a colour
  5. Fill the area
  6. Export the file

Updating the image in blender

If you saved the texture image image to the same place and name that you used to import into blender, then the image should update automatically, if not, close the blender file, and re-open and it shall appear. The result, is a nicely mapped image:

I went through and did the other sides, and this is the result not that I left one of the sides as the default:

And the model result:

As you can see, the sides all match up and are displayed correctly.

Wrap-up

Using the export UV Map functionality of blender and then utilising your favourite image editor, saves time through using a tool that you are comfortable and knowledgeable about.

All sorts of interests