User Tools

Site Tools


en:tutorials:viewport_heads_up_display

Creating a Heads Up Display (HUD) using a Viewport / Camera and Groups

Making a Heads Up Display for tracking objects on the screen can be created very easily with a second Viewport/Camera and by attaching a child object that renders to a particular Group.

That's a mouthful but it's pretty simple to get it going.

Below are some assets: an alien, and a tracking icon:

Start by setting up the default viewport and camera, and screen size:

[Viewport]
Camera        = Camera
 
[Camera]
FrustumWidth  = 1024
FrustumHeight = 768
FrustumFar    = 2.0
FrustumNear   = 0.0
Position      = (0.0, 0.0, -1.0)

Next, create a basic alien:

[Alien]
Graphic 	= AlienGraphic
Position 	= (-300, -200, 0) ~ (300, 200, 0)
Rotation	= 0 ~ 360
 
[AlienGraphic]
Texture 	= ship.png
Pivot 		= (200, 0, 0)
Smoothing 	= true

The alien will be positioned somewhere random. Its inital rotation will be random too. The Pivot on the AlienGraphic is offset 200 pixels as a cheap way of making the alien appear to fly around in circles. We'll use a Rotate FX for that:

[RotateFX]
SlotList = RotateFXSlot
Loop = true
 
[RotateFXSlot]
Type		= rotation
StartTime	= 0
EndTime		= 10
Curve		= linear
StartValue	= 0
EndValue	= 360

Then add it to the alien:

[Alien]
Graphic 	= AlienGraphic
Position 	= (-300, -200, 0) ~ (300, 200, 0)
Rotation 	= 0 ~ 360
FXList 		= RotateFX

Create the standard viewport and a few aliens in the init() function with:

  orxViewport_CreateFromConfig("Viewport");
 
  /* Create a few aliens */
  for (int x = 0; x < 5; x++) {
	  orxObject_CreateFromConfig("Alien");
  }

Compile and run. There should be 5 aliens flying around in circles (though really turning on a offcentre pivot).

Now we're going to create a second viewport that will only be 200 x 200 pixels in size and will sit to the bottom right of the screen:

[HudViewport]
Camera            	= HudCamera
BackgroundColor 	= (100,100,100)
Size 			= (200,200,0)
RelativePosition 	= bottom right
 
[HudCamera]
FrustumWidth  	= 200
FrustumHeight 	= 200
FrustumFar    	= 2.0
FrustumNear   	= 0.0
Position      	= (0.0, 0.0, -1.0)

This defines a 200 x 200 sized grey viewport and camera.

Create it in the init() function under the existing viewport:

  orxViewport_CreateFromConfig("Viewport");
  orxViewport_CreateFromConfig("HudViewport");

Compile and run.

Notice that the aliens fly through both viewports. Both display the same content, the only difference is that the new viewport is a different colour and is smaller.

What we really want, is the aliens to render in the normal viewport and a “tracking icon” to display in the small HUD viewport.

The way to achieve this is to first create an icon object, and attach it as a child to the alien:

[Icon]
Graphic = IconGraphic
 
[IconGraphic]
Texture = icon.png
Pivot 	= (200, 0, 0)
 
[Alien]
Graphic 	= AlienGraphic
Position 	= (-300, -200, 0) ~ (300, 200, 0)
Rotation 	= 0 ~ 360
FXList 		= RotateFX
ChildList 	= Icon

This will give an offset pivot on the icon, just like the alien, so that they rotate in the same place. Then becomes a child of the alien.

Run this and you'll see the same as before, but each alien has a red icon attached to it. Both the alien and the icon still display in both viewports.

Next we make it that only the alien renders to the normal viewport and the icon to the HUD viewport by setting groups:

On the standard camera, declare that it displays anything in the AlienGroup, or anything in the default group:

[Camera]
FrustumWidth  = 1024
FrustumHeight = 768
FrustumFar    = 2.0
FrustumNear   = 0.0
Position      = (0.0, 0.0, -1.0)
GroupList     = AlienGroup # default 

In the HudCamera, only allow display of objects in the HudGroup:

[HudCamera]
FrustumWidth  = 200
FrustumHeight = 200
FrustumFar    = 2.0
FrustumNear   = 0.0 
Position      = (0.0, 0.0, -1.0)
GroupList     = HudGroup 

Then set the two objects to display in their respective groups:

[Alien]
Graphic   = AlienGraphic
Position  = (-300, -200, 0) ~ (300, 200, 0)
Rotation  = 0 ~ 360
FXList    = RotateFX
ChildList = Icon
Group     = AlienGroup
 
[Icon]
Graphic = IconGraphic
Group   = HudGroup

Run this and finally you can see each object rendering only in the correct viewport. But the HUD viewport is still very large. The simple solution is to zoom the HudCamera out:

[HudCamera]
FrustumWidth  = 200
FrustumHeight = 200
FrustumFar    = 2.0
FrustumNear   = 0.0 
Position      = (0.0, 0.0, -1.0)
GroupList     = HudGroup 
Zoom 	      = 0.2

Run that and you will get a really nice HUD that tracks the movement of the aliens, represented in the HUD as a small red dot icon.

en/tutorials/viewport_heads_up_display.txt · Last modified: 2018/02/14 04:46 (5 months ago) by iarwain