SteamVR/Environments/Adding a Welcome Panel

Introduction

You have your lavishly constructed SteamVR Home location constructed, but how about adding some informational panels to it? This tutorial will explain a more advanced welcome panel, complete with globe to show where in the world your visitors have found themselves.

Initial Entities

We don't want to crowd the environment with all sorts of permanently visible information panels, so we'll place a teleport point and use entity logic to show and hide the information as appropriate.

First, place a 'vr_teleport_marker in the world. Since this will be shown when a visitor first arrives in the world, I've placed it at the feet of the info_player_start entity and set the 'Starts As Current' flag - the latter makes it automatically fire its OnTeleportTo outputs on startup. (More on that later!) To make the teleport point appear with a helpfully descriptive informational 'i' icon, I've set the 'Info' flag as well. That's all on this entity for now.

Next, place a point_clientui_world_panel in the world. This will act as the actual information panel - arrange this so that it's facing the teleport point and up a bit - the light grey side is the 'front', the dark grey side is the 'back'. It can be helpful to set a larger width now, so you can be sure it's oriented the correct way and isn't on its side.

I've given mine the name 'welcome_panel', and set the Layout XML (a file akin to a small web page) to 'file://{resources}/layout/custon_destination/welcome_panel.xml'. Width I've set to 48, height to 32, and since we won't be directly interacting with this panel via buttons or similar I've set the Ignore Input flag.

Globe

This part is optional, but can be a useful guide to show people where they now are in the world.

Place a prop_dynamic somewhere to the right of the information panel, and set the model to 'models/globes/earth/earth.vmdl'. Give it the name 'welcome_globe_models', and make sure its angles under Transform are all set to zero. It won't matter for us since in this case we want the globe to be displayed on map entry, but to make sure the entity logic we add later is fully operational, check the Start Disabled flag further down in the properties.

All this by itself provides a globe - now we need some sort of marker on it.

With the globe selected in the 3D view, press Control-C to copy it. Now go to Edit : Paste Special... - this useful tool provides many ways to paste a copy into a map, but we're going to use it simply to place a copy of the globe at the exact position of the existing globe. Make sure the number of copies is zero, and that Start at centre of original is checked, then click OK.

There should now be a second copy of the globe in the exact position of the first. Which isn't very useful - so, with the new copy still selected, change the model to 'models/globes/earth/earth_marker.vmdl'. We should now have a marker at zero degrees longitude and zero degrees latitude.

Tip:Note also that the model's target name has become bold and orange. This indicates that there is more than one entity with that name. In this case, this is what we want - but it can also be a helpful indicator when things aren't as they should be.

Now, bring up Google Maps in your web browser, and navigate to the location you captured. When you get there, click once on the ground to get an information popup at the bottom of the window, then click once on the map coordinates it provides. You'll be able to copy and paste those numbers into Notepad or similar - for my scene, the numbers came out as 19.955628, -155.856047.

In the marker model's transform settings, the three angles are Pitch, Yaw and Roll. The last one isn't relevant for us, but the first two are equivalent to Latitude and Longitude. I entered -19.96 for Pitch (the minus sign being a fudge to get things round the right way) and -155.86 for Yaw (which immediately updated itself to 204.14 degrees). The marker is now centered on the north-west of Big Island, Hawaii!

Tip:For various obscure reasons, the oceans on the globe model are by default a colourless grey. To set them to the appropriate blue, with the model selected bring up its Color (R G B) and set R, G and B to 0, 162 and 255. Many models can be tinted in this way - often in splendidly complex ways thanks to the Tint Mask feature in the Standard shader.

With both globe and marker models selected, rotate them so that the marker faces where the player will be. You can adjust this later as necessary.

Tip:When rotating the models, make sure you're in world space mode - the rings on the rotation gizmo should appear as red, green and blue. If they're pink, light green and purple, then you're in local space mode - you can toggle between the two by pressing Tab. If this is the first time you've heard of local space mode, then welcome! It's very useful, just not here.

Entity Logic

Now to attach everything together. When teleporting to this information point, we want the information panel to become activated, and for the globe to appear.

Double-click on the teleport point in the 3D view (or select it and press Alt-Enter) to bring up the full Object Properties window. Switch to the Outputs tab, and click 'Add' at the bottom. You want My output named set to OnTeleportTo (as mentioned earlier, this output fires automatically when Starts As Current is set on the teleport point entity), then Target Entity' set to welcome_panel. Via this input should be AddCSSClass, and With a parameter override of set to Activated.

Keep setting things up as shown in the screenshot. There's a fair amount of stuff to do, but this should give an inkling as to how powerful the system is - entity logic can be used to implement some decidedly complex things. If anything it's a visual scripting language - just be careful not to overdo things. An actual scripting language is now also available!

Tip:To save typing entity names, use the eyedropper at the end of the line - with that selected, click on the entity you want to refer to. If it doesn't already have a target name, it'll give you the opportunity to add one.

With that all done, you should have a fully functioning welcome panel and globe which appear and disappear when you teleport to and from that information point. Compile the map and run it to test things out.

...

But aren't we forgetting something?