Scripting Snippets, 7: Creating a HUD

This is going to be a long one. Get yourself a cup of coffee first.

What is a HUD? If you have to ask that question, you probably won’t get much from this article, but HUD is an acronym of Head-Up Display, and allows creators in Second Life to add a user-interface to gadgets.

They are created from prims just like any other user-created objects in Second Life, but they are only visible to their owner, and always appear ‘flat’ against the screen. If you’ve used any gadgets in Second Life, you will almost certainly have come across them.

For example, here is the popular blogHUD, for making blog postings from within Second Life:

When I started trying to create HUDs myself, I found that there was very little information about how to go about it, and I struggled for a while with even the simplest things. Now that I think I know what I am doing(!), I thought I would post a blog passing on my hard-won information!

In this post, I’ll show the basic steps of creating a HUD, and point out some of the pitfalls and ‘gotchas’ that you are likely to encounter along the way.

Are you sitting comfortably? Then I’ll begin…

The first thing to do, of course, is to decide what our HUD will contain. Because of the limitations of SL, it is not easy to include any kind of output in the HUD (with some ingenuity it can be done, but that is beyond the scope of this blog), so our HUD will basically be restricted to having some buttons to push.

For the sake of an example, we are going to create a HUD which allows the user to scan the area for other avatars, and to ‘poke’ (via chat) one of those avatars. Not very exciting, I know, but it is only an example!

We will need two buttons: Scan and Poke. We will also need some sort of ‘window’ for them to sit on. We could have them just floating on the screen, but that would look rather odd.

The first step is to create a sort of ‘rough draft’ of our HUD. I’ll explain why in a minute.

Let’s start with the window.

(Oh, one quick point – I am going to assume that you are fully familiar with creating/scaling/texturing prims. If you aren’t, you really shouldn’t be trying to create HUDs yet!).

Create a simple cube. Set the X scale to 0.01, so that you end up with a thin, flat board. Move it to somewhere close so that you can see it easily. If you want, you can blank the texture, though that isn’t important – we’ll deal with the texture later.

Next, let’s add a couple of buttons. Create two more cubes, setting the X scale to 0.1 again, and setting the Y and Z scale to something that approximates a sort of rectangular button shape. Place them flat against the ‘window’ board. Don’t worry about positioning them exactly yet, but you might want to colour them so that you can see them more clearly.

Link the buttons and the window (I’d suggest making the window the root prim, by selecting it last before linking, though it isn’t important for the simple HUD that we are going to make). One warning – don’t rotate this object, otherwise when you come to attach it, it might not be facing you!

Ok, now we have a primitive-looking window and buttons. Time to turn them into an actual HUD. Right-click the linked object, click ‘More’ on the pie menu, then click Attach HUD, and select Center.

If by chance you find that it is at the wrong angle (probably sideways!), you can rotate it even though it is attached. You might find it easier to adjust the numbers manually in the build dialog, rather than trying to use the Rotate tool.

Yuk. You now have a grotesque HUD, probably occupying far too much of the screen, and obscuring your view. Don’t worry, there are things we can do about it. In fact, if you are at all familiar with building stuff, I’m sure that you are already ahead of me. Hold fire, though, because there are a few things you need to know before going on.

Firstly, yes, you can edit the HUD when it is attached. This is very convenient, because an unattached HUD is very small and fiddly to work with. However, there are some limitations on what you can actually edit once the HUD is attached. This is why it is useful to do a ‘rough draft’ while the HUD is unattached and you have all the editing facilities available to you.

The most important limitation on editing an attached HUD is that you cannot unlink the prims that make up the HUD, and you cannot link new prims to the HUD. If you find that you need to add a new prim, you will have to detach the HUD (it will vanish into your inventory, and you will need to re-rez it, which is rather annoying), create and link the new prim, then re-attach the HUD.

To work on the individual elements of the HUD, you need to tick the ‘Edit linked parts’ checkbox on the Build dialog. I’ve found that this normally lets you do most things to the individual parts, although rescaling prims sometimes refuses to ‘take’. If you get that happening to you, unfortunately all you can do is drop the HUD and unlink it while you edit the offending prim.

For our simple example, rescale the entire HUD to something more suitable. You can then edit the two buttons to position them more exactly (this is much easier to do now that the HUD is attached).

Of course, it is still obscuring our view. For now, select the ‘window’ prim, blank the texture, colour it grey (or whatever you prefer), and set the transparency to something between 50 and 75.

You could do something similar with the buttons, but we need to get text onto these in some way. Because SL doesn’t yet provide text-on-a-prim, you will have to break out your favourite graphics program, and create some button textures.

Naturally, you can do something similar with the texture for your window prim, and create something fancier than the plain version that we’ve just made.

If you are feeling lazy, here are a couple of example button textures that you can use instead:

“Scan” button texture (.tga)
“Poke” button texture (.tga)

Here is the final result (I’ve done some resizing, and reattached the HUD at the top-left instead of the centre):

One final ‘gotcha’. Go back to when we originally attached the HUD, and we found that it took up large amounts of screen space. How much screen space do you imagine a prim of a given size will take up? The answer is…it depends. Most crucially, it depends on the size of the window (or the screen resolution if running full-screen) that Second Life is using. A HUD will occupy more space in a smaller window, less space in a larger window. You need to think about this when designing your hud (make the mistake of trying to create a ‘full-screen’ HUD, and it will only fit properly at one specific screen-size. Not good).

Ok, we now have our HUD designed and built…but it doesn’t actually do anything! Time to rectify that.

Select the buttons individually, and create a new script in each one.

For the Scan button, edit the script, and replace the default with the following, which does a simple scan of the surround area, and outputs the names of any avatars found (the output is done via llOwnerSay, so it is only visible to the user of the HUD):

default
{
    touch_start(integer total_number)
    {
        llOwnerSay("Scanning...");
        // Look for any avatars within 96m.
        llSensor("", NULL_KEY, AGENT, 96.0, PI);
    }
    sensor(integer num_detected)
    {
        integer i;
        while(i < num_detected)
        {
            if (llDetectedKey(i) != llGetOwner())
            {
                llOwnerSay(llDetectedName(i));
            }
            ++i;
        }
    }
}

For the Poke button, replace the default script with this rather more elaborate one. This again does a scan of avatars in the vicinity, and then displays a dialog with their names as the buttons. When you select an avatar from the dialog, the chat message ‘[Your name] pokes [avatar name]’ is displayed.

integer dlgHandle = -1;
integer dlgChannel = -9999;
list avatarList = [];
reset()
{
    llSetTimerEvent(0.0);
    llListenRemove(dlgHandle);
    dlgHandle = -1;
}
default
{
    touch_start(integer total_number)
    {
        llOwnerSay("Scanning...");
        avatarList = [];
        // Look for any avatars within 10m.
        llSensor("", NULL_KEY, AGENT, 96.0, PI);
    }
    sensor(integer num_detected)
    {
        integer i;
        while((i < num_detected) && (i < 9))
        {
            if (llDetectedKey(i) != llGetOwner())
            {
                avatarList += [llDetectedName(i)];
            }
            ++i;
        }
        if (llGetListLength(avatarList) > 0)
        {
          state dialog;
        }
    }
}
state dialog
{
    state_entry()
    {
        // Set up a listener to detect button clicks.
        dlgHandle = llListen(dlgChannel, "", llGetOwner(), "");

        // Start a new timer.
        llSetTimerEvent(30.0);

        // Add a 'Cancel' button.
        avatarList += ["Cancel"];

        // Display the dialog.
        llDialog(llGetOwner(), "Please select an avatar.", avatarList, dlgChannel);
    }
    listen(integer channel, string name, key id, string message)
    {
        // The message parameter holds the caption of the
        // button that was clicked. Search the menu options
        // list for it.
        if ((channel == dlgChannel) && (llListFindList(avatarList, [message]) != -1))
        {
            if (message != "Cancel")
            {
                llSay(0, llKey2Name(llGetOwner()) + " pokes " + message);
            }
            reset();
            state default;
        }
    }
    timer()
    {
        reset();
        state default;
    }
}

Close the Build dialog, and your HUD should be fully active. Click on the buttons to check that they work.

Congratulations, you’ve just built your first HUD!