Orx Learning

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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:

{{ tutorials:physics:ship.png |}}{{ tutorials:viewports:icon.png |}}

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

<code ini>
[Viewport]
Camera        = Camera

[Camera]
FrustumWidth  = 1024
FrustumHeight = 768
FrustumFar    = 2.0
FrustumNear   = 0.0
Position      = (0.0, 0.0, -1.0)
</code>

Next, create a basic alien:

<code ini>
[Alien]
Graphic 	= AlienGraphic
Position 	= (-300, -200, 0) ~ (300, 200, 0)
Rotation	= 0 ~ 360

[AlienGraphic]
Texture 	= ship.png
Pivot 		= (200, 0, 0)
Smoothing 	= true
</code>

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:

<code ini>
[RotateFX]
SlotList = RotateFXSlot
Loop = true

[RotateFXSlot]
Type		= rotation
StartTime	= 0
EndTime		= 10
Curve		= linear
StartValue	= 0
EndValue	= 360
</code>

Then add it to the alien:

<code ini>
[Alien]
Graphic 	= AlienGraphic
Position 	= (-300, -200, 0) ~ (300, 200, 0)
Rotation 	= 0 ~ 360
FXList 		= RotateFX
</code>

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

<code c>
  orxViewport_CreateFromConfig("Viewport");

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

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:

<code ini>
[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)
</code>

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

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

<code c>
  orxViewport_CreateFromConfig("Viewport");
  orxViewport_CreateFromConfig("HudViewport");
</code>
  
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:

<code ini>
[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
</code>

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:

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

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

<code ini>
[HudCamera]
FrustumWidth  = 200
FrustumHeight = 200
FrustumFar    = 2.0
FrustumNear   = 0.0 
Position      = (0.0, 0.0, -1.0)
GroupList     = HudGroup 
</code>

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

<code ini>
[Alien]
Graphic   = AlienGraphic
Position  = (-300, -200, 0) ~ (300, 200, 0)
Rotation  = 0 ~ 360
FXList    = RotateFX
ChildList = Icon
Group     = AlienGroup

[Icon]
Graphic = IconGraphic
Group   = HudGroup
</code>

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:

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

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.
Orx Learning

User Tools

Site Tools

Page Tools
