Sample HUD Tutorial#

NOTE: There is a new 'official' tutorial about components in the main documentation page now: Components

This is a work in progress, please feel free to add to it. Feedback is always welcome too!

Introduction#

Although there is an excellent tutorial about how to write HUDs, written by Jordan Slott Developing a HUD-enabled module, on a first read I got quite confused for the simple reason that the HUD he is creating is actually a quite complex piece of Open Wonderland technology. The Top Map Camera created in that tutorial plays with concepts that I did not know about, such as nodes, entities, and so on, and that are not particular to HUD creation.

The creation of the HUD itself, and the client plugin to register it with the system at startup, is a lot simpler. That is why I decided to create this short tutorial. You should not miss the chance of reading Jordan's tutorial anyway, for insights on a lot more stuff than the brief and focused information given here.

Tutorial code#

The code for the tutorial can be found in my github account at: sample hud.

The code#

To create a HUD we will need two main classes, the HUD itself and a Client Plugin to register the HUD. As explained in Jordan's tutorial, the HUD "is an area encompassing the entire scene where 2D windows appear above the 3D scene". A HUD will show only in the client that is activating it, as opposed to being an object in the 3D scene that every avatar can see.

The HUD#

HUDs can be complex and sophisticated, but we will build a very simple one in this tutorial (not very useful but good for learning the basics!). Our sample HUD will just show a button on screen, and it looks like this:

http://wiki.openwonderland.org/attach/Sample%20HUD%20Tutorial/sample_hud_screenshot.png


The class that creates the HUD is SampleHUD.java

The class constructor grabs the main HUD area and then calls displayHUD().

public SampleHUD() {
    mainHUD = HUDManagerFactory.getHUDManager().getHUD("main");
    displayHud();
}


This last method is divided into 3 parts:

private void displayHud() {
    createPanelForHUD();
    createHUDComponent();
    setHudComponentVisible(true);
}

1. the creation of the JPanel to contain the elements of the HUD (a simple Swing button).

2. the creation of the HUD component itself:

sampleHud = mainHUD.createComponent(panelForHUD);

3. and lastly, setting the visibility of the HUD to true:

sampleHud.setVisible(show);

HUDs have a series of properties that are explained in more detail in Jordan's tutorial.

Please note that a bit of care should be taken when writing Swing code to
run all component based code within the event dispatcher thread (EDT). 
More information about the EDT can be found here.


The Plugin#

The creation of Wonderland Client and Server plugins is explained in this tutorial.

As a very brief summary, a Client Plugin like the one we need to write here SampleHUDPlugin.java, is just a class, annotated as a @Plugin, that extends BaseClientPlugin:

...
@Plugin
public class SampleHUDPlugin extends BaseClientPlugin {
...
}

A client Plugin follows the cycle:

Initialize -- Activate-- Deactivate -- Cleanup

The cycle names are also the methods that you will have to override as follows:

In Initialize, a new Menu Item for the main Wonderland client is created:

sampleHUDMI = new JCheckBoxMenuItem("Sample HUD");

In activate, the menu item is added to the Window menu:

JmeClientMain.getFrame().addToWindowMenu(sampleHUDMI);

In deactivate, the menu item is removed from the Window menu:

JmeClientMain.getFrame().removeFromWindowMenu(sampleHUDMI);

Cleanup is not strictly needed, at least for this tutorial.

Running the code#

The code provided contains all you need to run this example against a Wonderland Server. Just use ant deploy as usual. If you need more information about how to work with modules, you can find it here.

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
png
sample_hud_screenshot.png 108.9 kB 1 30-Dec-2010 20:38 Josmas Flores screenshot showing the hud
« This page (revision-13) was last changed on 21-Sep-2015 12:04 by Abhishek Upadhyay