FPS370 - alpha 8 - HUD - without transparency

FPS370 - Changes from Alpha7 to Alpha8
Hud - without transparency

The next set of changes will be to add a HUD to the FPS370 example. While the HUD image I am using includes transparency, this example does not yet recognize it. I will tackle transparency in the next version. After I have a static hud image working we will add a HUD that includes dynamic data (like time and health).

This is the image I am using for the HUD background.

The transparent area is the cutout at the top. This is a common effect to give depth to an FPS game.

The idea behind a HUD, as with any image or model you want to track the display is the use of ViewingPlatform and PlatformGeometry. The ViewingPlatform is a specialized branch group that tracks the camera. You can add any type of model you would like to this (I've used a cylinder that extends out from the screen in testing, this simple sample is in the addPickCylinder method). In the case of a HUD, you simple create a plane that is textured with your desired image and add it to the ViewingPlatform. The branchgroup that you add to the ViewingPlatform is a specialized class called PlatformGeometry.

	ViewingPlatform vp = su.getViewingPlatform();
		

	PlatformGeometry bgHud = new PlatformGeometry();
	...
	// create some geometry elements here (call the shapeHud...)
	...
	
 bgHud.addChild(shapeHud);
 vp.setPlatformGeometry(bgHud);

In this code, I get the ViewingPlatform from the SimpleUniverse. I then create a PlatformGeometry called bgHud. I then add a shape to the bgHud and set it back into the ViewingPlatform. Simple enough.

Creating the actual plane and using the image as the texture is a little more difficult.

      hudPlane = new Point3f[4];
      
      // these coordinates were created with trial and error
      hudPlane[0] = new Point3f(-0.29f,-0.22f,-0.7f);
      hudPlane[1] = new Point3f(0.304f,-0.22f,-0.7f);
      hudPlane[2] = new Point3f(0.304f,-0.1f,-0.7f);
      hudPlane[3] = new Point3f(-0.29f,-0.1f,-0.7f);
      
      // create a 4 point quad array (a plane)
      QuadArray qaHud = new QuadArray(4,       GeometryArray.COORDINATES | 
                                               GeometryArray.TEXTURE_COORDINATE_2 |
                                               GeometryArray.NORMALS);

      qaHud.setCoordinates(0, hudPlane);
      
      // assign texture coords to each quad
      // counter-clockwise, from bottom left
      TexCoord2f[] tcoords = new TexCoord2f[4];
      tcoords[0] = new TexCoord2f(0.0f, 0.0f);   // for 1 point
      tcoords[1] = new TexCoord2f(1.0f, 0.0f);
      tcoords[2] = new TexCoord2f(1.0f, 1.0f);
      tcoords[3] = new TexCoord2f(0.0f, 1.0f);
      qaHud.setTextureCoordinates(0, 0, tcoords);
      
      // set the surface normal
      Vector3f upNorm = new Vector3f(0.0f, 1.0f, 0.0f);   // pointing up
      for(int i=0; i < 4; i++)
        qaHud.setNormal(i, upNorm);
      
      shapeHud = new Shape3D();
      shapeHud.setGeometry(qaHud);

      appHud = new Appearance();

      // the texture replaces all color
      TextureAttributes ta = new TextureAttributes();
      ta.setTextureMode(TextureAttributes.REPLACE);
      appHud.setTextureAttributes(ta);

      // load and set the texture
      TextureLoader loader = new TextureLoader("images/hud/hud2.gif", null);
      Texture2D texture = (Texture2D) loader.getTexture();
      appHud.setTexture(texture);      // set the texture
      
      // set a default white material
      Material mat = new Material();
      mat.setLightingEnable(true);     // lighting switched on
      appHud.setMaterial(mat);
      
      shapeHud.setAppearance(appHud);
	  
	  bgHud.addChild(shapeHud);
      vp.setPlatformGeometry(bgHud);

In this sample, we first create four points that define a plane. In this case, the plane is along the z axis. The numbers may look a little complex but they stared with (-0.5,-0.5,z),(0.5,-0.5,z),( 0.5,0.5,z),(-0.5,0.5,z) and were iteratively changed until the HUD was in the correct location.

I then take those four points and create a quad array with them. The quad array defines some sort of three dimensional polygone and includes texture information.

Next we create the texture coordinates which define where on the shape the texture will be mapped. The coordinates are expressed in from 0-1.0 in both the x and y direction. This texture map will cover the entire shape.

The use of texture maps is enabled through the Appearance class. We load the texture bitmap into a Texture2D class and set it into the appearance. At the end we apply the appearance to the shape.

Here is a screen shot of the results.

Next I will fix the transparency issue and then I'll add some dynamic information to the HUD.