User Tools

Site Tools


en:tutorials:viewport: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 real

en/tutorials/viewport/viewport_heads_up_display.txt · Last modified: 2025/09/30 17:26 (9 months ago) by 127.0.0.1