Chapter 15 ■ 3D Gameplay UI CreatIon: UsInG the sphere prImItIve to Create a UI noDeThe spinner UI element, on the other hand, is not giving us the visual result that we wanted initially,
which was a beach ball type of object, with the word SPIN written on the front of it. This is OK, as we know
that pro Java 9 games development is an iterative refinement process, so let’s think about how we can
shrink the word SPIN down so that four letters show on the Sphere primitive at one time, rather than only
two letters as it is rendering currently.
The easiest way to shrink the text so the word SPIN fits on one-quarter of the Sphere primitive, as well as
to increase the number (and thinness) of the colored stripes, would be to make this texture map a 512 -pixel
texture. This will shrink all text elements so four will fit, and we can copy and paste the stripes and color shift
them to add more color.
Next, let’s go back to GIMP and look at the work process for enhancing the spinner UI diffuse texture map.
Enhancing the 3D Spinner Texture Map: Increasing Resolution
The work process for creating a more detailed 512x512 pixel texture map for the 3D spinner UI element is
a lot easier than you might think, if you use the power of GIMP’s tools and algorithms within an optimized
work process. We can double the resolution, double the stripes, double the stripe colors, and double the
text elements in only a dozen or two “moves,” with GIMP doing all of the pixel manipulation for you, at the
highest quality level, which we will require.
Figure 15-15 shows the GIMP composite result for the moves. The first thing to do is to add another 256
pixels to the right side of the document by using Image ➤ Canvas Size ➤ Width=512 ➤ Resize (button),
which will add 256 pixels of transparency to the right half of your texture map composite. Select the
Background layer and white color swatch and use the Paintbucket tool (fourth row, fourth icon) to fill the
right half of the Background layer so it is 100 percent white. Next, right-click the Color Map layer and select
the Duplicate Layer option, which will create the Color Map copy layer, shown in Figure 15-15. Select this
layer, use the Color ➤ Hue-Saturation algorithm (menu sequence), and shift all four colors by 60 degrees or
so to create four different colors, as shown in Figure 15-15. Next, to resize the (Y or height) dimension to 512
matching pixels, this time use the Image ➤ Scale Image menu sequence, unlock the aspect ratio by clicking
Figure 15-14. The face rendering order problem has been fixed, and we're now getting a smooth, thin
cardboard game