Chapter 13 ■ 3D MoDel ShaDer Creation: USing the JavaFX 9 phongMaterial ClaSS
Next, draw any size rectangle selection on the GIMP canvas, which is shown on the right of Figure 13-22.
In the Position fields, set 0, 0, and in the Size fields, set 32, 256. This will put the selection at one-eighth span
and at the left side of the canvas. Click the large foreground/background color swatch, located under the
GIMP tool icons, on the top color, and set FG Color to Red. Then use your Edit ➤ Fill with FG Color menu
sequence and fill the first four stripes with red. Since this layer is transparent and the background is white,
the resulting composite will be a red-and-white texture map (eventually four overlapping red perimeter
stripes).
Next, drag the selection to the right and position it for the second stripe fill. Then edit the Position field,
leaving it set to 0, 0, and reverse the Size fields to set them at 256, 32, as shown in Figure 13-22. Again, select
Edit ➤ Fill with FG Color. Half of the game board square diffuse color texture map has been created in only
a few moves!
Let’s finish the other two perimeter stripes by again dragging the selection to position (or, set the
Position fields to) 224, 0 on the right side of your 256-pixel texture map canvas. Be sure to set your Size data
fields back to 32, 256 (width, height), and then again use Edit ➤ Fill with FG Color to fill the right perimeter
stripe with red (also a Color class constant in JavaFX). Finally, drag the selection to position (or set Position
fields to) 0, 224 and then use Edit ➤ Fill with FG Color, one last time, to complete the black-and-white effect
(bump, specular) application texture map.
Besides being able to color shift this perimeter color for your diffuse color texture map, to create dozens
of unique game board squares, since the interior color is white, which won’t be affected (white, black, and
grays have no color values to be color-shifted).
Using other concepts and code techniques we learned about during the chapter, we would be able to
create other PhongMaterial class shader objects, which will highlight, glow, or color your currently active
game board square differently than all of the others when the game piece lands on that particular game
board square.
It is important to note that this will be done, using only a single diffuse color texture map (680 bytes or
two-thirds of one kilobyte of data/memory) and thus interactively lending a much more professional user
experience for your gameplay. I will also create an effects texture map (maybe two or three) using black,
white, and gray, which will match the red-and-white one pixel for pixel, giving me the most processional
(surgical) effects application within the game code. A white perimeter (and black interior) would allow me to
isolate only the color areas for special effects, and a black perimeter (and white interior) allows me to isolate
the interior of a game board square for special effects applications. We’ll combine these few textures with
digital imaging (Chapter 2 ) and diffuse and specular color control.
Finally, make sure to use the GIMP’s File Export As work process, as shown in Figure 13-11, to save
the completed game board square diffuse texture map data in a file named gameboardsquare.png in
the correct source assets folder in your NetBeansProject folder and JavaFXGame subfolder. Now all we
have to do is to swap this file name reference into the diffuseMap Image object instantiation inside of the
loadImageAssets() method body, and we can utilize it on the new box Box object configuration that we
created earlier (see the earlier Figure 13-20) using a Box() constructor method.
Open your loadImageAssets() method body and edit your diffuseMap Image object instantiation so
that it references the gameboardsquare.png file that you exported from GIMP to your NetBeansProject\
JavaFXGame\src\ folder. The Java statement for the new Image instantiation should look like the following,
as highlighted using yellow and light blue in Figure 13-23:
diffuseMap = new Image("/gameboardsquare.png", 256, 256, true, true, true);