Day 335: HUD Attachment Tutorial

Have you ever wondered how HUD attachments work? You know, those thingies that attach to your screen instead of your avatar. From the ZHAO II that makes me look like a model :P, to the Babbler Translator that helps me understand "Hey Sexy" in 8 languages :)

At least for me, theyve been really mysterious gadgets for the longest time. But as it turns out, they are super simple. And if youve ever built any prim attachments in SL, you already know how to make one :)

In this tutorial, we are going to talk about what a HUD attachment is, and how they work. We will also make a HUD Event Invitation for inviting people to events.

You will need the free "HUD Event Invitation" folder from Sirena Hair & Fashion to complete this tutorial. Click on Search, select Places, and enter "sirena" as the keyword. The SLURL is West Sunset (160,50,22). The folder is in the Tutorial Supplies area under the giant mermaid sign.

If you dont feel like going thru this tutorial, I included a ready-to-use HUD Event Invitation in the "HUD Event Invitation" folder at Sirena Hair & Fashion. :)

So here we go!


HUD Attachment Overview

A HUD attachment is simply a prim attachment that attaches to your screen instead of to your avatar. So you can actually make ANY prim object a HUD attachment.

Lets try it!



For this demonstration, we are going to make a Box with different color on each side. This way, we can tell which side is facing us as we rotate the Box.



Go to somewhere that you can build (like a Sandbox).

Click on the Build button at the bottom of your screen, and click on the ground. This will rez a Box with 0.5M on each side.



Go to the Texture tab. Click on the "Texture" square. At the "Pick:Texture" window, click on the "Blank" button, then click "Select".

Next, click on the "Select Texture" button at the top of the Edit window.

Click on one of the faces on the Box (doesnt matter which one).

Click on the "Color" square in the Edit window. At the "Color Picker" window, pick a color for this face, then click the "Select" button.



Repeat the above steps with all 6 faces on the Box, picking a different color each time.

Go to the General tab and change the Name to "Color Box".

Right-click on "Color Box" and select "Take" to take it into your Inventory.



Now, look for "Color Box" in your Inventory. It should be in the Object folder.

Right-click on the "Color Box" in your Inventory. Select "Attach to HUD >", and "Center".



You should now have a color square in the middle of your screen :) Your color is probably different than mine (SL uses one particular face on the Box when it first attaches).

So what can you do with this square?



Go ahead and Right-click on the "Color Box" and select "Edit". You should see the familiar color arrows that let you move prims around. Go ahead and drag one of the arrows to reposition the "Color Box" on your screen :)

(Doesnt it look like Im doing a magic trick or something behind the square? :P)



Click on the "Rotate" button at the top of the "Edit" window. You should see the color wheels for rotating prims. If you move the wheels around, you will notice that the "Color Box" will rotate on your screen, just like any prim attachment! :)



Guess what you can do if you clicked on the "Stretch" button at the top of the "Edit" window? Thats right, you can resize the HUD attachment. Just like any prim.

When you first attach a prim object as a HUD, the "Size Y" determines with width of the attachment, and the "Size Z" determines the height. This changes if you rotate the HUD object.

On most standard size screens, a HUD attached to the center with "Size Y" of 1.400M and "Size Z" of 1.000M will completely cover the screen. Some screens have different dimensions (like widescreen-format), so they are a bit wider than 1.400M.

Note: Be careful about the size of a HUD attachment. I attached a "Blindfold HUD" (a big black HUD attachment) in a Sandbox when I was a Newbie. I ran around screaming until a friend helped me take it off ! (Thats so not funny! :P) So keep the HUD small, or add a button to Detach it!

BTW, to Detach a HUD attachment, Right-click on it and select "Detach". Again, its just like any standard prim attachment :)

A couple more interesting facts about HUD attachments: First, you are the only one who can "see" the HUD attachment (other residents around you cant see it). Second, you can attach a single prim, or a linked set of prims (so prim attachments can get really fancy).



So why use a HUD?

In general, they are great for 2 things: providing a resident with a set of buttons to control something, or displaying information/status about something.

A common use for HUD attachments is to provide a set of buttons, sorta like a universal remote control. For example, my HUDDLES Quick Pose is a HUD that enables me to strike different poses by pressing different buttons (totally modeling gear ;P). The ZHAO II has an On/Off button, and a button that calls up a menu. These buttons usually run LSL script commands. So they can do just about anything as long as you can script it :)



The other common use for HUD attachments is to display information or status. This can range from simple On/Off type buttons, to clocks, to avatar radars (display names of avatars near you).

Of course, you can combine buttons with information display to create some really fancy HUDs, like News or blog HUDs.


HUD Event Invitation

OK, thats enough info about HUD attachments. Lets make something :)



Have you ever been invited to an SL event? You usually get a prim card that you have to rez on the ground and zoom in to read it.

How about giving someone a HUD Event Invitation? When they Wear it, it attaches to their screen so they can read it just about anywhere (even if the sim does not allow Building).

We are also going to add some buttons so the recipient can move between "pages" or textures.

Ready to get started? :)



Go to somewhere that you can build (like a Sandbox).

Click on the Build button at the bottom of your screen, and click on the ground.

Go to the Object tab and change the Size X to 0.100M.



Go to the Texture tab. Click on the "Texture" square. At the "Pick:Texture" window, click on the "Blank" button, then click "Select".

Look for the "HUD Event Invitation" folder you picked up from Sirena.

Go to the Content tab.

First, drag-and-drop these 3 files from the "HUD Event Invitation" folder to the Content tab (its important that you do this first!):

   1-Page 1
   2-Page 2
   3-Page 3

Next, drag-and-drop the "HUD Event Invitation Script" to the Content tab.

One of the faces on the box will display the "HUD Event Invitation" texture. This is the front of the HUD display :)



Press and hold the [Shift] key and pull down on the Blue arrow to make a copy of the prim.



Go to the Content tab. Delete all of the files in the Content tab.



Go to the Object tab. Change the Size Y and Size Z to 0.100M.



Go to the Texture tab.

Click on the "Select Texture" button at the top of the Edit window. Click on the front face of the prim we were just working on (the side that will be the front of the HUD display).

Click on the "Texture" square. At the "Pick Texture" window, go to the "HUD Event Invitation" folder and select the "Arrow" texture.



Click the "Position" button at the top of the Edit window.

Move the arrow prim to the bottom left of the bigger prim.



Press and hold the [Shift] key and pull down on the Red arrow to make a copy of the arrow prim towards the right side.



Go to the Texture tab. Click on the "Flip" checkbox on the "Repeats Per Face"/"Horizontal (U)" line. This will flip the arrow to the right.



Press and hold the [Shift] key and pull down on the Red arrow to make a copy of the arrow prim towards the right side.



Go to the Object tab. Change the Size Y to 0.200M.



Go to the Texture tab.

Click on the "Select Texture" button at the top of the Edit window. Click on the front face of the prim we were just working on (the side that will be the front of the HUD display).

Click on the "Texture" square. At the "Pick Texture" window, go to the "HUD Event Invitation" folder and select the "Detach" texture.

Click on the "Flip" checkbox on the "Repeats Per Face"/"Horizontal (U)" line. This will correct the orientation of the texture.



OK, just a couple little things to finish up :)

First, we need to put the scripts into the 2 buttons with arrows.

Edit the prim with the Left arrow (the left-most prim). Drag-and-drop the "Back Button" script into the Content tab of the prim.



Edit the prim with the Right arrow (the middle prim). Drag-and-drop the "Next Button" script into the Content tab of the prim.



Next, we are going to link all of these prims together.

Press and hold the [Shift] key. Then click on the Left arrow, Right arrow, and Detach boxes on the bottom first to select them. Click on the big prim on top last. This will make the big prim on top the Root prim.

Click on the "Tools" option at the top menu. Select "Link" to link all the prims together.

Go to the "General" tab. Change the Name to "HUD Event Invitation (Wear to use)". You should include "(Wear to use)" or something like it in the Name, so the recipient would know what to do with it.

Right-click on the "HUD Event Invitation" and select "Take" to take it into your Inventory.



Look for the "HUD Event Invitation (Wear to use)" object in your Inventory (it should be in the Object folder). Right-click on it, select "Attach to HUD >", then "Center".

Congratulations! You just created a HUD attachment, complete with control buttons and changing textures :)

To create your own HUD Event Invitation, just replace the 3 texture files in the HUD with your own. You can put as many pages as you like!

Just remember that the texture files are presented alphabetically. You can start the texture file names with a number (like "1-xxx", "2-xxx", "3-xxx", etc.) to control the sequence.

Have fun with your events! :)




"And for our next magic trick, we shall cut this lovely mermaid in half!"

Hey, wait a minute!!!

32475-071006-241890-30

© 2007 All Rights Reserved.